/* KARKOUR NET — AI REDESIGN 2026
   Presentation layer only. No IDs, data structures, or JS behaviors are changed. */
:root{
  --ai-bg:#eef3f8;--ai-surface:rgba(255,255,255,.88);--ai-surface-strong:#fff;
  --ai-border:#dfe7f0;--ai-text:#122033;--ai-muted:#708096;--ai-accent:#315efb;
  --ai-accent2:#00a6a6;--ai-success:#0b9f73;--ai-warning:#d18a12;--ai-danger:#e04b5a;
  --ai-shadow:0 18px 50px rgba(27,49,76,.10);--ai-radius:22px;
}
html{background:var(--ai-bg)}
body{font-family:Inter,Tahoma,Arial,sans-serif!important;color:var(--ai-text)!important;background:var(--ai-bg)!important;letter-spacing:.05px}
body.karkour-bg-active{background:transparent!important}
body.karkour-nature-active{background-color:#dce6ef!important}
body.karkour-nature-active:after{background:linear-gradient(180deg,rgba(238,243,248,.62),rgba(238,243,248,.84))!important}
.app,.standalone-app{background:transparent!important}
.main,.standalone-main{background:transparent!important}

/* Navigation: compact, elevated, clearly separated from workspace */
.sidebar{width:252px!important;padding:18px 13px!important;background:rgba(247,250,253,.90)!important;border-left:1px solid rgba(202,214,229,.8)!important;box-shadow:-16px 0 42px rgba(33,54,79,.08)!important;backdrop-filter:blur(18px)!important}
.brand{padding:12px 13px 20px!important;margin-bottom:12px!important;border-bottom:0!important}
.brand b{display:flex;align-items:center;gap:9px;color:#142744!important;font-size:21px!important}
.brand b:before{content:'K';display:grid;place-items:center;width:35px;height:35px;border-radius:12px;background:linear-gradient(145deg,#315efb,#15b7b1);color:#fff;font-size:17px;box-shadow:0 8px 18px rgba(49,94,251,.22)}
.brand small{margin-top:8px!important;color:#8795a7!important;font-size:11px!important}
.profile{margin:0 3px 14px!important;padding:13px!important;background:linear-gradient(135deg,#f4f8ff,#eef8f7)!important;border:1px solid #dfe8f2!important;border-radius:17px!important}
.profile strong{color:#173052!important}.profile span{color:#8291a5!important}
.nav{padding:2px 2px}.nav button{position:relative;padding:11px 13px!important;margin:3px 0!important;border-radius:13px!important;color:#64758b!important;font-size:13px!important;font-weight:800!important}
.nav button:hover,.nav button.active{background:#eaf0ff!important;color:#2f5bea!important;transform:none!important}
.nav button.active:before{content:'';position:absolute;right:-2px;top:9px;bottom:9px;width:3px;border-radius:4px;background:#315efb}
.nav-group-title{padding:16px 13px 6px!important;border-top:0!important;color:#a1adbc!important;font-size:10px!important;letter-spacing:.5px}
.nav .support{border-radius:13px!important;background:#e7faf4!important;border-color:#bfeadd!important;color:#07815d!important}

/* Workspace */
.main{margin-right:252px!important;width:calc(100% - 252px)!important;padding:0 30px 44px!important}
.topbar,.standalone-topbar{min-height:74px!important;padding:12px 4px!important;border:0!important;border-bottom:1px solid rgba(210,220,232,.75)!important;border-radius:0!important;background:rgba(238,243,248,.72)!important;box-shadow:none!important;backdrop-filter:blur(16px)!important}
body.karkour-nature-active .topbar,body.karkour-nature-active .standalone-topbar{background:rgba(246,249,252,.70)!important}
.topbar h1{color:#162942!important;font-size:21px!important;font-weight:900!important}
.topbar .iconbtn,.topbar .primary,.topbar .account-pill,.topbar a{border:1px solid #dce5ef!important;background:#fff!important;color:#40546d!important;box-shadow:0 5px 16px rgba(35,58,84,.07)!important;border-radius:12px!important}
.topbar .primary{background:#315efb!important;border-color:#315efb!important;color:#fff!important}
.topbar .iconbtn:hover,.topbar .account-pill:hover,.topbar a:hover{border-color:#b9c9dc!important;background:#fff!important;transform:translateY(-1px)!important}
.dashboard{padding-top:28px!important}

/* Home hero becomes a clean command center */
.home-hero{padding:28px 30px!important;margin-bottom:22px!important;border:1px solid rgba(218,227,238,.9)!important;border-radius:26px!important;background:linear-gradient(135deg,#172a48 0%,#244a72 48%,#167b78 100%)!important;box-shadow:0 22px 55px rgba(30,63,96,.20)!important}
.home-hero:after{width:330px!important;height:330px!important;left:auto!important;right:-150px!important;top:-190px!important;background:rgba(255,255,255,.08)!important}
.home-hero h2{font-size:28px!important;color:#fff!important}.home-hero p{color:#d8e5f2!important}.home-date{color:#9fe9df!important}
.home-action{border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.10)!important;color:#fff!important;backdrop-filter:blur(10px);border-radius:12px!important}
.home-action.primary{background:#fff!important;color:#234fc8!important;border-color:#fff!important}.home-action.green{background:#0ca37f!important;border-color:#0ca37f!important;color:#fff!important}

/* KPI cards — completely new geometry */
.cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.card{min-height:142px!important;padding:20px!important;border:1px solid rgba(218,227,238,.95)!important;border-radius:20px!important;background:rgba(255,255,255,.91)!important;box-shadow:var(--ai-shadow)!important;transition:transform .2s,box-shadow .2s!important}
.card:before{height:0!important}.card:hover{transform:translateY(-4px)!important;box-shadow:0 24px 55px rgba(30,55,85,.14)!important}
.card .label{color:#718198!important;font-size:12px!important}.card .value{font-size:34px!important;color:#142942!important;margin-top:14px!important;letter-spacing:-1px}
.card.green .value{color:#078b67!important}.card.yellow .value{color:#b9780d!important}.card.red .value{color:#d94052!important}.card.cyan .value{color:#008b9d!important}.card.purple .value{color:#6842cc!important}
.card .sub{color:#9aa7b7!important;font-size:10px!important}

.home-section-title{margin:26px 0 12px!important}.home-section-title h3{font-size:15px!important;color:#203652!important}.home-section-title span{color:#91a0b2!important}
.home-panel,.section,.notification-panel,.panel-card{border:1px solid rgba(218,227,238,.95)!important;background:rgba(255,255,255,.90)!important;border-radius:20px!important;box-shadow:var(--ai-shadow)!important;backdrop-filter:blur(12px)!important}
.home-panel{padding:18px!important}.home-panel-head b,.section-head h2,.panel-card h3{color:#1c3552!important}
.quick-grid{gap:10px!important}.quick-item{background:#f6f9fc!important;border:1px solid #e3eaf2!important;border-radius:15px!important;color:#243c59!important;padding:13px!important}
.quick-item:hover{background:#fff!important;border-color:#cdd9e7!important;transform:translateY(-2px)!important}.quick-icon{background:#e9eff8!important}.quick-item small{color:#8593a5!important}
.home-row{border-bottom-color:#e9eef4!important}.home-row-main b{color:#29415e!important}.home-row-main small{color:#8a98a9!important}.home-date-badge{background:#edf3ff!important;color:#315efb!important}.home-date-badge.warn{background:#fff5dc!important;color:#aa720e!important}.home-date-badge.danger{background:#fff0f2!important;color:#d94052!important}
.home-footer-note{background:#f7fafc!important;border-color:#dce5ef!important;color:#78889c!important}

/* Forms / tables / lists */
.search,input,select,.darkinput{background:#f8fafc!important;border:1px solid #dce5ee!important;color:#172a43!important;border-radius:12px!important}
.search:focus,input:focus,select:focus{border-color:#8eabdc!important;box-shadow:0 0 0 4px rgba(49,94,251,.08)!important}
th{color:#8b99aa!important;border-bottom-color:#e6ecf2!important}td{color:#344b65!important;border-bottom-color:#edf1f5!important}
.badge{border-radius:9px!important}.owe{background:#fff0f2!important;color:#d63e50!important}.paid{background:#e7faf3!important;color:#07815d!important}
.sm{background:#eef3f8!important;color:#4e6279!important;border:1px solid #dce5ee!important;border-radius:9px!important}.sm.danger{background:#fff0f2!important;color:#d63e50!important}.sm.renew{background:#fff6df!important;color:#a9720b!important}
.btn-green{background:#0b9f73!important}.btn-cyan{background:#078e9d!important}.btn-yellow{background:#c28718!important}.btn-red{background:#d94052!important}.btn-blue{background:#315efb!important}

/* Modals */
.overlay{background:rgba(11,24,40,.46)!important;backdrop-filter:blur(7px)!important}.modal{background:#fff!important;border:1px solid #dce5ee!important;border-radius:24px!important;box-shadow:0 30px 90px rgba(16,35,58,.28)!important;color:#19314e!important}.modal h2{color:#18314f!important}.modal label{color:#687a90!important}.cancel{background:#edf2f7!important;color:#52667c!important;border:1px solid #dce5ee!important}

/* Secondary pages */
.page{max-width:1400px!important}.page-head{background:rgba(255,255,255,.90)!important;border:1px solid #dfe7f0!important;border-radius:20px!important;box-shadow:var(--ai-shadow)!important;padding:19px 21px!important}.page-head h2{color:#1b3552!important}.page-head p{color:#7c8b9e!important}
.package-item,.provider-item,.template-item,.stock-item,.notify-box,.payment-summary>div,.payment-debt-item,.payment-empty{background:#f8fafc!important;border-color:#dfe7f0!important;color:#29425f!important}
.notify-help,.muted{color:#8190a2!important}.notify-count{color:#008e9f!important}

/* Auth gate */
.auth-gate{background:linear-gradient(135deg,rgba(10,26,45,.90),rgba(24,74,94,.88))!important;backdrop-filter:blur(16px)!important}
.auth-gate .modal,.auth-gate>div{border-radius:24px!important}

/* Dark mode remains available, but with a new charcoal/navy visual language */
body.theme-dark,html.theme-dark{--ai-bg:#0a111c;--ai-surface:rgba(18,29,45,.94);--ai-border:#26374d;--ai-text:#eaf1fb;--ai-muted:#8c9bb0}
body.theme-dark{background:#0a111c!important;color:#eaf1fb!important}
body.theme-dark.karkour-bg-active{background:transparent!important}
body.theme-dark .sidebar{background:rgba(11,19,31,.94)!important;border-left-color:#26374d!important}
body.theme-dark .brand b,body.theme-dark .profile strong,body.theme-dark .topbar h1,body.theme-dark .section-head h2,body.theme-dark .panel-card h3,body.theme-dark .home-section-title h3{color:#edf4fc!important}
body.theme-dark .brand small,body.theme-dark .profile span{color:#7f90a6!important}
body.theme-dark .profile{background:#121f31!important;border-color:#26374d!important}
body.theme-dark .nav button{color:#9aaac0!important}.theme-dark .nav button:hover,.theme-dark .nav button.active{background:#172a44!important;color:#73a7ff!important}
body.theme-dark .topbar,body.theme-dark .standalone-topbar{background:rgba(10,17,28,.76)!important;border-bottom-color:#26374d!important}
body.theme-dark .topbar .iconbtn,body.theme-dark .topbar .primary,body.theme-dark .topbar .account-pill,body.theme-dark .topbar a{background:#142236!important;border-color:#2a3d57!important;color:#d8e6f5!important}
body.theme-dark .card,body.theme-dark .home-panel,body.theme-dark .section,body.theme-dark .notification-panel,body.theme-dark .panel-card,body.theme-dark .page-head{background:rgba(17,28,43,.94)!important;border-color:#273a51!important;color:#eaf1fb!important}
body.theme-dark .card .label,body.theme-dark .card .sub,body.theme-dark .home-section-title span,body.theme-dark .home-panel-head b,body.theme-dark .home-row-main b{color:#a4b2c5!important}
body.theme-dark .card .value{color:#f0f6ff!important}.theme-dark .card.green .value{color:#35d6a6!important}.theme-dark .card.red .value{color:#ff7582!important}.theme-dark .card.yellow .value{color:#ffd064!important}.theme-dark .card.cyan .value{color:#4dd9e5!important}.theme-dark .card.purple .value{color:#b697ff!important}
body.theme-dark .quick-item{background:#142235!important;border-color:#293d55!important;color:#dce8f6!important}.theme-dark .quick-icon{background:#1b304a!important}
body.theme-dark .search,body.theme-dark input,body.theme-dark select,body.theme-dark .darkinput{background:#0d1827!important;border-color:#2b3e56!important;color:#edf5ff!important}
body.theme-dark th{color:#8293a8!important}body.theme-dark td{color:#c8d4e2!important;border-bottom-color:#25364b!important}
body.theme-dark .modal{background:#121f31!important;border-color:#2c4058!important;color:#e9f1fb!important}.theme-dark .modal h2{color:#f2f7fd!important}.theme-dark .modal label{color:#9cacbf!important}.theme-dark .cancel{background:#1a2a3e!important;color:#c8d5e3!important;border-color:#2b3d55!important}
body.theme-dark .package-item,body.theme-dark .provider-item,body.theme-dark .template-item,body.theme-dark .stock-item,body.theme-dark .notify-box,body.theme-dark .payment-summary>div,body.theme-dark .payment-debt-item{background:#0f1b2b!important;border-color:#2a3d55!important;color:#d8e5f3!important}
body.theme-dark .home-footer-note{background:#0d1928!important;border-color:#2a3d55!important;color:#8ea0b6!important}
body.theme-dark .home-action{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.16)!important}

/* Mobile */
@media(max-width:1050px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:780px){
 .sidebar{width:min(292px,88vw)!important}.main{margin-right:0!important;width:100%!important;padding:0 13px 32px!important}
 .topbar,.standalone-topbar{padding:10px 0!important}.dashboard{padding-top:18px!important}.cards{gap:10px!important}.card{min-height:120px!important;padding:15px!important;border-radius:17px!important}.card .value{font-size:27px!important;margin-top:10px!important}
 .home-hero{padding:21px 18px!important;border-radius:21px!important}.home-hero h2{font-size:21px!important}.home-grid{grid-template-columns:1fr!important}
 .home-action{flex:1;min-width:0}.page-head{border-radius:17px!important}.section,.notification-panel,.panel-card{border-radius:17px!important}
}
@media(max-width:480px){.cards{grid-template-columns:1fr 1fr!important}.card .label{font-size:11px!important}.card .value{font-size:24px!important}.home-action{flex-basis:100%}.quick-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:360px){.cards{grid-template-columns:1fr!important}.quick-grid{grid-template-columns:1fr!important}}