/* =======================================================================
   BESOHOLA AI / بسهولة — Aurora Identity 2026-10-23
   Visual-only layer: Cloudflare D1, authentication, payroll, stock and
   permissions are untouched. Base stylesheet remains intact for fallback.
   Palette: Violet #7A43E8 • Cyan #16BDF3 • Indigo #21164F.
   ======================================================================= */
:root {
  --bg: #f8f8ff;
  --navy: #21164f;
  --navy2: #32236e;
  --ink: #25204b;
  --muted: #777595;
  --line: #e9e6f5;
  --green: #7a43e8;
  --blue: #5e45e8;
  --bs-purple: #7a43e8;
  --bs-cyan: #16bdf3;
  --bs-indigo: #21164f;
  --bs-soft: #f2edff;
  --shadow: 0 12px 36px rgba(68, 41, 139, .07);
  font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
}
html { color-scheme: light; }
body { background:radial-gradient(ellipse at 85% -12%,#ece4ff 0,transparent 36%),radial-gradient(ellipse at 4% 30%,#e8f9ff 0,transparent 26%), #f8f8ff; background-attachment:fixed; color:var(--ink); }
::selection{background:#dfcaff;color:#25104f}
:focus-visible{outline:3px solid rgba(123,67,232,.45);outline-offset:3px}
a{color:#6845d8}
a:hover{color:#4d2caf}
/* Brand and entry experience */
.bx-brand strong span { color:#40d8ff!important; }
.bx-mark { border:2px solid #fff8; border-radius:15px; box-shadow:0 6px 19px #0f074b32; }
.bx-loading-logo {border:4px solid #fff; border-radius:25px; box-shadow:0 14px 38px #683dd130;}
.loading-screen:before{content:'';display:block;width:34px;height:4px;border-radius:6px;background:linear-gradient(90deg,#9645f3,#11c2ef);margin:0 auto 10px}
.hero-panel { background:radial-gradient(circle at 15% 13%,#7348ecaa,transparent 45%),radial-gradient(circle at 90% 95%,#028bbd66,transparent 50%),linear-gradient(150deg,#281356 0%,#3d228f 58%,#153b88 100%); }
.hero-panel:before {border-color:#d7b7ff45; width:500px;height:500px;bottom:-260px;left:-155px;}
.hero-panel:after {content:'';position:absolute;right:-125px;top:-130px;border:1px solid #b9eaff42;border-radius:50%;height:390px;width:390px;pointer-events:none;z-index:-1}
.hero-copy h1{letter-spacing:-.8px}
.hero-copy h1 em {background:linear-gradient(92deg,#c3a0ff,#79e5ff);color:transparent;-webkit-background-clip:text;background-clip:text}
.hero-copy p{color:#efeaff}
.hero-features>div{border-right-color:#45d3ff;color:#f8f4ff}
.hero-bottom{color:#d7cafa}
.eyebrow{color:#80e4ff}.eyebrow.dark{color:#7441d5}
.bx-hero-logo{border:5px solid #ffffffb0;border-radius:29px;box-shadow:0 22px 55px #14054c66}
.bx-auth-mark{border:3px solid #fff;border-radius:24px;box-shadow:0 12px 33px #7950d835}
.auth-panel{background:radial-gradient(circle at 85% 8%,#eae2ff,transparent 42%),linear-gradient(160deg,#fff,#f7f5ff)}
.auth-card{padding:34px 32px;background:#fff;border:1px solid #ebe5ff;border-radius:26px;box-shadow:0 24px 65px #39207c16;width:min(475px,100%)}
.auth-card h2{color:#271853}.security-note{color:#77708b}
/* Sidebar — completely reworked to light violet navigation */
.sidebar{background:linear-gradient(168deg,#fff 0%,#faf8ff 65%,#f3f1ff 100%);border-left:1px solid #e5def6;color:#28214f;box-shadow:-7px 0 30px #3217880b;padding:26px 17px 18px}
.sidebar:before{height:5px;background:linear-gradient(90deg,#13cef3,#8950f1 55%,#cf69ff)}
.sidebar .brand-line{justify-content:flex-start;background:linear-gradient(110deg,#eee4ff,#e4f9ff);border:1px solid #e6ddfc;border-radius:19px;padding:12px 10px!important;direction:rtl}
.sidebar .bx-brand strong{color:#241552!important;font-size:18px!important;letter-spacing:0}
.sidebar .bx-brand strong span{color:#7550dc!important}
.sidebar .bx-mark{width:44px;height:44px;border-radius:13px;box-shadow:0 3px 10px #4d2f9430}
.sidebar .side-label{color:#7b719b;font-size:10px;font-weight:800;margin:17px 10px 15px;letter-spacing:.7px}
.sidebar nav{scrollbar-color:#c0aaec #f4f0ff}
.sidebar nav::-webkit-scrollbar-track{background:#f4f0ff}
.sidebar nav::-webkit-scrollbar-thumb{background:#c0aaec;border-color:#f4f0ff}
.sidebar .nav-item{color:#554e79;border:1px solid transparent;border-radius:13px;min-height:48px;padding:11px 12px;gap:12px;transition:background .17s,color .17s,transform .17s,border-color .17s;font-weight:700}
.sidebar .nav-item:hover{background:#eee7ff;border-color:#e3d7ff;color:#6339cb;transform:translateX(-2px)}
.sidebar .nav-item.active{color:#fff;background:linear-gradient(110deg,#7f43e9 0%,#5e65ed 69%,#258cee 100%);border:1px solid #8653ee;border-right:1px solid #8653ee;box-shadow:0 8px 18px #754bd337}
.sidebar .nav-item:focus-visible{outline:3px solid #c3a4ff}
.sidebar .nav-icon{width:31px;flex:0 0 31px;height:31px;display:grid;place-items:center;border-radius:10px;background:#f0eafe;color:#7145d4;font-size:18px}
.sidebar .nav-item:hover .nav-icon{background:#e4d7ff;color:#6133c9}
.sidebar .nav-item.active .nav-icon{background:#ffffff30;color:#fff}
.sidebar-bottom{border-top:1px solid #e7def6}
.side-profile{background:#f0eaff;border:1px solid #e5d9ff;border-radius:15px;padding:11px;min-width:0}
.side-profile strong{color:#28204e}
.side-profile small{color:#82779d}
.sidebar .avatar{background:linear-gradient(135deg,#8150f0,#18bff0);color:#fff;border-radius:12px;box-shadow:0 5px 13px #7a48d72a}
.sidebar .logout-button{background:#fff;color:#66577f;border:1px solid #e5dff0;border-radius:12px;font-weight:700}
.sidebar .logout-button:hover{background:#f1e9ff;color:#6336c8}
/* Topbar / general content */
.att-demo-banner{background:#efecff;border-bottom:1px solid #e2dafa;color:#58499e;font-size:12px;font-weight:700}
.bx-sync-spark{color:#8b50f4;font-size:16px;margin-left:5px}
.topbar{background:#fffffff0;border-bottom:1px solid #e9e3f5;backdrop-filter:blur(12px);height:80px}
.topbar-copy{display:flex;align-items:center;gap:11px;color:#3a2b72}
.topbar-copy>span:last-child{display:grid;gap:4px}
.topbar-copy strong{font-size:13px;color:#34245e}
.topbar-copy small{font-size:11px;color:#8a83a3}
.bx-online-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#12badb;box-shadow:0 0 0 5px #12c3ef20}
.timechip{background:#f3efff;color:#63528e;border:1px solid #e9e2fb;border-radius:30px;font-weight:700}
.top-logout{background:#faf8ff;color:#714ac2;border:1px solid #e5dcf9;border-radius:12px}
.top-logout:hover{background:#f0e8ff;border-color:#d1bcff;color:#512da9}
.top-logout:focus-visible{outline-color:#bc9cfa}
.bx-mobile b{color:#46278d}
.main-content{max-width:1450px;padding:31px 40px 84px}
.page-heading{align-items:center;margin:0 0 24px;position:relative;padding:18px 22px 18px 20px;background:#ffffffb3;border:1px solid #ece6f9;border-right:4px solid #8d50ed;border-radius:17px;box-shadow:0 6px 22px #4c31940a}
.page-heading h1{color:#25184d;font-size:27px;letter-spacing:-.35px}
.page-heading p{color:#77718e;margin-bottom:0}
.top-kicker{color:#8051dc;font-size:10px;letter-spacing:1.1px}
/* Brand welcome block: new dashboard visual identity without changing data or actions */
.bx-brand-welcome{position:relative;isolation:isolate;overflow:hidden;min-height:196px;display:flex;align-items:center;justify-content:space-between;gap:25px;margin:0 0 25px;padding:29px 33px 28px;background:radial-gradient(circle at 19% 6%,#aa78ff70,transparent 34%),radial-gradient(circle at 93% 90%,#00b6f174,transparent 45%),linear-gradient(115deg,#38218b,#5636bb 64%,#277fd2);border:1px solid #6e56d5;border-radius:24px;color:#fff;box-shadow:0 16px 38px #4634a32c}
.bx-brand-welcome:before{content:'';position:absolute;inset:-50% auto auto -9%;width:360px;height:360px;border-radius:50%;border:1px solid #ffffff2a;pointer-events:none;z-index:-1}
.bx-welcome-content{position:relative;z-index:2}
.bx-welcome-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#c3f5ff;letter-spacing:.7px;font-weight:900}
.bx-brand-welcome h2{font-size:clamp(23px,2.4vw,33px);margin:10px 0 8px;line-height:1.35;color:#fff}
.bx-brand-welcome p{line-height:1.9;margin:0 0 19px;color:#ede9ff;font-size:13px}
.bx-welcome-action{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#5431ac;border:0;border-radius:12px;padding:11px 17px;font-size:12px;font-weight:900;box-shadow:0 8px 20px #17104a20}
.bx-welcome-action:hover{background:#eafaff;color:#3b2891}
.bx-welcome-decoration{align-self:stretch;position:relative;flex:0 0 210px;display:grid;place-items:center}
.bx-welcome-logo-wrap{width:143px;height:143px;border-radius:30px;padding:6px;background:#ffffffb0;transform:rotate(-7deg);box-shadow:0 15px 25px #170f6037}
.bx-welcome-logo-wrap img{display:block;width:100%;height:100%;object-fit:cover;border-radius:25px}
.bx-welcome-spark{position:absolute;color:#b5f3ff;line-height:1;font-size:35px}
.bx-welcome-spark.s1{right:10px;top:7px}.bx-welcome-spark.s2{left:8px;bottom:15px;color:#d8caff}
/* Cards and tiles */
.stat-card,.panel,.product-card{background:#fff;border:1px solid #e9e3f7;border-radius:19px;box-shadow:0 7px 25px #4a2c8509}
.stat-card{padding:22px 24px;position:relative;overflow:hidden}
.stat-card:before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#c18aff,#7a45ec,#15bff1);opacity:.75}
.stat-value{color:#352071}
.stat-caption{color:#766e90}
.stat-symbol,.stat-symbol.blue,.stat-symbol.purple{background:#f0e8ff;color:#6840cf;border-radius:14px}
.stat-symbol.blue{background:#e5f9ff;color:#0b91c9}
.stat-symbol.purple{background:#f4e9ff;color:#ac48cf}
.panel-head h2,.bx-section-heading h2{color:#2d205c}
.product-card:before,.product-card.empty:before{background:linear-gradient(90deg,#b879ff,#7448ec,#16c3ed)}
.product-emoji{background:#f0e9ff}
.product-info b{color:#7145d4}
.product-card.empty .product-info b{color:#897f9d}
.bx-section-heading{margin-bottom:16px}
.bx-shortcut{border:1px solid #e7def7;border-radius:18px;background:#fff;min-height:106px;padding:17px 15px;box-shadow:0 6px 20px #5b389209;transition:transform .16s,box-shadow .16s,border-color .16s}
.bx-shortcut:hover{border-color:#b89bff;box-shadow:0 12px 29px #7041c020;transform:translateY(-3px)}
.bx-shortcut-icon{background:linear-gradient(140deg,#efe3ff,#e5faff);border:1px solid #dfd4fc;color:#6639ca;border-radius:14px;width:49px;height:49px;flex-basis:49px}
.bx-shortcut-arrow{color:#8652e1}
.bx-inventory-hero,.bx-hub-intro{background:linear-gradient(112deg,#291660,#5933be 65%,#247cbe);border-color:#7655c9;border-radius:22px}
.bx-inventory-eyebrow,.bx-hub-intro span{color:#9feeff}
.bx-inventory-numbers strong{color:#b1eefe}
.bx-inventory-numbers>div{background:#ffffff1c;border-color:#ffffff30}
.bx-inventory-panel{border:1px solid #eae3f7}
.bx-inventory-caption{color:#8356d8}
.bx-inventory-count{background:#f2eaff;color:#7140b7}
.bx-inventory-search span{color:#8050db}
.bx-chip{border-color:#e4ddf2;color:#63547b}
.bx-chip:hover{border-color:#a484ee;background:#f7f2ff}
.bx-chip.selected{background:linear-gradient(120deg,#8050e9,#6262e8);border-color:#8050e9;color:white}
.bx-inventory-panel .product-card{border-color:#e9e3f5}
.bx-inventory-panel .product-card:hover{box-shadow:0 11px 26px #5c33a517}
.bx-inventory-mini-card{border:1px solid #e8e2f7;border-radius:17px;background:#fff}
.bx-inventory-mini-symbol{background:linear-gradient(135deg,#ede2ff,#e0faff);color:#6c3bd4}
.bx-inventory-mini-card strong{color:#352371}
/* Inputs/buttons, checkboxes, information and tables */
input,select,textarea{border-color:#e0dbed;border-radius:12px;color:#28204f}
input:focus,select:focus,textarea:focus{border-color:#8e66ec;box-shadow:0 0 0 3px #ac8aff33}
input[type=radio],input[type=checkbox]{accent-color:#7650e5}
.btn{border-radius:12px}
.btn-primary{background:linear-gradient(115deg,#8050ed,#5b68ed);color:#fff;box-shadow:0 7px 15px #6238c128}
.btn-primary:hover{background:linear-gradient(110deg,#6736d7,#4755d9)}
.btn-green{background:linear-gradient(110deg,#7750e9,#389ce8);color:#fff}
.btn-green:hover{background:linear-gradient(110deg,#6237d9,#227ed0)}
.btn-light{background:#f2eeff;color:#6341bd}
.btn-light:hover{background:#e9e1ff}
.btn-outline{background:#fff;color:#6447b4;border-color:#d9ccf6}
.btn-outline:hover{background:#f7f2ff;border-color:#b89aeb}
.btn:focus-visible{outline-color:#c6a6ff}
.btn-danger{background:#fff0f3;color:#af2f53}
.tag{background:#f0e9ff;color:#6b43c5}
.tag.orange{background:#e7f8ff;color:#137caa}
.tag.gray{background:#f1f1f7;color:#77728c}
.tag.green{background:#e4f8f1;color:#13765f}
.data-table th{background:#f6f2ff;color:#6c5b94;border-bottom:1px solid #ece5fa}
.data-table td{border-bottom-color:#f0edf8}
.data-table tbody tr:hover{background:#faf7ff}
.type-toggle label{border-color:#e2d9f8}
.type-toggle label:has(input:checked){border-color:#9f81f3;background:#f4eeff}
.notice{background:#f0ebff;color:#5941a5}
.notice.warning,.att-notice{background:#fdf0f3;color:#9b4560}
.at-hero{background:linear-gradient(115deg,#fcfaff,#f0efff)}
.att-banner{border-right-color:#7c4bdf}
.at-day{background:#fbfaff;border-color:#ebe5f8}
.upload-zone{border-color:#cdbcee;background:#fbfaff}
.upload-zone:hover{border-color:#8752de}
.progress{background:#e8e0f8}
.progress>span{background:linear-gradient(90deg,#9450ed,#13b7ed)}
.toast{background:#352265;border-color:#6b4ac3}
.dialog{border-radius:23px;box-shadow:0 26px 82px #2d126855}
.dialog::backdrop{background:#1c104ca6}
.secret-value{background:#f6f2ff}
/* Scrollbars and mobile adaptation */
.mobile-nav-toggle{background:#f7f2ff;border-color:#dfd3fb;color:#5836ae}
.mobile-nav-close{background:#6243c0;border-color:#765cba;color:#fff}
.mobile-nav-toggle:focus-visible,.mobile-nav-close:focus-visible{outline-color:#be99ff}
.mobile-nav-backdrop{background:#180f4fa8}
@media(max-width:1050px){.main-content{padding:28px 24px 62px}}
@media(max-width:800px){
  .sidebar{box-shadow:-15px 0 45px #1e11634f}
  .sidebar .brand-line{padding:10px 45px 10px 10px!important;justify-content:flex-start}
  .sidebar .brand-line strong{color:#271953!important}
  .sidebar .nav-item{min-height:49px}
  .topbar{background:#fff;position:sticky}
  .topbar-copy{display:none}
  .main-content{padding:22px 18px 65px}
  .page-heading{padding:15px 16px 16px;border-radius:15px}
  .page-heading h1{font-size:24px}
  .bx-brand-welcome{padding:24px 22px;min-height:175px;border-radius:19px}
  .bx-welcome-decoration{flex-basis:135px}
  .bx-welcome-logo-wrap{width:106px;height:106px;border-radius:23px;padding:4px}
  .bx-welcome-logo-wrap img{border-radius:19px}
}
@media(max-width:550px){
  .main-content{padding:16px 12px 60px}
  .bx-brand-welcome{padding:20px 18px;gap:6px;min-height:0}
  .bx-brand-welcome h2{font-size:22px}
  .bx-brand-welcome p{font-size:12px}
  .bx-welcome-decoration{flex:0 0 72px}
  .bx-welcome-logo-wrap{width:65px;height:65px;border-radius:17px}
  .bx-welcome-logo-wrap img{border-radius:12px}
  .bx-welcome-spark{display:none}
  .bx-welcome-action{padding:10px 13px}
  .page-heading{margin-bottom:17px}
  .page-heading h1{font-size:22px}
  .stat-card{padding:16px}
  .bx-shortcut{min-height:87px}
  .auth-card{padding:26px 22px;border-radius:23px}
}
@media(max-width:375px){.bx-welcome-decoration{display:none}}
@media(prefers-reduced-motion:reduce){.sidebar .nav-item,.bx-shortcut{transition:none}}
/* Financial visual details also use Besohola's violet/cyan palette. */
.hr-progress{background:linear-gradient(120deg,#f8f3ff,#fff);border-color:#e4d7fb}
.hr-track div{background:linear-gradient(90deg,#8b4def,#22c4f1)}
.hr-reward{color:#7143c5}
.sidebar .nav-item > span:first-child:not(.nav-text):not(.nav-icon){display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;border-radius:10px;background:#f0eafe;color:#7145d4;font-size:17px}
.sidebar .nav-item:hover > span:first-child:not(.nav-text):not(.nav-icon){background:#e4d7ff;color:#6133c9}
.sidebar .nav-item.active > span:first-child:not(.nav-text):not(.nav-icon){background:#ffffff30;color:#fff}