:root{
  --bg:#f6efe6;
  --surface:#fffaf4;
  --surface-2:#fbf4eb;
  --brown:#5c3b28;
  --brown-2:#7c5338;
  --brown-soft:#ead8c3;
  --brown-light:#f2e6d8;
  --text:#2d221b;
  --muted:#78675c;
  --border:rgba(92,59,40,.16);
  --danger:#a51e1e;
  --success:#15733b;
  --shadow:0 18px 55px rgba(76,48,29,.08);
}
*{box-sizing:border-box!important}
html{font-size:13.5px!important;-webkit-text-size-adjust:100%}
body{
  margin:0!important;
  font-family:Arial,Helvetica,sans-serif!important;
  background:linear-gradient(135deg,#f9f2ea 0%,#f0dfcc 100%)!important;
  color:var(--text)!important;
  line-height:1.45!important;
}
a{color:inherit!important;text-decoration:none!important}
button,input,select,textarea{font-family:inherit!important;font-size:1rem!important}
button,.btn{
  border:0!important;border-radius:14px!important;padding:10px 14px!important;min-height:40px!important;
  cursor:pointer!important;font-weight:800!important;display:inline-flex!important;align-items:center!important;
  justify-content:center!important;gap:8px!important;text-align:center!important;white-space:nowrap!important;
}
.primary,.btn-primary{background:var(--brown)!important;color:#fff!important;box-shadow:0 10px 24px rgba(92,59,40,.18)!important}
.secondary,.btn-secondary{background:var(--brown-light)!important;color:var(--brown)!important}
.danger,.btn-danger{background:#fff1f1!important;color:var(--danger)!important;border:1px solid rgba(165,30,30,.18)!important}
input,select,textarea{
  width:100%!important;min-height:42px!important;border:1px solid var(--border)!important;border-radius:14px!important;
  background:#fff!important;padding:10px 12px!important;color:var(--text)!important;
}
textarea{min-height:82px!important;resize:vertical!important}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(92,59,40,.13)!important;border-color:rgba(92,59,40,.55)!important}
label{display:flex!important;flex-direction:column!important;gap:7px!important;font-weight:800!important;color:#3a2a20!important}

.login-screen{min-height:100vh!important;display:grid!important;place-items:center!important;padding:20px!important;background:radial-gradient(circle at 18% 16%,rgba(124,83,56,.18),transparent 30%),linear-gradient(135deg,#f8f0e6,#ead8c1)!important}
.login-card{width:min(100%,500px)!important;background:rgba(255,250,244,.98)!important;border:1px solid var(--border)!important;border-radius:30px!important;padding:38px!important;box-shadow:0 26px 80px rgba(71,45,24,.18)!important;display:flex!important;flex-direction:column!important;gap:18px!important}
.login-logo{width:74px!important;height:74px!important;border-radius:24px!important;margin:0 auto 8px!important;display:grid!important;place-items:center!important;background:linear-gradient(135deg,#d9b894,#b9885c)!important;color:#2d2118!important;font-weight:900!important;font-size:23px!important}
.login-title{text-align:center!important}.login-title p{margin:0 0 6px!important;font-size:11px!important;letter-spacing:1.8px!important;color:#8c6a4c!important;font-weight:900!important}.login-title h1{margin:0!important;font-size:32px!important}.login-title span{display:block!important;margin:8px auto 0!important;max-width:360px!important;color:var(--muted)!important}

.alert{padding:12px 14px!important;border-radius:14px!important;font-weight:800!important;margin-bottom:14px!important}
.alert-error{background:#fff1f1!important;color:var(--danger)!important;border:1px solid rgba(165,30,30,.18)!important}
.alert-success{background:#effaf1!important;color:var(--success)!important;border:1px solid rgba(21,115,59,.18)!important}

.app{
  width:min(100%,calc(100vw - 28px))!important;
  min-height:calc(100vh - 42px)!important;
  margin:21px auto!important;
  display:grid!important;
  grid-template-columns:290px minmax(0,1fr)!important;
  background:rgba(255,250,244,.92)!important;
  border:1px solid rgba(92,59,40,.14)!important;
  border-radius:30px!important;
  box-shadow:var(--shadow)!important;
  overflow:hidden!important;
}
.sidebar{
  background:linear-gradient(180deg,#fff7ee 0%,#f2e2d0 100%)!important;
  color:var(--text)!important;
  padding:22px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:18px!important;
  min-height:100%!important;
  border-right:1px solid rgba(92,59,40,.12)!important;
}
.brand{display:flex!important;gap:12px!important;align-items:center!important;padding:14px!important;background:rgba(255,255,255,.60)!important;border:1px solid rgba(92,59,40,.10)!important;border-radius:20px!important}
.brand-logo{width:50px!important;height:50px!important;border-radius:16px!important;background:#d8b894!important;color:#2d2118!important;display:grid!important;place-items:center!important;font-weight:900!important}
.brand h1{margin:0!important;font-size:20px!important;color:var(--brown)!important;letter-spacing:.5px!important}
.brand p{margin:3px 0 0!important;color:var(--muted)!important;font-size:12.5px!important}

.nav{display:grid!important;gap:9px!important}
.nav a{
  display:flex!important;align-items:center!important;min-height:43px!important;
  padding:11px 13px!important;border-radius:15px!important;
  background:rgba(255,255,255,.55)!important;color:var(--brown)!important;
  border:1px solid rgba(92,59,40,.10)!important;font-weight:850!important;text-decoration:none!important;
}
.nav a.active,.nav a:hover{background:var(--brown)!important;color:#fff!important;box-shadow:0 10px 22px rgba(92,59,40,.17)!important}
.logout-form{margin-top:auto!important;width:100%!important}
.logout-btn{width:100%!important;background:#fff!important;color:var(--brown)!important;border:1px solid rgba(92,59,40,.13)!important;border-radius:15px!important;box-shadow:none!important}

.main{width:100%!important;max-width:1400px!important;padding:22px!important;min-width:0!important}
.card{
  background:rgba(255,253,249,.96)!important;border:1px solid var(--border)!important;border-radius:24px!important;
  padding:20px!important;box-shadow:0 12px 35px rgba(71,45,24,.06)!important;margin-bottom:16px!important;
}
.section-title{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:16px!important}
.section-title span{background:var(--brown-light)!important;color:var(--brown)!important;border-radius:999px!important;padding:5px 10px!important;font-weight:900!important}
.section-title h2,.section-title h3{margin:0!important;font-size:18px!important}
.grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.grid .wide{grid-column:1/-1!important}
.actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin-top:14px!important}
.service-row{display:grid!important;grid-template-columns:1.1fr 1.2fr 1.1fr .7fr .7fr .7fr 45px!important;gap:10px!important;align-items:end!important;margin-bottom:10px!important;padding:12px!important;border:1px solid var(--border)!important;border-radius:18px!important;background:var(--surface-2)!important}
.table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
.table{width:100%!important;border-collapse:collapse!important;min-width:760px!important;background:#fff!important;border-radius:16px!important;overflow:hidden!important}
.table th,.table td{padding:10px!important;border-bottom:1px solid var(--border)!important;text-align:left!important;vertical-align:middle!important}
.table th{background:var(--brown-light)!important;color:var(--brown)!important}
.badge{display:inline-block!important;padding:6px 10px!important;border-radius:999px!important;background:var(--brown-light)!important;color:var(--brown)!important;font-size:12px!important;font-weight:900!important}
.offer-preview{background:#fff!important;padding:26px!important;border-radius:18px!important;border:1px solid var(--border)!important;overflow:auto!important}
.invoice-head{display:flex!important;justify-content:space-between!important;gap:20px!important;align-items:center!important;border-bottom:1px solid #ddd!important;padding-bottom:14px!important}.invoice-head img{max-height:72px!important;max-width:180px!important}
.invoice-meta{display:flex!important;justify-content:space-between!important;gap:12px!important;margin:18px 0!important;border-bottom:1px solid #ddd!important;padding-bottom:14px!important}
.invoice-company{margin-bottom:18px!important}.invoice-table{width:100%!important;border-collapse:collapse!important;min-width:720px!important}.invoice-table th,.invoice-table td{border:1px solid #ddd!important;padding:9px!important}.invoice-table th{background:#f4f4f4!important}.text-end{text-align:right!important}.text-center{text-align:center!important}

@media(max-width:980px){
  html{font-size:13px!important}
  body{background:var(--bg)!important}
  .app{display:block!important;width:100%!important;min-height:100vh!important;margin:0!important;border-radius:0!important;border:0!important}
  .sidebar{position:sticky!important;top:0!important;z-index:20!important;min-height:auto!important;border-right:0!important;border-bottom:1px solid rgba(92,59,40,.12)!important;padding:12px!important;gap:10px!important}
  .brand{padding:10px!important}
  .brand-logo{width:42px!important;height:42px!important;border-radius:14px!important}
  .brand h1{font-size:17px!important}.brand p{font-size:11.5px!important}
  .nav{display:flex!important;gap:8px!important;overflow-x:auto!important;padding:2px 0 8px!important;scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch!important}
  .nav a{flex:0 0 auto!important;white-space:nowrap!important;min-height:39px!important;padding:9px 12px!important;scroll-snap-align:start!important}
  .logout-form{margin-top:0!important}
  .logout-btn{min-height:38px!important}
  .main{padding:12px!important}
  .grid{grid-template-columns:1fr!important}
  .service-row{grid-template-columns:1fr!important}
  .invoice-head,.invoice-meta{display:block!important}
  .actions .btn,.actions button{flex:1 1 auto!important}
  .table{min-width:680px!important}
}
@media(max-width:520px){
  .login-screen{padding:12px!important}.login-card{padding:20px!important;border-radius:24px!important}.login-logo{width:60px!important;height:60px!important}.login-title h1{font-size:26px!important}
  .sidebar{padding:10px!important}
  .card{padding:14px!important;border-radius:20px!important}
  .main{padding:10px!important}
  .nav a{font-size:12.5px!important;padding:8px 10px!important}
  .invoice-table{min-width:650px!important}
  button,.btn{width:auto!important}
}
@media print{.sidebar,.actions,.no-print{display:none!important}.app{display:block!important;margin:0!important;box-shadow:none!important;border:0!important}.main{padding:0!important;max-width:none!important}.card{box-shadow:none!important;border:0!important}.offer-preview{border:0!important;padding:0!important}.invoice-table,.table{min-width:0!important}}


/* Final darker brown + logo update */
:root{
  --bg:#efe2d3 !important;
  --surface:#fff8ef !important;
  --surface-2:#f4e7d8 !important;
  --brown:#4b2d1c !important;
  --brown-2:#6b4229 !important;
  --brown-soft:#dcc3a8 !important;
  --brown-light:#ead9c4 !important;
  --text:#251912 !important;
  --muted:#6f5b4d !important;
  --border:rgba(75,45,28,.20) !important;
}

body{
  background:linear-gradient(135deg,#f3e4d3 0%,#dfc4a8 100%)!important;
}

.app{
  background:rgba(255,248,239,.94)!important;
  border:1px solid rgba(75,45,28,.18)!important;
  box-shadow:0 24px 70px rgba(54,31,18,.14)!important;
}

.sidebar{
  background:linear-gradient(180deg,#f2dfca 0%,#d8b996 100%)!important;
  border-right:1px solid rgba(75,45,28,.16)!important;
}

.brand{
  background:rgba(255,248,239,.70)!important;
  border:1px solid rgba(75,45,28,.13)!important;
}

.brand-logo-img{
  width:58px!important;
  height:58px!important;
  border-radius:18px!important;
  background:#fff!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:1px solid rgba(75,45,28,.12)!important;
  flex:0 0 auto!important;
}

.brand-logo-img img{
  width:52px!important;
  height:52px!important;
  object-fit:contain!important;
  display:block!important;
}

.brand h1{
  color:#3c2416!important;
  font-weight:900!important;
}

.nav a{
  background:rgba(255,248,239,.68)!important;
  border:1px solid rgba(75,45,28,.13)!important;
  color:#3c2416!important;
}

.nav a.active,
.nav a:hover{
  background:#4b2d1c!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(75,45,28,.22)!important;
}

.logout-btn{
  background:#fff8ef!important;
  color:#4b2d1c!important;
  border:1px solid rgba(75,45,28,.18)!important;
}

.card{
  background:rgba(255,250,244,.98)!important;
  border:1px solid rgba(75,45,28,.18)!important;
}

.section-title span,
.table th,
.badge,
.secondary,
.btn-secondary{
  background:#ead9c4!important;
  color:#4b2d1c!important;
}

.primary,
.btn-primary{
  background:linear-gradient(135deg,#5d3823,#3c2416)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(75,45,28,.25)!important;
}

/* Login page logo and modern button */
.login-card{
  width:min(100%,520px)!important;
  padding:42px!important;
  background:rgba(255,248,239,.98)!important;
  border:1px solid rgba(75,45,28,.18)!important;
  box-shadow:0 30px 90px rgba(54,31,18,.22)!important;
}

.login-logo-img{
  width:155px!important;
  height:155px!important;
  margin:0 auto 12px!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
}

.login-logo-img img{
  max-width:155px!important;
  max-height:155px!important;
  object-fit:contain!important;
  display:block!important;
}

.login-title h1{
  color:#321f14!important;
  font-size:34px!important;
  margin:0 0 4px!important;
}

.login-title p,
.login-title span{
  display:none!important;
}

.login-card button.primary,
.login-card .primary{
  width:100%!important;
  min-height:52px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#5f3822,#2f1c12)!important;
  color:#fff!important;
  font-size:15px!important;
  letter-spacing:.2px!important;
  box-shadow:0 16px 34px rgba(75,45,28,.28)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  transition:transform .15s ease, box-shadow .15s ease!important;
}

.login-card button.primary:hover,
.login-card .primary:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 20px 40px rgba(75,45,28,.34)!important;
}

.login-card input{
  min-height:50px!important;
  border-radius:17px!important;
  font-size:14px!important;
}

@media(max-width:980px){
  .brand-logo-img{
    width:48px!important;
    height:48px!important;
    border-radius:15px!important;
  }
  .brand-logo-img img{
    width:43px!important;
    height:43px!important;
  }
  .nav{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    padding-bottom:8px!important;
  }
  .nav a{
    flex:0 0 auto!important;
  }
}

@media(max-width:520px){
  .login-card{
    padding:24px!important;
    border-radius:24px!important;
  }
  .login-logo-img{
    width:125px!important;
    height:125px!important;
  }
  .login-logo-img img{
    max-width:125px!important;
    max-height:125px!important;
  }
  .login-title h1{
    font-size:28px!important;
  }
  .login-card button.primary{
    min-height:48px!important;
  }
}



/* Final requested fixes: centered login logo + styled button + clean brand */
.brand p,
.brand div p {
  display:none!important;
}

.brand {
  align-items:center!important;
}

.login-card {
  align-items:stretch!important;
  text-align:center!important;
}

.login-logo-img {
  width:170px!important;
  height:170px!important;
  margin:0 auto 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  align-self:center!important;
  background:transparent!important;
}

.login-logo-img img {
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  margin:0 auto!important;
}

.login-card button,
.login-card button.primary,
.login-card .primary,
.login-card input[type="submit"] {
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%!important;
  min-height:54px!important;
  border:0!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#6a3f27 0%,#3b2417 100%)!important;
  color:#fff!important;
  font-size:15.5px!important;
  font-weight:900!important;
  letter-spacing:.3px!important;
  cursor:pointer!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  box-shadow:0 18px 38px rgba(60,36,23,.34)!important;
  padding:0 18px!important;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease!important;
}

.login-card button:hover,
.login-card button.primary:hover,
.login-card .primary:hover {
  transform:translateY(-1px)!important;
  filter:brightness(1.05)!important;
  box-shadow:0 22px 46px rgba(60,36,23,.40)!important;
}

.login-card button:active,
.login-card button.primary:active,
.login-card .primary:active {
  transform:translateY(0)!important;
  box-shadow:0 12px 26px rgba(60,36,23,.28)!important;
}

@media(max-width:520px){
  .login-logo-img{
    width:135px!important;
    height:135px!important;
  }
  .login-card button,
  .login-card button.primary,
  .login-card .primary{
    min-height:50px!important;
    border-radius:16px!important;
  }
}


/* Login button force style */


#loginForm .login-main-button,
.login-card .login-main-button,
#loginMainButton,
.login-card button[type="submit"],
.login-card input[type="submit"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 19px !important;
  background: linear-gradient(135deg, #6f4329 0%, #4a2c1b 48%, #2f1c12 100%) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 18px !important;
  margin-top: 6px !important;
  box-shadow: 0 18px 38px rgba(60, 36, 23, 0.36) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}

#loginForm .login-main-button:hover,
.login-card .login-main-button:hover,
#loginMainButton:hover,
.login-card button[type="submit"]:hover,
.login-card input[type="submit"]:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 22px 46px rgba(60, 36, 23, 0.42) !important;
}

#loginForm .login-main-button:active,
.login-card .login-main-button:active,
#loginMainButton:active,
.login-card button[type="submit"]:active,
.login-card input[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 12px 26px rgba(60, 36, 23, 0.30) !important;
}

@media (max-width: 520px) {
  #loginForm .login-main-button,
  .login-card .login-main-button,
  #loginMainButton,
  .login-card button[type="submit"],
  .login-card input[type="submit"] {
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }
}




/* Offer management + print + totals + border refinement */
.dark-box,
.sidebar,
.primary,
.btn-primary,
.nav a.active,
.nav a:hover,
.login-card button,
#loginMainButton {
  border: 1px solid rgba(255,248,239,.42) !important;
}

.light-box,
.card,
.brand,
.nav a,
.logout-btn,
input,
select,
textarea,
.table,
.offer-preview,
.login-card {
  border: 1px solid rgba(75,45,28,.24) !important;
}

.live-totals {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:14px !important;
}

.total-card {
  background:#fff8ef !important;
  border:1px solid rgba(75,45,28,.24) !important;
  border-radius:18px !important;
  padding:14px !important;
}

.total-card span {
  display:block !important;
  color:#6f5b4d !important;
  font-size:12px !important;
  font-weight:800 !important;
  margin-bottom:4px !important;
}

.total-card strong {
  display:block !important;
  color:#3b2417 !important;
  font-size:18px !important;
  font-weight:900 !important;
}

.offer-actions {
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}

.offer-actions .btn,
.offer-actions button {
  min-height:34px !important;
  padding:8px 10px !important;
  font-size:12.5px !important;
}

.print-page {
  background:#fff !important;
  color:#111 !important;
  padding:0 !important;
  margin:0 !important;
}

.print-page .offer-preview {
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

@media(max-width:900px){
  .live-totals {
    grid-template-columns:1fr !important;
  }
  .offer-actions {
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  .offer-actions .btn,
  .offer-actions button {
    width:100% !important;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  html, body {
    background:#fff !important;
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    height:auto !important;
  }

  body * {
    visibility:hidden !important;
  }

  #printArea,
  #printArea * {
    visibility:visible !important;
  }

  #printArea {
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    background:#fff !important;
    padding:0 !important;
    margin:0 !important;
  }

  .sidebar,
  .no-print,
  .actions,
  .card.no-print {
    display:none !important;
  }

  .app,
  .main,
  .card,
  .offer-preview {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fff !important;
  }

  .invoice-table,
  .table {
    min-width:0 !important;
    width:100% !important;
  }

  .invoice-head,
  .invoice-meta {
    display:flex !important;
  }
}



/* Custom unit input support */
input[list="unitOptions"] {
  text-transform: uppercase;
}