
/* Kelaro Admin — prebuilt local stylesheet. No CDN or runtime compiler required.
   Source Tailwind entry: ../src/css/input.css (Tailwind CSS 4.3.3). */
:root{font-family:Tahoma,"Segoe UI","Noto Sans Arabic",Arial,sans-serif;color:#e6eaf4;background:#0b1020;font-synthesis:none;text-rendering:optimizeLegibility;--bg:#0b1020;--sidebar:#0e1425;--panel:#121a2d;--panel-2:#161f34;--border:#222d43;--muted:#8995ad;--text:#e6eaf4;--purple:#8b5cf6;--purple2:#a78bfa}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:13px}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:252px;background:var(--sidebar);border-right:1px solid var(--border);padding:24px 15px 14px;display:flex;flex-direction:column;z-index:30;transition:transform .25s}.brand{height:37px;display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700;letter-spacing:-.7px;padding:0 9px}.brand-mark{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#a78bfa,#6d28d9);color:white;font-weight:800;box-shadow:0 5px 20px #7c3aed33}.brand-light{font-weight:500;color:#aab3c7}.pro-badge{font-size:9px;letter-spacing:.5px;padding:3px 5px;border-radius:5px;background:#32245a;color:#c4b5fd;margin-left:auto}.workspace{display:flex;align-items:center;gap:10px;background:#151d30;border:1px solid #263149;border-radius:10px;margin:28px 0 23px;padding:11px 10px}.workspace-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#312453;color:#c4b5fd;font-size:19px}.workspace b,.user-mini b{display:block;font-size:11px;font-weight:600}.workspace small,.user-mini small{display:block;font-size:10px;color:var(--muted);margin-top:4px}.chevron{margin-left:auto;color:var(--muted)}.nav-label{font-size:9px;font-weight:700;letter-spacing:1.2px;color:#65718a;margin:0 10px 9px}.nav-item{height:40px;display:flex;align-items:center;gap:12px;padding:0 11px;border-radius:8px;color:#9aa6bd;margin:3px 0;font-size:12px;transition:.18s}.nav-item:hover{background:#192238;color:#fff}.nav-item.active{background:linear-gradient(90deg,#6d3bd1,#7546d8);color:#fff;box-shadow:0 6px 18px #6d28d933}.nav-icon{font-size:17px;width:17px;text-align:center;color:#8f9ab0}.nav-item.active .nav-icon{color:#fff}.nav-count{margin-left:auto;border-radius:5px;padding:3px 6px;background:#293650;color:#c8d1e4;font-size:10px}.notification-dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:#a78bfa}.nav-label-spaced{margin-top:27px}.sidebar-bottom{margin-top:auto}.upgrade-card{padding:15px 13px 13px;border:1px solid #30264f;border-radius:11px;background:linear-gradient(150deg,#1b1a36,#15192c);margin-bottom:15px}.upgrade-icon{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:#38275d;color:#c4b5fd;font-size:17px;margin-bottom:12px}.upgrade-card b{font-size:11px}.upgrade-card p{font-size:10px;color:#929db4;line-height:1.6;margin:7px 0 13px}.button{border:1px solid transparent;border-radius:7px;padding:10px 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:11px;white-space:nowrap;transition:filter .15s,transform .15s}.button:hover{filter:brightness(1.12)}.button:active{transform:translateY(1px)}.button-primary{background:#8051e8;color:white;box-shadow:0 3px 12px #6d28d922}.button-secondary{background:#151e31;border-color:#29354d;color:#c5cde0}.button-full{width:100%}.user-mini{display:flex;align-items:center;gap:9px;padding:10px 4px 0;border-top:1px solid var(--border)}.user-mini>span{flex:1}.avatar{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:9px;font-weight:700;flex-shrink:0}.avatar-purple{background:#41316e;color:#d9ccff}.avatar-small{width:31px;height:31px}.avatar-pink{background:#512b4c;color:#ffc4e6}.avatar-blue{background:#203e65;color:#a9d2ff}.avatar-green{background:#1c4d42;color:#9af0d4}.avatar-orange{background:#593e2a;color:#ffd1a6}.icon-button{border:1px solid #28334a;background:#151e31;color:#aeb8cc;border-radius:8px;width:33px;height:33px;display:grid;place-items:center;font-size:17px;position:relative}.user-mini .icon-button{border:0;background:transparent;font-size:19px}.main-area{margin-left:252px;min-height:100vh}.topbar{height:69px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 31px;background:#0d1323d9;position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}.breadcrumb{display:flex;gap:11px;align-items:center;color:#8793aa;font-size:11px}.crumb-sep{color:#3d4860}.breadcrumb b{font-weight:600;color:#e6eaf4}.topbar-actions{display:flex;align-items:center;gap:11px}.search-box{height:34px;width:225px;border:1px solid #28334a;border-radius:8px;background:#121a2b;display:flex;align-items:center;gap:8px;padding:0 9px;color:#75829a}.search-box>span{font-size:20px}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:10px}.search-box input::placeholder{color:#77839b}.search-box kbd{font-size:9px;white-space:nowrap;border:1px solid #303b52;border-radius:4px;padding:3px 4px;color:#7e8aa2}.notification-button i{position:absolute;right:7px;top:6px;width:5px;height:5px;border-radius:50%;background:#a78bfa;border:1px solid #151e31}.mobile-menu{display:none}.page-content{max-width:1700px;padding:30px 31px 20px;margin:auto}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{color:#9b7cf5;letter-spacing:1.4px;font-weight:700;font-size:9px;margin:0 0 8px}.page-heading h1{font-size:24px;letter-spacing:-.7px;margin:0;font-weight:650}.muted{color:var(--muted);font-size:11px;margin:8px 0 0}.heading-actions{display:flex;gap:9px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:17px}.stat-card,.panel{border:1px solid var(--border);background:var(--panel);border-radius:11px}.stat-card{padding:17px 17px 14px;min-width:0}.stat-top{display:flex;align-items:center;justify-content:space-between;color:#9ba7bd;font-size:11px}.stat-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;font-size:15px}.purple-icon{color:#c4b5fd;background:#312451}.blue-icon{color:#93c5fd;background:#1c3150}.green-icon{color:#86efac;background:#193c35}.orange-icon{color:#fdba74;background:#422d22}.stat-value{font-size:25px;font-weight:650;letter-spacing:-.8px;display:flex;align-items:center;gap:10px;margin:15px 0 14px;white-space:nowrap}.trend{font-size:9px;font-weight:600;letter-spacing:0;border-radius:5px;padding:4px 5px}.trend-up{background:#14382f;color:#6ee7b7}.trend-down{background:#42242b;color:#fda4af}.stat-foot{display:flex;align-items:center;justify-content:space-between;gap:5px;color:#76829b;font-size:9px}.mini-bars{height:21px;display:flex;align-items:flex-end;gap:3px}.mini-bars i{display:block;width:4px;height:35%;background:#8b5cf6;border-radius:2px 2px 0 0}.mini-bars i:nth-child(2){height:58%}.mini-bars i:nth-child(3){height:42%}.mini-bars i:nth-child(4){height:75%}.mini-bars i:nth-child(5){height:54%}.mini-bars i:nth-child(6){height:90%}.mini-bars i:nth-child(7){height:65%}.mini-bars i:nth-child(8){height:100%}.mini-bars i:nth-child(9){height:76%}.mini-bars i:nth-child(10){height:95%}.blue-bars i{background:#60a5fa}.green-bars i{background:#34d399}.orange-bars i{background:#fb923c}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(275px,1fr);gap:16px;margin-bottom:17px}.panel{padding:19px;min-width:0}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.panel h2{font-size:13px;font-weight:650;margin:0}.panel-header .muted{font-size:10px;margin-top:6px}.select-button{background:#172136;border:1px solid #2a3650;color:#b7c1d4;border-radius:6px;padding:7px 9px;font-size:10px}.chart-legend{display:flex;align-items:center;gap:17px;margin-top:23px;font-size:10px;color:#9aa6bc}.chart-legend>span{display:flex;align-items:center;gap:6px}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.primary-dot{background:#9b75f6}.secondary-dot{background:#52647f}.chart-legend strong{margin-left:auto;font-size:18px;color:#f0f2f8}.chart-legend em{font-style:normal;font-size:9px;color:#6ee7b7;margin-left:5px}.chart-wrap{height:194px;display:flex;margin-top:16px}.y-labels{display:flex;flex-direction:column;justify-content:space-between;color:#68758f;font-size:9px;padding:0 10px 0 0;width:39px;flex-shrink:0}.revenue-chart{height:100%;width:calc(100% - 39px);overflow:visible}.chart-grid path{stroke:#263148;stroke-width:1;stroke-dasharray:4 5;fill:none}.area-fill{fill:url(#area)}.line-main,.line-secondary{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5}.line-main{stroke:#9b75f6}.line-secondary{stroke:#536782;stroke-width:2}.x-labels{display:flex;justify-content:space-between;padding-left:39px;color:#6f7b94;font-size:9px;margin-top:8px}.donut-wrap{display:grid;place-items:center;padding:21px 0 18px}.donut{width:156px;height:156px;border-radius:50%;background:conic-gradient(#8b5cf6 0 42%,#60a5fa 42% 70%,#22d3ee 70% 88%,#fb923c 88% 100%);display:grid;place-items:center;position:relative}.donut:before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--panel)}.donut-center{z-index:1;text-align:center}.donut-center strong{display:block;font-size:23px;letter-spacing:-.7px}.donut-center span{display:block;font-size:10px;color:var(--muted);margin-top:5px}.traffic-list{display:grid;gap:13px}.traffic-list>div,.traffic-list>div>span{display:flex;align-items:center;justify-content:space-between}.traffic-list>div>span{justify-content:flex-start;gap:8px;color:#a4afc4;font-size:10px}.traffic-list b{font-size:10px;font-weight:600}.source-dot{width:7px;height:7px;border-radius:50%}.source-purple{background:#8b5cf6}.source-blue{background:#60a5fa}.source-cyan{background:#22d3ee}.source-orange{background:#fb923c}.bottom-grid{grid-template-columns:minmax(0,1.8fr) minmax(275px,1fr)}.orders-panel{padding-bottom:7px}.text-link{font-size:10px;color:#b8a1ff;font-weight:600;white-space:nowrap}.table-scroll{overflow-x:auto;margin-top:20px}table{border-collapse:collapse;width:100%;min-width:560px;text-align:left}th{font-size:9px;color:#74819a;letter-spacing:.5px;font-weight:600;padding:0 9px 12px;border-bottom:1px solid #253047}td{padding:12px 9px;border-bottom:1px solid #202b40;color:#929eb4;font-size:10px;white-space:nowrap}tbody tr:last-child td{border-bottom:0}.order-id{font-weight:600;color:#c5b5ff}.customer-cell{display:flex;align-items:center;gap:8px;color:#d4d9e5}.customer-cell .avatar{width:25px;height:25px}.amount{font-weight:600;color:#e4e8f2}.status{padding:5px 7px;border-radius:5px;font-size:9px;font-weight:600}.status-success{background:#15392f;color:#6ee7b7}.status-pending{background:#45351c;color:#fcd34d}.status-cancelled{background:#42242b;color:#fda4af}.activity-list{margin-top:20px}.activity-item{display:flex;gap:10px;position:relative;padding-bottom:20px}.activity-item:not(:last-child):after{content:"";position:absolute;top:29px;bottom:4px;left:14px;width:1px;background:#2b3650}.activity-icon{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;z-index:1;flex-shrink:0}.activity-purple{background:#30234c;color:#c4b5fd}.activity-green{background:#193b32;color:#6ee7b7}.activity-blue{background:#1c3150;color:#93c5fd}.activity-orange{background:#422e21;color:#fdba74}.activity-item p{font-size:10px;line-height:1.5;margin:2px 0 5px;color:#a4afc4}.activity-item p b{color:#e2e6ef;font-weight:600}.activity-item small{font-size:9px;color:#71809a}.activity-button{margin-top:2px}.footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 1px 0;color:#6f7b93;font-size:9px}.footer>span:last-child{display:flex;align-items:center;gap:19px}.footer a:hover{color:#c4b5fd}.tag-label{padding:4px 6px;border:1px solid #2b3650;border-radius:5px;color:#8793aa}.toast{position:fixed;bottom:22px;right:24px;z-index:80;padding:12px 16px;background:#202a40;border:1px solid #394661;border-radius:9px;color:#e9edf6;box-shadow:0 12px 40px #0005;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;font-size:12px}.toast.show{opacity:1;transform:translateY(0)}.mobile-overlay{display:none}
html[dir="rtl"] body{font-family:Tahoma,"Segoe UI","Noto Sans Arabic",Arial,sans-serif}html[dir="rtl"] .sidebar{left:auto;right:0;border-right:0;border-left:1px solid var(--border)}html[dir="rtl"] .main-area{margin-left:0;margin-right:252px}html[dir="rtl"] .pro-badge{margin-left:0;margin-right:auto}html[dir="rtl"] .nav-count{margin-left:0;margin-right:auto}html[dir="rtl"] .notification-dot{margin-left:0;margin-right:auto}html[dir="rtl"] .search-box kbd{direction:ltr}html[dir="rtl"] .stat-value{letter-spacing:0}html[dir="rtl"] .chart-legend strong{margin-left:0;margin-right:auto}html[dir="rtl"] .y-labels{padding:0 0 0 10px}html[dir="rtl"] .x-labels{padding-left:0;padding-right:39px}html[dir="rtl"] th,html[dir="rtl"] td{text-align:right}html[dir="rtl"] .activity-item:not(:last-child):after{left:auto;right:14px}html[dir="rtl"] .footer>span:last-child{flex-direction:row-reverse}
body.light{--bg:#f4f6fb;--sidebar:#fff;--panel:#fff;--panel-2:#f8f9fd;--border:#e4e8f1;--muted:#77839b;--text:#202a3d;color:var(--text)}body.light .topbar{background:#ffffffdc}body.light .breadcrumb b{color:#202a3d}body.light .workspace,body.light .search-box,body.light .button-secondary,body.light .select-button,body.light .icon-button{background:#f7f8fc;border-color:#e2e7f0;color:#66728a}body.light .stat-card,body.light .panel{box-shadow:0 3px 12px #25375b08}body.light .upgrade-card{background:#f8f5ff;border-color:#e8dcff}body.light .upgrade-card b{color:#35265b}body.light .donut:before{background:#fff}body.light td{border-color:#eef0f6;color:#68758a}body.light .customer-cell,body.light .amount,body.light .activity-item p b{color:#2b354a}body.light .chart-grid path{stroke:#e7eaf2}body.light .user-mini b{color:#273249}body.light .search-box input{color:#202a3d}body.light .search-box kbd{border-color:#e0e5ef}body.light .nav-item{color:#68758a}body.light .nav-item:hover{background:#f2f0fc;color:#47317c}body.light .nav-item.active{color:white}body.light .workspace{background:#f7f8fc}body.light .workspace b{color:#263249}body.light .panel h2{color:#263249}body.light .stat-value{color:#202a3d}
@media(max-width:1250px){.page-content{padding:25px 22px}.topbar{padding:0 22px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-value{font-size:23px}.dashboard-grid{grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr)}.search-box{width:190px}}
@media(max-width:950px){.sidebar{transform:translateX(-100%)}html[dir="rtl"] .sidebar{transform:translateX(100%)}.sidebar.open{transform:translateX(0)}.main-area{margin-left:0}html[dir="rtl"] .main-area{margin-right:0}.mobile-menu{display:grid}.topbar{gap:12px}.breadcrumb{margin-right:auto}.search-box{width:190px}.mobile-overlay.show{display:block;position:fixed;inset:0;background:#02061799;z-index:25}.dashboard-grid,.bottom-grid{grid-template-columns:1fr}.traffic-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:25px}.traffic-panel .panel-header{grid-column:1/-1}.traffic-panel .donut-wrap{padding:22px 0}.traffic-list{align-self:center}.sidebar{box-shadow:15px 0 50px #0003}html[dir="rtl"] .sidebar{box-shadow:-15px 0 50px #0003}}
@media(max-width:620px){.topbar{height:60px;padding:0 14px}.topbar-actions{gap:6px}.search-box{width:34px;padding:0;justify-content:center;border:0;background:transparent}.search-box>span{font-size:23px}.search-box input,.search-box kbd{display:none}.topbar .breadcrumb{font-size:10px;gap:7px}.topbar-actions .avatar{display:none}.page-content{padding:23px 14px 17px}.page-heading{align-items:flex-start;flex-direction:column;gap:15px}.page-heading h1{font-size:21px}.heading-actions{width:100%}.heading-actions .button{flex:1}.stats-grid{gap:10px}.stat-card{padding:13px 11px}.stat-value{font-size:20px;gap:6px;flex-wrap:wrap;margin:13px 0}.trend{font-size:8px}.stat-foot{font-size:8px;align-items:flex-start;flex-direction:column}.mini-bars{height:15px}.panel{padding:15px}.chart-legend{gap:9px;flex-wrap:wrap}.chart-legend strong{font-size:15px}.chart-wrap{height:165px}.traffic-panel{display:block}.traffic-panel .donut-wrap{padding:22px 0}.traffic-list{padding:0 5px}.footer{align-items:flex-start;flex-direction:column}.footer>span:last-child{gap:14px}.toast{right:14px;left:14px;bottom:14px;text-align:center}}

/* Standalone file + mobile navigation fixes */

@media (max-width: 950px) {
  .sidebar { left: auto; right: 0; transform: translateX(105%); }
  html[dir="ltr"] .sidebar { left: 0; right: auto; transform: translateX(-105%); }
  html[dir="rtl"] .sidebar.open { transform: translateX(0); }
  html[dir="ltr"] .sidebar.open { transform: translateX(0); }
  .mobile-overlay.show { display:block; position:fixed; inset:0; background:rgba(2,6,23,.68); z-index:25; cursor:pointer; }
  .sidebar { max-width: min(86vw, 300px); overflow-y:auto; overscroll-behavior:contain; }
  .sidebar-bottom { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-foot { flex-direction:row; align-items:center; }
  .mini-bars { height:18px; }
  .page-content { padding-inline:11px; }
  .heading-actions { gap:7px; }
}
/* RTL desktop alignment: keep the sidebar and content on matching sides. */
html[dir="rtl"] .sidebar { left:auto; right:0; border-right:0; border-left:1px solid var(--border); }
html[dir="rtl"] .main-area { margin-left:0; margin-right:252px; }
@media (max-width:950px) {
  html[dir="rtl"] .main-area { margin-right:0; }
}
/* Improved keyboard focus and touch interactions. */
button,a,input { -webkit-tap-highlight-color: transparent; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid #a78bfa; outline-offset:2px; }



/* Kelaro Admin multi-page additions */
.nav { margin-top: 29px; }
.brand { flex-shrink: 0; }
.sidebar-bottom { margin-top: auto; }
.sidebar .user-mini { margin-top: 20px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text); }
.three-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
.table-panel { margin-bottom: 17px; }
.table-panel .panel-header { margin-bottom: 12px; }
.orders-toolbar,.product-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.orders-toolbar > div:first-child h2 { margin:0; font-size:13px; }
.orders-toolbar > div:first-child .muted { margin:6px 0 0; font-size:10px; }
.filter-pills { display:flex; gap:5px; flex-wrap:wrap; }
.filter-pill,.page-number { border:1px solid var(--border); background:var(--panel-2); color:var(--muted); padding:8px 11px; border-radius:7px; font-size:10px; line-height:1.3; }
.filter-pill.active,.page-number.active { color:#fff; border-color:#7045d4; background:#7045d4; }
.inline-search { min-height:35px; width:min(100%,245px); display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--border); border-radius:8px; color:var(--muted); background:var(--panel-2); }
.inline-search input { flex:1; width:0; min-width:0; background:transparent; color:var(--text); border:0; outline:0; font-size:11px; }
.table-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 2px 2px; color:var(--muted); font-size:10px; }
.table-pagination>div { display:flex; align-items:center; gap:5px; }
.table-pagination .icon-button { width:29px; height:29px; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.product-card { min-width:0; overflow:hidden; background:var(--panel); border:1px solid var(--border); border-radius:12px; }
.product-art { height:145px; position:relative; display:grid; place-items:center; overflow:hidden; }
.product-art:before,.product-art:after { content:""; position:absolute; border:1px solid #ffffff22; border-radius:50%; width:160px; height:160px; }
.product-art:after { width:220px; height:220px; }
.product-art>span { font-size:58px; color:#ffffffcc; text-shadow:0 8px 26px #0003; z-index:1; }
.product-art>small { position:absolute; top:12px; left:12px; border:1px solid #ffffff3a; background:#ffffff20; color:white; border-radius:5px; padding:4px 6px; font-size:8px; letter-spacing:.8px; }
.art-purple { background:radial-gradient(circle at 50% 30%,#9c7bf5,#422875); }
.art-blue { background:radial-gradient(circle at 50% 30%,#78a9ff,#1b3765); }
.art-orange { background:radial-gradient(circle at 50% 30%,#ffc078,#87431e); }
.art-green { background:radial-gradient(circle at 50% 30%,#75d8b0,#1d594c); }
.art-pink { background:radial-gradient(circle at 50% 30%,#f4a6da,#753f77); }
.art-cyan { background:radial-gradient(circle at 50% 30%,#80e4ef,#245d74); }
.product-info { padding:15px; }
.product-category { font-size:8px; letter-spacing:.8px; color:#a78bfa; font-weight:700; }
.product-info h2 { font-size:14px; margin:8px 0 5px; }
.product-info>.muted { font-size:10px; margin:0; }
.product-meta,.product-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.product-meta { padding:15px 0 12px; border-bottom:1px solid var(--border); }
.product-meta>b { font-size:14px; }
.stock { font-size:9px; padding:5px 7px; border-radius:5px; }
.stock-good { background:#15392f; color:#6ee7b7; }
.stock-low { background:#45351c; color:#fcd34d; }
.product-footer { padding-top:11px; color:#fbbf24; font-size:11px; }
.product-footer small { color:var(--muted); }
body.light .product-card { box-shadow:0 3px 12px #25375b08; }
.channel-bars { display:grid; gap:20px; margin:24px 0; }
.channel-label { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:10px; margin-bottom:9px; }
.channel-label b { color:var(--text); }
.progress { height:7px; border-radius:99px; background:var(--panel-2); overflow:hidden; }
.progress i { display:block; height:100%; border-radius:99px; background:#8b5cf6; }
.blue-progress i { background:#60a5fa; }.cyan-progress i { background:#22d3ee; }.orange-progress i { background:#fb923c; }
.insight-box { display:flex; align-items:flex-start; gap:10px; padding:13px; border-radius:9px; border:1px solid #44316b; background:#241b3d; }
.insight-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:7px; background:#473073; color:#d2c1ff; flex-shrink:0; }
.insight-box b { font-size:11px; }.insight-box p { margin:5px 0 0; font-size:10px; line-height:1.8; color:#b6aacd; }
body.light .insight-box { background:#faf7ff; border-color:#e8dcff; } body.light .insight-box p { color:#736a89; }
.messages-layout { display:grid; grid-template-columns:minmax(250px, .78fr) minmax(0,1.6fr); gap:0; min-height:590px; overflow:hidden; padding:0; }
.conversation-list { border-left:1px solid var(--border); padding:18px 12px; min-width:0; }
html[dir="ltr"] .conversation-list { border-left:0; border-right:1px solid var(--border); }
.conversation-list-head { display:flex; justify-content:space-between; align-items:center; padding:0 5px 12px; }
.conversation-list-head h2 { margin:0; font-size:14px; }
.conversation-search { width:100%; margin-bottom:12px; }
.conversation { display:flex; align-items:center; gap:9px; width:100%; border:0; text-align:inherit; background:transparent; color:var(--text); border-radius:9px; padding:10px 8px; }
.conversation:hover,.conversation.active { background:var(--panel-2); }
.conversation .avatar { flex-shrink:0; }
.conversation-copy { min-width:0; flex:1; }
.conversation-copy b,.conversation-copy small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conversation-copy b { font-size:10px; margin-bottom:5px; }
.conversation-copy small { color:var(--muted); font-size:9px; }
.conversation-time { align-self:flex-start; color:var(--muted); font-size:8px; white-space:nowrap; }
.chat-area { display:flex; flex-direction:column; min-width:0; }
.chat-header { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border); }
.chat-header .customer-cell { gap:10px; }
.chat-header .customer-cell b,.chat-header .customer-cell small { display:block; font-size:11px; }
.chat-header .customer-cell small { font-size:9px; margin-top:4px; }
.online-state { color:#6ee7b7; }
.chat-messages { flex:1; padding:22px 20px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-height:360px; }
.chat-day { align-self:center; color:var(--muted); font-size:9px; padding:5px 10px; background:var(--panel-2); border-radius:99px; margin-bottom:6px; }
.message { max-width:min(80%,410px); padding:11px 12px 8px; border-radius:12px; }
.message p { font-size:11px; line-height:1.9; margin:0; }
.message small { display:block; text-align:end; font-size:8px; color:var(--muted); margin-top:4px; }
.message.received { background:var(--panel-2); border:1px solid var(--border); border-top-right-radius:3px; }
.message.sent { align-self:flex-end; background:#382761; border:1px solid #553b8f; border-top-left-radius:3px; }
html[dir="ltr"] .message.received { border-top-right-radius:12px; border-top-left-radius:3px; } html[dir="ltr"] .message.sent { border-top-left-radius:12px; border-top-right-radius:3px; }
.read-check { color:#a78bfa; }
.chat-compose { display:flex; align-items:center; gap:8px; padding:12px; margin:0 14px 14px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2); }
.chat-compose input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:11px; }
.send-button { border:0; border-radius:8px; width:34px; height:34px; color:white; background:#7144d5; transform:rotate(0); }
html[dir="rtl"] .send-button { transform:scaleX(-1); }
.calendar-layout { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(245px,.8fr); gap:16px; }
.calendar-panel { min-width:0; }
.calendar-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.calendar-month,.calendar-views { display:flex; align-items:center; gap:8px; }
.calendar-month h2 { margin:0 5px; font-size:14px; }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.calendar-weekdays>div { text-align:center; color:var(--muted); font-size:9px; padding:11px 1px; border-bottom:1px solid var(--border); }
.calendar-day { min-height:91px; padding:7px 5px; border-left:1px solid var(--border); border-bottom:1px solid var(--border); min-width:0; color:var(--text); font-size:10px; }
.calendar-day:nth-child(7n) { border-left:0; } html[dir="ltr"] .calendar-day { border-left:0; border-right:1px solid var(--border); } html[dir="ltr"] .calendar-day:nth-child(7n) { border-right:0; }
.calendar-day>span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; }
.calendar-day.today-day>span { background:#7144d5; color:white; }
.muted-day { color:#526079; }
.event-tag { display:block; padding:5px 4px; border-radius:4px; margin-top:5px; font-size:8px; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.event-purple { color:#c4b5fd; background:#352656; }.event-blue { color:#93c5fd; background:#1d3454; }.event-green { color:#6ee7b7; background:#1b3b32; }.event-orange { color:#fdba74; background:#462e20; }
.upcoming-panel .panel-header { margin-bottom:12px; }
.event-list { display:grid; }
.event-item { display:flex; gap:11px; padding:15px 0; border-bottom:1px solid var(--border); }
.event-item:last-child { border-bottom:0; }
.event-date { display:flex; flex-direction:column; align-items:center; justify-content:center; width:43px; height:47px; border-radius:8px; flex-shrink:0; }
.event-date b { font-size:16px; }.event-date small { font-size:8px; margin-top:2px; }
.event-date-purple { background:#352656; color:#c4b5fd; }.event-date-blue { background:#1d3454; color:#93c5fd; }.event-date-green { background:#1b3b32; color:#6ee7b7; }.event-date-orange { background:#462e20; color:#fdba74; }
.event-item>div>b { font-size:10px; }.event-item p { margin:5px 0; font-size:9px; color:var(--muted); }.event-item>div>small { color:var(--muted); font-size:8px; }
.settings-layout { display:grid; grid-template-columns:205px minmax(0,1fr); align-items:start; gap:16px; }
.settings-nav { padding:12px; }
.settings-nav .nav-label { margin:8px 9px 12px; }
.settings-link { display:flex; align-items:center; gap:11px; padding:11px 10px; margin:3px 0; border-radius:8px; font-size:11px; color:var(--muted); }
.settings-link>span:first-child { width:17px; text-align:center; font-size:15px; }
.settings-link:hover,.settings-link.active { background:#2a2141; color:#c4b5fd; }
.settings-content { min-width:0; display:grid; gap:16px; }
.settings-section { padding:21px; }
.settings-section-head { padding-bottom:17px; border-bottom:1px solid var(--border); margin-bottom:17px; }
.settings-section-head h2 { margin:0; font-size:14px; }.settings-section-head p { margin:6px 0 0; font-size:10px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field { display:grid; gap:8px; color:var(--muted); font-size:10px; }
.field input,.field select { min-width:0; width:100%; height:38px; border:1px solid var(--border); border-radius:7px; padding:0 11px; background:var(--panel-2); color:var(--text); outline:0; font-size:11px; }
.settings-separator { border-top:1px solid var(--border); margin:21px 0 5px; }
.settings-row,.danger-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:15px 0; border-bottom:1px solid var(--border); }
.settings-row b,.danger-row b { font-size:11px; }.settings-row p,.danger-row p { font-size:10px; line-height:1.7; margin:5px 0 0; }
.switch { position:relative; display:inline-flex; flex-shrink:0; }
.switch input { position:absolute; opacity:0; width:1px; height:1px; }
.switch span { width:38px; height:22px; background:#38445d; border-radius:99px; transition:.2s; position:relative; cursor:pointer; }
.switch span:after { content:""; width:16px; height:16px; background:white; border-radius:50%; position:absolute; top:3px; left:3px; transition:.2s; }
.switch input:checked+span { background:#7144d5; }.switch input:checked+span:after { transform:translateX(16px); }
html[dir="rtl"] .switch span:after { left:auto; right:3px; } html[dir="rtl"] .switch input:checked+span:after { transform:translateX(-16px); }
.settings-actions { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.danger-row { border:0; padding:4px 0 0; }.danger-row .button { flex-shrink:0; }
body.light .settings-link:hover,body.light .settings-link.active { background:#f1eaff; color:#6840ba; }
body.light .insight-box { color:#35265b; }
@media (min-width:951px) { .mobile-menu { display:none; } }
@media (max-width:1100px) { .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .calendar-layout { grid-template-columns:minmax(0,1fr); } .upcoming-panel .event-list { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; } }
@media (max-width:950px) { .main-area { margin:0 !important; } html[dir="rtl"] .main-area { margin:0 !important; } .sidebar { left:auto; right:0; transform:translateX(105%); } html[dir="ltr"] .sidebar { left:0; right:auto; transform:translateX(-105%); } .sidebar.open { transform:translateX(0); } .dashboard-grid,.calendar-layout { grid-template-columns:minmax(0,1fr); } .settings-layout { grid-template-columns:1fr; } .settings-nav { display:flex; gap:5px; overflow-x:auto; align-items:center; } .settings-nav .nav-label { display:none; } .settings-link { white-space:nowrap; } }
@media (max-width:700px) { .three-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .product-art { height:110px; } .product-info { padding:11px; } .product-info h2 { font-size:12px; } .product-meta { align-items:flex-start; flex-direction:column; } .messages-layout { grid-template-columns:minmax(0,1fr); } .conversation-list { border-left:0; border-bottom:1px solid var(--border); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; } .conversation-list-head,.conversation-search { grid-column:1/-1; } .conversation { padding:8px 6px; } .conversation-time { display:none; } .chat-messages { min-height:300px; } .calendar-day { min-height:68px; padding:4px 2px; font-size:9px; } .event-tag { font-size:7px; padding:4px 2px; } .upcoming-panel .event-list { grid-template-columns:1fr; } .form-grid { grid-template-columns:1fr; } .settings-section { padding:15px; } }
@media (max-width:420px) { .three-stats,.product-grid { grid-template-columns:1fr; } .product-art { height:145px; } .orders-toolbar,.product-toolbar { align-items:stretch; } .inline-search { width:100%; } .filter-pills { overflow:auto; flex-wrap:nowrap; max-width:100%; } .filter-pill { white-space:nowrap; } .calendar-views .filter-pill { padding:7px 8px; } .calendar-day { min-height:56px; } .event-tag { max-height:18px; } .conversation-list { grid-template-columns:minmax(0,1fr); } .conversation { display:flex; } .conversation-time { display:block; } .settings-row,.danger-row { align-items:flex-start; } .footer>span:last-child { flex-wrap:wrap; } }

@media (max-width:620px) { .search-box { width:clamp(105px,31vw,180px); padding:0 8px; border:1px solid var(--border); background:var(--panel); justify-content:flex-start; } .search-box input { display:block; min-width:0; font-size:10px; } .search-box kbd { display:none; } }

/* Local create-record modal */
.entity-modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(3,7,18,.72);backdrop-filter:blur(7px);overflow-y:auto}
.entity-modal{width:min(100%,560px);max-height:min(90vh,780px);overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 90px #0008;padding:22px;color:var(--text)}
.entity-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:22px;padding-bottom:17px;border-bottom:1px solid var(--border)}
.entity-modal-header .eyebrow{margin:0 0 7px}.entity-modal-header h2{margin:0;font-size:18px;font-weight:700}
.entity-form-grid{gap:15px}.modal-field-full{grid-column:1/-1}
.entity-modal .field{min-width:0}.entity-modal .field input,.entity-modal .field select{height:42px;font-size:12px}
.entity-modal .field input:focus,.entity-modal .field select:focus{border-color:#9873f5;box-shadow:0 0 0 3px #8b5cf626}
.entity-modal-actions{display:flex;justify-content:flex-start;gap:9px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.modal-error{min-height:16px;margin:10px 0 0;color:#fda4af;font-size:11px;line-height:1.8}
body.modal-open{overflow:hidden}
.footer{flex-wrap:wrap}.footer-credit{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;line-height:2}.footer-credit b{font-weight:700;color:var(--text)}.footer-credit a{color:#b8a1ff;text-decoration:underline;text-underline-offset:3px}.footer-links{display:flex;align-items:center;gap:17px;flex-wrap:wrap}.footer-links a{white-space:nowrap}.footer-links .tag-label:hover{border-color:#8b5cf6;color:#c4b5fd}
.sidebar{overflow-y:auto;overscroll-behavior:contain}.sidebar-bottom{padding-bottom:2px}
@media(max-width:620px){.entity-modal{padding:16px;border-radius:13px;max-height:calc(100dvh - 24px)}.entity-form-grid{grid-template-columns:minmax(0,1fr)}.modal-field-full{grid-column:auto}.entity-modal-actions{position:sticky;bottom:-16px;background:var(--panel);padding:12px 0 4px}.footer-credit{font-size:10px}.footer-links{gap:13px}.search-box input{font-size:9px!important}}
@media(max-width:380px){.topbar{padding:0 9px}.topbar-actions{gap:4px}.search-box{width:100px}.topbar .breadcrumb{max-width:72px;overflow:hidden;white-space:nowrap}.icon-button{width:30px;height:30px}}

/* Search fields without decorative glyphs or keyboard shortcut badges. */
.search-box>span,.search-box kbd,.inline-search>span{display:none!important}
.inline-search{gap:0}
@media(max-width:620px){.search-box{width:clamp(92px,28vw,150px);padding:0 8px;border:1px solid var(--border);background:var(--panel);justify-content:flex-start}.search-box input{display:block;min-width:0;width:100%;font-size:10px!important}.search-box kbd{display:none!important}}
/* Record management actions */
.record-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.record-action{border:1px solid var(--border);border-radius:6px;background:var(--panel-2);color:var(--muted);padding:6px 9px;font-size:10px;line-height:1.4;white-space:nowrap}
.record-action:hover{border-color:#8b5cf6;color:var(--text)}
.record-action-delete{color:#fda4af;border-color:#55303c}
.record-action-delete:hover{background:#42242b;color:#fff}
.product-footer{align-items:center;gap:8px;flex-wrap:wrap}
.product-footer .record-actions{width:100%;padding-top:8px;border-top:1px solid var(--border)}


/* Functional settings tabs, calendar event actions, and order/customer table controls */
.settings-section[hidden]{display:none!important}
.event-remove-button{margin-inline-start:auto;align-self:flex-start;border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:6px;width:25px;height:25px;line-height:1;font-size:17px;flex:0 0 auto}
.event-remove-button:hover{border-color:#f87171;color:#fca5a5}
#ordersTable th:last-child,#customersTable th:last-child{min-width:92px}
#ordersTable .record-action{padding:6px 11px}
#customersTable .record-actions{min-width:96px}
.footer-separator{color:var(--muted);padding-inline:2px}
.calendar-day .event-tag{max-width:100%;cursor:default}
@media(max-width:620px){#customersTable,#ordersTable{min-width:720px}.settings-nav{scrollbar-width:thin}.settings-link{font-size:10px;padding:10px 8px}.event-item{min-width:0}}


/* Accent themes available in Settings > Appearance (all values are implemented). */
body[data-accent="purple"] { --kelaro-accent:#8051e8; --kelaro-accent-soft:#30234c; --kelaro-accent-light:#c4b5fd; --kelaro-accent-shadow:#6d28d922; --kelaro-active-from:#6d3bd1; --kelaro-active-to:#7546d8; }
body[data-accent="blue"] { --kelaro-accent:#2563eb; --kelaro-accent-soft:#1c3150; --kelaro-accent-light:#93c5fd; --kelaro-accent-shadow:#2563eb33; --kelaro-active-from:#1d4ed8; --kelaro-active-to:#2563eb; }
body[data-accent="green"] { --kelaro-accent:#059669; --kelaro-accent-soft:#193c35; --kelaro-accent-light:#86efac; --kelaro-accent-shadow:#05966933; --kelaro-active-from:#047857; --kelaro-active-to:#059669; }
body[data-accent] .button-primary { background:var(--kelaro-accent); box-shadow:0 3px 12px var(--kelaro-accent-shadow); }
body[data-accent] .nav-item.active { background:linear-gradient(90deg,var(--kelaro-active-from),var(--kelaro-active-to)); box-shadow:0 6px 18px var(--kelaro-accent-shadow); }
body[data-accent] .settings-link:hover,body[data-accent] .settings-link.active { background:var(--kelaro-accent-soft); color:var(--kelaro-accent-light); }
body.light[data-accent] .settings-link:hover,body.light[data-accent] .settings-link.active { background:color-mix(in srgb,var(--kelaro-accent) 11%,white); color:var(--kelaro-accent); }
body[data-accent] .brand-mark { background:linear-gradient(145deg,var(--kelaro-accent-light),var(--kelaro-active-from)); box-shadow:0 5px 20px var(--kelaro-accent-shadow); }
body[data-accent] .eyebrow,body[data-accent] .footer-credit a,body[data-accent] .text-link { color:var(--kelaro-accent-light); }
body.light[data-accent] .eyebrow,body.light[data-accent] .footer-credit a,body.light[data-accent] .text-link { color:var(--kelaro-accent); }
body[data-accent] .order-id { color:var(--kelaro-accent-light); }
body[data-accent] .entity-modal .field input:focus,body[data-accent] .entity-modal .field select:focus { border-color:var(--kelaro-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--kelaro-accent) 18%,transparent); }
body[data-accent] .settings-link>span:first-child { color:inherit; }
/* Footer has a fixed RTL sequence in both Persian and English mode. */
.footer { justify-content:flex-start; }
.footer > .footer-credit { direction:rtl; unicode-bidi:isolate; flex-direction:row !important; justify-content:flex-start; gap:5px; }
.footer-credit a { text-decoration:none; }
.footer-credit a:hover { text-decoration:underline; text-underline-offset:3px; }
body[data-accent] .filter-pill.active,body[data-accent] .page-number.active { background:var(--kelaro-accent); border-color:var(--kelaro-accent); color:#fff; }
body[data-accent] .switch input:checked+span { background:var(--kelaro-accent); }
body[data-accent] .line-main { stroke:var(--kelaro-accent-light); }
body[data-accent] .mini-bars i { background:var(--kelaro-accent); }
body[data-accent] .notification-dot,body[data-accent] .notification-button i { background:var(--kelaro-accent-light); }
body[data-accent] .event-tag { outline-color:var(--kelaro-accent); }
.footer-credit a b { color:inherit; }

/* Uniform typography across every page and form control. */
html, body, body *, body *::before, body *::after { font-family: Tahoma, "Segoe UI", "Noto Sans Arabic", Arial, sans-serif !important; }

/* Functional account menu attached to the three-dot sidebar control. */
.sidebar .user-mini { position: relative; }
.profile-dropdown { position: absolute; z-index: 75; inset-inline-end: 0; bottom: calc(100% + 9px); width: 188px; padding: 6px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel); box-shadow: 0 16px 45px #0006; display: grid; gap: 3px; }
.profile-dropdown-item { display: flex; width: 100%; align-items: center; padding: 10px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--text); text-align: start; font-size: 11px; text-decoration: none; cursor: pointer; }
.profile-dropdown-item:hover { background: var(--panel-2); color: #bba5ff; }
.profile-dropdown-danger { color: #fda4af; }
body.light .profile-dropdown { box-shadow: 0 12px 35px #25375b20; }
body.light .profile-dropdown-item:hover { background: #f1edfb; }

/* Compose-message form fields */
.entity-modal .field textarea { min-width: 0; width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 7px; padding: 10px 11px; background: var(--panel-2); color: var(--text); outline: 0; font-size: 12px; line-height: 1.8; }
.entity-modal .field textarea:focus { border-color: #9873f5; box-shadow: 0 0 0 3px #8b5cf626; }


/* ==========================================================================
   Kelaro Admin - design refinement layer (typography, depth, icons, contrast)
   ========================================================================== */
:root{--k-accent:var(--kelaro-accent,#8051e8);--k-accent-light:var(--kelaro-accent-light,#a78bfa);--k-accent-shadow:var(--kelaro-accent-shadow,#6d28d933);--k-ring:0 0 0 3px color-mix(in srgb,var(--k-accent) 28%,transparent);--k-radius:14px;--k-shadow:0 1px 2px #00000026,0 8px 24px -12px #00000080}
body{font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased;letter-spacing:0}
body.light{--muted:#5b677e;--k-shadow:0 1px 2px #1b274408,0 10px 28px -14px #1b274433}
::selection{background:color-mix(in srgb,var(--k-accent) 35%,transparent)}

/* focus + motion */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--k-accent-light);outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:var(--k-accent);box-shadow:var(--k-ring);outline:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
*{scrollbar-width:thin;scrollbar-color:#3b4660 transparent}
body.light *{scrollbar-color:#c4cbda transparent}

/* surfaces */
.stat-card,.panel,.product-card{border-radius:var(--k-radius);box-shadow:var(--k-shadow);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.stat-card:hover,.product-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--k-accent) 45%,var(--border))}
.panel{padding:22px}
.topbar{backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}

/* sidebar + brand */
.brand{font-size:19px;letter-spacing:-.2px}
.brand-mark{width:34px;height:34px;border-radius:11px;font-size:17px;background:linear-gradient(140deg,var(--k-accent-light),var(--k-accent) 55%,#4c1d95);box-shadow:inset 0 1px 0 #ffffff55,0 8px 22px var(--k-accent-shadow)}
.nav-label{font-size:11px;letter-spacing:1.2px;font-weight:700;color:#7d8aa5}
body.light .nav-label{color:#6b778d}
.nav-item{height:42px;font-size:13.5px;font-weight:500;border-radius:10px;position:relative}
.nav-item:hover{background:color-mix(in srgb,var(--k-accent) 10%,transparent);color:var(--text)}
.nav-icon{display:grid;place-items:center;width:20px;height:20px;font-size:0;flex:none}
.nav-icon svg{width:19px;height:19px}
.nav-item.active{font-weight:600}
.nav-item.active:before{content:"";position:absolute;inset-block:9px;inset-inline-start:-14px;width:4px;border-radius:0 4px 4px 0;background:var(--k-accent-light)}
html[dir="rtl"] .nav-item.active:before{border-radius:4px 0 0 4px}
.nav-count{font-size:11px;min-width:22px;height:20px;display:inline-grid;place-items:center;border-radius:999px}
.user-mini small{font-size:11px}
.user-mini b{font-size:13px}

/* icon chips */
.stat-icon{width:38px;height:38px;border-radius:11px;font-size:0}
.stat-icon svg{width:18px;height:18px}
.insight-icon svg{display:block}
.icon-button{border-radius:10px;transition:background .15s,border-color .15s,color .15s}
.icon-button:hover{border-color:color-mix(in srgb,var(--k-accent) 50%,var(--border));color:var(--text)}
.button{font-size:13px;font-weight:600;border-radius:10px;min-height:38px;gap:8px;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s}
.button svg{flex:none}
.button:hover{transform:translateY(-1px)}
.button:active{transform:none}
.button-primary{background:linear-gradient(180deg,var(--k-accent-light),var(--k-accent));box-shadow:inset 0 1px 0 #ffffff40,0 6px 16px -4px var(--k-accent-shadow)}
.button-secondary:hover{border-color:color-mix(in srgb,var(--k-accent) 50%,var(--border))}

/* typography scale (nothing below 11px) */
.page-heading h1{font-size:28px;font-weight:800;letter-spacing:-.3px;line-height:1.35}
.eyebrow{font-size:12px;letter-spacing:.6px}
.muted{font-size:13px;line-height:1.7}
.panel-header .muted,.orders-toolbar>div:first-child .muted,.product-info>.muted{font-size:12px}
.panel h2,.panel-header h2{font-size:16px;font-weight:700}
.stat-top{font-size:13px}
.stat-value{font-size:28px;font-weight:800;letter-spacing:-.4px}
.stat-foot,.trend{font-size:11.5px}
.trend{font-weight:700;padding:3px 8px;border-radius:999px}
.mini-bars{height:24px}
.chart-legend{font-size:12px}
.chart-legend strong{font-size:20px}
.chart-legend em{font-size:12px}
.y-labels span,.x-labels span,.chart-wrap small{font-size:11px;color:#8794ad}
body.light .y-labels span,body.light .x-labels span{color:#6b778d}
.traffic-list{font-size:13px}
.activity-item p{font-size:13px;line-height:1.6}
.activity-item small{font-size:11.5px}
.avatar{font-size:11px;font-weight:700}
.status,.stock{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px}

/* tables */
table{font-size:13px}
th{font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:none;padding:12px 14px}
td{font-size:13px;padding:14px;transition:background .15s}
tbody tr:hover td{background:color-mix(in srgb,var(--k-accent) 6%,transparent)}
.customer-cell,.amount,.order-id{font-size:13px}
.order-id,.text-link{font-weight:600}
.filter-pill,.record-action,.page-number{font-size:12px;border-radius:9px}
.filter-pill{padding:7px 14px}
.record-action{padding:6px 12px}
.page-number{min-width:30px;height:30px}
.crumb-sep{color:#8b97ae}
.breadcrumb{font-size:13px}
.search-box input{font-size:13px}

/* forms */
.field span,label.field>span{font-size:12.5px;font-weight:600}
input,select,textarea{font-size:13.5px;border-radius:10px}
.entity-modal{border-radius:18px;box-shadow:0 30px 80px -20px #000000b3}

/* products: varied artwork instead of one purple tile */
.product-art{height:150px}
.product-art>small{font-size:10.5px;padding:4px 8px;border-radius:7px}
.product-info h2{font-size:15px}
.product-category{font-size:11px;letter-spacing:.5px;font-weight:700}
.product-grid .product-card:nth-child(6n+2) .product-art{background:radial-gradient(circle at 50% 30%,#78a9ff,#1b3765)}
.product-grid .product-card:nth-child(6n+3) .product-art{background:radial-gradient(circle at 50% 30%,#75d8b0,#1d594c)}
.product-grid .product-card:nth-child(6n+4) .product-art{background:radial-gradient(circle at 50% 30%,#ffc078,#87431e)}
.product-grid .product-card:nth-child(6n+5) .product-art{background:radial-gradient(circle at 50% 30%,#f4a6da,#753f77)}
.product-grid .product-card:nth-child(6n+6) .product-art{background:radial-gradient(circle at 50% 30%,#80e4ef,#245d74)}

/* messages */
.conversation-time{font-size:11px}
.conversation-copy small,.chat-day,.message small{font-size:11.5px}
.message p{font-size:13.5px;line-height:1.7}
.online-state{font-size:11px}

/* footer */
.footer{font-size:12px}
.footer-credit a b{font-weight:700}

/* light-mode contrast fixes (values were tuned for the dark theme) */
body.light .stat-top>span:first-child,body.light .chart-legend span,body.light .traffic-list span,body.light .stat-foot,body.light .activity-item p{color:#46526a}
body.light .chart-legend strong,body.light .stat-value{color:#161f33}
body.light .chart-legend em{color:#0b7a4f}
body.light .order-id,body.light .text-link{color:#6d3bd1}
body.light .product-footer span,body.light .product-footer span small{color:#9a5b00}
body.light .record-action-delete{color:#b42318;border-color:#f1c0bb}
body.light .online-state{color:#0b7a4f}
body.light .filter-pill,body.light .record-action,body.light .page-number{color:#46526a}
body.light .filter-pill.active,body.light .page-number.active{color:#fff}
body.light .product-category{color:#6d3bd1}
body.light .activity-item small,body.light .conversation-time,body.light .message small{color:#68758d}
body.light .crumb-sep{color:#8a95aa}
body.light .brand-light{color:#6b778d}

/* small screens: keep the larger type, tighten spacing */
@media(max-width:620px){
 .page-heading h1{font-size:23px}
 .panel{padding:16px}
 .stat-value{font-size:23px}
 .stat-foot,.trend{font-size:11px}
 .stat-card{padding:15px 13px}
 .stat-icon{width:34px;height:34px}
 .muted{font-size:12.5px}
 .nav-item.active:before{inset-inline-start:-10px}
 .eyebrow{font-size:11.5px}
 .chart-legend strong{font-size:17px}
 .status,.stock{font-size:11px}
}

/* refinement layer - part 2 (calendar, settings navigation) */
.calendar-weekdays>div{font-size:12px;font-weight:600;padding:12px 2px}
.calendar-day{font-size:12px;min-height:96px}
.calendar-day>span{width:26px;height:26px;font-weight:600}
.event-tag{font-size:11px;padding:4px 6px;border-radius:6px;font-weight:600}
.event-item p,.event-item small{font-size:12px}
.settings-link{font-size:13.5px;font-weight:500;padding:11px 12px;border-radius:10px}
.settings-link>.settings-icon{display:grid;place-items:center;width:20px;height:20px;font-size:0}
.settings-link.active{font-weight:600}
.settings-section h2{font-size:17px}
.toggle-row b,.setting-row b{font-size:14px}
@media(max-width:620px){.calendar-day{min-height:70px;font-size:11px}.event-tag{font-size:10.5px;padding:3px 4px}.calendar-weekdays>div{font-size:11px}}
body.light th,body.light .footer{color:#56627a}
body.light .message.sent small{color:#ede9fe}
body.light .message.sent p{color:#fff}
