:root{
 --bg:#080b10;--bg2:#0d1117;--panel:#11151c;--panel2:#151a22;--line:#262d38;--text:#f3f5f7;--muted:#8e98a8;
 --red:#ff283d;--red2:#b90f24;--red-soft:rgba(255,40,61,.12);--green:#2fc26e;--green-soft:rgba(47,194,110,.12);--blue:#2d8cff;
 --radius:12px;--shadow:0 15px 40px rgba(0,0,0,.28)
}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.muted{color:var(--muted)}
.app-shell{min-height:100vh;display:flex}.sidebar{width:260px;background:#090c11;border-right:1px solid #1b2029;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:30}.sidebar-brand{height:88px;padding:18px 18px;border-bottom:1px solid #1b2029;display:flex;align-items:center;gap:12px}.sidebar-brand img{width:58px;height:48px;object-fit:contain}.sidebar-brand strong{font-size:13px;letter-spacing:1.1px;display:block}.sidebar-brand span{font-size:10px;color:var(--muted)}.sidebar-nav{padding:18px 12px;overflow:auto;flex:1}.nav-section-label{font-size:9px;color:#626d7f;letter-spacing:1.3px;margin:22px 10px 8px}.nav-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;color:#b8c0cb;font-size:13px;margin:3px 0;transition:.18s;border:1px solid transparent}.nav-link:hover{color:#fff;background:#111720}.nav-link.active{color:#fff;background:linear-gradient(135deg,rgba(255,40,61,.26),rgba(118,8,26,.18));border-color:rgba(255,40,61,.42);box-shadow:0 0 20px rgba(255,40,61,.12),inset 0 0 18px rgba(255,40,61,.04)}.nav-icon{width:21px;height:21px;border-radius:6px;display:grid;place-items:center;background:#171c24;font-size:12px;color:var(--red)}.nav-link.active .nav-icon{background:var(--red);color:#fff}.sidebar-footer{padding:14px;border-top:1px solid #1b2029}.user-mini{display:flex;gap:10px;align-items:center;margin-bottom:10px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),#6c0d1b);font-weight:800}.user-mini-text strong{display:block;font-size:11px}.user-mini-text span{display:block;color:var(--muted);font-size:9px;margin-top:2px}.logout-btn{width:100%;border:1px solid #2a303a;background:#11151b;color:#cbd1da;border-radius:8px;padding:9px;cursor:pointer}.logout-btn:hover{border-color:var(--red);color:#fff}.main-area{margin-left:260px;min-width:0;flex:1}.topbar{height:88px;border-bottom:1px solid #1b2029;background:rgba(9,12,17,.94);display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}.topbar h1{margin:0;font-size:19px}.topbar p{margin:4px 0 0;color:var(--muted);font-size:11px}.topbar-right{margin-left:auto}.role-badge{font-size:9px;letter-spacing:.8px;color:#ff7b89;border:1px solid rgba(255,40,61,.35);background:var(--red-soft);padding:6px 9px;border-radius:20px}.mobile-menu-btn{display:none;background:none;border:0;color:white;font-size:20px;margin-right:12px}.content-area{padding:26px;max-width:1600px;margin:0 auto}.alert{padding:12px 14px;border-radius:9px;margin-bottom:16px;font-size:12px;border:1px solid}.alert ul{margin:7px 0 0 18px}.alert.success{background:var(--green-soft);border-color:rgba(47,194,110,.35);color:#9ff2bf}.alert.error{background:var(--red-soft);border-color:rgba(255,40,61,.35);color:#ff9eaa}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat-card{background:linear-gradient(180deg,#11161d,#0e1218);border:1px solid #252c36;border-radius:11px;padding:18px;box-shadow:var(--shadow)}.stat-card span{display:block;color:var(--muted);font-size:11px}.stat-card strong{display:block;font-size:27px;margin-top:8px}.green-text{color:var(--green)}.red-text{color:#ff5163}.panel{background:linear-gradient(180deg,#11151c,#0f1319);border:1px solid #242b35;border-radius:12px;box-shadow:var(--shadow)}.panel-head{display:flex;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid #242b35}.panel-head>div:first-child{flex:1}.panel-head h2{font-size:15px;margin:0}.panel-head p{font-size:10.5px;color:var(--muted);margin:5px 0 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;border:1px solid transparent;padding:9px 13px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}.btn-primary{color:white;background:linear-gradient(135deg,#ff2a42,#bd1027);box-shadow:0 0 18px rgba(255,40,61,.2)}.btn-primary:hover{filter:brightness(1.08)}.btn-muted{color:#c5ccd6;background:#171c24;border-color:#2a313d}.btn-muted:hover{border-color:#414b5b}.btn-outline{color:#fff;background:transparent;border-color:rgba(255,40,61,.7)}.btn-success{color:white;background:#16894a;border-color:#2caf68}.btn-block{width:100%}.disabled{opacity:.4;pointer-events:none}.filter-bar{padding:14px 20px;display:grid;grid-template-columns:150px 150px minmax(190px,1fr) auto auto;gap:10px;align-items:end;border-bottom:1px solid #242b35}.filter-bar label{display:block;font-size:9px;color:var(--muted);margin-bottom:5px}.form-control{width:100%;background:#0b0f15;border:1px solid #2b333f;border-radius:8px;color:#edf1f5;padding:10px 11px;outline:none;transition:.15s;font-size:12px}.form-control:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,40,61,.08)}select.form-control{color-scheme:dark}.readonly{background:#121720;color:#8993a2}.field-label{display:block;font-size:10px;color:#aeb6c2;margin:0 0 6px;font-weight:650}.help{display:block;font-size:9px;color:#6f7b8c;margin-top:5px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:1050px}.data-table th{font-size:9px;letter-spacing:.35px;text-transform:uppercase;color:#798596;text-align:left;padding:11px 12px;border-bottom:1px solid #28303a;background:#0d1117}.data-table td{font-size:10.5px;color:#cfd5dd;padding:12px;border-bottom:1px solid #202630;vertical-align:middle}.data-table tr:hover td{background:rgba(255,255,255,.012)}.data-table td strong{color:#f6f7f9}.actions-col{min-width:430px}.row-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.row-actions form{margin:0}.action-btn{border:1px solid #303844;background:#151a21;color:#cdd4dd;border-radius:6px;padding:6px 8px;font-size:9px;cursor:pointer}.action-btn:hover{border-color:#5a6677;color:#fff}.action-btn.danger{border-color:rgba(255,40,61,.34);color:#ff7b89}.action-btn.paid-static{border-color:rgba(47,194,110,.42);color:#6ce29b;background:var(--green-soft)}.status{display:inline-flex;align-items:center;padding:5px 8px;border-radius:20px;font-size:9px;font-weight:800}.status.paid{color:#69e39a;background:var(--green-soft);border:1px solid rgba(47,194,110,.32)}.status.unpaid{color:#ff7c8c;background:var(--red-soft);border:1px solid rgba(255,40,61,.28)}.empty-cell{text-align:center!important;padding:34px!important;color:#667180!important}.pager{padding:14px 20px;display:flex;justify-content:flex-end;align-items:center;gap:10px;color:var(--muted);font-size:10px}.form-panel{overflow:hidden}.form-panel>.form-grid,.form-panel>.section-title,.form-panel>.invoice-items,.form-panel>#addItemBtn,.form-panel>.calculation-wrap{margin-left:20px;margin-right:20px}.form-grid{display:grid;gap:14px;margin-top:18px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.span-2{grid-column:span 2}.section-title{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#f1f3f6;border-bottom:1px solid #262e39;padding-bottom:8px;margin-top:25px!important;margin-bottom:0}.form-actions{padding:18px 20px;border-top:1px solid #242b35;margin-top:22px;display:flex;justify-content:flex-end;gap:9px}.sticky-actions{position:sticky;bottom:0;background:#11151c;z-index:5}.color-field{display:grid;grid-template-columns:48px 1fr;gap:8px}.color-field input[type=color]{width:48px;height:39px;border:1px solid #2b333f;background:#0b0f15;border-radius:8px;padding:3px}.current-logo{display:flex;gap:16px;align-items:center;margin-bottom:8px;padding:10px;background:#0b0f15;border:1px solid #252d38;border-radius:8px}.current-logo img{width:110px;height:60px;object-fit:contain;background:#fff;border-radius:5px}.check-row,.switch-row{display:flex;align-items:center;gap:8px;color:#b9c0ca;font-size:11px}.brand-cell{display:flex;align-items:center;gap:10px}.brand-cell img{width:42px;height:30px;object-fit:contain;background:white;border-radius:4px}.brand-cell small{display:block;color:var(--muted);margin-top:2px}.color-chip{display:inline-block;width:15px;height:15px;border-radius:4px;margin-right:6px;vertical-align:middle;border:1px solid rgba(255,255,255,.15)}.invoice-items{margin-top:14px}.item-row{display:grid;grid-template-columns:minmax(250px,1fr) 100px 145px 160px 34px;gap:9px;align-items:end;padding:12px;background:#0c1016;border:1px solid #252d37;border-radius:9px;margin-bottom:9px}.item-remove-wrap{display:flex;align-items:flex-end}.remove-row{width:32px;height:38px;background:rgba(255,40,61,.08);border:1px solid rgba(255,40,61,.32);color:#ff6676;border-radius:7px;font-size:18px;cursor:pointer}.calculation-wrap{display:grid;grid-template-columns:1fr 390px;gap:20px;margin-top:18px}.calculation-card{border:1px solid #2a323d;border-radius:9px;overflow:hidden}.calculation-card>div{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #252d37;color:#aeb6c2;font-size:11px}.calculation-card .grand-total{background:linear-gradient(135deg,rgba(255,40,61,.3),rgba(111,5,21,.2));color:white;border-bottom:0}.calculation-card .grand-total strong{font-size:15px}.form-control.compact{width:150px;padding:7px 8px;text-align:right}.invoice-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}.invoice-toolbar form{margin:0}.preview-badge{margin-left:auto;color:#ff7c8c;background:var(--red-soft);border:1px solid rgba(255,40,61,.35);border-radius:20px;padding:7px 10px;font-size:9px;font-weight:800}.invoice-preview-frame{background:#1b212a;border:1px solid #313a46;border-radius:10px;padding:20px;overflow:auto;box-shadow:var(--shadow)}.invoice-preview-frame .invoice-sheet{box-shadow:0 18px 50px rgba(0,0,0,.38)}.empty-state{padding:40px;text-align:center}.empty-state h2{margin-top:0}.empty-state p{color:var(--muted)}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.68);display:none;align-items:center;justify-content:center;z-index:100}.modal-backdrop.open{display:flex}.modal-card{width:min(420px,calc(100% - 28px));background:#11161d;border:1px solid #323a46;border-radius:12px;padding:18px;box-shadow:0 25px 80px #000}.modal-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px}.modal-head>div{flex:1}.modal-head h3{margin:0;font-size:15px}.modal-head p{margin:5px 0 0;color:var(--muted);font-size:10px}.modal-close{border:0;background:none;color:#9ca5b2;font-size:22px;cursor:pointer}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}.login-body{min-height:100vh;background:radial-gradient(circle at 18% 20%,rgba(115,5,22,.38),transparent 30%),linear-gradient(145deg,#07090d,#0b0e13 55%,#13070b);display:grid;place-items:center;padding:24px}.login-wrap{width:min(900px,100%)}.login-panel{display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;border-radius:16px;border:1px solid #2a3039;background:#0c1016;box-shadow:0 30px 100px rgba(0,0,0,.5)}.login-brand{padding:60px 52px;background:linear-gradient(135deg,rgba(255,40,61,.12),transparent 60%)}.login-brand img{width:170px;height:100px;object-fit:contain;object-position:left center}.login-brand .red-line{width:70px;height:3px;background:var(--red);margin:22px 0}.login-brand h1{font-size:35px;margin:0 0 12px}.login-brand p{color:#949ead;line-height:1.7;max-width:360px}.login-form{padding:60px 50px;border-left:1px solid #232a34}.login-form h2{margin:0;font-size:23px}.login-form>p{font-size:11px;margin:7px 0 25px}.login-form .form-control{margin-bottom:16px}.login-form .check-row{margin:2px 0 20px}
@media(max-width:1100px){.sidebar{width:220px}.main-area{margin-left:220px}.stat-grid{grid-template-columns:repeat(2,1fr)}.filter-bar{grid-template-columns:1fr 1fr}.filter-brand{grid-column:span 2}.form-grid.three{grid-template-columns:repeat(2,1fr)}.item-row{grid-template-columns:minmax(230px,1fr) 90px 130px 150px 34px}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.main-area{margin-left:0}.mobile-menu-btn{display:block}.content-area{padding:16px}.topbar{padding:0 16px}.stat-grid{grid-template-columns:1fr 1fr}.panel-head{align-items:flex-start;flex-direction:column}.filter-bar{grid-template-columns:1fr}.filter-brand{grid-column:auto}.form-grid.two,.form-grid.three{grid-template-columns:1fr}.span-2{grid-column:auto}.item-row{grid-template-columns:1fr 1fr}.item-description{grid-column:span 2}.item-remove-wrap{justify-content:flex-end}.calculation-wrap{grid-template-columns:1fr}.login-panel{grid-template-columns:1fr}.login-brand{display:none}.login-form{border-left:0;padding:38px 28px}.invoice-preview-frame{padding:8px}.invoice-preview-frame .invoice-sheet{transform-origin:top left}.actions-col{min-width:360px}}
@media(max-width:480px){.stat-grid{grid-template-columns:1fr}.form-actions{flex-wrap:wrap}.form-actions .btn{flex:1}.item-row{grid-template-columns:1fr}.item-description{grid-column:auto}.login-form{padding:32px 20px}}

/* Update 1: login, Company profiles and filter-aware dashboard */
.login-brand img{width:220px;height:125px;max-width:100%;object-fit:contain;object-position:left center}
.sidebar-brand img{width:64px;height:52px;object-fit:contain}
.password-field{position:relative;margin-bottom:16px}
.password-field .form-control{margin-bottom:0!important;padding-right:46px}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;color:#8793a4;border-radius:7px;display:grid;place-items:center;cursor:pointer}
.password-toggle:hover{color:#fff;background:#171d25}
.password-toggle svg{width:18px;height:18px;fill:currentColor}
.password-toggle .eye-closed{display:none}
.password-toggle.showing .eye-open{display:none}
.password-toggle.showing .eye-closed{display:block}
.dashboard-stats{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.stat-card.amount-card{border-color:rgba(255,40,61,.28);background:linear-gradient(180deg,rgba(255,40,61,.07),#0e1218)}
.stat-card.amount-card strong{font-size:22px;overflow-wrap:anywhere}
.avatar.avatar-image{object-fit:cover;background:#11151c}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.profile-grid>.panel:first-child{grid-column:span 2}
.profile-summary{padding:22px 20px;display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center}
.profile-photo-large,.profile-photo-placeholder{width:110px;height:110px;border-radius:50%;border:2px solid rgba(255,40,61,.42);box-shadow:0 0 24px rgba(255,40,61,.12)}
.profile-photo-large{object-fit:cover;background:#0b0f15}
.profile-photo-placeholder{display:grid;place-items:center;font-size:34px;font-weight:800;background:linear-gradient(135deg,var(--red),#6c0d1b);color:#fff}
.profile-readonly-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.profile-readonly-list>div{padding:11px 12px;border:1px solid #262e39;background:#0b0f15;border-radius:8px}
.profile-readonly-list span{display:block;color:var(--muted);font-size:9px;margin-bottom:4px}
.profile-readonly-list strong{font-size:12px;color:#eef2f6;overflow-wrap:anywhere}
@media(max-width:900px){.profile-grid{grid-template-columns:1fr}.profile-grid>.panel:first-child{grid-column:auto}.profile-summary{grid-template-columns:1fr}.profile-readonly-list{grid-template-columns:1fr}.login-brand img{width:200px;height:116px}}

/* Update 2: profile permissions, password visibility and date pickers */
.compact-password-field{margin-bottom:0}
.profile-account-edit{display:grid;grid-template-columns:110px minmax(0,1fr);gap:18px;align-items:start;padding:20px}
.profile-account-avatar{padding-top:4px}
.profile-account-fields{margin-top:0!important}
.date-picker-control{cursor:pointer;color-scheme:dark;padding-right:40px}
.date-picker-control::-webkit-calendar-picker-indicator{opacity:1;cursor:pointer;filter:invert(1) brightness(1.55);width:18px;height:18px}
.date-picker-control:hover{border-color:#4a5565}
@media(max-width:760px){.profile-account-edit{grid-template-columns:1fr}.profile-account-avatar{display:flex;justify-content:center}.profile-account-fields{grid-template-columns:1fr!important}}


/* Update 3: compact dashboard filters + keyword search */
.dashboard-filter-bar{grid-template-columns:150px 150px 190px minmax(320px,1fr) auto auto}
.dashboard-filter-bar .filter-brand{min-width:0}
.dashboard-filter-bar .filter-search{min-width:0}
.dashboard-filter-bar input[type=search]::-webkit-search-cancel-button{filter:invert(1);opacity:.65}
@media(max-width:1100px){
  .dashboard-filter-bar{grid-template-columns:1fr 1fr 200px minmax(220px,1fr)}
  .dashboard-filter-bar .filter-brand{grid-column:auto}
  .dashboard-filter-bar .filter-search{grid-column:auto}
  .dashboard-filter-bar .btn{width:100%}
}
@media(max-width:760px){
  .dashboard-filter-bar{grid-template-columns:1fr}
  .dashboard-filter-bar .filter-brand,.dashboard-filter-bar .filter-search{grid-column:auto}
}

/* Update 18: Super Admin Company + dependent Brand filters */
.dashboard-filter-bar.has-company-filter{grid-template-columns:135px 135px 185px 185px minmax(280px,1fr) auto auto}
.dashboard-filter-bar .filter-company,.dashboard-filter-bar .filter-brand,.dashboard-filter-bar .filter-search{min-width:0}
@media(max-width:1250px){
  .dashboard-filter-bar.has-company-filter{grid-template-columns:1fr 1fr 1fr 1fr}
  .dashboard-filter-bar.has-company-filter .filter-search{grid-column:span 2}
  .dashboard-filter-bar.has-company-filter .btn{width:100%}
}
@media(max-width:760px){
  .dashboard-filter-bar.has-company-filter{grid-template-columns:1fr}
  .dashboard-filter-bar.has-company-filter .filter-search{grid-column:auto}
}

/* Update 20: dashboard-only logo + clearer sidebar section headings */
.sidebar-brand img{width:58px;height:36px;max-width:58px;object-fit:contain;object-position:center center;background:transparent}
.nav-section-label{color:#ff304f;font-weight:800;text-shadow:0 0 6px rgba(255,48,79,.58),0 0 12px rgba(255,48,79,.22)}

/* Invoice Portal navigation, active state and mobile sidebar update */
.nav-link.active {
  color: #ffffff;
  background: linear-gradient(135deg, #ff304f 0%, #e71935 48%, #bd1128 100%);
  border: 1px solid rgba(255, 94, 112, .45);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px rgba(181, 16, 33, .34), 0 0 18px rgba(255, 48, 79, .22);
  font-weight: 700;
  transform: translateX(5px);
}
.nav-link.active:hover { color:#fff; background:linear-gradient(135deg,#ff405c 0%,#ec1c3a 50%,#c61129 100%); }
.mobile-menu-btn {
  width: 44px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: #161922;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.mobile-menu-btn span { display:block; width:20px; height:2px; border-radius:999px; background:#fff; transition:transform .2s ease, opacity .2s ease; }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.mobile-menu-btn[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media (max-width: 760px) {
  .sidebar { width: min(286px, 84vw); box-shadow: 14px 0 38px rgba(0,0,0,.45); z-index: 1000; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-nav { padding-bottom: 18px; }
  .nav-link.active { margin-right: -18px; padding-right: 30px; transform: none; border-radius: 12px 0 0 12px; }
  .topbar { position: sticky; top: 0; z-index: 900; min-height: 68px; }
  .content-area { padding: 16px; }
}
@media (max-width: 760px) { .mobile-menu-btn { display: inline-flex !important; flex-direction: column; } }

/* Invoice Portal login administrator contact */
.login-admin-contact { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; }
.login-admin-title { margin: 0 0 11px; color: #ff6075; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.login-admin-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; margin-top: 7px; color: #f7f9fc; text-decoration: none; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.035); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.login-admin-link span { color: #aab2c4; font-size: 12px; font-weight: 700; }
.login-admin-link strong { font-size: 12px; font-weight: 700; overflow-wrap: anywhere; text-align: right; }
.login-admin-link:hover { color: #fff; border-color: rgba(255,62,85,.55); background: rgba(255,48,79,.12); transform: translateY(-1px); }
@media (max-width: 480px) { .login-admin-link { align-items: flex-start; flex-direction: column; gap: 3px; } .login-admin-link strong { text-align: left; } }

/* WhatsApp administrator support controls */
.login-brand { display:flex; flex-direction:column; }
.login-whatsapp-admin, .whatsapp-admin-btn { display:flex; align-items:center; justify-content:center; gap:9px; color:#07150d; font-weight:800; text-decoration:none; background:linear-gradient(135deg,#4cff8d 0%,#21d66a 48%,#10b955 100%); border:1px solid rgba(125,255,173,.88); box-shadow:0 0 12px rgba(45,242,113,.62),0 0 28px rgba(22,198,83,.28),inset 0 1px 0 rgba(255,255,255,.48); transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.login-whatsapp-admin { margin-top:auto; min-height:44px; border-radius:11px; font-size:13px; }
.login-whatsapp-admin svg, .whatsapp-admin-btn svg { width:19px; height:19px; fill:currentColor; flex:none; }
.login-whatsapp-admin:hover, .whatsapp-admin-btn:hover { color:#06120b; filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 0 16px rgba(45,242,113,.8),0 0 34px rgba(22,198,83,.38); }
.whatsapp-admin-btn { width:100%; min-height:42px; margin:0 0 16px; border-radius:10px; font-size:12px; }
@media (max-width:760px) { .login-whatsapp-admin { margin-top:22px; } .whatsapp-admin-btn { margin:0 0 14px; } }

/* Tawk.to chat settings */
.tawk-settings-panel { max-width: 920px; }
.tawk-settings-form { display:grid; gap:16px; }
.toggle-row { display:flex; align-items:flex-start; gap:12px; padding:15px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.025); cursor:pointer; }
.toggle-row input { width:18px; height:18px; accent-color:#ff304f; margin-top:2px; }
.toggle-row strong, .toggle-row small { display:block; }
.toggle-row strong { color:#fff; font-size:14px; }
.toggle-row small, .tawk-note { color:#aab2c4; font-size:12px; line-height:1.55; margin-top:4px; }
.tawk-script-input { min-height:250px; resize:vertical; padding:14px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.55; }
.field-error { color:#ff7284; font-size:12px; margin-top:-8px; }
@media (max-width:760px) { .panel-head { align-items:flex-start; } .tawk-script-input { min-height:220px; } }

/* Readability refinement */
.app-body { font-size: 15px; }
.nav-link { font-size: 14px; }
.nav-section-label { font-size: 11px; letter-spacing: .1em; }
.topbar h1 { font-size: 22px; }
.topbar p, .muted, .panel-head p { font-size: 13px; }
.field-label, .check-row, .role-badge, .user-mini span { font-size: 13px; }
.form-control, .btn, table th, table td { font-size: 14px; }
table th { font-size: 11px; }
@media (max-width: 760px) { .app-body { font-size: 16px; } .nav-link { font-size: 15px; } .topbar h1 { font-size: 20px; } .form-control, .btn { font-size: 15px; } }

.status.partial{color:#f59e0b;border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.10)}
.amber-text{color:#f59e0b!important}

/* Dashboard layout refinement */
.dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dashboard-table-wrap { overflow-x: auto; }
.dashboard-table { min-width: 1320px; }
.dashboard-table th { white-space: nowrap; }
.dashboard-table td { vertical-align: middle; }
.dashboard-table .actions-col, .dashboard-table .action-cell { min-width: 285px; }
.dashboard-table .action-cell { padding-top: 12px; padding-bottom: 12px; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.row-actions form { margin: 0; display: inline-flex; }
.dashboard-table .action-btn { margin: 0; white-space: nowrap; }
.action-payment { border-color: rgba(41, 215, 125, .45); color: #b8ffd6; }
.paid-value { color: #29d77d; font-weight: 700; }
.balance-value { color: #ff4964; font-weight: 700; }

.team-section { margin-top: 26px; }
.team-section .nav-section-label { margin: 0 0 10px; }
.team-nav-item { min-height: 42px; padding: 10px 12px; border-radius: 9px; gap: 11px; }
.team-nav-item .nav-icon { flex: 0 0 20px; display: inline-grid; place-items: center; }
.team-nav-item.active { background: linear-gradient(135deg, #ff2948, #ce102b); box-shadow: 0 8px 18px rgba(233, 24, 56, .28); }

@media (max-width: 1250px) {
  .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-table { min-width: 0; }
  .dashboard-table thead { display: none; }
  .dashboard-table, .dashboard-table tbody, .dashboard-table tr, .dashboard-table td { display: block; width: 100%; }
  .dashboard-table tbody { padding: 8px; }
  .dashboard-table tr { border: 1px solid #263242; border-radius: 10px; margin: 10px 0; padding: 6px 12px; background: rgba(15, 20, 28, .76); }
  .dashboard-table td { border: 0; padding: 9px 0; display: grid; grid-template-columns: minmax(104px, 42%) 1fr; gap: 12px; text-align: right; }
  .dashboard-table td::before { content: attr(data-label); color: #93a4ba; font-size: 12px; font-weight: 700; text-align: left; }
  .dashboard-table td.action-cell { display: block; padding-top: 12px; }
  .dashboard-table td.action-cell::before { display: none; }
  .row-actions { justify-content: flex-start; }
  .dashboard-table .empty-cell { display: block; text-align: center; }
  .dashboard-table .empty-cell::before { display: none; }
}
@media (max-width: 560px) {
  .dashboard-stats { grid-template-columns: 1fr; }
  .team-section { margin-top: 22px; }
  .team-nav-item { min-height: 44px; }
}

/* Password visibility controls */
.password-field { position: relative; width: 100%; }
.password-field .form-control { padding-right: 52px; }
.password-toggle { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #9aacbf; display: inline-grid; place-items: center; font-size: 18px; line-height: 1; cursor: pointer; }
.password-toggle:hover, .password-toggle.is-visible { color: #ff3d58; background: rgba(255, 61, 88, .11); }

/* Team page layout */
.team-nav-item { display: flex !important; align-items: center !important; width: 100%; min-height: 44px; padding: 10px 12px !important; gap: 11px !important; line-height: 1.2; }
.team-nav-item .nav-icon { display: inline-grid !important; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; }
.team-nav-item span:last-child { display: block; white-space: nowrap; }
.team-table-wrap { width: 100%; }
.team-table { width: 100%; table-layout: auto; }
.team-table th, .team-table td { padding: 13px 14px; }
.team-table th:nth-child(1) { width: 21%; }
.team-table th:nth-child(2) { width: 16%; }
.team-table th:nth-child(3) { width: 34%; }
.team-table th:nth-child(4) { width: 14%; }
.team-table th:nth-child(5) { width: 15%; }
@media (max-width: 760px) {
  .team-table { min-width: 0; }
  .team-table thead { display: none; }
  .team-table, .team-table tbody, .team-table tr, .team-table td { display: block; width: 100%; }
  .team-table tbody { padding: 8px; }
  .team-table tr { border: 1px solid #263242; border-radius: 10px; margin: 10px 0; padding: 6px 12px; background: rgba(15, 20, 28, .76); }
  .team-table td { border: 0; padding: 9px 0; display: grid; grid-template-columns: minmax(94px, 40%) 1fr; gap: 12px; text-align: right; }
  .team-table td:nth-child(1)::before { content: 'Name'; }
  .team-table td:nth-child(2)::before { content: 'Username'; }
  .team-table td:nth-child(3)::before { content: 'Email'; }
  .team-table td:nth-child(4)::before { content: 'Status'; }
  .team-table td:nth-child(5)::before { content: 'Actions'; }
  .team-table td::before { color: #93a4ba; font-size: 12px; font-weight: 700; text-align: left; }
}
/* Brighter partial-payment status */
.status.partial{background:rgba(255,174,0,.18)!important;border:1px solid #ffba2f!important;color:#ffd45e!important;box-shadow:0 0 14px rgba(255,174,0,.22);font-weight:800;}
.status.partial:hover{background:rgba(255,174,0,.27)!important;color:#fff1b8!important;box-shadow:0 0 18px rgba(255,174,0,.34);}

/* Desktop sidebar collapse control */
.desktop-sidebar-toggle{display:none}
@media (min-width:769px){
.desktop-sidebar-toggle{display:flex;position:absolute;z-index:5;top:18px;right:-14px;width:28px;height:28px;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px;border:1px solid #394555;border-radius:50%;background:#111821;box-shadow:0 5px 15px rgba(0,0,0,.28);cursor:pointer;transition:.2s ease}
.desktop-sidebar-toggle:hover{border-color:#ff3652;background:#19222d;box-shadow:0 0 14px rgba(255,44,70,.26)}
.desktop-sidebar-toggle span{display:block;width:11px;height:1px;background:#e8eef7;transition:transform .2s ease}
.app-shell.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)}
.app-shell.sidebar-collapsed .sidebar{width:76px;min-width:76px;overflow:visible}
.app-shell.sidebar-collapsed .desktop-sidebar-toggle span:first-child{transform:rotate(45deg) translate(2px,2px)}
.app-shell.sidebar-collapsed .desktop-sidebar-toggle span:last-child{transform:rotate(-45deg) translate(2px,-2px)}
.app-shell.sidebar-collapsed .sidebar-brand{justify-content:center;padding-left:8px;padding-right:8px}
.app-shell.sidebar-collapsed .sidebar-brand .brand-copy,.app-shell.sidebar-collapsed .sidebar-brand .brand-text,.app-shell.sidebar-collapsed .nav-section-label,.app-shell.sidebar-collapsed .nav-link span:last-child,.app-shell.sidebar-collapsed .user-mini,.app-shell.sidebar-collapsed .logout-button{display:none}
.app-shell.sidebar-collapsed .sidebar-nav{padding-left:12px;padding-right:12px}
.app-shell.sidebar-collapsed .nav-link{justify-content:center;padding-left:0;padding-right:0}
.app-shell.sidebar-collapsed .nav-icon{margin:0}
.app-shell.sidebar-collapsed .sidebar-footer{padding:12px 10px}
.app-shell.sidebar-collapsed .whatsapp-admin-btn{width:46px;min-width:46px;height:46px;min-height:46px;margin:0 auto;padding:0;border-radius:50%;justify-content:center;box-shadow:0 0 16px rgba(22,255,130,.42)}
.app-shell.sidebar-collapsed .whatsapp-admin-btn span{display:none}
.app-shell.sidebar-collapsed .whatsapp-admin-btn svg{width:21px;height:21px}
}
@media (max-width:768px){.desktop-sidebar-toggle{display:none!important}}
@media (min-width:769px){
  .sidebar-v2,.main-area{transition:width .22s ease,margin-left .22s ease}
  .app-shell.sidebar-collapsed .main-area{margin-left:76px}
}

/* Refined collapsed sidebar controls */
@media (min-width:769px){
.desktop-sidebar-toggle{font-size:0}
.desktop-sidebar-toggle span{display:none!important}
.desktop-sidebar-toggle:before{content:"";width:8px;height:8px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin-left:4px}
.app-shell.sidebar-collapsed .desktop-sidebar-toggle:before{transform:rotate(225deg);margin-left:-4px}
.app-shell.sidebar-collapsed .sidebar-brand>div{display:none!important}
.app-shell.sidebar-collapsed .sidebar-brand img{max-width:46px;height:auto}
.app-shell.sidebar-collapsed .nav-link{position:relative}
.app-shell.sidebar-collapsed .nav-link:after{content:attr(data-tooltip);position:absolute;left:58px;top:50%;transform:translateY(-50%) translateX(-4px);z-index:40;min-width:max-content;padding:8px 11px;border:1px solid #3b4553;border-radius:7px;background:#111821;color:#f7fbff;font-size:12px;font-weight:700;letter-spacing:.1px;box-shadow:0 8px 22px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.app-shell.sidebar-collapsed .nav-link:hover:after{opacity:1;transform:translateY(-50%) translateX(4px)}
.logout-btn{width:100%;min-height:42px;border:1px solid #e53548!important;border-radius:11px!important;background:linear-gradient(135deg,rgba(236,28,58,.15),rgba(114,12,28,.15))!important;color:#ff9aa7!important;font-weight:800;letter-spacing:.2px;box-shadow:0 0 14px rgba(236,28,58,.12);transition:.2s ease}
.logout-btn:hover{background:linear-gradient(135deg,rgba(236,28,58,.29),rgba(114,12,28,.24))!important;color:#fff!important;border-color:#ff5269!important;box-shadow:0 0 20px rgba(236,28,58,.3)}
.logout-power{display:none}
.app-shell.sidebar-collapsed .sidebar-footer form{position:relative;margin-top:10px}
.app-shell.sidebar-collapsed .logout-btn{display:flex!important;width:46px!important;min-width:46px;height:46px;min-height:46px;margin:0 auto;padding:0;align-items:center;justify-content:center;border-radius:50%!important;background:linear-gradient(135deg,#ff3652,#b70e29)!important;border-color:#ff596d!important;color:#fff!important;box-shadow:0 0 17px rgba(236,28,58,.38)}
.app-shell.sidebar-collapsed .logout-label{display:none}
.app-shell.sidebar-collapsed .logout-power{display:block;font-size:22px;line-height:1}
.app-shell.sidebar-collapsed .sidebar-footer form:after{content:"Logout";position:absolute;left:58px;top:50%;transform:translateY(-50%) translateX(-4px);z-index:40;padding:8px 11px;border:1px solid #3b4553;border-radius:7px;background:#111821;color:#f7fbff;font-size:12px;font-weight:700;box-shadow:0 8px 22px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:.16s ease}
.app-shell.sidebar-collapsed .sidebar-footer form:hover:after{opacity:1;transform:translateY(-50%) translateX(4px)}
}
/* Collapse reliability and native hover labels */
html,body{overflow-x:hidden!important}
@media (min-width:769px){
  .desktop-sidebar-toggle{right:8px}
  .app-shell.sidebar-collapsed .sidebar{overflow-x:hidden!important}
  .app-shell.sidebar-collapsed .nav-item{position:relative;justify-content:center;padding-left:0;padding-right:0;white-space:nowrap}
  .app-shell.sidebar-collapsed .nav-item span:last-child{display:none!important}
  .app-shell.sidebar-collapsed .nav-item .nav-icon{margin:0}
  .app-shell.sidebar-collapsed .nav-link:after,.app-shell.sidebar-collapsed .nav-item:after{display:none!important}
}
.company-role-badge{color:#8effb5;border-color:rgba(34,197,94,.72);background:rgba(20,83,45,.30);box-shadow:0 0 8px rgba(34,197,94,.28),inset 0 0 0 1px rgba(134,239,172,.08);text-shadow:0 0 4px rgba(134,239,172,.34)}

.profile-badge-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.role-badge.super-admin-badge{color:#fff;border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.07);box-shadow:0 0 7px rgba(255,255,255,.12);text-shadow:none}.role-badge.team-role-badge{color:#ffe18a;border-color:rgba(250,204,21,.76);background:rgba(113,63,18,.30);box-shadow:0 0 8px rgba(250,204,21,.26),inset 0 0 0 1px rgba(254,240,138,.08);text-shadow:0 0 4px rgba(254,240,138,.30)}.profile-type-badge{font-size:9px;font-weight:800;letter-spacing:.65px;padding:6px 8px;border-radius:20px;white-space:nowrap}.company-profile-type{color:#CFD5DD;border:1px solid rgba(34,197,94,.48);background:rgba(20,83,45,.18)}.team-profile-type{color:#CFD5DD;border:1px solid rgba(250,204,21,.52);background:rgba(113,63,18,.18)}