:root {
    --bg:#f0f4f8;--surface:#ffffff;--surface2:#e8edf2;--border:#c8d4e0;
    --accent:#2563eb;--accent2:#1d4ed8;--green:#16a34a;--yellow:#d97706;
    --red:#dc2626;--text:#1e293b;--text2:#475569;--text3:#94a3b8;
    --white:#ffffff;--font:'Segoe UI',system-ui,sans-serif;--mono:'Consolas',monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;height:100vh;display:flex;overflow:hidden;}
  #sidebar{width:220px;min-width:220px;background:#f8fafc;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:width 0.2s;}
  #sidebar.collapsed{width:52px;min-width:52px;}
  .logo{padding:18px 16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
  .logo-mark{width:28px;height:28px;background:var(--accent);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0;}
  .logo-text{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;}
  .logo-sub{font-size:10px;color:var(--text3);letter-spacing:.05em;white-space:nowrap;}
  nav{flex:1;overflow-y:auto;padding:8px 0;}
  .nav-section{padding:16px 12px 4px;font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--text3);text-transform:uppercase;white-space:nowrap;overflow:hidden;}
  .nav-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;color:var(--text2);transition:background .15s,color .15s;position:relative;}
  .nav-item:hover{background:var(--surface2);color:var(--text);}
  .nav-item.active{background:rgba(37,99,235,.12);color:var(--accent);}
  .nav-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);border-radius:0 2px 2px 0;}
  .nav-icon{font-size:16px;flex-shrink:0;width:20px;text-align:center;}
  .nav-label{white-space:nowrap;overflow:hidden;font-size:13px;}
  #toggle-sidebar{padding:12px 14px;border-top:1px solid var(--border);cursor:pointer;color:var(--text3);font-size:18px;display:flex;justify-content:flex-end;}
  #main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
  #topbar{height:52px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.06);}
  #page-title{font-size:16px;font-weight:600;color:var(--text);flex:1;}
  #search-box{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:6px 12px;color:var(--text);font-size:13px;width:260px;outline:none;}
  #search-box:focus{border-color:var(--accent);}
  #search-box::placeholder{color:var(--text3);}
  .btn{padding:7px 14px;border-radius:6px;border:none;cursor:pointer;font-size:13px;font-weight:500;transition:opacity .15s;}
  .btn:hover{opacity:.85;}
  .btn-primary{background:var(--accent);color:#fff;}
  .btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);}
  .btn-success{background:var(--green);color:#fff;}
  .btn-danger{background:var(--red);color:#fff;}
  .btn-sm{padding:4px 10px;font-size:12px;}
  #content{flex:1;overflow-y:auto;padding:20px;}
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:20px;}
  .stat-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
  .stat-label{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
  .stat-value{font-size:22px;font-weight:700;color:var(--text);}
  .stat-sub{font-size:11px;color:var(--text2);margin-top:4px;}
  .stat-up{color:var(--green);}
  .stat-down{color:var(--red);}
  .table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
  .table-header{padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);}
  .table-title{font-size:14px;font-weight:600;color:var(--text);flex:1;}
  .tbl{width:100%;border-collapse:collapse;}
  .tbl th{padding:8px 10px;text-align:left;font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);background:var(--surface2);white-space:nowrap;}
  .tbl td{padding:7px 10px;border-bottom:1px solid var(--border);color:var(--text);font-size:12px;vertical-align:middle;}
  .tbl tr:last-child td{border-bottom:none;}
  .tbl tr:hover td{background:rgba(37,99,235,.04);}
  .tbl td.num{text-align:right;font-family:var(--mono);}
  .tbl td.actions{white-space:nowrap;text-align:right;}
  .tag{display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600;}
  .tag-blue{background:rgba(59,130,246,.15);color:var(--accent2);}
  .tag-green{background:rgba(34,197,94,.15);color:var(--green);}
  .tag-yellow{background:rgba(245,158,11,.15);color:var(--yellow);}
  .tag-red{background:rgba(239,68,68,.15);color:var(--red);}
  .tag-gray{background:rgba(100,116,139,.15);color:#334155;}
  .modal-overlay{position:fixed;inset:0;background:rgba(15,25,40,.45);z-index:1000;display:flex;align-items:center;justify-content:center;}
  .modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:700px;max-width:96vw;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;}
  .modal-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;}
  .modal-head h3{flex:1;font-size:15px;font-weight:600;color:var(--text);}
  .modal-body{padding:18px 20px;overflow-y:auto;flex:1;}
  .modal-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
  .form-grid.cols3{grid-template-columns:1fr 1fr 1fr;}
  .form-group{display:flex;flex-direction:column;gap:4px;}
  .form-group.full{grid-column:1/-1;}
  label{font-size:11px;color:var(--text2);font-weight:500;}
  input,select,textarea{background:#fff;border:1px solid var(--border);border-radius:6px;padding:7px 9px;color:var(--text);font-size:13px;font-family:var(--font);outline:none;width:100%;}
  input:focus,select:focus,textarea:focus{border-color:var(--accent);}
  select option{background:var(--surface2);}
  textarea{resize:vertical;min-height:60px;}
  input[readonly]{opacity:.55;cursor:default;}
  .doc-preview{background:#fff;color:#222;padding:30px 36px;font-family:'Calibri',sans-serif;font-size:13px;border-radius:6px;}
  .doc-preview h1{font-size:18px;font-weight:700;text-align:center;margin-bottom:3px;}
  .doc-sub{text-align:center;color:#555;font-size:12px;margin-bottom:18px;}
  .doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px;}
  .doc-party h4{font-size:10px;text-transform:uppercase;color:#999;margin-bottom:5px;}
  .doc-party p{font-size:12px;line-height:1.55;}
  .doc-tbl{width:100%;border-collapse:collapse;margin:12px 0;table-layout:fixed;}
  .doc-tbl col.c1{width:42%;}
  .doc-tbl col.c2{width:10%;}
  .doc-tbl col.c3{width:10%;}
  .doc-tbl col.c4{width:18%;}
  .doc-tbl col.c5{width:20%;}
  .doc-tbl th{background:#1a2636;color:#fff;padding:6px 9px;font-size:11px;text-align:left;}
  .doc-tbl th:not(:first-child),.doc-tbl td:not(:first-child){text-align:right;}
  .doc-tbl th:first-child,.doc-tbl td:first-child{text-align:left;}
  .doc-tbl td{padding:6px 9px;border-bottom:1px solid #e5e7eb;font-size:12px;word-wrap:break-word;}
  .doc-tbl td.r{text-align:right;}
  .doc-totals{margin-top:8px;margin-left:auto;min-width:320px;}
  .doc-totals table{width:100%;border-top:1px solid #ddd;margin-top:4px;white-space:nowrap;}
  .doc-totals table td{padding:4px 9px;font-size:12px;white-space:nowrap;}
  .doc-totals table td:first-child{min-width:220px;}
  .doc-totals table td:last-child{text-align:right;font-weight:600;}
  .doc-footer{margin-top:36px;font-size:11px;color:#666;border-top:1px solid #eee;padding-top:10px;}
  .row-flex{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:14px;}
  .card-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px;}
  .divider{border:none;border-top:1px solid var(--border);margin:14px 0;}
  .pager{display:flex;gap:6px;margin-top:10px;justify-content:flex-end;align-items:center;}
  .pager span{font-size:12px;color:var(--text3);}
  .pager button{padding:4px 9px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;color:var(--text2);cursor:pointer;font-size:12px;}
  .pager button.active{background:var(--accent);color:#fff;border-color:var(--accent);}
  .pager button:disabled{opacity:.35;cursor:default;}
  /* doc items table */
  .dit{width:100%;border-collapse:collapse;margin-bottom:6px;table-layout:fixed;}
  .dit th{font-size:11px;color:var(--text3);font-weight:600;padding:5px 6px;text-align:left;background:var(--surface2);border-bottom:1px solid var(--border);}
  .dit td{padding:3px 3px;vertical-align:middle;}
  .dit td input{padding:5px 6px;font-size:12px;width:100%;box-sizing:border-box;}
  .dit td select{padding:4px 2px;font-size:11px;width:100%;box-sizing:border-box;}
  .dit col.col-desc{width:50%;}
  .dit col.col-unit{width:62px;}
  .dit col.col-qty{width:72px;}
  .dit col.col-price{width:78px;}
  .dit col.col-sum{width:64px;}
  .dit col.col-del{width:22px;}
  .dit td.sum-col{text-align:right;font-family:var(--mono);font-size:12px;color:var(--text2);white-space:nowrap;padding-right:4px;}
  .dit td.del-col{text-align:center;}
  .icon-btn{background:none;border:none;cursor:pointer;color:var(--text3);font-size:15px;padding:2px 4px;}
  .icon-btn:hover{color:var(--red);}
  .alert{padding:9px 14px;border-radius:6px;font-size:13px;margin-bottom:12px;}
  .alert-warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:var(--yellow);}
  .empty{text-align:center;padding:36px;color:var(--text2);}
  .empty-icon{font-size:32px;margin-bottom:8px;}
  #save-indicator{position:fixed;bottom:60px;right:18px;background:#fff;border:1px solid var(--accent);border-radius:6px;padding:5px 12px;font-size:11px;color:var(--accent);z-index:1999;opacity:0;transition:opacity .3s;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.1);}
  #undo-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#fff;border:2px solid var(--accent);border-radius:10px;padding:12px 20px;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--text);box-shadow:0 6px 24px rgba(37,99,235,.2);z-index:2000;transition:opacity .3s,visibility .3s;}
  #undo-bar.hidden{opacity:0;pointer-events:none;visibility:hidden;}
  .topbar-tools{display:flex;gap:8px;}

  /* LOGIN SCREEN */
  #login-screen{position:fixed;inset:0;background:linear-gradient(135deg,#e8f0fe 0%,#f0f4f8 100%);display:flex;align-items:center;justify-content:center;z-index:9999;}
  #login-screen.hidden{display:none;}
  .login-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px;width:360px;max-width:90vw;}
  .login-box .logo-big{text-align:center;margin-bottom:24px;}
  .login-box .logo-big .logo-mark{width:56px;height:56px;font-size:24px;margin:0 auto 12px;}
  .login-box h2{text-align:center;font-size:20px;color:var(--white);margin-bottom:6px;}
  .login-box p{text-align:center;font-size:13px;color:var(--text3);margin-bottom:24px;}
  .login-err{color:var(--red);font-size:12px;text-align:center;margin-top:8px;min-height:18px;}
  .login-box .btn{width:100%;padding:10px;font-size:14px;margin-top:12px;}
  #user-info{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);}
  #user-info span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* Date picker group */
  .date-input-wrap{display:inline-flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#fff;}
  .date-input-wrap input{border:none;padding:4px 6px;font-size:12px;width:88px;background:transparent;color:var(--text);}
  .date-input-wrap input:focus{outline:none;}
  .date-input-wrap input[type="date"]{width:0;height:0;opacity:0;position:absolute;}
  .date-cal-btn{background:var(--surface2);border:none;border-left:1px solid var(--border);padding:4px 7px;cursor:pointer;font-size:13px;color:var(--text2);}
  .date-cal-btn:hover{background:var(--border);}
  /* ── MOBILE ────────────────────────────────────────────── */
  @media (max-width: 768px) {
    body { font-size: 13px; }

    /* Sidebar – slaptas, atidaromas mygtuku */
    #sidebar {
      position: fixed; left: -220px; top: 0; bottom: 0; z-index: 500;
      width: 220px !important; min-width: 220px !important;
      box-shadow: 4px 0 20px rgba(0,0,0,.5);
      transition: left .25s ease;
    }
    #sidebar.mob-open { left: 0; }
    #sidebar-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
      z-index: 499;
    }
    #sidebar.mob-open ~ #sidebar-overlay { display: block; }
    #toggle-sidebar { display: none; }

    /* Topbar */
    #topbar { padding: 0 10px; gap: 8px; height: 48px; }
    #page-title { font-size: 14px; }
    #search-box { width: 120px; font-size: 12px; }
    .topbar-tools { gap: 4px; }
    .topbar-tools .btn { padding: 5px 8px; font-size: 11px; }
    #mob-menu-btn { display: flex; }

    /* Content */
    #content { padding: 10px; }

    /* Stats */
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 10px; }
    .stat-value { font-size: 16px; }

    /* Tables – horizontal scroll */
    .table-wrap { overflow-x: auto; }
    .tbl th, .tbl td { padding: 6px 8px; font-size: 11px; white-space: nowrap; }
    .table-header { flex-wrap: wrap; gap: 6px; padding: 10px; }

    /* Two-col → single */
    .two-col { grid-template-columns: 1fr; }

    /* Doc page – single column */
    #content > div[style*="grid-template-columns:560px"] {
      grid-template-columns: 1fr !important;
    }

    /* Modal */
    .modal { width: 96vw; max-height: 95vh; }
    .modal-body { padding: 12px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-group.full { grid-column: 1; }

    /* Filter bars – wrap */
    .table-header input, .table-header select {
      width: 100% !important; max-width: 160px;
    }

    /* Pagination */
    .pager { flex-wrap: wrap; justify-content: center; }

    /* Doc items table */
    .dit { font-size: 11px; }
    .dit col.col-desc { width: 35%; }
  }

  /* Hamburger menu button */
#mob-menu-btn {
    display: none;
    background: none; border: none; cursor: pointer;
    color: var(--text2); font-size: 20px; padding: 4px 8px;
    flex-shrink: 0;
  }

/* ============================================================
   AMIKRA PROFESSIONAL UI — visual layer only; CRM logic unchanged
   ============================================================ */
:root{
  --bg:#f4f6f8;
  --surface:#ffffff;
  --surface2:#f7f9fb;
  --border:#e3e8ee;
  --accent:#0d8279;
  --accent2:#086b64;
  --green:#16856f;
  --yellow:#b7791f;
  --red:#c34545;
  --text:#17212d;
  --text2:#5c6978;
  --text3:#8995a3;
  --font:Inter,"Segoe UI",Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
body{background:var(--bg);font-size:13px;letter-spacing:.002em;}

/* Navigation */
#sidebar{width:248px;min-width:248px;background:#101b2b;border:0;color:#c9d4df;box-shadow:8px 0 30px rgba(15,23,42,.06);}
#sidebar.collapsed{width:64px;min-width:64px;}
.logo{min-height:78px;padding:19px 20px;border-bottom:1px solid rgba(255,255,255,.09);gap:11px;}
.logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#21aaa0,#0c776f);box-shadow:0 7px 18px rgba(20,165,153,.22);font-size:14px;}
.logo-text{font-size:17px;font-weight:700;letter-spacing:.02em;color:#f8fafc;}
.logo-sub{font-size:9px;color:#8e9cad;letter-spacing:.12em;margin-top:2px;}
nav{padding:14px 10px;}
.nav-section{padding:18px 12px 7px;font-size:9px;font-weight:700;letter-spacing:.14em;color:#758397;}
.nav-item{margin:2px 0;padding:10px 12px;border-radius:8px;color:#b3c0cf;font-weight:500;transition:background .16s ease,color .16s ease;}
.nav-item:hover{background:rgba(255,255,255,.075);color:#fff;}
.nav-item.active{background:rgba(38,188,175,.16);color:#dffbf7;}
.nav-item.active::before{left:0;top:8px;bottom:8px;width:3px;background:#35c3b6;border-radius:0 3px 3px 0;}
.nav-icon{font-size:15px;opacity:.9;}
.nav-label{font-size:12px;}
#toggle-sidebar{margin:0 10px;padding:15px 12px;border-top:1px solid rgba(255,255,255,.08);color:#8492a4;}
#toggle-sidebar:hover{color:#fff;}

/* Page chrome */
#topbar{height:70px;padding:0 32px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--border);box-shadow:none;}
#page-title{font-size:19px;font-weight:700;letter-spacing:-.02em;color:#17212d;}
#search-box{width:280px;height:36px;background:#f4f7f9;border:1px solid transparent;border-radius:8px;padding:8px 13px;color:var(--text);font-size:12px;transition:border .15s,background .15s,box-shadow .15s;}
#search-box:hover{background:#fff;border-color:#dce4eb;}
#search-box:focus{background:#fff;border-color:#78bcb6;box-shadow:0 0 0 3px rgba(13,130,121,.10);}
#content{padding:28px 32px 36px;}

/* Buttons and forms */
.btn{min-height:34px;padding:8px 13px;border-radius:7px;font-size:12px;font-weight:650;letter-spacing:.005em;box-shadow:none;transition:transform .14s ease,box-shadow .14s ease,background .14s ease;}
.btn:hover{opacity:1;transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:#0d8279;color:#fff;box-shadow:0 2px 5px rgba(13,130,121,.20);}
.btn-primary:hover{background:#086b64;box-shadow:0 6px 16px rgba(13,130,121,.22);}
.btn-secondary{background:#fff;color:#405060;border-color:#dbe2e9;}
.btn-secondary:hover{background:#f7f9fb;border-color:#cbd5df;}
.btn-success{background:#16856f;box-shadow:0 2px 5px rgba(22,133,111,.18);}
.btn-danger{background:#c34545;box-shadow:0 2px 5px rgba(195,69,69,.16);}
.btn-sm{min-height:28px;padding:5px 9px;font-size:11px;}
.tool-btn{display:inline-flex;align-items:center;gap:7px;}
.tool-icon{display:inline-flex;width:15px;height:15px;align-items:center;justify-content:center;flex:0 0 15px;color:#607385;}
.tool-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
.icon-only-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;padding:0;}
input,select,textarea{border:1px solid #dbe3ea;border-radius:7px;padding:8px 10px;font-size:12px;background:#fff;transition:border .15s,box-shadow .15s;}
input:hover,select:hover,textarea:hover{border-color:#c8d3dd;}
input:focus,select:focus,textarea:focus{border-color:#64ada6;box-shadow:0 0 0 3px rgba(13,130,121,.10);}
label{font-size:10px;font-weight:700;letter-spacing:.035em;text-transform:uppercase;color:#728091;}

/* Executive dashboard */
.stat-grid{gap:16px;margin-bottom:24px;}
.stat-card{position:relative;min-height:114px;padding:18px 19px;border:1px solid #e2e8ee;border-radius:11px;box-shadow:0 2px 5px rgba(15,23,42,.025);overflow:hidden;}
.stat-card::after{content:"";position:absolute;right:-22px;bottom:-32px;width:98px;height:98px;border-radius:50%;background:linear-gradient(135deg,rgba(13,130,121,.08),transparent 70%);pointer-events:none;}
.stat-label{font-size:10px;font-weight:700;letter-spacing:.09em;color:#728091;}
.stat-value{font-size:25px;letter-spacing:-.035em;margin-top:7px;color:#17212d;}
.stat-sub{font-size:11px;color:#7c8997;margin-top:7px;}

/* Tables */
.table-wrap{border:1px solid #e0e7ed;border-radius:11px;box-shadow:0 2px 7px rgba(15,23,42,.028);margin-bottom:20px;}
.table-header{min-height:58px;padding:12px 18px;border-bottom:1px solid #e7edf2;}
.table-title{font-size:13px;font-weight:700;color:#263545;}
.tbl th{padding:11px 13px;background:#f8fafb;border-bottom:1px solid #e3e9ee;color:#718092;font-size:10px;font-weight:700;letter-spacing:.07em;}
.tbl td{padding:11px 13px;border-bottom:1px solid #edf1f4;color:#334155;font-size:12px;}
.tbl tr:hover td{background:#f4fbfa;}
.tbl td.num{font-size:11px;color:#3c4a58;}
.tbl td.actions{padding-right:16px;}
.tag{padding:4px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.01em;}
.tag-blue{background:#e6f3f2;color:#08736b;}
.tag-green{background:#e8f5ef;color:#167255;}
.tag-yellow{background:#fff5df;color:#9b6718;}
.tag-red{background:#fceaea;color:#b33d3d;}
.tag-gray{background:#eef2f5;color:#5c6978;}

/* Cards, modals and feedback */
.card{border:1px solid #e1e8ee;border-radius:11px;padding:18px;box-shadow:0 1px 4px rgba(15,23,42,.022);}
.card-title{font-size:13px;font-weight:700;color:#263545;}
.divider{border-color:#e7edf2;}
.modal-overlay{background:rgba(15,23,42,.42);backdrop-filter:blur(3px);}
.modal{border:1px solid #e1e8ee;border-radius:13px;box-shadow:0 24px 70px rgba(15,23,42,.22);}
.modal-head{padding:18px 22px;border-bottom:1px solid #e8edf1;}
.modal-head h3{font-size:16px;font-weight:700;color:#17212d;}
.modal-body{padding:21px 22px;}
.modal-foot{padding:14px 22px;background:#fbfcfd;border-top:1px solid #e8edf1;}
.alert{padding:11px 13px;border-radius:8px;}
.alert-warn{background:#fff8e8;border-color:#f1d49a;color:#92631b;}
.pager button{border-radius:6px;background:#fff;border-color:#dfe6ec;color:#617082;}
.pager button.active{background:#0d8279;border-color:#0d8279;}
.icon-btn{color:#718092;border-radius:5px;}
.icon-btn:hover{background:#fceaea;color:#b33d3d;}

/* Professional login */
#login-screen{background:radial-gradient(circle at 15% 20%,#e5f3f1 0,transparent 34%),linear-gradient(135deg,#f7fafb,#edf2f5);}
.login-box{border:1px solid #e0e7ed;border-radius:14px;box-shadow:0 22px 60px rgba(15,23,42,.12);padding:36px;}
.login-box h2{color:#17212d;letter-spacing:-.02em;}
.login-box p{color:#758397;}

@media (max-width:768px){
  #sidebar{width:248px!important;min-width:248px!important;left:-248px;}
  #sidebar.mob-open{left:0;}
  #topbar{height:58px;padding:0 14px;}
  #content{padding:16px 14px 24px;}
  #page-title{font-size:16px;}
  #search-box{width:130px;}
  .stat-card{min-height:96px;padding:13px;}
  .stat-value{font-size:19px;}
  .table-header{padding:10px 12px;}
}

/* Navigation icons and compact sidebar */
.nav-icon{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;flex:0 0 18px;color:currentColor;}
.nav-icon svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
#sidebar.collapsed .logo{min-height:70px;padding:17px 0;justify-content:center;}
#sidebar.collapsed .logo img{display:none;}
#sidebar.collapsed .logo::after{content:"A";display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#21aaa0,#0c776f);color:#fff;font-size:14px;font-weight:800;box-shadow:0 7px 18px rgba(20,165,153,.22);}
#sidebar.collapsed nav{padding:14px 10px;}
#sidebar.collapsed .nav-section{display:none;}
#sidebar.collapsed .nav-item{width:44px;height:42px;margin:5px auto;padding:0;justify-content:center;border-radius:9px;}
#sidebar.collapsed .nav-label{display:none;}
#sidebar.collapsed .nav-icon{width:18px;height:18px;flex-basis:18px;}
#sidebar.collapsed .nav-icon svg{width:18px;height:18px;}
#sidebar.collapsed .nav-item.active::before{left:0;top:10px;bottom:10px;}
#sidebar.collapsed #toggle-sidebar{justify-content:center;margin:0 10px;padding:15px 0;}

/* Mobile-first working view: controls remain reachable without shrinking
   accounting tables or form fields below a usable size. */
@media (max-width:600px){
  body{height:100dvh;overflow:hidden;}
  #main{min-width:0;}
  #topbar{height:auto;min-height:54px;padding:8px 10px;gap:8px;flex-wrap:wrap;align-content:center;}
  #mob-menu-btn{width:34px;height:34px;padding:0;border:1px solid #dbe2e9;border-radius:7px;background:#fff;font-size:0;display:inline-flex;align-items:center;justify-content:center;}
  #mob-menu-btn::before{content:"";width:16px;height:12px;background:linear-gradient(#607385 0 0) 0 0/100% 2px no-repeat,linear-gradient(#607385 0 0) 0 5px/100% 2px no-repeat,linear-gradient(#607385 0 0) 0 10px/100% 2px no-repeat;}
  #page-title{order:1;flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #crm-version{display:none;}
  #search-box{order:4;flex:1 1 140px;width:auto;height:34px;padding:7px 10px;}
  #topbar-action{order:2;min-height:34px;padding:7px 10px;font-size:11px;white-space:nowrap;}
  .topbar-tools{order:5;width:auto;flex:0 0 auto;gap:7px;justify-content:flex-start;overflow:visible;padding:0;scrollbar-width:none;}
  .topbar-tools::-webkit-scrollbar{display:none;}
  .topbar-tools .tool-btn{min-width:34px;min-height:34px;padding:7px 9px;justify-content:center;}
  .topbar-tools .tool-label{display:none;}
  .topbar-tools .tool-icon,.topbar-tools .tool-icon svg{width:16px;height:16px;flex-basis:16px;}
  #user-info{display:none;}
  #content{padding:12px 10px 22px;}
  .stat-grid{grid-template-columns:1fr 1fr;gap:9px;}
  .stat-card{min-height:88px;padding:12px;}
  .stat-label{font-size:9px;letter-spacing:.06em;}
  .stat-value{font-size:18px;}
  .stat-sub{font-size:10px;}
  .table-wrap{border-radius:9px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table-header{position:sticky;left:0;min-width:max-content;}
  .tbl{min-width:650px;}
  .tbl th,.tbl td{padding:9px 10px;font-size:11px;}
  .tbl td{min-height:38px;}
  .table-header .btn{min-height:34px;}
  .row-flex{gap:7px;}
  .row-flex .btn{min-height:34px;}
  .card{padding:14px;}
  .two-col,.form-grid,.form-grid.cols3{grid-template-columns:1fr;gap:10px;}
  .form-group.full{grid-column:auto;}
  input,select,textarea{min-height:38px;font-size:16px;}
  textarea{min-height:82px;}
  .modal-overlay{align-items:flex-end;}
  .modal{width:100vw;max-width:100vw;max-height:92dvh;border-radius:14px 14px 0 0;border-bottom:0;}
  .modal-head{padding:15px 16px;}
  .modal-body{padding:14px 16px;}
  .modal-foot{padding:12px 16px;gap:8px;flex-wrap:wrap;}
  .modal-foot .btn{flex:1 1 140px;min-height:40px;}
  .pager{justify-content:center;}
  #content > div[style*="grid-template-columns:560px"]{display:block!important;}
  #content > div[style*="grid-template-columns:560px"] > div:first-child{margin-bottom:16px;}
  #doc-preview-area{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #doc-out{min-width:620px!important;margin:0!important;}
  .dit{min-width:570px;}
  #doc-items-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

@media (max-width:380px){
  #page-title{font-size:14px;}
  .stat-grid{grid-template-columns:1fr;}
  #topbar-action{font-size:0;width:34px;padding:0;}
  #topbar-action::after{content:"+";font-size:19px;line-height:1;}
}