:root{--navy:#0c223a;--navy2:#123e69;--blue:#1671b9;--gold:#d6a640;--bg:#f3f6fa;--card:#fff;--text:#172434;--muted:#6d7d90;--border:#dce5ee;--danger:#c93a3a;--shadow:0 12px 28px rgba(12,34,58,.08)}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top right,rgba(22,113,185,.09),transparent 34%),var(--bg);color:var(--text);font-family:Tahoma,Arial,sans-serif}
button,input,select{font:inherit}.hidden{display:none!important}
button{border:0;border-radius:10px;padding:10px 15px;background:var(--blue);color:#fff;cursor:pointer}
button:hover{filter:brightness(.95)}.logout{background:var(--danger)}
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#081b2f,#176aa8);padding:20px}
.login-card{width:min(430px,94vw);background:#fff;padding:32px;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.login-card label{display:block;margin:12px 0}
.login-card button{width:100%;margin:8px 0}
.logo{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,var(--gold),#f0cb77);font-weight:900;font-size:28px;color:var(--navy)}
.logo.small{width:42px;height:42px;border-radius:12px;font-size:20px}
.error{color:var(--danger);white-space:pre-line}
.shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}
aside{height:100vh;position:sticky;top:0;background:linear-gradient(180deg,var(--navy),#071827);color:#fff;padding:22px 16px;overflow:auto}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.brand b,.brand span{display:block}
.brand span{font-size:12px;color:#a9bacb;margin-top:3px}
aside nav{display:grid;gap:7px}aside nav button{width:100%;text-align:right;background:transparent;border:1px solid rgba(255,255,255,.08)}
aside .logout{width:100%;margin-top:18px}
main{min-width:0;padding:24px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.eyebrow{margin:0;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.12em}
.badge{background:#fff;border:1px solid var(--border);border-radius:999px;padding:9px 13px;box-shadow:var(--shadow)}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:19px;margin-bottom:17px;box-shadow:var(--shadow)}
.hint{color:var(--muted);background:#eef6fd;border-right:4px solid var(--blue);padding:10px;border-radius:8px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.kpis article{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.kpis span{display:block;color:var(--muted);margin-bottom:8px}.kpis strong{font-size:21px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.grid label{display:block}
.grid label span,.login-card label span{display:block;margin-bottom:7px;color:var(--muted);font-size:13px;font-weight:700}
.wide{grid-column:span 2}
input,select{width:100%;min-height:43px;border:1px solid #ccd8e4;border-radius:10px;padding:9px 11px;background:#fff;outline:none}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,113,185,.1)}
.table-wrap{overflow:auto}table{width:100%;min-width:900px;border-collapse:collapse}
th,td{padding:11px;border-bottom:1px solid #e5edf4;text-align:right;white-space:nowrap}
th{background:#eef4f9;color:var(--navy)}tr:hover td{background:#fbfdff}
.journal-line{display:grid;grid-template-columns:2fr 1fr 1fr 2fr auto;gap:8px;margin:10px 0}
.journal-line button{background:var(--danger)}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
\.profile-grid article{border:1px solid var(--border);border-radius:13px;padding:13px}
@media(max-width:1000px){.shell{grid-template-columns:1fr}
aside{position:static;height:auto}aside nav{grid-template-columns:repeat(3,1fr)}
.grid,.kpis,.profile-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){main{padding:12px}.grid,.kpis,.profile-grid,aside nav{grid-template-columns:1fr}.wide{grid-column:auto}header{align-items:flex-start;flex-direction:column;gap:10px}}

.customer-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:17px}.customer-kpis article{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.customer-kpis span{display:block;color:var(--muted);margin-bottom:8px}.customer-kpis strong{font-size:20px}.customer-toolbar,.customer-profile-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.customer-toolbar input{max-width:380px}.customer-levels{margin:5px 0 0;color:var(--muted);font-size:12px}.hint.compact{margin:5px 0 16px}.secondary{background:#eaf1f7;color:var(--navy)}.tier-badge{display:inline-block;padding:5px 10px;border-radius:999px;font-weight:700;font-size:12px;background:#eef2f6;color:#425466}.tier-bronze{background:#f5e6db;color:#8c512c}.tier-silver{background:#edf0f3;color:#5f6872}.tier-gold{background:#fff3c9;color:#8a6700}.tier-special{background:#e9e2ff;color:#5b3eb3}.tier-VIP{background:#102f4f;color:#fff}.customer-profile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.customer-profile-grid article{border:1px solid var(--border);border-radius:14px;padding:14px;background:#fbfdff}.customer-profile-grid span{display:block;color:var(--muted);font-size:12px;margin-bottom:7px}.customer-profile-columns{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.customer-profile-columns table{min-width:620px}.redeem-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.redeem-form input:nth-child(3){grid-column:span 2}.redeem-form button{grid-column:span 2}
@media(max-width:1000px){.customer-kpis,.customer-profile-grid{grid-template-columns:repeat(2,1fr)}.customer-profile-columns{grid-template-columns:1fr}}@media(max-width:650px){.customer-kpis,.customer-profile-grid{grid-template-columns:1fr}.customer-toolbar,.customer-profile-head{align-items:stretch;flex-direction:column}.customer-toolbar input{max-width:none}.redeem-form{grid-template-columns:1fr}.redeem-form input:nth-child(3),.redeem-form button{grid-column:auto}}

.employee-section-head,.employee-profile-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.employee-profile-head{flex-wrap:wrap}.employee-avatar-wrap{width:90px;height:90px}.employee-avatar{width:90px;height:90px;border-radius:22px;object-fit:cover;border:1px solid var(--border);background:#eef4f9}.employee-avatar.fallback,.employee-mini-avatar.fallback{display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),#4d98d2);color:#fff;font-weight:800}.employee-mini-avatar{width:38px;height:38px;border-radius:11px;object-fit:cover;display:inline-grid;place-items:center}.profile-actions{display:flex;gap:8px}.employee-tools{align-items:start}.actions{display:flex;gap:6px}.request-status{min-width:130px}.secondary{background:#66788c}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px}.toolbar p{color:var(--muted);margin:4px 0}.toolbar input{max-width:360px}@media(max-width:650px){.employee-section-head,.employee-profile-head,.toolbar{align-items:stretch;flex-direction:column}.profile-actions{width:100%}.profile-actions button{flex:1}}

/* HR Professional v5.4 */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}
.attendance-clock{display:flex;gap:12px;align-items:center;background:#eef6fd;border:1px solid #d2e4f3;border-radius:12px;padding:10px 14px}.attendance-clock strong{font-size:22px;color:var(--navy)}
.attendance-actions{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin:18px 0}.att-btn{min-height:58px;font-weight:800}.att-btn.checkin{background:#188754}.att-btn.checkout{background:#334d6b}.att-btn.break{background:#d28a16}.att-btn.absent{background:#c93a3a}.att-btn.leave{background:#6d5cae}.att-btn.mission{background:#267aa6}.attendance-status{padding:12px;border-radius:10px;background:#f2f6fa;color:#52677c}
.attendance-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.attendance-summary article{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow)}.attendance-summary span{display:block;color:var(--muted);margin-bottom:7px}.attendance-summary strong{font-size:20px}
.task-board{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:12px;overflow:auto}.task-column{background:#f4f7fa;border:1px solid #dce6ef;border-radius:14px;padding:11px;min-height:260px}.task-column h4{margin:4px 0 12px}.task-card{background:#fff;border:1px solid #dbe4ec;border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 6px 14px rgba(13,39,66,.05)}.task-meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.task-chip{font-size:11px;background:#edf4fa;border-radius:999px;padding:4px 7px}.progress-track{height:8px;background:#e3eaf0;border-radius:999px;overflow:hidden}.progress-value{height:100%;background:#1d7ab8}.task-edit-row{display:grid;grid-template-columns:1fr 90px;gap:7px;margin-top:10px}
.calendar-hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#0e3154,#1c76b4);color:#fff}.calendar-hero small,.calendar-hero p{color:#d9e8f5}.calendar-nav{display:flex;gap:8px;align-items:center}.calendar-nav select{min-width:110px}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:10px 0}.calendar-weekdays span{text-align:center;font-weight:800;color:#52677c}.persian-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.calendar-day{min-height:120px;background:#fff;border:1px solid #dbe5ee;border-radius:12px;padding:9px;position:relative}.calendar-day.empty{background:transparent;border-style:dashed;opacity:.3}.calendar-day.holiday{border-color:#e68b8b;background:#fff7f7}.calendar-day.today{outline:3px solid rgba(23,109,176,.22)}.calendar-day-number{font-size:18px;font-weight:900}.calendar-event{display:block;margin-top:5px;font-size:11px;padding:4px 6px;border-radius:7px;background:#eef4f9}.calendar-event.holiday{background:#ffe4e4;color:#9b2727}.calendar-event.campaign{background:#fff0c9;color:#7a5400}.calendar-legend{display:flex;gap:10px;flex-wrap:wrap}.event-list-item{padding:10px;border-bottom:1px solid #e5edf4}.event-list-item:last-child{border-bottom:0}
.payslip{border-top:5px solid #176db0}.payslip-head{display:flex;justify-content:space-between;align-items:center}.payslip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.payslip-grid article{border:1px solid #dfe8f0;border-radius:12px;padding:13px}.payslip-grid span{display:block;color:#697b8e;font-size:12px;margin-bottom:6px}.payslip-total{font-size:26px;color:#15724a}
@media(max-width:1050px){.attendance-actions{grid-template-columns:repeat(4,1fr)}.task-board{grid-template-columns:repeat(2,minmax(260px,1fr))}.persian-calendar{min-width:900px}.calendar-weekdays{min-width:900px}.calendar-hero{align-items:flex-start;flex-direction:column}.payslip-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.attendance-actions,.attendance-summary,.task-board,.payslip-grid{grid-template-columns:1fr}.calendar-nav{flex-wrap:wrap}}
@media print{body *{visibility:hidden!important}#payslip,#payslip *{visibility:visible!important}#payslip{position:absolute;inset:0;margin:0;border:0;box-shadow:none}.payslip-head button{display:none}}

.portal-link{display:inline-flex;align-items:center;text-decoration:none;background:#0e3154;color:#fff;border-radius:10px;padding:10px 14px}.actions{display:flex;gap:8px;flex-wrap:wrap}

/* v5.6 premium UI */
body{background:radial-gradient(circle at 95% 0%,rgba(23,111,179,.08),transparent 26%),linear-gradient(180deg,#f6f9fc 0%,#edf3f7 100%)}
aside{background:linear-gradient(180deg,#071b30 0%,#0d3152 100%);box-shadow:8px 0 30px rgba(8,29,50,.12)}
aside h2{font-size:23px;letter-spacing:.5px}
aside nav button{border:1px solid rgba(255,255,255,.06);transition:.2s transform,.2s background}
aside nav button:hover{background:#205c89;transform:translateX(-3px)}
header{background:rgba(255,255,255,.76);backdrop-filter:blur(12px);border:1px solid rgba(220,230,238,.9);padding:14px 18px;border-radius:18px;box-shadow:0 12px 30px rgba(11,34,59,.06)}
.card{border-radius:20px;box-shadow:0 15px 35px rgba(11,34,59,.065)}
.premium-hero{border:0;background:linear-gradient(135deg,#0a2947,#176fae 60%,#3f91c9);color:#fff;overflow:hidden;position:relative}
.premium-hero:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);left:-50px;top:-80px}
.premium-hero small,.premium-hero p{color:#d8e9f6}
.calendar-system-switch{display:flex;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:5px;gap:4px}
.calendar-system-switch button{background:transparent}.calendar-system-switch button.active{background:#fff;color:#0d3152}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px}
.legend{padding:6px 10px;border-radius:999px;font-size:12px}.legend.holiday{background:#ffe0e0;color:#982c2c}.legend.campaign{background:#fff0c6;color:#7e5b00}.legend.event{background:#e5f1fb;color:#145d91}
.day-header{display:flex;justify-content:space-between;align-items:center}.day-header strong{font-size:19px}.day-header small{font-size:10px;color:#7a8998}
.calendar-event.campaign{border-right:3px solid #d39a13}.premium-list{border-radius:10px;margin-bottom:7px;background:#f8fafc}
.check-row{display:flex!important;align-items:center;gap:8px}.check-row input{width:auto;min-height:auto}
.training-grid{display:grid;gap:11px}.training-card{display:flex;gap:12px;padding:14px;border:1px solid #dce6ee;border-radius:15px;background:linear-gradient(145deg,#fff,#f7fafc)}.training-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:#0d3152;color:#fff;font-weight:900}.training-card-body{flex:1}.training-card-body h4{margin:5px 0}.training-actions{display:flex;gap:7px;flex-wrap:wrap}.training-actions a,.training-actions button{display:inline-flex;text-decoration:none;padding:7px 10px;border-radius:8px;background:#e8f2fa;color:#135f93;font-size:12px}.training-actions button.danger{background:#ffe1e1;color:#9c2c2c}
@media(max-width:800px){.calendar-toolbar{align-items:stretch;flex-direction:column}}

/* =========================================================
   FMITO OS v5.7 — Executive Premium Design System
   ========================================================= */
:root{
  --navy:#071b30;--navy2:#0d3152;--blue:#176fae;--blue2:#3e93cc;
  --ink:#10283b;--muted:#6f8190;--line:#dce6ee;--surface:#fff;
  --soft:#f4f8fb;--success:#13845d;--danger:#b83b43;--warning:#b77b08;
  --radius:20px;--shadow:0 14px 38px rgba(9,35,57,.075);
}
*{box-sizing:border-box}
body{color:var(--ink);background:linear-gradient(135deg,#f7fafc 0%,#eef4f8 48%,#f8fafc 100%);font-feature-settings:"ss01";letter-spacing:-.15px}
#app{min-height:100vh}
aside{width:250px;padding:20px 14px;border-left:1px solid rgba(255,255,255,.06);background:linear-gradient(160deg,#06192b 0%,#0b2d4c 55%,#0d385e 100%)}
aside:before{content:"";display:block;width:44px;height:5px;border-radius:9px;background:linear-gradient(90deg,#55b6ee,#fff);margin:0 8px 15px;opacity:.9}
aside h2{margin:0 8px 20px;font-size:25px;font-weight:900}
aside nav{gap:6px}
aside nav button{min-height:43px;border-radius:11px;padding:10px 12px;font-weight:700;color:#dbe9f4}
aside nav button:hover{background:rgba(255,255,255,.1);transform:translateX(-2px)}
aside>button:last-child{margin-top:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
main{margin-right:250px;padding:22px 26px 40px;max-width:none}
header{position:sticky;top:12px;z-index:20;min-height:70px;display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(218,229,237,.9);box-shadow:0 10px 35px rgba(11,38,60,.07)}
header h1{font-size:22px;margin:0;font-weight:900}
header #me{background:#edf5fb;color:#225b82;padding:8px 12px;border-radius:999px;font-weight:700}
.card{border:1px solid rgba(218,229,237,.92);background:rgba(255,255,255,.94);box-shadow:var(--shadow);padding:20px}
.card h3{font-size:17px;margin-top:0;color:#15364f}
.kpis{gap:13px}
.kpis article{position:relative;overflow:hidden;border:1px solid #dfe8ef;border-radius:18px;background:linear-gradient(145deg,#fff,#f8fbfd);padding:18px;box-shadow:0 9px 25px rgba(11,34,59,.055);transition:.2s transform,.2s box-shadow}
.kpis article:after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;left:-25px;top:-30px;background:rgba(23,111,174,.06)}
.kpis article:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(11,34,59,.09)}
.kpis article span{font-size:12px;color:#708392;font-weight:700}
.kpis article strong{display:block;margin-top:8px;font-size:20px;color:#0b3151}
input,select,textarea{border:1px solid #d6e2ea!important;border-radius:11px!important;background:#fbfdfe!important;min-height:43px;padding:10px 12px!important;color:#17344a;outline:none;transition:.18s border,.18s box-shadow,.18s background}
textarea{min-height:90px}
input:focus,select:focus,textarea:focus{border-color:#65a8d4!important;background:#fff!important;box-shadow:0 0 0 4px rgba(23,111,174,.09)}
label>span{display:block;margin-bottom:6px;font-size:12px;font-weight:800;color:#536b7d}
button,.btn{border:0;border-radius:10px;min-height:40px;padding:9px 14px;font-weight:800;cursor:pointer;transition:.18s transform,.18s filter,.18s box-shadow}
button:not(.danger),.btn{background:linear-gradient(135deg,#176fae,#125b91);color:#fff;box-shadow:0 7px 16px rgba(23,111,174,.15)}
button:hover,.btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
button.danger{background:#fff0f1;color:#a9333c;border:1px solid #f2cfd2}
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid #e0e8ee;border-radius:14px;background:#fff}
th{background:#f0f5f8;color:#425c6f;font-size:12px;font-weight:900;padding:12px;border-bottom:1px solid #dce6ed}
td{padding:12px;border-bottom:1px solid #edf2f5;color:#29465a}
tr:last-child td{border-bottom:0}tbody tr:hover td{background:#f8fbfd}
.two-col{gap:16px}
.toolbar{gap:12px}
.premium-hero{min-height:145px;display:flex;align-items:center;justify-content:space-between;padding:25px 28px!important;border-radius:24px!important;background:linear-gradient(125deg,#071e35 0%,#0d426e 48%,#1b7eb9 100%)!important;box-shadow:0 18px 45px rgba(7,36,60,.18)!important}
.premium-hero h3{color:#fff;font-size:25px;margin:4px 0 8px}.premium-hero p{margin:0;max-width:650px}
.persian-calendar{gap:7px}
.calendar-day{min-height:116px;border:1px solid #e0e8ee!important;border-radius:14px!important;background:#fff!important;padding:9px!important;transition:.18s transform,.18s box-shadow}
.calendar-day:hover:not(.empty){transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,34,59,.08)}
.calendar-day.today{outline:2px solid #2582bd;background:#f4faff!important}
.calendar-day.holiday{background:#fff8f8!important}
.calendar-event{border-radius:7px!important;padding:4px 6px!important;font-size:10px!important}
.training-card{transition:.2s transform,.2s box-shadow}.training-card:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(11,34,59,.09)}
.login{background:radial-gradient(circle at 20% 20%,#1b6eaa 0%,transparent 35%),linear-gradient(135deg,#051728,#0b3152 55%,#0e456f)}
.login .box{width:min(430px,92vw);padding:34px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.96);box-shadow:0 28px 70px rgba(0,0,0,.25);border-radius:25px}
.login .box h1{font-size:32px;color:#0a2d4a;margin-bottom:5px}.login .box p{color:#6b8191}
.login .box button{width:100%;min-height:47px;margin-top:7px}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:#edf2f5}::-webkit-scrollbar-thumb{background:#b9cbd7;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#91adbf}
@media(max-width:1050px){aside{width:215px}main{margin-right:215px;padding:18px}.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){aside{position:relative;width:100%;height:auto}main{margin-right:0;padding:12px}header{top:5px}.two-col{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}.premium-hero{min-height:125px;padding:18px!important}.premium-hero h3{font-size:20px}}

/* =========================================================
   FMITO OS v5.8 — WORLD CLASS / PASTEL COMMERCE UI
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
:root{
 --f-red:#ff454f;--f-yellow:#ffd84d;--f-ink:#18243a;--f-muted:#778397;
 --p-blue:#e8f3ff;--p-mint:#e8fbf3;--p-pink:#fff0f3;--p-yellow:#fff8dc;
 --p-lilac:#f2edff;--p-cyan:#e9f9fb;--p-peach:#fff0e6;--paper:#fffdfb;
}
html,body,button,input,select,textarea{font-family:"Vazirmatn","Segoe UI",Tahoma,sans-serif!important}
body{background:
 radial-gradient(circle at 8% 4%,rgba(255,216,77,.16),transparent 22%),
 radial-gradient(circle at 78% 0%,rgba(255,69,79,.09),transparent 20%),
 linear-gradient(145deg,#fffdfb 0%,#f8fbff 46%,#fff9fa 100%)!important}
aside{background:linear-gradient(175deg,#18243a 0%,#202f4b 100%)!important;box-shadow:-12px 0 35px rgba(24,36,58,.12)}
aside:before{background:linear-gradient(90deg,var(--f-red),var(--f-yellow))!important;height:6px}
aside h2,.brand b{letter-spacing:.2px}
.brand-logo{overflow:hidden!important;background:#fff!important;border:2px solid rgba(255,255,255,.75)!important;box-shadow:0 7px 20px rgba(0,0,0,.15)!important}
.brand-logo img{width:100%;height:100%;object-fit:cover;display:block}
.login .brand-logo,.login-card .brand-logo{width:92px!important;height:64px!important;border-radius:18px!important;margin:0 auto 15px!important}
aside .brand-logo{width:48px!important;height:48px!important;border-radius:14px!important;flex:0 0 48px}
aside nav button{background:transparent!important;color:#edf3f8!important;box-shadow:none!important;border:1px solid transparent!important}
aside nav button:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.08)!important}
aside nav button::before{display:inline-grid;place-items:center;width:27px;height:27px;margin-left:8px;border-radius:9px;background:rgba(255,255,255,.08);font-size:15px}
aside nav button:nth-child(1)::before{content:"⌂"}aside nav button:nth-child(2)::before{content:"◫"}
aside nav button:nth-child(3)::before{content:"◇"}aside nav button:nth-child(4)::before{content:"♙"}
aside nav button:nth-child(5)::before{content:"✦"}aside nav button:nth-child(6)::before{content:"◎"}
aside nav button:nth-child(7)::before{content:"✓"}aside nav button:nth-child(8)::before{content:"▣"}
aside nav button:nth-child(9)::before{content:"◉"}aside nav button:nth-child(10)::before{content:"⚙"}
header{border-radius:22px!important;background:rgba(255,255,255,.76)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 12px 35px rgba(37,48,70,.07)!important}
header:after{content:"";position:absolute;right:0;bottom:-1px;width:120px;height:3px;border-radius:8px;background:linear-gradient(90deg,var(--f-red),var(--f-yellow))}
.card{border:1px solid rgba(225,230,238,.85)!important;border-radius:24px!important;box-shadow:0 15px 45px rgba(36,47,70,.065)!important}
.kpis article:nth-child(6n+1){background:linear-gradient(145deg,#fff,var(--p-blue))!important}
.kpis article:nth-child(6n+2){background:linear-gradient(145deg,#fff,var(--p-mint))!important}
.kpis article:nth-child(6n+3){background:linear-gradient(145deg,#fff,var(--p-yellow))!important}
.kpis article:nth-child(6n+4){background:linear-gradient(145deg,#fff,var(--p-pink))!important}
.kpis article:nth-child(6n+5){background:linear-gradient(145deg,#fff,var(--p-lilac))!important}
.kpis article:nth-child(6n+6){background:linear-gradient(145deg,#fff,var(--p-cyan))!important}
.kpis article{border:1px solid rgba(220,227,235,.8)!important;border-radius:22px!important}
.kpis article strong{font-size:23px!important;font-weight:900!important;color:var(--f-ink)!important}
button:not(.danger),.btn{background:linear-gradient(135deg,#273a59,#18243a)!important;border-radius:12px!important;box-shadow:0 8px 20px rgba(24,36,58,.13)!important}
button:not(.danger):hover,.btn:hover{box-shadow:0 12px 25px rgba(24,36,58,.19)!important}
form button[type=submit],button.primary{background:linear-gradient(135deg,#ff5862,#ef3e49)!important}
input,select,textarea{background:rgba(255,255,255,.84)!important;border-color:#e2e7ee!important;border-radius:13px!important}
input:focus,select:focus,textarea:focus{border-color:#ff8e95!important;box-shadow:0 0 0 4px rgba(255,69,79,.08)!important}
th{background:#f7f8fb!important;color:#566176!important}
tbody tr:hover td{background:#fff9f2!important}
.premium-hero{background:
 radial-gradient(circle at 85% 30%,rgba(255,216,77,.22),transparent 18%),
 linear-gradient(120deg,#18243a 0%,#273a59 64%,#394d6d 100%)!important}
.premium-hero:after{content:"FMITO";position:absolute;left:28px;font-size:72px;font-weight:900;letter-spacing:3px;color:rgba(255,255,255,.035)}
.calendar-day:nth-child(7n+1){background:#fff8f8!important}
.calendar-day.today{outline:2px solid var(--f-red)!important;background:#fff5e9!important}
.calendar-event{background:var(--p-yellow)!important;color:#725d00!important}
.login{background:
 radial-gradient(circle at 15% 15%,rgba(255,216,77,.75),transparent 16%),
 radial-gradient(circle at 88% 22%,rgba(255,69,79,.8),transparent 20%),
 linear-gradient(135deg,#17243a,#253856)!important}
.login-card,.login .box{border-radius:30px!important;box-shadow:0 30px 90px rgba(12,22,39,.28)!important}
.login-card:before,.login .box:before{content:"FMITO";display:block;text-align:center;font-weight:900;font-size:12px;letter-spacing:5px;color:#ff454f;margin-bottom:7px}
.badge,.chip{border-radius:999px!important}

/* =========================================================
   FMITO OS v5.9 — Refined Sidebar + Compact Action System
   ========================================================= */
:root{
  --sidebar-bg:#eef0fb;
  --sidebar-bg-2:#f7f3fb;
  --sidebar-ink:#27324a;
  --sidebar-muted:#748096;
  --confirm:#24a77b;
  --confirm-hover:#1d8d68;
  --edit:#5d83c6;
  --neutral:#eef2f6;
  --neutral-ink:#435269;
  --warn:#e7a93d;
  --delete:#d75b68;
}
.shell{grid-template-columns:228px 1fr}
aside{
  width:auto!important;
  padding:18px 13px!important;
  color:var(--sidebar-ink)!important;
  background:linear-gradient(180deg,var(--sidebar-bg) 0%,#f4f0fa 52%,#eef6f5 100%)!important;
  border-left:1px solid #e0e3ef!important;
  box-shadow:-10px 0 32px rgba(45,55,80,.06)!important;
}
aside:before{width:52px!important;height:5px!important;margin:0 7px 14px!important;background:linear-gradient(90deg,#ef7780,#f2c861,#8fcfc0,#8ca9dc)!important}
.brand{padding:8px 7px 16px;margin-bottom:10px!important;border-bottom:1px solid rgba(70,80,110,.10)}
.brand b{color:#222e45!important;font-size:17px}.brand span{color:var(--sidebar-muted)!important}
aside .brand-logo{border:2px solid #fff!important;box-shadow:0 7px 18px rgba(55,65,90,.11)!important}
aside nav{gap:3px!important}
aside nav button{
  position:relative;min-height:38px!important;padding:7px 9px!important;border-radius:10px!important;
  color:#45516a!important;background:transparent!important;border:1px solid transparent!important;
  box-shadow:none!important;font-size:12.5px!important;font-weight:700!important;
}
aside nav button::before{width:25px!important;height:25px!important;margin-left:7px!important;background:rgba(103,117,155,.08)!important;color:#64728d!important;border-radius:8px!important}
aside nav button:hover{transform:none!important;background:rgba(255,255,255,.72)!important;border-color:#e1e3ed!important;color:#202c44!important}
aside nav button:focus{outline:none;box-shadow:0 0 0 3px rgba(117,137,190,.10)!important}
aside .logout{min-height:36px!important;margin-top:13px!important;background:#fff5f5!important;color:#b64d59!important;border:1px solid #f0d6d9!important;box-shadow:none!important;font-size:12px!important}
main{margin-right:0!important;padding:20px 24px 36px!important}

/* Compact controls: ordinary actions no longer dominate the page */
button,.btn{min-height:34px!important;padding:6px 11px!important;border-radius:9px!important;font-size:12.5px!important;font-weight:750!important;box-shadow:none!important}
button:hover,.btn:hover{transform:none!important}

/* Confirm / save / create actions */
form button[type="submit"],button.primary,.btn-confirm{
  background:linear-gradient(135deg,#2eb487,var(--confirm))!important;
  color:#fff!important;border:1px solid rgba(20,126,91,.10)!important;
  box-shadow:0 5px 12px rgba(36,167,123,.13)!important;
}
form button[type="submit"]:hover,button.primary:hover,.btn-confirm:hover{background:var(--confirm-hover)!important}

/* Secondary / edit / neutral / destructive hierarchy */
button.secondary,.secondary{background:var(--neutral)!important;color:var(--neutral-ink)!important;border:1px solid #dce3ea!important}
button.danger,.danger,.logout{background:#fff2f3!important;color:#b84b57!important;border:1px solid #f0d0d4!important}
.actions button:not(.danger):not(.secondary),.profile-actions button:first-child{background:#edf3fc!important;color:#486fae!important;border:1px solid #d8e3f5!important}
.att-btn{min-height:38px!important;padding:7px 12px!important}
.att-btn.checkin{background:#e7f8f1!important;color:#177b5a!important;border:1px solid #c7ebdc!important}
.att-btn.checkout{background:#fff0f2!important;color:#ae4855!important;border:1px solid #efd2d6!important}
.att-btn.break{background:#fff7e6!important;color:#9a6a16!important;border:1px solid #f0dfb9!important}
.att-btn.leave,.att-btn.mission{background:#eef2ff!important;color:#5c65a7!important;border:1px solid #d9def5!important}
.att-btn.absent{background:#f6f0f5!important;color:#835d7a!important;border:1px solid #e7d9e4!important}

/* Smaller icon-like actions in dense tables/toolbars */
td .actions button,.training-actions button,.training-actions a,.journal-line button{min-height:30px!important;padding:5px 9px!important;font-size:11.5px!important}

@media(max-width:1000px){.shell{grid-template-columns:1fr}aside{width:100%!important}aside nav{grid-template-columns:repeat(4,1fr)!important}main{padding:15px!important}}
@media(max-width:650px){aside nav{grid-template-columns:repeat(2,1fr)!important}}

/* =========================================================
   FMITO v5.10 — Corporate Red / Yellow / White + Neon depth
   ========================================================= */
:root{
  --fmito-red:#ef233c;
  --fmito-red-dark:#c9152d;
  --fmito-yellow:#ffd21f;
  --fmito-yellow-soft:#fff2a8;
  --fmito-white:#ffffff;
  --fmito-ink:#2b2130;
}
aside{
  background:
    radial-gradient(circle at 15% 5%,rgba(255,210,31,.34),transparent 22%),
    linear-gradient(165deg,#f3263e 0%,#e71735 55%,#c9142d 100%)!important;
  color:#fff!important;
  border-left:1px solid rgba(255,255,255,.35)!important;
  box-shadow:-10px 0 36px rgba(239,35,60,.20)!important;
}
aside:before{background:var(--fmito-yellow)!important;box-shadow:0 0 18px rgba(255,210,31,.95)!important}
aside .brand b,aside .brand span,aside h2{color:#fff!important}
aside nav button{
  display:flex!important;align-items:center!important;gap:10px!important;
  width:100%!important;color:#fff!important;background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.10)!important;box-shadow:none!important;
  font-size:13px!important;font-weight:800!important;text-align:right!important;
}
aside nav button span:last-child{color:#fff!important;opacity:1!important;visibility:visible!important}
aside nav button:hover{
  color:#271d22!important;background:#ffd21f!important;border-color:#ffe360!important;
  box-shadow:0 0 18px rgba(255,210,31,.65),0 8px 22px rgba(102,54,0,.16)!important;
}
aside nav button:hover span:last-child{color:#271d22!important}
.menu-icon{
  width:29px;height:29px;display:inline-grid!important;place-items:center!important;
  border-radius:9px;background:rgba(255,255,255,.16)!important;color:#fff!important;
  flex:0 0 29px;font-size:15px;font-weight:900;
}
aside nav button:hover .menu-icon{background:#fff!important;color:#e71d36!important;box-shadow:0 0 12px rgba(255,255,255,.8)!important}
aside .logout{
  background:#fff!important;color:#d71631!important;border:1px solid #fff!important;
  box-shadow:0 0 15px rgba(255,255,255,.42)!important;
}
aside .logout:hover{background:#ffd21f!important;color:#2c2024!important;border-color:#ffd21f!important}

/* compact but raised action buttons */
button,.btn{min-height:36px!important;padding:7px 13px!important;border-radius:10px!important;font-weight:850!important}
.btn-confirm,form button[type="submit"]{
  background:linear-gradient(145deg,#ffd92f,#ffc400)!important;color:#2b2022!important;
  border:1px solid #ffe671!important;
  box-shadow:0 0 12px rgba(255,210,31,.52),0 7px 16px rgba(156,102,0,.18)!important;
}
.btn-confirm:hover,form button[type="submit"]:hover{
  box-shadow:0 0 21px rgba(255,210,31,.82),0 9px 20px rgba(156,102,0,.22)!important;
}
.btn-edit{
  background:#fff!important;color:#e21a36!important;border:1px solid #ff8796!important;
  box-shadow:0 0 10px rgba(239,35,60,.17)!important;
}
.btn-neutral{
  background:#fff!important;color:#4e4549!important;border:1px solid #ded8da!important;box-shadow:0 5px 13px rgba(40,30,35,.07)!important
}
.btn-danger-soft,.danger{
  background:linear-gradient(145deg,#f42b43,#d81731)!important;color:#fff!important;border:1px solid #ff7887!important;
  box-shadow:0 0 12px rgba(239,35,60,.38),0 7px 15px rgba(129,9,27,.16)!important;
}
.row-actions,.form-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.product-hero{border-right:5px solid var(--fmito-yellow)!important}
.barcode-cell{direction:ltr;font-family:Consolas,monospace;font-weight:800;letter-spacing:.5px}
td small{display:block;color:#8b7e83;font-size:10px;margin-top:3px}

/* brand accents */
header:after{background:linear-gradient(90deg,var(--fmito-red),var(--fmito-yellow))!important}
.kpis article:nth-child(odd){border-top:3px solid rgba(239,35,60,.75)!important}
.kpis article:nth-child(even){border-top:3px solid rgba(255,210,31,.95)!important}

/* =========================================================
   FMITO OS v5.11 — Dark Executive UI
   Inspired by premium fintech / command-center dashboards
   ========================================================= */
:root{
  --dx-bg:#090b12;
  --dx-bg-2:#0d1019;
  --dx-surface:#11141e;
  --dx-surface-2:#151927;
  --dx-surface-3:#1a1f30;
  --dx-line:#262b3b;
  --dx-line-soft:#1d2230;
  --dx-text:#f6f7fb;
  --dx-muted:#9299aa;
  --dx-purple:#a98cff;
  --dx-purple-2:#7d5cff;
  --dx-lilac:#c8b7ff;
  --dx-green:#55e49a;
  --dx-red:#ff5b73;
  --dx-yellow:#ffd84d;
  --dx-blue:#67b7ff;
  --dx-shadow:0 18px 55px rgba(0,0,0,.35);
}
html,body{background:var(--dx-bg)!important;color:var(--dx-text)!important}
body{
  background:
    radial-gradient(circle at 78% 0%,rgba(125,92,255,.10),transparent 27%),
    radial-gradient(circle at 18% 8%,rgba(169,140,255,.06),transparent 22%),
    linear-gradient(180deg,#090b12 0%,#0b0e15 100%)!important;
}
#app{background:transparent!important}
aside{
  width:238px!important;
  background:linear-gradient(180deg,#0d1018 0%,#0b0d13 100%)!important;
  border-left:1px solid var(--dx-line-soft)!important;
  box-shadow:none!important;
  padding:18px 12px!important;
}
aside:before{display:none!important}
aside h2,aside .brand b,aside .brand span{color:#fff!important}
aside nav{gap:5px!important}
aside nav button{
  color:#9ea5b6!important;
  background:transparent!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  border-radius:11px!important;
  min-height:40px!important;
  padding:8px 10px!important;
  font-size:12px!important;
  font-weight:700!important;
  transition:.18s ease!important;
}
aside nav button:hover{
  color:#fff!important;
  background:#171b28!important;
  border-color:#23283a!important;
  transform:none!important;
  box-shadow:none!important;
}
aside nav button:focus{
  color:#fff!important;
  background:linear-gradient(90deg,rgba(169,140,255,.16),rgba(125,92,255,.08))!important;
  border-color:rgba(169,140,255,.35)!important;
}
.menu-icon{
  background:#171b28!important;
  color:#a98cff!important;
  border:1px solid #272c3e!important;
  width:25px!important;height:25px!important;flex:0 0 25px!important;
  border-radius:8px!important;
}
aside nav button:hover .menu-icon{background:#211d38!important;color:#d8cdff!important;box-shadow:0 0 15px rgba(169,140,255,.18)!important}
aside .logout,aside>button:last-child{
  background:#161923!important;color:#ff7186!important;
  border:1px solid #32202a!important;box-shadow:none!important;
}
aside .logout:hover,aside>button:last-child:hover{background:#21131a!important;color:#ff8c9e!important}
main{margin-right:238px!important;padding:18px 24px 42px!important;background:transparent!important}
.executive-header,header{
  position:sticky!important;top:10px!important;z-index:30!important;
  min-height:62px!important;padding:11px 14px!important;margin-bottom:16px!important;
  background:rgba(13,16,25,.88)!important;
  backdrop-filter:blur(18px)!important;
  border:1px solid var(--dx-line)!important;
  border-radius:15px!important;
  box-shadow:0 14px 35px rgba(0,0,0,.22)!important;
  color:#fff!important;
}
header:after{display:none!important}
.header-title-wrap{display:flex;flex-direction:column;gap:2px}
.header-kicker,.intro-kicker{font-size:9px;letter-spacing:2px;color:var(--dx-purple)!important;font-weight:800}
header h1{color:#fff!important;font-size:19px!important;margin:0!important}
.header-tools{display:flex;align-items:center;gap:8px}
.quick-search{
  display:flex;align-items:center;gap:6px;
  min-width:220px;height:36px;padding:0 10px;
  background:#0b0e15;border:1px solid #242938;border-radius:10px;color:#7f8797
}
.quick-search input{border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important;height:32px!important;padding:0!important;color:#dfe3ed!important}
.icon-action{width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;background:#151925!important;border:1px solid #282d3d!important;color:#cfd3df!important;box-shadow:none!important}
.user-pill{background:#171b28!important;color:#dfe3ed!important;border:1px solid #292e40!important;padding:7px 10px!important;border-radius:10px!important}
.dashboard-intro{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;margin-bottom:14px;
  background:
    radial-gradient(circle at 88% 18%,rgba(169,140,255,.22),transparent 20%),
    linear-gradient(135deg,#11141e 0%,#151827 62%,#17152a 100%);
  border:1px solid #282d40;border-radius:18px;box-shadow:var(--dx-shadow)
}
.dashboard-intro h2{margin:4px 0 4px;color:#fff;font-size:24px}
.dashboard-intro p{margin:0;color:#9299aa}
.intro-actions{display:flex;gap:8px;flex-wrap:wrap}
.soft-purple{background:linear-gradient(135deg,#b39aff,#8a6cff)!important;color:#0c0d12!important;border:0!important;box-shadow:0 0 25px rgba(169,140,255,.22)!important}
.soft-dark{background:#181c28!important;color:#eef0f5!important;border:1px solid #2a3042!important;box-shadow:none!important}
.card{
  background:linear-gradient(145deg,#11141e,#10131c)!important;
  border:1px solid var(--dx-line)!important;
  color:#e9ebf2!important;
  border-radius:16px!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}
.card h3,.card h2{color:#fff!important}
.card p,.hint,small{color:#9299aa!important}
.kpis{gap:10px!important}
.kpis article{
  background:linear-gradient(145deg,#11141e,#141827)!important;
  border:1px solid #262b3d!important;
  border-radius:14px!important;
  box-shadow:none!important;
  min-height:108px;
}
.kpis article:nth-child(n){border-top:1px solid #262b3d!important}
.kpis article:hover{transform:translateY(-2px)!important;border-color:#393f55!important;box-shadow:0 12px 28px rgba(0,0,0,.22)!important}
.kpis article span{color:#878fa1!important}
.kpis article strong{color:#fff!important;font-size:21px!important}
.kpis article:nth-child(3n+1) strong{color:#cdbfff!important}
.kpis article:nth-child(3n+2) strong{color:#78e6aa!important}
.kpis article:nth-child(3n+3) strong{color:#7fc1ff!important}
input,select,textarea{
  background:#0d1017!important;color:#e7eaf1!important;border:1px solid #272c3b!important;
  border-radius:9px!important;box-shadow:none!important
}
input::placeholder,textarea::placeholder{color:#646b7c!important}
input:focus,select:focus,textarea:focus{border-color:#7d66cc!important;box-shadow:0 0 0 3px rgba(125,92,255,.09)!important}
label>span{color:#8e96a7!important}
button,.btn{border-radius:9px!important}
button:not(.danger),.btn{
  background:#1b1f2b!important;color:#e9ebf1!important;border:1px solid #2b3041!important;box-shadow:none!important
}
button:not(.danger):hover,.btn:hover{background:#222737!important;border-color:#3a4054!important;transform:none!important}
.btn-confirm,form button[type="submit"]{
  background:linear-gradient(135deg,#b29aff,#8b6eff)!important;
  color:#0b0c11!important;border:0!important;box-shadow:0 0 22px rgba(169,140,255,.18)!important
}
.btn-danger-soft,.danger{background:#24131a!important;color:#ff7186!important;border:1px solid #48202b!important;box-shadow:none!important}
.btn-edit{background:#161a27!important;color:#a98cff!important;border:1px solid #302a4f!important;box-shadow:none!important}
.btn-neutral{background:#151924!important;color:#b7bdc9!important;border:1px solid #292e3d!important;box-shadow:none!important}
table{background:#0f121a!important;border:1px solid #252a39!important;border-radius:12px!important}
th{background:#151923!important;color:#8f97a7!important;border-bottom:1px solid #272c3a!important}
td{color:#d4d8e2!important;border-bottom:1px solid #1d2230!important}
tbody tr:hover td{background:#141824!important}
.premium-hero,.product-hero{
  background:
    radial-gradient(circle at 86% 10%,rgba(169,140,255,.17),transparent 22%),
    linear-gradient(135deg,#11141e,#171927)!important;
  border:1px solid #2b3043!important;
  box-shadow:none!important;color:#fff!important
}
.premium-hero:after{display:none!important}
.calendar-day{
  background:#11141e!important;border:1px solid #252a39!important;color:#d9dde6!important;
}
.calendar-day:hover:not(.empty){box-shadow:0 12px 25px rgba(0,0,0,.25)!important;border-color:#393f53!important}
.calendar-day.today{outline:1px solid #8c72e8!important;background:#181529!important}
.calendar-day.holiday{background:#1a1117!important}
.calendar-event{background:#211d36!important;color:#c9bfff!important}
.training-card,.academy-card{
  background:#11141e!important;border:1px solid #272c3b!important;box-shadow:none!important
}
.training-icon,.academy-type{background:#201d35!important;color:#c9bfff!important}
.login{
  background:
    radial-gradient(circle at 70% 20%,rgba(125,92,255,.22),transparent 25%),
    linear-gradient(135deg,#080a10,#0c0f18)!important
}
.login .box,.login-card{
  background:#10131c!important;border:1px solid #292e40!important;color:#fff!important;
  box-shadow:0 30px 85px rgba(0,0,0,.45)!important
}
.login .box h1,.login-card h1{color:#fff!important}
.brand-logo{border:1px solid #302b43!important;box-shadow:0 0 25px rgba(169,140,255,.12)!important}
::-webkit-scrollbar-track{background:#0b0e15!important}
::-webkit-scrollbar-thumb{background:#292e40!important}
::-webkit-scrollbar-thumb:hover{background:#3a4055!important}
@media(max-width:1050px){aside{width:205px!important}main{margin-right:205px!important}.quick-search{min-width:150px}}
@media(max-width:760px){aside{width:100%!important}main{margin-right:0!important;padding:10px!important}.dashboard-intro{align-items:flex-start;flex-direction:column}.quick-search{display:none}}

/* =========================================================
   FMITO OS v5.12 — Emerald Executive / Premium Retail UI
   Reference direction: airy green executive dashboard
   ========================================================= */
:root{
  --em-bg:#f3f8f5;
  --em-bg-deep:#eaf4ee;
  --em-green:#0f7a5a;
  --em-green-2:#16a26f;
  --em-green-3:#20bd7f;
  --em-green-dark:#075943;
  --em-mint:#dff7ea;
  --em-mint-2:#edf9f2;
  --em-white:#ffffff;
  --em-ink:#15372d;
  --em-muted:#7b9189;
  --em-line:#dcebe3;
  --em-line-strong:#cfe1d7;
  --em-lime:#9de4b7;
  --em-shadow:0 18px 55px rgba(15,94,68,.09);
  --em-shadow-soft:0 10px 30px rgba(18,74,56,.06);
}
html,body{
  background:
    radial-gradient(circle at 14% 0%,rgba(29,181,123,.11),transparent 24%),
    radial-gradient(circle at 90% 14%,rgba(68,210,150,.08),transparent 21%),
    linear-gradient(180deg,#f5faf7 0%,#eef6f1 100%)!important;
  color:var(--em-ink)!important;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.24;z-index:0;
  background-image:
    linear-gradient(35deg,transparent 48%,rgba(15,122,90,.035) 49%,transparent 50%),
    linear-gradient(-25deg,transparent 48%,rgba(15,122,90,.025) 49%,transparent 50%);
  background-size:120px 120px,160px 160px;
}
#app{position:relative;z-index:1;background:transparent!important}
.ambient-topbar{
  position:fixed;top:14px;right:260px;left:22px;height:58px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 18px;border-radius:18px;
  background:linear-gradient(115deg,#18a16f 0%,#1ab678 56%,#28c586 100%);
  color:#fff;border:1px solid rgba(255,255,255,.35);
  box-shadow:0 16px 40px rgba(15,122,90,.16);
}
.ambient-welcome{display:flex;align-items:center;gap:9px;min-width:0}
.ambient-welcome span:last-child{opacity:.88;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ambient-dot{width:9px;height:9px;border-radius:50%;background:#d6ff8d;box-shadow:0 0 16px rgba(214,255,141,.9)}
.ambient-actions{display:flex;align-items:center;gap:9px;font-size:11px}
.ambient-icon{width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;border-radius:10px!important;background:rgba(255,255,255,.13)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:none!important}

aside{
  width:232px!important;
  top:0!important;right:0!important;
  background:linear-gradient(180deg,#07563f 0%,#0a664b 58%,#07533e 100%)!important;
  border-left:1px solid rgba(255,255,255,.14)!important;
  box-shadow:10px 0 30px rgba(7,83,62,.12)!important;
  padding:22px 12px!important;
}
aside .brand-logo{border:1px solid rgba(255,255,255,.35)!important;background:#fff!important;box-shadow:0 8px 24px rgba(0,0,0,.12)!important}
aside h2,aside .brand b,aside .brand span{color:#fff!important}
aside nav{gap:5px!important}
aside nav button{
  display:flex!important;align-items:center!important;gap:9px!important;
  color:#d7eee5!important;background:transparent!important;border:1px solid transparent!important;
  border-radius:11px!important;padding:8px 10px!important;min-height:38px!important;
  font-size:12px!important;font-weight:750!important;box-shadow:none!important;
}
aside nav button:hover,aside nav button:focus{
  background:rgba(255,255,255,.11)!important;color:#fff!important;
  border-color:rgba(255,255,255,.12)!important;transform:none!important
}
.menu-icon{
  width:26px!important;height:26px!important;flex:0 0 26px!important;border-radius:8px!important;
  background:rgba(255,255,255,.10)!important;color:#d9ffeb!important;border:1px solid rgba(255,255,255,.08)!important
}
aside nav button:hover .menu-icon{background:#fff!important;color:#0c7657!important;box-shadow:0 0 16px rgba(255,255,255,.25)!important}
aside .logout,aside>button:last-child{
  background:rgba(255,255,255,.10)!important;color:#fff!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:none!important
}
aside .logout:hover,aside>button:last-child:hover{background:#fff!important;color:#0a664b!important}

main{
  margin-right:232px!important;
  padding:88px 22px 42px!important;
  background:transparent!important;
}
header.executive-header,header{
  position:relative!important;top:auto!important;z-index:20!important;
  min-height:64px!important;padding:10px 14px!important;margin-bottom:14px!important;
  background:rgba(255,255,255,.88)!important;backdrop-filter:blur(18px)!important;
  border:1px solid var(--em-line)!important;border-radius:16px!important;
  box-shadow:var(--em-shadow-soft)!important;color:var(--em-ink)!important;
}
header h1{color:var(--em-ink)!important;font-size:19px!important}
.header-kicker{color:var(--em-green-2)!important}
.quick-search{background:#f5faf7!important;border:1px solid var(--em-line)!important;color:var(--em-muted)!important}
.quick-search input{color:var(--em-ink)!important}
.icon-action{background:#f5faf7!important;border:1px solid var(--em-line)!important;color:var(--em-green)!important}
.user-pill{background:#eef8f2!important;color:var(--em-green-dark)!important;border:1px solid var(--em-line)!important}

.dashboard-intro{
  background:
    radial-gradient(circle at 85% 20%,rgba(255,255,255,.20),transparent 22%),
    linear-gradient(120deg,#11835f 0%,#1aa66f 58%,#24bc7e 100%)!important;
  border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;
  box-shadow:0 18px 45px rgba(17,131,95,.14)!important
}
.dashboard-intro h2{color:#fff!important}
.dashboard-intro p{color:#e8fff3!important}
.intro-kicker{color:#d7ff9a!important}
.soft-purple{background:#fff!important;color:#0b7254!important;border:0!important;box-shadow:0 8px 20px rgba(7,88,64,.13)!important}
.soft-dark{background:rgba(7,87,64,.22)!important;color:#fff!important;border:1px solid rgba(255,255,255,.20)!important}
.dashboard-summary-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;
}
.dashboard-summary-strip article{
  background:#fff;border:1px solid var(--em-line);border-radius:15px;
  padding:14px 16px;box-shadow:var(--em-shadow-soft)
}
.dashboard-summary-strip span{display:block;color:#6f8a80;font-size:11px;font-weight:700}
.dashboard-summary-strip strong{display:block;color:#0d684e;font-size:22px;margin-top:4px}
.dashboard-summary-strip small{color:#9aaeA6!important}

.card{
  background:rgba(255,255,255,.96)!important;
  border:1px solid var(--em-line)!important;
  color:var(--em-ink)!important;
  border-radius:16px!important;
  box-shadow:var(--em-shadow-soft)!important;
}
.card h2,.card h3{color:var(--em-ink)!important}
.card p,.hint,.card small{color:var(--em-muted)!important}
.kpis{gap:10px!important}
.kpis article{
  background:linear-gradient(145deg,#fff,#f4faf6)!important;
  border:1px solid var(--em-line)!important;border-radius:14px!important;
  box-shadow:none!important;min-height:104px
}
.kpis article:nth-child(n){border-top:1px solid var(--em-line)!important}
.kpis article:hover{transform:translateY(-2px)!important;border-color:#c6dfd2!important;box-shadow:0 12px 30px rgba(22,97,70,.08)!important}
.kpis article span{color:#7c9289!important}
.kpis article strong{color:#0c674d!important}
.kpis article:nth-child(3n+2) strong{color:#168c62!important}
.kpis article:nth-child(3n+3) strong{color:#2d745c!important}

input,select,textarea{
  background:#fbfefc!important;color:#24483d!important;
  border:1px solid #d8e8df!important;border-radius:10px!important;box-shadow:none!important
}
input::placeholder,textarea::placeholder{color:#99aaa4!important}
input:focus,select:focus,textarea:focus{
  border-color:#68bd98!important;box-shadow:0 0 0 3px rgba(28,165,112,.09)!important
}
label>span{color:#668178!important}
button,.btn{border-radius:9px!important}
button:not(.danger),.btn{
  background:#eef7f2!important;color:#17644d!important;border:1px solid #d7e7de!important;box-shadow:none!important
}
button:not(.danger):hover,.btn:hover{background:#e5f3eb!important;border-color:#bfd9cb!important;transform:none!important}
.btn-confirm,form button[type="submit"]{
  background:linear-gradient(135deg,#16a36f,#11815d)!important;color:#fff!important;
  border:0!important;box-shadow:0 8px 18px rgba(20,139,94,.18)!important
}
.btn-danger-soft,.danger{background:#fff0f1!important;color:#bd4051!important;border:1px solid #f1cbd1!important;box-shadow:none!important}
.btn-edit{background:#eff7f3!important;color:#0f7354!important;border:1px solid #d3e7dc!important;box-shadow:none!important}
.btn-neutral{background:#fff!important;color:#667e75!important;border:1px solid #dce8e1!important;box-shadow:none!important}

table{background:#fff!important;border:1px solid var(--em-line)!important;border-radius:12px!important}
th{background:#f1f8f4!important;color:#5f7a70!important;border-bottom:1px solid var(--em-line)!important}
td{color:#315147!important;border-bottom:1px solid #edf4f0!important}
tbody tr:hover td{background:#f8fcf9!important}

.premium-hero,.product-hero{
  background:linear-gradient(120deg,#0d7958,#159767 62%,#20b679)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:0 16px 38px rgba(16,124,89,.12)!important;color:#fff!important
}
.premium-hero h3,.product-hero h3{color:#fff!important}
.premium-hero p,.product-hero p,.premium-hero small{color:#e7fff2!important}
.calendar-day{background:#fff!important;border:1px solid var(--em-line)!important;color:#34574b!important}
.calendar-day.today{outline:2px solid #41ad82!important;background:#f1fbf6!important}
.calendar-day.holiday{background:#fff8f8!important}
.calendar-event{background:#e6f7ee!important;color:#0b7152!important}
.training-card,.academy-card{background:#fff!important;border:1px solid var(--em-line)!important;box-shadow:none!important}
.training-icon,.academy-type{background:#e7f6ee!important;color:#0b7353!important}

.login{
  background:
    radial-gradient(circle at 20% 12%,rgba(114,238,169,.26),transparent 22%),
    linear-gradient(135deg,#07533e,#0b7654 60%,#129567)!important
}
.login .box,.login-card{
  background:rgba(255,255,255,.96)!important;color:var(--em-ink)!important;
  border:1px solid rgba(255,255,255,.60)!important;box-shadow:0 30px 85px rgba(5,72,53,.30)!important
}
.login .box h1,.login-card h1{color:#0a6249!important}
.brand-logo{border:1px solid rgba(255,255,255,.7)!important;box-shadow:0 10px 30px rgba(5,72,53,.12)!important}

.fmito-assistant{
  position:fixed;left:22px;bottom:20px;z-index:70;display:flex;align-items:flex-end;gap:8px
}
.fmito-assistant button{
  width:52px!important;height:52px!important;min-height:52px!important;padding:0!important;border-radius:50%!important;
  background:#fff!important;color:#0c7b59!important;border:3px solid #12a772!important;
  box-shadow:0 12px 30px rgba(14,123,88,.22)!important;font-size:24px!important
}
.assistant-message{
  max-width:160px;padding:9px 11px;border-radius:12px 12px 4px 12px;
  background:#1aab73;color:#fff;font-size:11px;box-shadow:0 10px 25px rgba(17,131,95,.18)
}
::-webkit-scrollbar-track{background:#edf5f0!important}
::-webkit-scrollbar-thumb{background:#b9d3c5!important}
::-webkit-scrollbar-thumb:hover{background:#91bba5!important}

@media(max-width:1050px){
  .ambient-topbar{right:220px}
  aside{width:205px!important}
  main{margin-right:205px!important}
  .dashboard-summary-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .ambient-topbar{position:relative;right:auto;left:auto;top:auto;margin:10px;height:auto;min-height:54px;flex-direction:column;align-items:flex-start}
  aside{width:100%!important}
  main{margin-right:0!important;padding:10px!important}
  .dashboard-summary-strip{grid-template-columns:1fr 1fr}
  .fmito-assistant{left:12px;bottom:12px}.assistant-message{display:none}
}

/* === FMITO v5.13 Neon Red Executive Theme === */
:root{--nr-bg:#05080d;--nr-panel:#080d14;--nr-panel2:#0b1119;--nr-red:#ff1e38;--nr-red2:#ff4056;--nr-yellow:#ffc21c;--nr-text:#fff7f7;--nr-muted:#b8adb0;--nr-line:rgba(255,35,61,.34);--nr-glow:0 0 8px rgba(255,30,56,.55),0 0 24px rgba(255,30,56,.18)}
html,body{background:radial-gradient(circle at 65% -10%,rgba(255,28,55,.08),transparent 28%),#05080d!important;color:var(--nr-text)!important}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:34px 34px;opacity:.22}
.shell{background:transparent!important}
aside{width:258px!important;background:linear-gradient(180deg,#080b11 0%,#060a0f 100%)!important;border-left:1px solid rgba(255,38,60,.62)!important;box-shadow:0 0 30px rgba(255,30,56,.10)!important;padding:18px 14px!important}
aside:before{display:none!important}
aside .brand{padding:4px 7px 18px;margin-bottom:7px!important;border-bottom:1px solid rgba(255,31,57,.18)}
aside .brand-logo{width:68px!important;height:52px!important;flex:0 0 68px!important;border:0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 0 12px rgba(255,34,58,.75),0 0 30px rgba(255,34,58,.22)!important}
aside .brand-logo img{width:100%;height:100%;object-fit:cover}
aside .brand b{font-size:18px;color:#fff!important;text-shadow:0 0 12px rgba(255,39,60,.7)}aside .brand span{color:#e3c7ca!important}
aside nav{gap:4px!important}
aside nav button{min-height:50px!important;padding:8px 10px!important;border-radius:12px!important;background:transparent!important;color:#fff4f4!important;border:1px solid transparent!important;font-size:14px!important;font-weight:700!important;box-shadow:none!important;transition:.18s ease!important}
aside nav button::before{display:none!important}.menu-icon{display:grid!important;place-items:center!important;width:31px!important;height:31px!important;flex:0 0 31px!important;border-radius:50%!important;color:#fff!important;background:rgba(255,27,52,.10)!important;border:1px solid rgba(255,39,62,.65)!important;box-shadow:inset 0 0 12px rgba(255,30,56,.08),0 0 10px rgba(255,30,56,.20)!important;font-size:16px!important}
aside nav button:hover,aside nav button:focus{background:linear-gradient(90deg,rgba(255,25,50,.19),rgba(255,25,50,.04))!important;color:#fff!important;border-color:rgba(255,37,59,.75)!important;box-shadow:var(--nr-glow)!important;transform:translateX(-2px)!important}
aside nav button:hover .menu-icon{background:var(--nr-red)!important;color:#fff!important;box-shadow:0 0 13px rgba(255,30,56,.9),0 0 26px rgba(255,30,56,.42)!important}
aside nav button:first-child{background:linear-gradient(90deg,rgba(255,28,53,.27),rgba(255,28,53,.08))!important;border-color:#ff2945!important;box-shadow:inset 0 0 18px rgba(255,31,56,.16),0 0 12px rgba(255,31,56,.65),0 0 26px rgba(255,31,56,.18)!important}
aside .logout{background:rgba(255,31,55,.08)!important;color:#fff!important;border:1px solid rgba(255,35,58,.55)!important;box-shadow:0 0 14px rgba(255,30,56,.14)!important}
main{margin-right:258px!important;padding:14px 18px 34px!important;background:transparent!important}
header.executive-header.neon-header{display:grid!important;grid-template-columns:1fr minmax(360px,1.25fr) auto!important;align-items:center!important;gap:18px!important;min-height:102px!important;margin-bottom:14px!important;padding:14px 20px!important;background:linear-gradient(145deg,rgba(10,14,21,.98),rgba(6,10,15,.98))!important;border:1px solid var(--nr-line)!important;border-radius:18px!important;box-shadow:inset 0 0 30px rgba(255,30,56,.025),0 0 22px rgba(255,30,56,.07)!important;color:#fff!important}
.welcome-block h1{margin:0 0 5px!important;font-size:22px!important;color:#fff!important;text-shadow:0 0 14px rgba(255,43,63,.45)}.welcome-block p{margin:0;color:#cbbdc0;font-size:13px}
.daily-quote{min-height:62px;display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid #ff2845;border-radius:14px;background:linear-gradient(135deg,rgba(255,25,50,.10),rgba(8,12,18,.7));box-shadow:0 0 10px rgba(255,30,56,.42),inset 0 0 18px rgba(255,30,56,.05)}.daily-quote div{flex:1}.daily-quote strong,.daily-quote small{display:block}.daily-quote strong{color:#fff;font-size:13px}.daily-quote small{color:#d5c7c9;margin-top:5px;font-size:11px}.quote-mark{font-size:38px;line-height:1;color:var(--nr-red);font-weight:900;text-shadow:0 0 12px rgba(255,30,56,.9)}.quote-star{font-size:31px;color:#fff;text-shadow:0 0 10px #ff2b47}
.header-profile{text-align:right;min-width:140px}.header-profile .badge{display:block!important;background:rgba(255,255,255,.025)!important;color:#fff!important;border:1px solid rgba(255,34,57,.45)!important;border-radius:12px!important;padding:8px 10px!important;box-shadow:0 0 10px rgba(255,30,56,.09)!important}.header-profile small{display:block;margin-top:5px;color:#bbaeb1}
.dashboard-summary-strip,.kpis{gap:12px!important}.dashboard-summary-strip article,.kpis article,.card{background:linear-gradient(145deg,#0a0f16,#070b11)!important;border:1px solid rgba(255,34,58,.34)!important;color:#fff!important;box-shadow:inset 0 0 22px rgba(255,30,56,.018),0 9px 28px rgba(0,0,0,.22)!important}.dashboard-summary-strip article,.kpis article{border-radius:15px!important;min-height:110px!important}.dashboard-summary-strip span,.kpis article span{color:#d2c4c6!important}.dashboard-summary-strip strong,.kpis article strong{color:#fff!important;text-shadow:0 0 12px rgba(255,255,255,.06)}.dashboard-summary-strip small{color:#ff5065!important}.dashboard-summary-strip article:hover,.kpis article:hover,.card:hover{border-color:rgba(255,38,61,.58)!important;box-shadow:0 0 16px rgba(255,30,56,.08),0 12px 30px rgba(0,0,0,.25)!important}
.dashboard-intro{background:radial-gradient(circle at 85% 25%,rgba(255,193,28,.10),transparent 18%),linear-gradient(120deg,#0c1119,#080c12)!important;border:1px solid rgba(255,31,56,.40)!important;box-shadow:0 0 20px rgba(255,30,56,.06)!important}.dashboard-intro h2{color:#fff!important}.dashboard-intro p{color:#cbbdc0!important}.intro-kicker{color:var(--nr-yellow)!important}.soft-purple,.soft-dark{background:rgba(255,31,55,.09)!important;color:#fff!important;border:1px solid rgba(255,35,58,.48)!important;box-shadow:0 0 10px rgba(255,30,56,.12)!important}
.card h2,.card h3,.card p,.hint,.card small{color:#fff!important}.hint,.card p,.card small{color:#b9adb0!important}
input,select,textarea{background:#080d14!important;color:#fff!important;border:1px solid rgba(255,38,61,.28)!important}input::placeholder,textarea::placeholder{color:#7f7477!important}input:focus,select:focus,textarea:focus{border-color:#ff2946!important;box-shadow:0 0 0 2px rgba(255,30,56,.12),0 0 13px rgba(255,30,56,.16)!important}label>span{color:#d0c2c5!important}
button:not(.danger),.btn{background:#0b1118!important;color:#fff!important;border:1px solid rgba(255,38,61,.42)!important;box-shadow:0 0 8px rgba(255,30,56,.08)!important}button:not(.danger):hover,.btn:hover{background:rgba(255,30,56,.10)!important;border-color:#ff2946!important;box-shadow:0 0 12px rgba(255,30,56,.22)!important}.btn-confirm,form button[type="submit"]{background:linear-gradient(135deg,#ff2945,#d90e2c)!important;color:#fff!important;border:1px solid #ff5268!important;box-shadow:0 0 10px rgba(255,30,56,.58),0 0 24px rgba(255,30,56,.18)!important}.btn-neutral{background:#0c1219!important;color:#ddd!important}.danger,.btn-danger-soft{background:rgba(255,32,55,.10)!important;color:#ff6577!important;border:1px solid rgba(255,42,65,.48)!important}
table{background:#080d13!important;border:1px solid rgba(255,35,58,.25)!important}th{background:#0d131b!important;color:#fff!important;border-bottom:1px solid rgba(255,36,59,.30)!important}td{color:#e8dfe1!important;border-bottom:1px solid rgba(255,255,255,.055)!important}tbody tr:hover td{background:rgba(255,29,53,.045)!important}
.premium-hero,.product-hero{background:linear-gradient(120deg,#111720,#090e15)!important;border:1px solid rgba(255,37,60,.42)!important;box-shadow:0 0 20px rgba(255,30,56,.06)!important}.calendar-day,.training-card,.academy-card{background:#090e15!important;border:1px solid rgba(255,36,59,.24)!important;color:#fff!important}.calendar-day.today{outline:1px solid #ff2945!important;background:rgba(255,31,55,.10)!important;box-shadow:0 0 13px rgba(255,30,56,.25)!important}.calendar-event,.training-icon,.academy-type{background:rgba(255,30,56,.12)!important;color:#ff6678!important}
.login{background:radial-gradient(circle at 50% 18%,rgba(255,31,55,.16),transparent 26%),#05080d!important}.login .box,.login-card{background:#090e15!important;color:#fff!important;border:1px solid rgba(255,35,58,.50)!important;box-shadow:0 0 20px rgba(255,30,56,.18),0 30px 80px rgba(0,0,0,.55)!important}.login .box h1,.login-card h1{color:#fff!important;text-shadow:0 0 12px rgba(255,35,58,.55)}.login-card p,.login-card small{color:#c7b9bc!important}.brand-logo{box-shadow:0 0 12px rgba(255,35,58,.55)!important}
.fmito-assistant button{background:#090e15!important;color:#fff!important;border:2px solid #ff2945!important;box-shadow:0 0 14px rgba(255,30,56,.55)!important}.assistant-message{background:#0c1118!important;color:#fff!important;border:1px solid rgba(255,35,58,.40)!important;box-shadow:0 0 12px rgba(255,30,56,.12)!important}
::-webkit-scrollbar-track{background:#05080d!important}::-webkit-scrollbar-thumb{background:#55131f!important}::-webkit-scrollbar-thumb:hover{background:#8d1729!important}
@media(max-width:1050px){aside{width:215px!important}main{margin-right:215px!important}header.executive-header.neon-header{grid-template-columns:1fr 1.3fr!important}.header-profile{display:none}}
@media(max-width:760px){aside{width:100%!important}main{margin-right:0!important}header.executive-header.neon-header{grid-template-columns:1fr!important}.daily-quote{order:3}.dashboard-summary-strip{grid-template-columns:1fr 1fr!important}}

/* =========================================================
   FMITO OS v5.14 — ORANGE LUXURY / PREMIUM FINANCE UI
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

:root{
  --lux-orange:#f26a14;
  --lux-orange-2:#ff8a2c;
  --lux-orange-3:#ffb45d;
  --lux-peach:#ffd7ad;
  --lux-cream:#fffaf4;
  --lux-paper:#ffffff;
  --lux-ink:#1c1714;
  --lux-muted:#83766e;
  --lux-line:#eee1d5;
  --lux-soft:#fff4e8;
  --lux-green:#229461;
  --lux-red:#df3c3c;
  --lux-shadow:0 18px 50px rgba(113,67,32,.12);
}

html,body,button,input,select,textarea{
  font-family:"Vazirmatn","IRANSansX","Tahoma","Segoe UI",sans-serif!important;
}
html,body{
  background:#f1efed!important;
  color:var(--lux-ink)!important;
}
body{
  background:
    radial-gradient(circle at 78% 2%,rgba(255,168,87,.22),transparent 24%),
    linear-gradient(180deg,#f5f2ef 0%,#eeeae6 100%)!important;
}

#app{
  width:min(1550px,96vw)!important;
  min-height:calc(100vh - 44px)!important;
  margin:22px auto!important;
  border-radius:30px!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,#d83b06 0%,#f66c12 18%,#ff9f46 39%,#fffaf4 68%)!important;
  box-shadow:0 32px 90px rgba(59,33,17,.18)!important;
  position:relative!important;
}

/* sidebar becomes a luxury orange rail */
aside{
  width:228px!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  padding:26px 16px!important;
  background:linear-gradient(180deg,rgba(151,36,4,.42),rgba(244,101,20,.46))!important;
  backdrop-filter:blur(18px)!important;
  border-left:1px solid rgba(255,255,255,.25)!important;
  box-shadow:none!important;
}
aside .brand{
  margin-bottom:22px!important;
  padding:6px!important;
}
aside .brand b{color:#fff!important;font-size:17px!important}
aside .brand span{color:rgba(255,255,255,.72)!important;font-size:10px!important}
aside .brand-logo{
  width:55px!important;height:55px!important;border-radius:18px!important;
  border:2px solid rgba(255,255,255,.80)!important;
  box-shadow:0 10px 24px rgba(113,34,5,.16)!important;
}
aside nav{gap:5px!important}
aside nav button{
  min-height:40px!important;
  display:flex!important;align-items:center!important;gap:9px!important;
  padding:8px 10px!important;
  background:transparent!important;
  color:rgba(255,255,255,.92)!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:700!important;
}
aside nav button:hover,
aside nav button.active-menu{
  background:#fff!important;
  color:#db510b!important;
  border-color:rgba(255,255,255,.95)!important;
  box-shadow:0 12px 28px rgba(116,38,5,.14)!important;
  transform:none!important;
}
.menu-icon{
  width:28px!important;height:28px!important;flex:0 0 28px!important;
  display:grid!important;place-items:center!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
aside nav button:hover .menu-icon,
aside nav button.active-menu .menu-icon{
  background:#fff0e4!important;color:#e66013!important;border-color:#ffe0c6!important;
}
aside .logout{
  margin-top:16px!important;
  background:rgba(255,255,255,.15)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;box-shadow:none!important;
}
aside .logout:hover{background:#fff!important;color:#db510b!important}

/* main shell */
main{
  margin-right:228px!important;
  padding:24px 24px 38px!important;
  background:transparent!important;
}

/* top header like reference */
header.executive-header,header.neon-header{
  min-height:92px!important;
  display:grid!important;
  grid-template-columns:1.1fr 1.5fr .75fr!important;
  align-items:center!important;
  gap:16px!important;
  margin-bottom:18px!important;
  padding:18px 20px!important;
  position:relative!important;top:auto!important;
  background:rgba(255,255,255,.08)!important;
  backdrop-filter:blur(14px)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:20px!important;
  box-shadow:none!important;
  color:#fff!important;
}
header h1,#welcomeTitle{color:#fff!important;font-size:27px!important;font-weight:800!important;margin:0 0 4px!important}
.welcome-block p{color:rgba(255,255,255,.88)!important;margin:0!important}
.daily-quote{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:18px!important;
  min-height:64px!important;
  padding:12px 15px!important;
  box-shadow:0 10px 25px rgba(140,57,6,.10)!important;
}
.daily-quote strong{color:#fff!important}
.daily-quote small{color:rgba(255,255,255,.78)!important}
.quote-mark,.quote-star{color:#fff!important}
.header-profile{
  justify-self:end!important;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:16px!important;
  padding:10px 12px!important;
}
.header-profile .badge{background:rgba(255,255,255,.15)!important;color:#fff!important;border:0!important}
.header-profile small{color:rgba(255,255,255,.78)!important}

/* dashboard hero and KPI */
.dashboard-intro{
  min-height:145px!important;
  padding:24px!important;
  margin-bottom:16px!important;
  background:
    radial-gradient(circle at 86% 22%,rgba(255,255,255,.16),transparent 22%),
    linear-gradient(135deg,rgba(255,117,24,.78),rgba(255,164,77,.58))!important;
  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:22px!important;
  color:#fff!important;
  box-shadow:none!important;
}
.dashboard-intro h2{font-size:30px!important;color:#fff!important}
.dashboard-intro p{color:rgba(255,255,255,.86)!important}
.intro-kicker{color:#fff4e9!important}
.intro-actions button{
  background:#fff!important;color:#17110e!important;border:0!important;
  min-width:130px!important;box-shadow:0 10px 22px rgba(103,42,8,.12)!important
}

.dashboard-summary-strip{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:12px!important;
  margin-bottom:16px!important;
}
.dashboard-summary-strip article{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:18px!important;
  padding:16px 17px!important;
  box-shadow:var(--lux-shadow)!important;
}
.dashboard-summary-strip span{color:#76665c!important;font-size:11px!important}
.dashboard-summary-strip strong{color:#18110e!important;font-size:21px!important}
.dashboard-summary-strip small{color:#a08f84!important}

/* white content cards */
.card,
.kpis article{
  background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(255,255,255,.96)!important;
  border-radius:20px!important;
  color:var(--lux-ink)!important;
  box-shadow:0 14px 38px rgba(112,68,35,.09)!important;
}
.card h2,.card h3,.kpis article strong{color:#17110e!important}
.card p,.hint,.card small{color:var(--lux-muted)!important}
.kpis{gap:12px!important}
.kpis article{
  min-height:112px!important;
  padding:18px!important;
  border-top:0!important;
}
.kpis article span{color:#84766e!important}
.kpis article strong{font-size:22px!important}
.kpis article:nth-child(1) strong,
.kpis article:nth-child(4) strong{color:#e45f14!important}
.kpis article:nth-child(2) strong{color:#239363!important}
.kpis article:nth-child(3) strong{color:#222!important}

/* form system */
input,select,textarea{
  background:#fffdfb!important;
  color:#2e2722!important;
  border:1px solid #eadfd5!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
input::placeholder,textarea::placeholder{color:#b1a39a!important}
input:focus,select:focus,textarea:focus{
  border-color:#ff9b56!important;
  box-shadow:0 0 0 4px rgba(242,106,20,.09)!important;
}
label>span{color:#6f6259!important}
button,.btn{border-radius:999px!important;min-height:38px!important;padding:8px 15px!important}
button:not(.danger),.btn{
  background:#fff!important;color:#2a211c!important;
  border:1px solid #eadfd5!important;
  box-shadow:0 8px 18px rgba(111,72,42,.08)!important;
}
button:not(.danger):hover,.btn:hover{
  background:#fff5ec!important;border-color:#ffc69c!important;transform:translateY(-1px)!important
}
.btn-confirm,form button[type="submit"]{
  background:linear-gradient(135deg,#ff7a20,#ef5c09)!important;
  color:#fff!important;border:0!important;
  box-shadow:0 10px 22px rgba(224,86,6,.22)!important;
}
.btn-edit{background:#fff4e9!important;color:#db5a10!important;border-color:#ffd4b7!important}
.btn-neutral{background:#fff!important;color:#75675f!important;border-color:#e7ddd4!important}
.btn-danger-soft,.danger{background:#fff0ef!important;color:#cf3e36!important;border-color:#f1c6c2!important;box-shadow:none!important}

/* tables */
table{
  background:#fff!important;
  border:1px solid #efe3d9!important;
  border-radius:15px!important;
}
th{
  background:#fff7f0!important;
  color:#75665d!important;
  border-bottom:1px solid #eee2d8!important;
}
td{
  color:#3d342f!important;
  border-bottom:1px solid #f3ebe5!important;
}
tbody tr:hover td{background:#fffaf5!important}

/* premium sections */
.premium-hero,.product-hero,.scanner-hero,.academy-hero{
  background:linear-gradient(135deg,#f36c17,#ff9f47)!important;
  border:0!important;color:#fff!important;
  box-shadow:0 14px 34px rgba(198,81,9,.15)!important;
}
.premium-hero h2,.premium-hero h3,
.product-hero h2,.product-hero h3{color:#fff!important}
.premium-hero p,.premium-hero small,
.product-hero p,.product-hero small{color:rgba(255,255,255,.85)!important}

/* calendar like crisp finance UI */
.calendar-day{
  background:#fff!important;border:1px solid #eee2d8!important;
  color:#40372f!important;border-radius:14px!important
}
.calendar-day.today{
  outline:0!important;
  background:linear-gradient(135deg,#ff7d25,#ef5d0c)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(223,88,7,.22)!important
}
.calendar-day.today small,.calendar-day.today .day-header small{color:rgba(255,255,255,.8)!important}
.calendar-event{background:#fff1e4!important;color:#d65b12!important}

/* login */
.login{
  background:
    radial-gradient(circle at 72% 18%,rgba(255,190,117,.42),transparent 22%),
    linear-gradient(135deg,#b42f05 0%,#f16411 52%,#ff9a41 100%)!important
}
.login-card,.login .box{
  background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(255,255,255,.80)!important;
  color:#2b211b!important;
  border-radius:28px!important;
  box-shadow:0 30px 90px rgba(100,36,6,.28)!important
}
.login-card h1,.login .box h1{color:#d7520b!important}
.brand-logo{border-color:rgba(255,255,255,.80)!important}

/* remove legacy ambient bar if present */
.ambient-topbar{display:none!important}
.fmito-assistant button{
  background:#111!important;color:#fff!important;border:0!important;
  box-shadow:0 12px 28px rgba(68,38,19,.16)!important
}
.assistant-message{background:#111!important}

/* responsive */
@media(max-width:1100px){
  #app{width:98vw!important;margin:10px auto!important}
  aside{width:205px!important}
  main{margin-right:205px!important}
  header.executive-header,header.neon-header{grid-template-columns:1fr!important}
  .header-profile{justify-self:start!important}
  .dashboard-summary-strip{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:760px){
  #app{width:100%!important;margin:0!important;border-radius:0!important}
  aside{position:relative!important;width:100%!important;height:auto!important}
  main{margin-right:0!important;padding:12px!important}
  .dashboard-summary-strip{grid-template-columns:1fr 1fr!important}
  .dashboard-intro{min-height:auto!important}
}

/* =========================================================
   FMITO OS v5.15 — BRAND SIDEBAR REBUILD
   High-contrast, premium, readable navigation
   ========================================================= */

.brand-sidebar{
  width:260px!important;
  padding:18px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  background:
    radial-gradient(circle at 18% 2%,rgba(255,255,255,.20),transparent 19%),
    linear-gradient(180deg,#e44b07 0%,#ef701f 44%,#f5a878 76%,#ffd7bd 100%)!important;
  border-left:1px solid rgba(255,255,255,.55)!important;
  box-shadow:-10px 0 35px rgba(122,55,11,.12)!important;
  overflow-y:auto!important;
}

.sidebar-profile{
  display:grid!important;
  grid-template-columns:54px 1fr 22px!important;
  align-items:center!important;
  gap:11px!important;
  padding:12px!important;
  min-height:78px!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,rgba(185,44,4,.30),rgba(255,118,31,.16))!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.sidebar-avatar{
  width:54px!important;height:54px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;
  background:#fff!important;color:#d84a09!important;
  border:3px solid #fff!important;
  box-shadow:0 8px 20px rgba(101,36,7,.16)!important;
  font-size:20px!important;font-weight:900!important;
}
.sidebar-profile-copy{min-width:0!important}
.sidebar-profile-copy strong{
  display:block!important;color:#fff!important;
  font-size:14px!important;font-weight:900!important;line-height:1.65!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
.sidebar-profile-copy span{
  display:block!important;color:rgba(255,255,255,.82)!important;
  font-size:10px!important;font-weight:600!important
}
.profile-chevron{color:#fff!important;font-size:20px!important}

.brand-premium{
  min-height:78px!important;
  display:grid!important;
  grid-template-columns:1fr 72px!important;
  align-items:center!important;
  gap:10px!important;
  padding:8px 12px!important;
  margin:0!important;
}
.brand-premium .brand-logo{
  width:72px!important;height:58px!important;border-radius:18px!important;
  justify-self:end!important;
}
.brand-premium b{
  display:block!important;color:#fff!important;font-size:20px!important;font-weight:900!important;
  letter-spacing:.2px!important
}
.brand-premium span{
  color:rgba(255,255,255,.82)!important;font-size:10px!important
}

.premium-nav{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
}
.premium-nav button{
  width:100%!important;
  min-height:52px!important;
  display:grid!important;
  grid-template-columns:38px 1fr 18px!important;
  align-items:center!important;
  gap:10px!important;
  padding:7px 10px!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(255,255,255,.92)!important;
  box-shadow:0 8px 18px rgba(112,53,17,.07)!important;
  color:#2f2925!important;
  text-align:right!important;
  font-size:13px!important;
  font-weight:800!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
.premium-nav button:hover{
  transform:translateY(-1px)!important;
  background:#fff!important;
  border-color:#ffb585!important;
  box-shadow:0 10px 22px rgba(118,51,10,.12)!important;
}
.premium-nav button.active-menu{
  background:linear-gradient(135deg,#f15c16,#e94010)!important;
  color:#fff!important;
  border-color:#ff7551!important;
  box-shadow:0 8px 20px rgba(215,61,9,.24),0 0 0 2px rgba(255,255,255,.18) inset!important;
}
.menu-ico{
  width:38px!important;height:38px!important;
  display:grid!important;place-items:center!important;
  border-radius:12px!important;
  color:#ef5a15!important;
  background:#fff7f0!important;
  border:1px solid #ffe0ce!important;
}
.menu-ico svg{
  width:21px!important;height:21px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;
  stroke-linecap:round!important;stroke-linejoin:round!important
}
.menu-label{
  color:#2f2925!important;
  opacity:1!important;
  visibility:visible!important;
  white-space:normal!important;
  line-height:1.4!important
}
.menu-chevron{
  color:#e9bda5!important;
  font-size:21px!important;
  font-weight:400!important;
  transform:scaleX(-1)!important
}
.premium-nav button.active-menu .menu-ico{
  color:#fff!important;background:rgba(255,255,255,.13)!important;border-color:rgba(255,255,255,.18)!important
}
.premium-nav button.active-menu .menu-label{color:#fff!important}
.premium-nav button.active-menu .menu-chevron{color:#fff!important}

.premium-logout{
  margin-top:auto!important;
  min-height:48px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
  border-radius:15px!important;
  color:#fff!important;
  background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:none!important;
}
.premium-logout:hover{
  background:#fff!important;color:#d94c0a!important;
}
.logout-icon{font-size:19px!important}

/* compensate wider sidebar */
main{margin-right:260px!important}

@media(max-width:1100px){
  .brand-sidebar{width:235px!important;padding:14px!important}
  main{margin-right:235px!important}
  .brand-premium{grid-template-columns:1fr 58px!important}
  .brand-premium .brand-logo{width:58px!important;height:50px!important}
}
@media(max-width:760px){
  .brand-sidebar{position:relative!important;width:100%!important;height:auto!important;border-radius:0!important}
  main{margin-right:0!important}
  .premium-nav{display:grid!important;grid-template-columns:1fr 1fr!important}
  .premium-nav button{min-height:50px!important}
}


/* =========================================================
   FMITO OS v5.16 — Persian Zar Typography
   ========================================================= */
:root{
  --fmito-fa-font: "B Zar","Zar","BZar","Zar Regular","Tahoma","Arial",sans-serif;
}

html, body, button, input, select, textarea, table,
.sidebar-profile, .brand-sidebar, .premium-nav,
.card, .panel, .modal, .view, .topbar {
  font-family: var(--fmito-fa-font) !important;
}

/* Zar benefits from slightly larger UI sizing for legibility */
body{font-size:16px!important}
.premium-nav button{font-size:16px!important}
.premium-nav .menu-label{font-size:16px!important;font-weight:700!important}
.sidebar-profile-copy strong{font-size:17px!important}
.sidebar-profile-copy span{font-size:13px!important}
.brand-premium b{font-size:21px!important}
.brand-premium span{font-size:12px!important}
h1{font-size:30px!important}
h2{font-size:24px!important}
h3{font-size:20px!important}
input,select,textarea,button{font-size:15px!important}


/* =========================================================
   FMITO OS v5.17 — TRUE FULL SCREEN / RESPONSIVE WORKSPACE
   Keeps v5.16 Zar typography and current branded theme.
   ========================================================= */

html, body {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

body {
  min-height: 100vh !important;
}

/* Remove desktop centered/max-width shell limitations */
body > .app,
body > .app-shell,
body > .layout,
body > .shell,
body > .workspace,
.app,
.app-shell,
.layout,
.shell,
.workspace,
.main-shell,
.dashboard-shell,
.page-shell {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Main application area fills all remaining screen space */
.main,
.main-content,
.content,
.content-area,
.page-content,
.dashboard-content,
#app,
#main,
main {
  max-width: none !important;
  min-width: 0 !important;
}

/* Generic containers should not artificially cap the application */
.container,
.container-fluid {
  width: 100% !important;
  max-width: none !important;
}

/* Desktop: reserve only sidebar width, use every other pixel */
@media (min-width: 1101px) {
  :root {
    --fmito-sidebar-width: 260px;
  }

  .sidebar,
  aside.sidebar,
  #sidebar {
    width: var(--fmito-sidebar-width) !important;
    min-width: var(--fmito-sidebar-width) !important;
    max-width: var(--fmito-sidebar-width) !important;
    height: 100vh !important;
    top: 0 !important;
    bottom: 0 !important;
  }

  .main,
  .main-content,
  .content,
  .content-area,
  .page-content,
  main {
    width: calc(100vw - var(--fmito-sidebar-width)) !important;
    max-width: calc(100vw - var(--fmito-sidebar-width)) !important;
  }

  /* Support both RTL sidebar positioning implementations */
  body[dir="rtl"] .main,
  body[dir="rtl"] .main-content,
  body[dir="rtl"] .content,
  body[dir="rtl"] .content-area,
  body[dir="rtl"] .page-content,
  html[dir="rtl"] .main,
  html[dir="rtl"] .main-content,
  html[dir="rtl"] .content,
  html[dir="rtl"] .content-area,
  html[dir="rtl"] .page-content {
    margin-left: 0 !important;
  }
}

/* Cards/forms/tables scale with the available viewport */
.card,
.panel,
.section,
.content-card,
.form-card,
.table-card,
.dashboard-card {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

table {
  width: 100% !important;
}

/* Responsive form layouts */
.form-grid,
.grid,
.dashboard-grid,
.stats-grid {
  max-width: 100% !important;
}

/* Medium screens */
@media (max-width: 1100px) {
  .main,
  .main-content,
  .content,
  .content-area,
  .page-content,
  main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Small screens: prevent fixed desktop widths from breaking layout */
@media (max-width: 760px) {
  .container,
  .container-fluid,
  .main,
  .main-content,
  .content,
  .content-area,
  .page-content,
  main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .form-grid,
  .dashboard-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   FMITO OS v5.18 — FULL SCREEN FIX
   Fixes centered shell + unused workspace seen on wide screens
   ========================================================= */

/* Browser viewport must be the application viewport */
html,
body {
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  display: block !important;
  overflow-x: hidden !important;
}

/* v5.14 had a centered 96vw/max-1550 shell — remove it completely */
#app {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* Sidebar is attached to the right edge of the actual browser */
.brand-sidebar,
aside {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: 100vh !important;
  z-index: 100 !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
}

/* Workspace uses every pixel left after the sidebar */
#app > main,
main {
  position: relative !important;
  width: calc(100vw - 260px) !important;
  max-width: calc(100vw - 260px) !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  margin: 0 260px 0 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* Remove remaining inner width caps */
.view,
main > .view,
#dashboard,
#sales,
#products,
#customers,
#employees,
#attendance,
#duties,
#calendar,
#payroll,
#training,
#accounting,
#websites,
#socials,
#users {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.executive-header,
.neon-header,
.dashboard-intro,
.dashboard-summary-strip,
.kpis,
.two-col,
.card,
.panel,
.table-wrap,
.toolbar,
.persian-calendar {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Dashboard grids should stretch instead of leaving a dead column */
.dashboard-summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.kpis {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Tables fill workspace but can scroll internally when necessary */
.table-wrap {
  overflow-x: auto !important;
}

table {
  min-width: 100% !important;
}

/* Wide-screen spacing */
@media (min-width: 1500px) {
  #app > main,
  main {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

/* Tablet */
@media (max-width: 1100px) and (min-width: 761px) {
  .brand-sidebar,
  aside {
    width: 225px !important;
    min-width: 225px !important;
    max-width: 225px !important;
  }

  #app > main,
  main {
    width: calc(100vw - 225px) !important;
    max-width: calc(100vw - 225px) !important;
    margin-right: 225px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .dashboard-summary-strip {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  #app {
    width: 100% !important;
    min-width: 100% !important;
  }

  .brand-sidebar,
  aside {
    position: relative !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #app > main,
  main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  .dashboard-summary-strip,
  .two-col {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FMITO OS v5.20 — FINAL REFERENCE MINIMAL THEME
   Bright / airy / premium / soft neumorphic dashboard
   ========================================================= */

:root{
  --ref-bg:#f7f9fc;
  --ref-surface:#ffffff;
  --ref-soft:#f4f6fa;
  --ref-line:#e9edf3;
  --ref-ink:#202832;
  --ref-muted:#98a1ad;
  --ref-orange:#ff6a13;
  --ref-orange-soft:#fff0e6;
  --ref-green:#26c281;
  --ref-blue:#4ca4ff;
  --ref-purple:#925bff;
  --ref-shadow:0 10px 28px rgba(52,72,95,.08);
  --ref-shadow-soft:0 5px 18px rgba(52,72,95,.06);
  --ref-sidebar:205px;
}

html,body{
  width:100%!important;
  min-height:100%!important;
  margin:0!important;
  padding:0!important;
  background:#f5f7fa!important;
  color:var(--ref-ink)!important;
  overflow-x:hidden!important;
}

body{
  font-family:"B Zar","Zar","BZar","Tahoma","Arial",sans-serif!important;
  background:
    radial-gradient(circle at 82% 4%,rgba(98,120,255,.045),transparent 25%),
    linear-gradient(180deg,#f8faff,#f4f6fa)!important;
}

#app{
  width:100vw!important;
  max-width:none!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* LEFT SIDEBAR exactly like selected reference */
.reference-sidebar{
  position:fixed!important;
  left:18px!important;
  right:auto!important;
  top:18px!important;
  bottom:18px!important;
  width:var(--ref-sidebar)!important;
  min-width:var(--ref-sidebar)!important;
  max-width:var(--ref-sidebar)!important;
  height:auto!important;
  padding:14px 12px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:11px!important;
  background:#ff5e00!important;
  border:1px solid rgba(232,236,242,.96)!important;
  border-radius:20px!important;
  box-shadow:0 16px 42px rgba(60,78,99,.11)!important;
  backdrop-filter:blur(14px)!important;
  z-index:80!important;
  overflow-y:auto!important;
}

.reference-brand{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  min-height:54px!important;
  padding:4px 5px 9px!important;
  border-bottom:1px solid #edf0f4!important;
}
.reference-logo{
  width:45px!important;height:45px!important;
  border-radius:13px!important;overflow:hidden!important;
  background:#e41616!important;
  box-shadow:0 2px 14px #fff!important;

}
.reference-logo img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.reference-brand-copy strong{display:block!important;color:#26303b!important;font-size:16px!important;font-weight:900!important;line-height:1.3!important}
.reference-brand-copy span{display:block!important;color:#9aa3af!important;font-size:10px!important;margin-top:2px!important}

.reference-nav{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}
.reference-nav button{
  width:100%!important;
  min-height:36px!important;
  display:grid!important;
  grid-template-columns:27px 1fr 14px!important;
  align-items:center!important;
  gap:7px!important;
  padding:5px 7px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
  text-align:right!important;
  font-size:13px!important;
  font-weight:700!important;
  transition:.16s ease!important;
}
.reference-nav button:hover{
  background:#fff!important;
  color:#2d3640!important;
  border-color:#eef1f4!important;
  box-shadow:var(--ref-shadow-soft)!important;
  transform:none!important;
}
.reference-nav button.active{
  background:#fff!important;
  color:#ff6512!important;
  border-color:#f0f1f4!important;
  box-shadow:0 8px 20px rgba(64,80,100,.09)!important;
}
.rnav-dot{
  width:27px!important;height:27px!important;
  display:grid!important;place-items:center!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#828b96!important;
  border:1px solid #edf0f3!important;
  font-size:14px!important;
  box-shadow:0 3px 8px rgba(73,89,109,.05)!important;
}
.reference-nav button.active .rnav-dot{
  color:#ff6512!important;
  background:#fff3ec!important;
  border-color:#ffe1cf!important;
}
.reference-nav button i{
  color:#c4c9d0!important;font-style:normal!important;font-size:16px!important;line-height:1!important
}
.reference-logout{
  margin-top:auto!important;
  min-height:38px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:7px 10px!important;
  background:#fff!important;color:#6d7680!important;
  border:1px solid #eceff3!important;border-radius:11px!important;box-shadow:var(--ref-shadow-soft)!important
}

/* Main workspace: fills whole screen minus sidebar */
main{
  width:calc(100vw - var(--ref-sidebar) - 55px)!important;
  max-width:none!important;
  min-width:0!important;
  min-height:100vh!important;
  margin:0 0 0 calc(var(--ref-sidebar) + 40px)!important;
  padding:18px 22px 35px!important;
  background:transparent!important;
  box-sizing:border-box!important;
}

/* compact top header */
.reference-header{
  position:relative!important;top:auto!important;
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:220px minmax(260px,460px) 1fr!important;
  align-items:center!important;
  gap:16px!important;
  padding:7px 4px 12px!important;
  margin:0 0 12px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.reference-profile{
  display:flex!important;align-items:center!important;gap:9px!important;
}
.profile-avatar{
  width:38px!important;height:38px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;
  background:#222d38!important;color:#fff!important;
  font-size:14px!important;font-weight:900!important;
}
.reference-profile strong{display:block!important;color:#26303b!important;font-size:13px!important;line-height:1.4!important}
.reference-profile small{display:block!important;color:#a0a8b2!important;font-size:9px!important}

.reference-search{
  height:38px!important;
  display:flex!important;align-items:center!important;gap:7px!important;
  padding:0 11px!important;
  background:rgba(255,255,255,.74)!important;
  border:1px solid #e9edf2!important;
  border-radius:11px!important;
  box-shadow:0 4px 15px rgba(72,87,106,.04)!important;
}
.reference-search input{
  width:100%!important;height:34px!important;min-height:34px!important;
  border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;
  color:#4d5762!important;font-size:12px!important
}
.reference-search span{color:#a5adb7!important}

.reference-tools{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  min-width:0!important;
}
.reference-tools>button{
  width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;
  border-radius:50%!important;background:#fff!important;color:#6d7680!important;
  border:1px solid #eceff3!important;box-shadow:var(--ref-shadow-soft)!important
}
.reference-quote{
  max-width:310px!important;
  padding:5px 10px!important;
  border-right:2px solid #ff6a13!important;
}
.reference-quote strong{
  display:block!important;color:#555f69!important;font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
.reference-quote small{
  display:block!important;color:#a1a9b3!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
.hidden-user-badge{display:none!important}

/* Page title is subtle, not a huge hero */
.reference-page-title{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  margin:1px 0 12px!important;
}
.reference-page-title small{color:#a7afb9!important;font-size:9px!important;letter-spacing:.6px!important}
.reference-page-title h1{margin:1px 0!important;color:#29323c!important;font-size:19px!important;font-weight:900!important}
.page-title-actions button{
  min-height:32px!important;
  background:#fff!important;color:#ff6512!important;border:1px solid #eceff2!important;
  border-radius:9px!important;box-shadow:var(--ref-shadow-soft)!important
}

/* Dashboard KPI row matches reference */
.dashboard-summary-strip{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin:0 0 12px!important;
}
.dashboard-summary-strip article{
  min-height:105px!important;
  position:relative!important;
  padding:14px 14px!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid #edf0f4!important;
  border-radius:15px!important;
  box-shadow:var(--ref-shadow)!important;
  overflow:hidden!important;
}
.dashboard-summary-strip article::before{
  content:""!important;
  position:absolute!important;right:13px!important;top:13px!important;
  width:33px!important;height:33px!important;border-radius:10px!important;
  background:#fff3ec!important;
}
.dashboard-summary-strip article:nth-child(2)::before{background:#eef9f3!important}
.dashboard-summary-strip article:nth-child(3)::before{background:#f0efff!important}
.dashboard-summary-strip article:nth-child(4)::before{background:#eef7ff!important}
.dashboard-summary-strip span{display:block!important;color:#767f89!important;font-size:10px!important}
.dashboard-summary-strip strong{display:block!important;margin-top:8px!important;color:#202832!important;font-size:18px!important;font-weight:900!important}
.dashboard-summary-strip small{display:block!important;margin-top:7px!important;color:#a2aab4!important;font-size:8px!important}

/* secondary KPIs look like clean reference cards */
.kpis{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:12px!important;
}
.kpis article{
  min-height:91px!important;
  padding:14px!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid #edf0f4!important;
  border-radius:15px!important;
  box-shadow:var(--ref-shadow-soft)!important;
}
.kpis article span{color:#7d8691!important;font-size:10px!important}
.kpis article strong{display:block!important;color:#27313b!important;font-size:16px!important;margin-top:6px!important}

/* all application cards follow the same system */
.card{
  background:rgba(255,255,255,.90)!important;
  border:1px solid #ebeff3!important;
  border-radius:15px!important;
  box-shadow:var(--ref-shadow-soft)!important;
  color:#343d47!important;
}
.card h2,.card h3{color:#2d3640!important}
.card p,.card small,.hint{color:#929ba6!important}

input,select,textarea{
  background:#fbfcfd!important;
  color:#49535e!important;
  border:1px solid #e7ebef!important;
  border-radius:9px!important;
  box-shadow:none!important;
  font-family:"B Zar","Zar","BZar","Tahoma",sans-serif!important
}
input:focus,select:focus,textarea:focus{
  border-color:#ffb787!important;
  box-shadow:0 0 0 3px rgba(255,106,19,.07)!important
}
button,.btn{border-radius:9px!important}
.btn-confirm,form button[type="submit"]{
  background:#ff6a13!important;color:#fff!important;border:0!important;
  box-shadow:0 7px 16px rgba(255,106,19,.16)!important
}
.btn-edit{background:#fff4ed!important;color:#ee6718!important;border:1px solid #ffe0cc!important}
.btn-neutral{background:#fff!important;color:#6f7882!important;border:1px solid #e9edf1!important}
.btn-danger-soft,.danger{background:#fff1f1!important;color:#d65454!important;border:1px solid #f4d6d6!important;box-shadow:none!important}

table{
  background:#fff!important;
  border:1px solid #ebeff3!important;
  border-radius:12px!important
}
th{background:#f8fafc!important;color:#7c858f!important;border-bottom:1px solid #ebeff3!important}
td{color:#4d5761!important;border-bottom:1px solid #f0f2f5!important}
tbody tr:hover td{background:#fbfcfd!important}

/* remove all legacy orange/gradient hero styling */
.dashboard-intro,.ambient-topbar{display:none!important}
.premium-hero,.product-hero,.scanner-hero,.academy-hero{
  background:#fff!important;color:#333!important;border:1px solid #ebeff3!important;box-shadow:var(--ref-shadow-soft)!important
}
.premium-hero h2,.premium-hero h3,.product-hero h2,.product-hero h3{color:#303943!important}
.premium-hero p,.premium-hero small,.product-hero p,.product-hero small{color:#929ba6!important}

/* calendar */
.calendar-day{
  background:#fff!important;border:1px solid #ebeff3!important;color:#4b5560!important;
  border-radius:11px!important
}
.calendar-day.today{
  background:#fff3eb!important;
  outline:1px solid #ffb88b!important;
  color:#e76012!important;
  box-shadow:none!important
}
.calendar-event{background:#f4f0ff!important;color:#7955c7!important}

/* Login */
.login{
  background:
    radial-gradient(circle at 20% 10%,rgba(255,106,19,.08),transparent 26%),
    linear-gradient(180deg,#f8faff,#f4f6fa)!important
}
.login-card,.login .box{
  background:#fff!important;color:#2f3943!important;
  border:1px solid #ebeff3!important;border-radius:20px!important;
  box-shadow:0 20px 55px rgba(60,78,100,.12)!important
}
.login-card h1,.login .box h1{color:#28323c!important}

/* small screens */
@media(max-width:1100px){
  :root{--ref-sidebar:180px}
  .reference-sidebar{left:10px!important;top:10px!important;bottom:10px!important;padding:10px!important}
  main{width:calc(100vw - var(--ref-sidebar) - 32px)!important;margin-left:calc(var(--ref-sidebar) + 22px)!important;padding:12px 14px 28px!important}
  .reference-header{grid-template-columns:170px 1fr!important}
  .reference-tools{grid-column:1/-1!important;justify-content:space-between!important}
  .dashboard-summary-strip{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:760px){
  .reference-sidebar{
    position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;
    width:calc(100% - 20px)!important;min-width:0!important;max-width:none!important;height:auto!important;
    margin:10px!important
  }
  .reference-nav{display:grid!important;grid-template-columns:1fr 1fr!important}
  main{width:100%!important;margin:0!important;padding:10px!important}
  .reference-header{grid-template-columns:1fr!important}
  .reference-search{order:3!important}
  .dashboard-summary-strip,.kpis{grid-template-columns:1fr 1fr!important}
}

/* =========================================================
   FMITO OS v5.21 — RTL REFINED
   Right sidebar + refined HR form/table
   ========================================================= */

:root{
  --ref-sidebar:220px;
}

/* RIGHT SIDEBAR: natural for Persian RTL */
.reference-sidebar{
  left:auto!important;
  right:18px!important;
  top:18px!important;
  bottom:18px!important;
  width:var(--ref-sidebar)!important;
  min-width:var(--ref-sidebar)!important;
  max-width:var(--ref-sidebar)!important;
  direction:rtl!important;
}

.reference-brand{
  flex-direction:row!important;
  text-align:right!important;
}

.reference-brand-copy{
  flex:1!important;
  text-align:right!important;
}

.reference-nav button{
  grid-template-columns:30px 1fr 14px!important;
  direction:rtl!important;
  text-align:right!important;
}

.reference-nav button i{
  transform:none!important;
}

/* Main workspace now reserves right side, not left */
main{
  width:calc(100vw - var(--ref-sidebar) - 58px)!important;
  max-width:calc(100vw - var(--ref-sidebar) - 58px)!important;
  margin:0 calc(var(--ref-sidebar) + 40px) 0 0!important;
  padding:18px 24px 36px!important;
}

/* Header: profile naturally near sidebar on right, search centered, tools left */
.reference-header{
  grid-template-columns:220px minmax(320px,520px) 1fr!important;
  direction:rtl!important;
}
.reference-profile{
  justify-self:start!important;
  direction:rtl!important;
}
.reference-search{
  justify-self:center!important;
  width:100%!important;
}
.reference-tools{
  justify-content:flex-start!important;
  direction:rtl!important;
}
.reference-quote{
  border-right:0!important;
  border-left:2px solid #ff6a13!important;
  text-align:right!important;
}

/* Wider content cards / cleaner page rhythm */
.view{
  width:100%!important;
  max-width:none!important;
}
.card{
  padding:18px!important;
}
.reference-page-title{
  margin-top:2px!important;
}

/* HR employee card matching selected reference */
.employee-register-card{
  padding:18px!important;
}
.employee-section-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding-bottom:12px!important;
  margin-bottom:14px!important;
  border-bottom:1px solid #eef1f4!important;
}
.employee-section-head small{
  color:#a1a9b3!important;
  font-size:9px!important;
  letter-spacing:.7px!important;
}
.employee-section-head h3{
  margin:2px 0 0!important;
  font-size:18px!important;
}

.employee-register-layout{
  display:grid!important;
  grid-template-columns:210px minmax(0,1fr)!important;
  gap:18px!important;
  align-items:stretch!important;
  direction:ltr!important;
}
.employee-photo-panel{
  direction:rtl!important;
  padding:0 0 0 16px!important;
  border-left:1px solid #edf0f3!important;
  display:flex!important;
  flex-direction:column!important;
  gap:11px!important;
}
.employee-upload-preview{
  min-height:188px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px dashed #dfe5eb!important;
  border-radius:14px!important;
  background:#fbfcfd!important;
  color:#6e7883!important;
}
.upload-avatar-placeholder{
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#f4f6f9!important;
  color:#737e89!important;
  font-size:22px!important;
  border:1px solid #e7ebef!important;
}
.employee-upload-preview strong{
  color:#68727d!important;
  font-size:13px!important;
}
.employee-upload-preview span{
  color:#a4acb5!important;
  font-size:9px!important;
}

.employee-upload-btn{
  display:block!important;
  cursor:pointer!important;
}
.employee-upload-btn input{
  display:none!important;
}
.employee-upload-btn span{
  min-height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #eceff3!important;
  background:#fff!important;
  color:#65707b!important;
  border-radius:10px!important;
  box-shadow:0 5px 14px rgba(70,86,105,.05)!important;
  font-weight:700!important;
}
.employee-upload-btn:hover span{
  border-color:#ffd8c0!important;
  color:#f06416!important;
}

.employee-main-submit{
  width:100%!important;
  min-height:40px!important;
  margin-top:auto!important;
  border-radius:10px!important;
}

.employee-form-grid{
  direction:rtl!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
.employee-form-grid label{
  min-width:0!important;
}
.employee-form-grid label.wide{
  grid-column:1/-1!important;
}
.employee-form-grid input,
.employee-form-grid select{
  width:100%!important;
  min-height:39px!important;
}
.employee-form-grid>button{
  display:none!important;
}

/* Employee list */
.employee-list-toolbar{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-bottom:12px!important;
}
.employee-list-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:min(480px,48%)!important;
}
.employee-list-actions input{
  flex:1!important;
  min-width:0!important;
}
.employee-filter-btn{
  white-space:nowrap!important;
  min-height:36px!important;
}
#employeesTable th{
  font-size:10px!important;
  white-space:nowrap!important;
}
#employeesTable td{
  font-size:11px!important;
  vertical-align:middle!important;
}
#employeesTable img{
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}

/* softer active nav */
.reference-nav button.active{
  color:#f26116!important;
  background:#fff!important;
  border-right:3px solid #ff6a13!important;
  border-left:1px solid #f0f2f5!important;
}

/* Desktop card layout feels more balanced */
@media(min-width:1350px){
  .employee-register-card{
    padding:20px!important;
  }
  .employee-form-grid{
    gap:13px!important;
  }
}

@media(max-width:1100px){
  :root{--ref-sidebar:190px}
  .reference-sidebar{
    right:10px!important;
    left:auto!important;
  }
  main{
    width:calc(100vw - var(--ref-sidebar) - 34px)!important;
    max-width:calc(100vw - var(--ref-sidebar) - 34px)!important;
    margin-right:calc(var(--ref-sidebar) + 22px)!important;
    margin-left:0!important;
  }
  .employee-register-layout{
    grid-template-columns:170px minmax(0,1fr)!important;
  }
  .employee-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  .reference-sidebar{
    position:relative!important;
    right:auto!important;
    left:auto!important;
    width:calc(100% - 20px)!important;
    min-width:0!important;
    max-width:none!important;
    margin:10px!important;
  }
  main{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  .employee-register-layout{
    grid-template-columns:1fr!important;
    direction:rtl!important;
  }
  .employee-photo-panel{
    border-left:0!important;
    border-bottom:1px solid #edf0f3!important;
    padding:0 0 14px!important;
  }
  .employee-upload-preview{
    min-height:130px!important;
  }
  .employee-form-grid{
    grid-template-columns:1fr!important;
  }
  .employee-list-toolbar{
    align-items:stretch!important;
    flex-direction:column!important;
  }
  .employee-list-actions{
    min-width:0!important;
    width:100%!important;
  }
}

/* =========================================================
   FAMITO OS v5.22 — WooCommerce Sales Intelligence
   ========================================================= */
.woo-dashboard-shell{margin-bottom:16px}
.woo-dashboard-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:15px 17px;margin-bottom:10px;border:1px solid #ebeff3;border-radius:15px;background:rgba(255,255,255,.9);
}
.woo-dashboard-head small{color:#ff6a13;font-size:9px;letter-spacing:.7px}
.woo-dashboard-head h2{margin:2px 0;color:#27313b;font-size:19px}
.woo-dashboard-head p{margin:0;color:#929ba6;font-size:10px}
.woo-dashboard-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.woo-dashboard-controls select{min-width:145px}
.woo-status{padding:9px 12px;margin-bottom:10px;border-radius:10px;background:#f6f8fa;color:#78828d;border:1px solid #ebeff3;font-size:10px}
.woo-status.loading{background:#fff8ee;color:#9d6a27;border-color:#f5e2c7}
.woo-status.success{background:#eef9f3;color:#24734f;border-color:#d5ecdf}
.woo-status.error{background:#fff1f1;color:#b84949;border-color:#f3d3d3}
.woo-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:12px}
.woo-kpis article{
  padding:12px 13px;background:#fff;border:1px solid #ebeff3;border-radius:13px;box-shadow:0 5px 18px rgba(52,72,95,.05)
}
.woo-kpis span{display:block;color:#7f8994;font-size:9px}
.woo-kpis strong{display:block;color:#242e38;font-size:15px;margin:5px 0}
.woo-kpis small{color:#a5adb6;font-size:8px}
.woo-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;margin-bottom:10px}
.woo-chart-card{min-height:310px}
.woo-card-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.woo-card-title h3{margin:0;font-size:14px}.woo-card-title p{margin:1px 0 0;font-size:9px}
.woo-svg-chart{width:100%;min-height:250px}
.woo-svg-chart svg{display:block;width:100%;height:auto}
.woo-axis{stroke:#e7ebef;stroke-width:1}
.woo-line{stroke:#ff6a13;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.woo-point{fill:#fff;stroke:#ff6a13;stroke-width:2}
.woo-label{font-size:9px;fill:#89939d}
.woo-category-bars{display:flex;flex-direction:column;gap:10px}
.woo-cat-meta{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#69747f}
.woo-cat-meta b{color:#38424d;font-weight:700}
.woo-cat-track{height:8px;background:#f1f3f6;border-radius:999px;overflow:hidden;margin-top:3px}
.woo-cat-track i{display:block;height:100%;background:#ff7b2e;border-radius:999px}
.woo-connected,.woo-off{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:9px}
.woo-connected{background:#edf9f2;color:#247653}.woo-off{background:#f4f5f7;color:#89929b}
.woo-switch-row{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important}
.woo-switch-row input{width:auto!important;min-height:auto!important}
@media(max-width:1200px){
  .woo-kpis{grid-template-columns:repeat(3,1fr)}
  .woo-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .woo-dashboard-head{align-items:stretch;flex-direction:column}
  .woo-dashboard-controls{align-items:stretch;flex-direction:column}
  .woo-dashboard-controls select,.woo-dashboard-controls button{width:100%}
  .woo-kpis{grid-template-columns:repeat(2,1fr)}
}

/* FAMITO v5.23 — Click Data Bridge */
.click-import-card{margin-top:12px}
.click-import-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.click-file-picker{
  flex:1;min-width:280px;display:flex;align-items:center;gap:10px;padding:12px 14px;
  border:1px dashed #dfe5eb;border-radius:12px;background:#fbfcfd;cursor:pointer
}
.click-file-picker input{display:none}
.click-file-picker span{color:#46515c;font-weight:700}
.click-file-picker small{margin-right:auto;color:#a0a9b3}
.click-help{padding:9px 11px;border-radius:10px;background:#f8fafc;color:#79838d;font-size:10px;border:1px solid #edf0f4}
.click-dashboard-head{margin-top:0}
.click-kpis{margin-top:10px}
@media(max-width:760px){
  .click-import-form{align-items:stretch;flex-direction:column}
  .click-file-picker{min-width:0;width:100%;align-items:flex-start;flex-direction:column}
}

/* =========================================================
   FAMITO OS v5.24 — Telegram Product Publisher
   ========================================================= */
.publisher-layout{align-items:start}
.publisher-product-card{position:relative}
.telegram-channel-list{margin-top:14px}
.publisher-images{
  display:block;margin-top:12px;padding:13px;border:1px dashed #dfe5eb;border-radius:12px;background:#fbfcfd
}
.publisher-images>span{display:block;color:#59636f;font-weight:700;margin-bottom:7px}
.publisher-images input{width:100%}
.publisher-images small{display:block;margin-top:5px;color:#9aa3ad}
.publisher-channel-picker{margin-top:12px;padding:12px;border:1px solid #ebeff3;border-radius:12px;background:#fff}
.publisher-channel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.telegram-channel-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.telegram-channel-option{
  display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;
  padding:9px 10px;border:1px solid #edf0f3;border-radius:10px;background:#fbfcfd;cursor:pointer
}
.telegram-channel-option input{width:auto!important;min-height:auto!important}
.telegram-channel-option span{display:block;min-width:0}
.telegram-channel-option b{display:block;color:#35404b;font-size:11px}
.telegram-channel-option small{display:block;color:#9aa3ad;font-size:8px;margin-top:1px}
.publisher-preview{
  margin-top:12px;padding:12px;border-radius:12px;background:#f7f9fb;border:1px solid #ebeff3
}
.publisher-preview>small{display:block;color:#9aa3ad;margin-bottom:5px}
.publisher-preview pre{
  margin:0;white-space:pre-wrap;word-break:break-word;font-family:inherit;color:#46515c;font-size:11px;line-height:1.9
}
.publisher-main-btn{width:100%;margin-top:12px;min-height:43px!important}
.empty-inline{padding:12px;color:#9aa3ad;text-align:center;border:1px dashed #e3e7eb;border-radius:10px}
@media(max-width:900px){
  .publisher-layout{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  .telegram-channel-checks{grid-template-columns:1fr}
}

/* =========================================================
   FAMITO OS v5.25 — Omnichannel Publisher
   ========================================================= */
.omni-platform-strip{
  display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px
}
.omni-platform-strip span{
  display:inline-flex;align-items:center;min-height:30px;padding:4px 9px;
  border:1px solid #ebeff3;border-radius:999px;background:#fff;color:#6d7782;font-size:9px;
  box-shadow:0 4px 12px rgba(52,72,95,.04)
}
.omni-help{
  margin:12px 0;padding:10px 11px;border:1px solid #edf0f3;border-radius:10px;
  background:#f9fafc;color:#747f8a;font-size:10px;line-height:1.9
}
.omni-target-checks{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px
}
.omni-target-option{
  display:grid!important;grid-template-columns:18px 34px 1fr!important;align-items:center!important;gap:8px!important;
  padding:9px!important;border:1px solid #edf0f3!important;border-radius:11px!important;background:#fbfcfd!important;cursor:pointer!important
}
.omni-target-option input{width:auto!important;min-height:auto!important}
.omni-platform-icon{
  width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:#fff2e9;color:#f06416;border:1px solid #ffe0cd;font-weight:900
}
.omni-target-option b{display:block;color:#39444f;font-size:10px}
.omni-target-option small{display:block;color:#9ba4ae;font-size:8px;margin-top:1px}
@media(max-width:600px){
  .omni-target-checks{grid-template-columns:1fr}
}


/* =========================================================
   FAMITO OS v5.26 — Branded Full-Screen Login
   Background supplied by FAMITO.
   ========================================================= */

#login.login{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  min-height:100vh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:clamp(22px,5vw,76px)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(94,0,0,.52) 0%,rgba(119,0,0,.22) 25%,rgba(0,0,0,.02) 56%,rgba(0,0,0,.12) 100%),
    url("/assets/famito-login-background.png") center center / cover no-repeat!important;
  isolation:isolate!important;
}

#login.login::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 18% 50%,rgba(255,255,255,.10),transparent 28%),
    linear-gradient(180deg,rgba(0,0,0,.08),transparent 30%,rgba(0,0,0,.12))!important;
  z-index:0!important;
}

#login .login-card{
  position:relative!important;
  z-index:2!important;
  width:min(390px,calc(100vw - 44px))!important;
  margin:0!important;
  padding:30px 28px 26px!important;
  border-radius:26px!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:
    0 28px 70px rgba(69,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.86)!important;
  backdrop-filter:blur(20px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(130%)!important;
  color:#262626!important;
}

#login .login-card .brand-logo{
  width:72px!important;
  height:72px!important;
  margin:0 auto 12px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  border:3px solid #fff!important;
  box-shadow:0 10px 28px rgba(203,21,20,.20)!important;
  background:#fff!important;
}

#login .login-card .brand-logo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}

#login .login-card h1{
  margin:0!important;
  text-align:center!important;
  color:#1f2933!important;
  font-size:27px!important;
  font-weight:900!important;
  letter-spacing:.2px!important;
}

#login .login-card>p{
  margin:5px 0 22px!important;
  text-align:center!important;
  color:#7d858e!important;
  font-size:13px!important;
}

#login .login-card label{
  display:block!important;
  margin-bottom:12px!important;
}

#login .login-card label>span{
  display:block!important;
  margin:0 3px 6px!important;
  color:#59636d!important;
  font-size:12px!important;
  font-weight:700!important;
}

#login .login-card input{
  width:100%!important;
  min-height:48px!important;
  padding:9px 13px!important;
  border:1px solid #e5e9ee!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.94)!important;
  color:#242c34!important;
  box-shadow:0 4px 14px rgba(49,61,73,.04)!important;
}

#login .login-card input:focus{
  border-color:#ff8b67!important;
  box-shadow:0 0 0 4px rgba(235,57,45,.09)!important;
}

#login .login-card>button{
  width:100%!important;
  min-height:49px!important;
  margin-top:5px!important;
  border:0!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,#ef2e29,#d91616)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
  box-shadow:0 13px 27px rgba(207,24,22,.25)!important;
}

#login .login-card>button:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 16px 32px rgba(207,24,22,.31)!important;
}

#login .login-card>small{
  display:none!important; /* hide demo credentials from login screen */
}

#login .login-card .error{
  min-height:20px!important;
  margin-top:10px!important;
  color:#c52929!important;
  text-align:center!important;
  font-size:11px!important;
}

/* Keep the main FAMITO artwork visible on desktop. */
@media(min-width:1000px){
  #login.login{
    justify-content:flex-start!important;
    padding-left:7vw!important;
    padding-right:7vw!important;
  }
}

/* Tablet */
@media(max-width:999px){
  #login.login{
    justify-content:center!important;
    background-position:center center!important;
  }
  #login.login::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    background:rgba(115,0,0,.18)!important;
    pointer-events:none!important;
  }
}

/* Mobile */
@media(max-width:600px){
  #login.login{
    padding:18px!important;
    align-items:flex-end!important;
    background-position:center top!important;
  }
  #login .login-card{
    width:100%!important;
    padding:22px 18px 20px!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.92)!important;
  }
  #login .login-card .brand-logo{
    width:58px!important;
    height:58px!important;
    border-radius:17px!important;
  }
  #login .login-card h1{font-size:23px!important}
}

/* =========================================================
   FAMITO OS v5.27 — Calendar + Payroll production fix
   ========================================================= */

/* Calendar */
.calendar-pro-head,.payroll-pro-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 20px;margin-bottom:12px;background:#fff;border:1px solid #ebeff3;border-radius:16px;
  box-shadow:0 6px 20px rgba(52,72,95,.05)
}
.calendar-pro-head small,.payroll-pro-head small{color:#ff6a13;font-size:9px;letter-spacing:.8px}
.calendar-pro-head h2,.payroll-pro-head h2{margin:2px 0;color:#28323c;font-size:21px}
.calendar-pro-head p,.payroll-pro-head p{margin:0;color:#929ba6;font-size:10px}
.calendar-system-switch{display:flex;gap:4px;padding:4px;background:#f5f7fa;border:1px solid #e9edf2;border-radius:11px}
.calendar-system-switch button{min-height:34px!important;padding:5px 13px!important;border:0!important;box-shadow:none!important;background:transparent!important}
.calendar-system-switch button.active{background:#fff!important;color:#ff6512!important;box-shadow:0 4px 12px rgba(52,72,95,.07)!important}
.calendar-pro-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:10px}
.calendar-pro-stats article{padding:11px 13px;background:#fff;border:1px solid #ebeff3;border-radius:12px;box-shadow:0 4px 14px rgba(52,72,95,.04)}
.calendar-pro-stats span{display:block;color:#9099a3;font-size:9px}.calendar-pro-stats strong{display:block;color:#313b45;font-size:14px;margin-top:3px}
.calendar-pro-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px!important;margin-bottom:9px}
.calendar-nav{display:flex;align-items:center;gap:6px}.calendar-nav select{min-width:105px;height:35px}
.calendar-arrow{width:35px!important;height:35px!important;min-height:35px!important;padding:0!important;font-size:20px!important}
.calendar-legend{display:flex;gap:6px;flex-wrap:wrap}.legend{padding:4px 8px;border-radius:999px;font-size:9px}
.legend.today-dot{background:#fff1e8;color:#e76317}.legend.holiday{background:#fff0f0;color:#b84e4e}.legend.campaign{background:#fff8dc;color:#8d721c}.legend.event{background:#eef6ff;color:#4179aa}
.calendar-board{padding:10px!important;overflow:hidden!important}
.calendar-weekdays,.persian-calendar{
  width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:6px!important
}
.calendar-weekdays{margin:0 0 6px!important}
.calendar-weekdays span{padding:7px 4px;text-align:center;color:#8e98a2;font-size:9px;font-weight:700;background:#f8fafc;border-radius:8px}
.calendar-day{
  appearance:none!important;-webkit-appearance:none!important;width:100%!important;min-width:0!important;
  min-height:112px!important;padding:8px!important;text-align:right!important;font-family:inherit!important;
  border:1px solid #e9edf2!important;border-radius:11px!important;background:#fff!important;color:#3c4650!important;
  box-shadow:none!important;overflow:hidden!important;cursor:pointer!important
}
.calendar-day:hover:not(.empty){border-color:#ffc8a8!important;background:#fffaf7!important;transform:none!important;box-shadow:0 5px 14px rgba(52,72,95,.05)!important}
.calendar-day.empty{background:#fafbfc!important;border-style:dashed!important;cursor:default!important;opacity:.55}
.calendar-day.today{outline:0!important;border:2px solid #ff7b2d!important;background:#fff7f2!important}
.calendar-day.selected{box-shadow:0 0 0 3px rgba(255,106,19,.10)!important;border-color:#ff9b61!important}
.calendar-day.holiday{background:#fff8f8!important}
.day-header{display:flex;justify-content:space-between;gap:5px;align-items:start}.day-header strong{font-size:15px}.day-header small{font-size:7px;color:#a4acb5}
.calendar-event{display:block!important;margin-top:4px!important;padding:3px 5px!important;border-radius:6px!important;background:#f0f5fa!important;color:#61707e!important;font-size:7.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.calendar-event.campaign{background:#fff2e8!important;color:#e16214!important}.calendar-event.holiday{background:#fff0f0!important;color:#b64d4d!important}
.calendar-bottom-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:10px;margin-top:10px}
.calendar-event-list{display:flex;flex-direction:column;gap:7px}.calendar-form-hint{margin:8px 0 0;color:#9aa3ad;font-size:9px}
.calendar-checkboxes{display:flex;gap:14px;flex-wrap:wrap}

/* Payroll */
.payroll-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,.75fr);gap:10px;margin-bottom:10px}
.payroll-pro-form{display:flex;flex-direction:column;gap:12px}
.payroll-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.payroll-form-grid label{min-width:0}.payroll-form-grid label.wide{grid-column:1/-1}
.worked-hours-input{display:grid;grid-template-columns:1fr auto;gap:5px}.worked-hours-input button{white-space:nowrap}
.payroll-calc-preview{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;padding:11px 13px;border-radius:12px;background:#f8fafc;border:1px solid #ebeff3}
.payroll-calc-preview span{color:#8d97a2;font-size:9px}.payroll-calc-preview strong{color:#ff6512;font-size:18px}.payroll-calc-preview small{grid-column:1/-1;color:#9da5ae;font-size:8px;margin-top:2px}
.payroll-submit{align-self:flex-end;min-width:190px}
.payroll-help-card{background:linear-gradient(180deg,#fff,#fbfcfd)!important}.payroll-help-card>small{color:#ff6a13;font-size:8px}.payroll-help-card h3{margin:3px 0 7px}.payroll-help-card p{font-size:10px;line-height:1.9}
.payroll-help-steps{display:flex;flex-direction:column;gap:8px;margin-top:13px}.payroll-help-steps span{display:flex;align-items:center;gap:7px;color:#68737e;font-size:9px}.payroll-help-steps b{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#fff0e7;color:#f06416}
.payslip{margin-top:10px}.payslip-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* Sales module intentionally removed from UI; Click is the accounting source. */
.reference-nav [data-menu="sales"]{display:none!important}

@media(max-width:1100px){
  .calendar-pro-stats{grid-template-columns:repeat(2,1fr)}
  .calendar-bottom-grid,.payroll-layout{grid-template-columns:1fr}
  .payroll-form-grid{grid-template-columns:repeat(2,1fr)}
  .payslip-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:700px){
  .calendar-pro-head,.payroll-pro-head,.calendar-pro-toolbar{align-items:stretch;flex-direction:column}
  .calendar-nav{flex-wrap:wrap}
  .calendar-board{overflow-x:auto!important}
  .calendar-weekdays,.persian-calendar{min-width:680px!important}
  .calendar-pro-stats{grid-template-columns:1fr 1fr}
  .calendar-bottom-grid{grid-template-columns:1fr}
  .payroll-form-grid{grid-template-columns:1fr}
  .payroll-submit{width:100%}
}


/* =========================================================
   FAMITO OS v5.28 — Background restored / very light gray
   Keeps cards and content white, page background subtly gray.
   ========================================================= */
html, body {
  background: #f6f7f9 !important;
  background-image: none !important;
}
#app,
#app > main,
main {
  background: transparent !important;
}
.view {
  background: transparent !important;
}

/* =========================================================
   FAMITO OS v5.29 — Branded Payroll & Monthly Settlement
   ========================================================= */
.payslip-actions{display:flex;justify-content:flex-end;gap:7px;margin-bottom:10px}
.famito-slip{border:1px solid #e6e8eb;border-radius:16px;overflow:hidden;background:#fff}
.famito-slip-header{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;padding:18px 20px;background:linear-gradient(135deg,#b51217,#ec1c24);color:#fff}
.famito-slip-brand{display:flex;align-items:center;gap:9px}.famito-slip-brand img{width:52px;height:52px;border-radius:13px;object-fit:cover;border:2px solid #fff}
.famito-slip-brand b{display:block;font-size:20px}.famito-slip-brand small{display:block;font-size:8px;opacity:.85}.famito-slip-title{text-align:center}
.famito-slip-title small{font-size:8px;letter-spacing:1px;opacity:.75}.famito-slip-title h1{margin:2px 0;font-size:20px}.famito-slip-title span{font-size:9px}
.famito-slip-number{text-align:left}.famito-slip-number small{display:block;font-size:8px;opacity:.75}.famito-slip-number b{font-size:13px}
.famito-employee-row{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #eceff2}.famito-employee-row div{padding:10px 12px;border-left:1px solid #eef0f2}
.famito-employee-row span,.settlement-grid span{display:block;color:#929aa3;font-size:8px}.famito-employee-row b,.settlement-grid b{display:block;margin-top:2px;color:#35404a;font-size:10px}
.famito-slip-table{margin:14px 16px;border:1px solid #e7e9ec;border-radius:10px;overflow:hidden}.famito-slip-table>div{display:grid;grid-template-columns:1.7fr 1fr 1fr;border-bottom:1px solid #eef0f2}
.famito-slip-table>div:last-child{border-bottom:0}.famito-slip-table span,.famito-slip-table b{padding:8px 9px;border-left:1px solid #eef0f2;font-size:9px}.slip-table-head{background:#f7f8fa;font-weight:bold}
.slip-positive{background:#f5fbf7}.slip-negative{background:#fff7f7}.famito-slip-total{display:grid;grid-template-columns:2fr 1fr;margin:0 16px 14px;border:1px solid #f0d1d2;border-radius:10px;overflow:hidden}
.famito-slip-total div{padding:11px 13px;background:#fff8f8}.famito-slip-total div:first-child{background:#bd171c;color:#fff}.famito-slip-total span{display:block;font-size:8px;opacity:.8}.famito-slip-total b{font-size:13px}
.famito-settlement-box{margin:14px 16px;padding:13px;border:1px solid #e8eaed;border-radius:11px;background:#fafbfc}.settlement-title{display:flex;justify-content:space-between;margin-bottom:9px}
.settlement-title span{padding:3px 8px;border-radius:999px;background:#fff0dc;color:#9c671c;font-size:8px}.settlement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.settlement-grid>div{padding:8px;background:#fff;border:1px solid #eceef0;border-radius:8px}.settlement-balance{background:#fff8f8!important;border-color:#f0caca!important}.settlement-balance b{color:#b51217!important}
.famito-settlement-box p,.famito-slip-note{font-size:9px;color:#646e77}.famito-slip-note{margin:0 16px 14px;padding:10px;border-radius:8px;background:#fffbea}
.famito-slip-signatures{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:24px 20px 28px;border-top:1px solid #eef0f2}.famito-slip-signatures div{text-align:center;color:#7c858e;font-size:8px}
.famito-slip-signatures i{display:block;height:36px;border-bottom:1px dashed #c9cdd1}
@media(max-width:760px){
  .famito-slip-header{grid-template-columns:1fr;text-align:center;gap:8px}.famito-slip-brand{justify-content:center}.famito-slip-number{text-align:center}
  .famito-employee-row,.settlement-grid{grid-template-columns:1fr 1fr}.famito-slip-table{overflow-x:auto}.famito-slip-table>div{min-width:600px}
  .famito-slip-signatures{grid-template-columns:1fr}
}


/* =========================================================
   FAMITO OS v5.30 — definitive app background/login visibility fix
   ========================================================= */

/* Critical: when login is hidden, its full-screen branded background must not remain behind the app. */
#login.login.hidden{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Main software workspace: plain very light gray. */
html,body{
  background:#f4f5f7!important;
  background-image:none!important;
}
body::before,
body::after{
  background:none!important;
  background-image:none!important;
}
#app:not(.hidden){
  background:#f4f5f7!important;
  background-image:none!important;
}
#app:not(.hidden) main,
#app:not(.hidden) .view{
  background:#f4f5f7!important;
  background-image:none!important;
}
#app:not(.hidden) .reference-header{
  background:transparent!important;
}

/* =========================================================
   FAMITO OS v5.34 — Dashboard submenu + readable Click history
   ========================================================= */
.nav-group{display:flex;flex-direction:column;gap:4px}
.nav-parent{width:100%!important;min-height:38px!important;display:grid!important;grid-template-columns:30px 1fr 18px!important;align-items:center!important;gap:7px!important;padding:5px 7px!important;border:1px solid transparent!important;border-radius:10px!important;background:transparent!important;color:#59636f!important;box-shadow:none!important;text-align:right!important;font-size:13px!important;font-weight:800!important}
.nav-group.current>.nav-parent,.nav-parent:hover{background:#fff!important;color:#ff6512!important;border-color:#eef1f4!important;box-shadow:0 8px 20px rgba(64,80,100,.07)!important}
.nav-chevron{font-style:normal!important;color:#aab2bb!important;transition:transform .18s ease!important}
.nav-group.collapsed .nav-chevron{transform:rotate(90deg)}
.nav-submenu{display:flex;flex-direction:column;gap:3px;padding:1px 33px 3px 6px;max-height:110px;overflow:hidden;transition:max-height .2s ease,opacity .2s ease;opacity:1}
.nav-group.collapsed .nav-submenu{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.nav-submenu button{min-height:32px!important;grid-template-columns:20px 1fr!important;padding:4px 7px!important;border-radius:9px!important;font-size:11px!important;background:transparent!important;box-shadow:none!important}
.nav-submenu button.active{background:#fff3ec!important;color:#f06416!important;border-color:#ffe1cf!important}
.sub-dot{width:20px;height:20px;display:grid;place-items:center;color:#a8b0b9}
.nav-submenu button.active .sub-dot{color:#f06416}

/* Click import history */
.click-history-table-wrap{overflow:auto;border:1px solid #e9edf2;border-radius:12px;background:#fff}
#clickImportsTable{width:100%!important;min-width:900px!important;border:0!important;border-collapse:separate!important;border-spacing:0!important;table-layout:fixed!important}
#clickImportsTable th{padding:11px 12px!important;background:#f7f9fb!important;color:#65717c!important;font-size:10px!important;text-align:right!important;white-space:nowrap!important}
#clickImportsTable td{padding:10px 12px!important;color:#3f4a54!important;font-size:10px!important;vertical-align:middle!important}
#clickImportsTable th:nth-child(1),#clickImportsTable td:nth-child(1){width:34%!important}
#clickImportsTable th:nth-child(2),#clickImportsTable td:nth-child(2){width:12%!important;text-align:center!important}
#clickImportsTable th:nth-child(3),#clickImportsTable td:nth-child(3){width:12%!important;text-align:center!important}
#clickImportsTable th:nth-child(4),#clickImportsTable td:nth-child(4){width:10%!important;text-align:center!important}
#clickImportsTable th:nth-child(5),#clickImportsTable td:nth-child(5){width:18%!important;text-align:center!important}
#clickImportsTable th:nth-child(6),#clickImportsTable td:nth-child(6){width:14%!important;text-align:center!important}
.click-file-name{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;direction:rtl!important}
.click-file-name b{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-weight:700!important;color:#39444e!important}
.file-icon{flex:0 0 auto!important;display:inline-grid!important;place-items:center!important;width:31px!important;height:27px!important;border-radius:7px!important;background:#eef9f3!important;color:#21764d!important;font-size:8px!important;font-weight:900!important}
.import-status{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:700}
.import-status.ok{background:#ecf8f1;color:#247451}.import-status.bad{background:#fff0f0;color:#b54a4a}.import-status.pending{background:#fff7e7;color:#946b22}
.ltr-safe{unicode-bidi:plaintext!important;white-space:nowrap!important}
.num-cell{font-variant-numeric:tabular-nums}
.empty-history{text-align:center!important;color:#9aa3ad!important;padding:24px!important}

/* =========================================================
   FAMITO OS v5.35 — Four-channel colored bar charts
   ========================================================= */
.channel-chart-legend{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin:-2px 0 8px}
.channel-chart-legend span{display:inline-flex;align-items:center;gap:5px;color:#6e7882;font-size:9px}
.channel-chart-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.legend-online,.bar-online{fill:#4f8cff;background:#4f8cff}
.legend-store,.bar-store{fill:#20b486;background:#20b486}
.legend-wholesale,.bar-wholesale{fill:#f2ad3d;background:#f2ad3d}
.legend-instagram,.bar-instagram{fill:#d96bd8;background:#d96bd8}
.channel-bar{transition:opacity .15s ease}
.channel-bar:hover{opacity:.78}
.channel-grid{stroke:#edf0f3;stroke-width:1;stroke-dasharray:3 4}
.channel-axis-value{fill:#98a1aa;font-size:8px}
.channel-month-label{fill:#68737e;font-size:8px;font-weight:600}
.bar-value-label{fill:#59646f;font-size:8px;font-weight:700}
.grouped-channel-chart svg,.channel-total-chart svg{width:100%;height:auto;display:block}

/* =========================================================
   FAMITO OS v5.36 — compact Click accounting workspace
   ========================================================= */
.nav-mini-link{
  width:calc(100% - 22px)!important;margin:-2px 11px 4px!important;min-height:27px!important;
  display:flex!important;align-items:center!important;gap:7px!important;padding:3px 9px!important;
  border:1px dashed #e5e9ed!important;border-radius:8px!important;background:#fafbfc!important;
  color:#7b858f!important;font-size:9px!important;box-shadow:none!important
}
.nav-mini-link:hover{background:#fff4ec!important;color:#ef6418!important;border-color:#ffd8c1!important}
.nav-mini-dot{color:#f26b20;font-size:12px}

.compact-page-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;margin-bottom:9px;background:#fff;border:1px solid #e9edf1;border-radius:13px
}
.compact-page-head small{color:#ff6a13;font-size:8px;letter-spacing:.7px}
.compact-page-head h2{margin:2px 0;font-size:17px;color:#303a44}
.compact-page-head p{margin:0;font-size:9px;color:#98a1aa}

.click-import-mini{padding:9px 11px!important;margin-bottom:9px!important}
.click-import-mini-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.click-import-mini-head>div{display:flex;align-items:center;gap:8px}
.click-import-mini-head b{display:block;font-size:11px;color:#3d4853}.click-import-mini-head small{display:block;font-size:8px;color:#9aa3ac}
.mini-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#fff2e9;color:#f06416;font-weight:900}
.compact-toggle{min-height:29px!important;padding:3px 9px!important;font-size:9px!important}
.compact-expand{margin-top:10px;padding-top:10px;border-top:1px solid #edf0f3}
.compact-import-form{margin-bottom:7px}.compact-file-picker{padding:8px 10px!important}
.compact-status{margin:0!important;padding:7px 9px!important;font-size:9px!important}

.accounting-compact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:9px;align-items:start}
.compact-panel{padding:12px!important;min-width:0}
.compact-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.compact-panel-head small{display:block;color:#a0a8b1;font-size:7px;letter-spacing:.6px}
.compact-panel-head h3{margin:1px 0;font-size:13px;color:#39434d}
.compact-panel-actions{display:flex;gap:5px;align-items:center}.compact-panel-actions select{height:31px;min-width:78px;padding:3px 7px}.compact-panel-actions button{min-height:31px!important;padding:3px 8px!important;font-size:8px!important}

.compact-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.compact-kpi-row article{padding:9px 10px;background:#f8fafc;border:1px solid #edf0f3;border-radius:10px}
.compact-kpi-row span{display:block;font-size:7.5px;color:#8f99a3}.compact-kpi-row strong{display:block;margin-top:3px;font-size:11px;color:#34404b}
.compact-kpi-secondary{display:flex;gap:16px;margin-top:7px;padding:7px 9px;border-radius:9px;background:#fffaf6;color:#7d8791;font-size:8px}
.compact-kpi-secondary b{color:#e76417}

.click-history-summary{display:grid;grid-template-columns:1.6fr .7fr .8fr;gap:6px;margin-bottom:8px}
.click-history-summary>div{padding:8px 9px;border:1px solid #edf0f3;border-radius:9px;background:#f9fafb;min-width:0}
.click-history-summary span{display:block;color:#929ca6;font-size:7px}.click-history-summary b{display:block;margin-top:2px;color:#3f4a54;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.click-history-preview{display:flex;flex-direction:column;gap:5px}
.history-preview-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:7px;padding:7px 8px;border:1px solid #edf0f3;border-radius:9px;background:#fff}
.history-preview-main{min-width:0}.history-preview-main b{display:block;font-size:9px;color:#414c56;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-preview-main small{display:block;margin-top:1px;color:#9ba4ad;font-size:7px}
.history-preview-row strong{font-size:8px;color:#606b75;white-space:nowrap}
.history-preview-row .import-status{min-width:54px;padding:3px 6px;font-size:7px}

.compact-chart-stack{display:grid;grid-template-columns:1.55fr .8fr;gap:8px}
.compact-chart-box,.compact-products-box{padding:9px;border:1px solid #edf0f3;border-radius:10px;background:#fff;min-width:0}
.compact-products-box{grid-column:1/-1}
.compact-chart-box .woo-svg-chart{min-height:180px!important}
.compact-chart-box .woo-card-title h3,.compact-products-box .woo-card-title h3{font-size:11px}
.compact-chart-box .woo-card-title p{font-size:7px}
.compact-chart-box .channel-chart-legend{gap:7px}.compact-chart-box .channel-chart-legend span{font-size:7px}

@media(max-width:1150px){
  .accounting-compact-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .compact-page-head,.compact-panel-head{align-items:stretch;flex-direction:column}
  .compact-kpi-row{grid-template-columns:1fr 1fr}
  .click-history-summary{grid-template-columns:1fr}
  .compact-chart-stack{grid-template-columns:1fr}
  .history-preview-row{grid-template-columns:28px minmax(0,1fr) auto}
  .history-preview-row>strong{display:none}
}

/* =========================================================
   FAMITO OS v5.37 — Finance Command Center
   ========================================================= */
.finance-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px;padding:5px;background:#eef1f4;border:1px solid #e5e9ed;border-radius:11px}
.finance-tab{min-height:31px!important;padding:4px 10px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#6e7882!important;box-shadow:none!important;font-size:9px!important}
.finance-tab.active{background:#fff!important;color:#f06416!important;box-shadow:0 4px 12px rgba(52,72,95,.07)!important}
.finance-tab-panel{animation:financeFade .16s ease}
@keyframes financeFade{from{opacity:.5}to{opacity:1}}
.finance-dual{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:9px;margin-bottom:9px}
.finance-bar-chart{height:210px;margin-top:10px;padding:10px;border:1px solid #edf0f3;border-radius:10px;background:#fbfcfd}
.finance-bar-chart.small{height:175px}
.mini-bars{height:100%;display:flex;align-items:flex-end;gap:5px;direction:ltr}
.mini-bar-col{height:100%;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px}
.mini-bar{display:block;width:min(28px,72%);border-radius:5px 5px 2px 2px;min-height:3px}
.mini-bar.b0{background:#4f8cff}.mini-bar.b1{background:#20b486}.mini-bar.b2{background:#f2ad3d}.mini-bar.b3{background:#d96bd8}
.mini-bar-col small{font-size:7px;color:#838d97;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mini-bar-value{font-size:6px;color:#9aa3ac;transform:rotate(-45deg);transform-origin:center;white-space:nowrap}
.reminder-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:9px}
.reminder-card{padding:9px;border:1px solid #edf0f3;border-radius:10px;background:#fffaf6}
.reminder-card span{display:block;font-size:7px;color:#f06416}.reminder-card b{display:block;font-size:10px;color:#39444e;margin-top:2px}.reminder-card small{display:block;font-size:7px;color:#949da6;margin-top:2px}.reminder-card strong{display:block;font-size:10px;color:#424e58;margin-top:5px}
.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.analysis-card{padding:10px;border:1px solid #edf0f3;border-radius:10px;background:#fff}
.analysis-card h4{margin:0 0 4px;color:#4b5660;font-size:10px}
.analysis-card .finance-bar-chart{margin-top:0;height:190px}
@media(max-width:1050px){
  .finance-dual{grid-template-columns:1fr}
  .analysis-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .reminder-cards{grid-template-columns:1fr}
}

/* FAMITO OS v5.38 — Tasks Schedule */
.schedule-head-actions{display:flex;gap:6px}.schedule-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,.55fr);gap:10px}
.schedule-calendar-card,.schedule-day-panel,.schedule-team-strip{padding:13px!important}
.schedule-month-head{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:12px}.schedule-month-head div{text-align:center}.schedule-month-head b{display:block;font-size:16px;color:#35404a}.schedule-month-head small{font-size:7px;color:#9ba4ad}.schedule-month-head button{width:31px;height:31px;border:1px solid #e7ebef;border-radius:50%;background:#fff;color:#5d6872}
.schedule-weekdays,.schedule-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.schedule-weekdays{margin-bottom:5px}.schedule-weekdays span{text-align:center;font-size:8px;color:#a0a8b0}
.schedule-day{position:relative;min-height:78px!important;padding:7px!important;border:1px solid #edf0f3!important;border-radius:12px!important;background:#fafbfd!important;color:#7a858f!important;text-align:right!important;box-shadow:none!important;overflow:hidden}
.schedule-day b{font-size:10px}.schedule-day.has-task{background:#eef4ff!important;border-color:#dce8ff!important}.schedule-day.important{background:#fff8d9!important;border-color:#f5e7a4!important}.schedule-day.urgent{background:#fff0ed!important;border-color:#ffd4cc!important}.schedule-day.selected{background:#486ee8!important;color:#fff!important;border-color:#486ee8!important;box-shadow:0 8px 20px rgba(72,110,232,.22)!important}.schedule-day small{position:absolute;left:6px;bottom:5px;font-size:7px}
.day-avatars{display:flex;direction:ltr;margin-top:12px}.schedule-avatar{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #fff;box-shadow:0 2px 6px #cdd4dc;color:#58636e;font-size:7px;margin-left:-5px;overflow:hidden}.schedule-avatar img{width:100%;height:100%;object-fit:cover}.schedule-avatar.big{width:34px;height:34px;margin:0;font-size:9px;flex:0 0 auto}
.schedule-day-tasks{display:flex;flex-direction:column;gap:6px}.schedule-task{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:8px;border:1px solid #edf0f3;border-radius:11px;background:#fbfcfd}.schedule-task.important{border-right:3px solid #e6bd38}.schedule-task.urgent{border-right:3px solid #ef6651}.task-owner{display:flex;align-items:center;gap:6px}.task-owner div{display:none}.task-main b{display:block;font-size:9px;color:#3d4852}.task-main small,.task-owner small{font-size:7px;color:#98a1aa}.task-delete{width:25px!important;height:25px!important;min-height:25px!important;padding:0!important;border-radius:50%!important;background:#fff!important;color:#d66!important;border:1px solid #f1dddd!important}
.schedule-count{padding:4px 7px;border-radius:8px;background:#f0f3f6;color:#79838d;font-size:7px}.schedule-empty{padding:25px;text-align:center;color:#9aa3ac;font-size:9px}
.schedule-team-strip{margin-top:10px}.schedule-team-workload{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.schedule-team-workload article{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid #edf0f3;border-radius:11px}.schedule-team-workload article>div{min-width:0;flex:1}.schedule-team-workload b{display:block;font-size:9px;color:#424d57}.schedule-team-workload small{display:block;font-size:7px;color:#99a2ab}.schedule-team-workload i{display:block;height:4px;margin-top:5px;background:#edf0f3;border-radius:4px;overflow:hidden}.schedule-team-workload em{display:block;height:100%;background:#4f8cff;border-radius:4px}
.schedule-modal-card{max-width:650px}.schedule-modal-card textarea{min-height:75px}
@media(max-width:1000px){.schedule-layout{grid-template-columns:1fr}.schedule-team-workload{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.schedule-day{min-height:58px!important}.schedule-team-workload{grid-template-columns:1fr}.schedule-calendar-grid,.schedule-weekdays{gap:2px}}

/* FAMITO OS v5.39 — Click Accounting Excel I/O */
.accounting-export-box{display:flex;align-items:end;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.accounting-export-box label{min-width:110px}.accounting-export-box button{min-height:34px!important}
.accounting-io-kpis{grid-template-columns:repeat(4,1fr)}
#clickAccountingImportsTable,#clickAccountingRowsTable{min-width:900px}
@media(max-width:760px){.accounting-io-kpis{grid-template-columns:1fr 1fr}}

/* FAMITO OS v5.41 — accounting check operation buttons */
#clickAccountingRowsTable{min-width:1120px}
.check-row-actions{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:245px}
.tiny-action{min-height:26px!important;padding:2px 7px!important;font-size:7px!important;border-radius:7px!important}
.check-state{display:inline-flex;align-items:center;justify-content:center;min-width:55px;padding:3px 6px;border-radius:999px;font-size:7px;font-weight:800}
.check-state.pending{background:#fff5df;color:#8d661c}.check-state.passed{background:#eaf8ef;color:#24734c}.check-state.returned{background:#fff0f0;color:#b64b4b}

/* FAMITO OS v5.42 — Bank payments analytics */
.bank-analysis-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:9px;margin-top:9px}
.bank-category-chart{height:auto!important;min-height:260px}
.horizontal-bars{display:flex;flex-direction:column;gap:7px}
.hbar-row{display:grid;grid-template-columns:minmax(135px,1.2fr) minmax(160px,3fr) 70px;align-items:center;gap:8px}
.hbar-label{font-size:8px;color:#55616c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{height:10px;border-radius:999px;background:#eef1f4;overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:999px}
.hbar-fill.c0{background:#4f8cff}.hbar-fill.c1{background:#20b486}.hbar-fill.c2{background:#f2ad3d}
.hbar-fill.c3{background:#d96bd8}.hbar-fill.c4{background:#ef6651}.hbar-fill.c5{background:#55b6c5}
.hbar-row b{font-size:8px;color:#46515b;text-align:left}
.bank-cat-pill{display:inline-flex;padding:3px 7px;border-radius:999px;background:#f1f4f7;color:#5f6a74;font-size:7px}
#bankOperationsTable{min-width:1050px}
@media(max-width:1000px){.bank-analysis-grid{grid-template-columns:1fr}}


/* =========================================================
   FAMITO OS v5.43 — Centered Login
   ========================================================= */
#login.login{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  background-position:center center!important;
}

#login .login-card{
  width:min(380px,calc(100vw - 40px))!important;
  margin:0 auto!important;
  padding:24px 26px 24px!important;
  border-radius:24px!important;
  text-align:center!important;
}

#login .login-card .brand-logo{
  width:52px!important;
  height:52px!important;
  margin:0 auto 7px!important;
  border-radius:15px!important;
}

#login .login-card::before{
  content:"FAMITO"!important;
  display:block!important;
  margin:0 0 3px!important;
  color:#ef2e29!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:4px!important;
  line-height:1.1!important;
}

#login .login-card h1{
  margin:4px 0 2px!important;
  font-size:20px!important;
  line-height:1.25!important;
}

#login .login-card>p{
  margin:3px 0 17px!important;
  font-size:10px!important;
}

#login .login-card label{
  text-align:right!important;
}

#login .login-card input{
  text-align:right!important;
}

@media(max-width:600px){
  #login.login{
    align-items:center!important;
    justify-content:center!important;
    padding:16px!important;
  }
  #login .login-card{
    width:min(360px,calc(100vw - 24px))!important;
    padding:21px 18px 20px!important;
  }
  #login .login-card .brand-logo{
    width:47px!important;
    height:47px!important;
  }
  #login .login-card::before{
    font-size:9px!important;
    letter-spacing:3.5px!important;
  }
  #login .login-card h1{
    font-size:18px!important;
  }
}


/* =========================================================
   FAMITO OS v5.44 — New supplied login background
   ========================================================= */
#login.login{
  background:
    linear-gradient(180deg,rgba(100,0,0,.05),rgba(100,0,0,.08)),
    url("/assets/famito-login-background-v544.png") center center / cover no-repeat!important;
}

/* Keep the centered login card from v5.43 */
#login .login-card{
  position:relative!important;
  z-index:2!important;
}

/* Slightly increase readability without hiding the artwork */
#login.login::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:radial-gradient(circle at center,rgba(255,255,255,.02),rgba(80,0,0,.08))!important;
  pointer-events:none!important;
  z-index:0!important;
}

/* FAMITO OS v5.45 — Secure Access UI */
.security-policy-grid,.security-role-help{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.security-policy-grid span,.security-role-help span{padding:8px 10px;border:1px solid #edf0f3;border-radius:9px;background:#fafbfc;color:#626d77;font-size:8px}
.security-role-help b{color:#ef6418;margin-left:4px}
.access-state{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:7px;font-weight:800}
.access-state.enabled{background:#eaf8ef;color:#24734c}.access-state.disabled{background:#fff0f0;color:#b64b4b}.access-state.locked{background:#fff4df;color:#94681c}
.user-security-actions{display:flex;gap:4px;flex-wrap:wrap;min-width:220px}
#usersTable{min-width:1000px}#securityAuditTable{min-width:850px}
@media(max-width:700px){.security-policy-grid,.security-role-help{grid-template-columns:1fr}}

/* =========================================================
   FAMITO OS v5.47 — Daily motivational quote on login
   ========================================================= */
.login-daily-quote{
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:start;
  gap:8px;
  margin:0 0 17px;
  padding:10px 12px;
  border:1px solid rgba(239,46,41,.10);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,247,244,.88));
  box-shadow:0 7px 20px rgba(87,21,21,.05);
  text-align:right;
}

.login-quote-mark{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(135deg,#ef2e29,#d91616);
  color:#fff;
  font-size:22px;
  font-family:Georgia,serif;
  line-height:1;
  box-shadow:0 6px 14px rgba(215,24,22,.18);
}

#loginDailyQuote{
  margin:0!important;
  color:#353d45!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1.9!important;
  text-align:right!important;
}

#loginDailyQuoteSub{
  display:block;
  margin-top:3px;
  color:#999fa6;
  font-size:7.5px;
  text-align:right;
}

@media(max-width:600px){
  .login-daily-quote{
    margin-bottom:14px;
    padding:9px 10px;
  }
  #loginDailyQuote{
    font-size:9px!important;
  }
}


/* =========================================================
   FAMITO OS v5.48 — Quote moved to bottom + distinct palette
   ========================================================= */
#login .login-card{
  display:flex!important;
  flex-direction:column!important;
}

#login .login-card .login-daily-quote{
  order:99!important;
  margin:16px 0 0!important;
  padding:11px 13px!important;
  border:1px solid rgba(35,71,103,.16)!important;
  background:
    linear-gradient(135deg,rgba(239,247,255,.94),rgba(245,240,255,.94))!important;
  box-shadow:
    0 8px 22px rgba(33,61,87,.08),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
  border-radius:15px!important;
}

#login .login-quote-mark{
  background:linear-gradient(135deg,#315f82,#6f5aa8)!important;
  box-shadow:0 6px 16px rgba(63,79,126,.20)!important;
}

#login #loginDailyQuote{
  color:#263e52!important;
  font-size:10px!important;
}

#login #loginDailyQuoteSub{
  color:#7c6d9c!important;
  font-weight:700!important;
}

/* Keep form controls above the daily quote */
#login .login-card form,
#login .login-card > label,
#login .login-card > button,
#login .login-card > .login-actions{
  order:20;
}

@media(max-width:600px){
  #login .login-card .login-daily-quote{
    margin-top:13px!important;
    padding:9px 11px!important;
  }
}


/* =========================================================
   FAMITO OS v5.49 — Supplied branded login background
   ========================================================= */
#login.login{
  background-image:url("/assets/famito-login-background-v549.png")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}

/* The supplied artwork already contains its own red treatment;
   do not place another dark/red overlay over it. */
#login.login::before{
  background:transparent!important;
}

/* Keep login card centered and daily quote at the bottom. */
#login .login-card{
  position:relative!important;
  z-index:2!important;
}


/* =========================================================
   FAMITO OS v5.50 — Keep the full branded slogan visible
   ========================================================= */
#login.login{
  background-color:#b60000!important;
  background-image:url("/assets/famito-login-background-v549.png")!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:contain!important;
  background-attachment:fixed!important;
}

/* On wide desktop screens, keep the whole artwork visible instead of cropping
   the bottom slogan with background-size: cover. */
@media(min-aspect-ratio:16/10){
  #login.login{
    background-size:contain!important;
    background-position:center center!important;
  }
}

/* On tall/mobile screens we still preserve the complete artwork. */
@media(max-aspect-ratio:16/10){
  #login.login{
    background-size:contain!important;
    background-position:center center!important;
  }
}

/* Slightly lift the login card so it does not sit over the slogan area. */
#login .login-card{
  transform:translateY(-28px)!important;
}

@media(max-width:600px){
  #login .login-card{
    transform:translateY(-12px)!important;
  }
}

/* =========================================================
   FAMITO OS v5.51 — Dashboard grouped into 3 business domains
   ========================================================= */
.dashboard-tree{
  margin:8px 8px 14px;
  padding:8px;
  border:1px solid #edf0f4;
  border-radius:16px;
  background:#fff;
  box-shadow:0 7px 22px rgba(30,43,58,.06);
}
.dashboard-tree-root{
  width:100%;border:0;background:#f7f9fc;color:#222f3b;border-radius:11px;
  padding:9px 10px;display:flex;align-items:center;justify-content:flex-start;gap:7px;
  cursor:pointer;font-family:inherit
}
.tree-root-icon{
  width:25px;height:25px;border-radius:8px;background:#fff1ec;color:#f15a24;
  display:grid;place-items:center;font-size:13px
}
.dashboard-tree-branches{
  position:relative;margin-top:7px;padding-right:18px;display:grid;gap:5px
}
.dashboard-tree-branches:before{
  content:"";position:absolute;right:8px;top:0;bottom:14px;width:1.5px;background:#e2e7ed
}
.dashboard-group-btn{
  position:relative;border:0;background:transparent;text-align:right;border-radius:10px;
  padding:7px 9px;color:#4a5662;cursor:pointer;font-family:inherit;transition:.18s ease
}
.dashboard-group-btn:before{
  content:"";position:absolute;right:-10px;top:50%;width:10px;height:1.5px;background:#e2e7ed
}
.dashboard-group-btn span{display:block;font-weight:900;font-size:9px}
.dashboard-group-btn small{display:block;margin-top:2px;color:#a1a8b0;font-size:6.5px}
.dashboard-group-btn:hover,.dashboard-group-btn.active{background:#fff3ee;color:#e9561d}
.dashboard-group-btn.active small{color:#cf8b70}
.dashboard-group-related{
  box-shadow:inset -3px 0 0 #f26a32!important;
  background:#fff7f3!important
}

/* =========================================================
   FAMITO OS v5.52 — Dashboard grouped inside page, sidebar unchanged
   ========================================================= */
.dashboard-tree{display:none!important}

.dashboard-domain-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 0 12px;
}
.dashboard-domain-card{
  position:relative;
  min-height:132px!important;
  padding:16px!important;
  border:1px solid #e8edf2!important;
  border-radius:16px!important;
  background:#fff!important;
  text-align:right!important;
  box-shadow:0 8px 24px rgba(38,52,68,.06)!important;
  overflow:hidden;
}
.dashboard-domain-card:after{
  content:"";position:absolute;left:-30px;bottom:-45px;width:120px;height:120px;border-radius:50%;opacity:.08
}
.dashboard-domain-card.finance:after{background:#ff6a32}
.dashboard-domain-card.warehouse:after{background:#4f8cff}
.dashboard-domain-card.team:after{background:#20b486}
.domain-kicker{display:block;font-size:7px;letter-spacing:1px;color:#9ca5ae;margin-bottom:7px}
.domain-title-row{display:flex;align-items:center;gap:8px}
.domain-title-row h3{margin:0;font-size:17px;color:#35404a}
.domain-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:15px;font-weight:900}
.finance .domain-icon{background:#fff1eb;color:#f06416}
.warehouse .domain-icon{background:#edf4ff;color:#4f8cff}
.team .domain-icon{background:#eaf8f1;color:#20a977}
.dashboard-domain-card p{margin:9px 0 10px;color:#7f8993;font-size:8px;line-height:1.9}
.domain-link{font-size:8px;font-weight:800}
.finance .domain-link{color:#ef6418}.warehouse .domain-link{color:#4f8cff}.team .domain-link{color:#20a977}
.dashboard-domain-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(38,52,68,.09)!important}

.dashboard-domain-section{
  margin:16px 0 8px;
  scroll-margin-top:20px;
}
.domain-section-head{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;
  border-right:4px solid #f06416;
  background:#fff;
  border-radius:10px;
  border-top:1px solid #edf0f3;
  border-bottom:1px solid #edf0f3;
  border-left:1px solid #edf0f3;
}
#dashboardDomainWarehouse .domain-section-head{border-right-color:#4f8cff}
#dashboardDomainTeam .domain-section-head{border-right-color:#20b486}
.domain-section-head span{font-size:13px;font-weight:900;color:#37424c}
.domain-section-head small{font-size:7px;color:#a0a8b0}

@media(max-width:950px){
  .dashboard-domain-grid{grid-template-columns:1fr}
}

/* FAMITO OS v5.53 — Finance center + Stocktake */
.dashboard-finance-center,.inventory-dashboard{margin-top:9px;padding:13px!important}
.dashboard-finance-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.dashboard-finance-shortcuts button{padding:10px!important;min-height:66px!important;border:1px solid #edf0f3!important;border-radius:11px!important;background:#fafbfc!important;box-shadow:none!important;text-align:right!important}
.dashboard-finance-shortcuts button:hover{background:#fff4ee!important;border-color:#ffd8c3!important}
.dashboard-finance-shortcuts span{display:block;font-size:9px;font-weight:900;color:#3d4852}
.dashboard-finance-shortcuts small{display:block;font-size:7px;color:#9ba4ad;margin-top:3px}
.inventory-category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:10px}
.inventory-category-card{padding:12px 10px!important;min-height:112px!important;border:1px solid #edf0f3!important;border-radius:13px!important;background:#fff!important;box-shadow:0 6px 18px rgba(42,58,75,.05)!important;text-align:right!important}
.inventory-category-card .stock-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;margin-bottom:8px;font-size:13px}
.inventory-category-card b{display:block;font-size:11px;color:#3b4650}
.inventory-category-card small{display:block;font-size:7px;color:#99a2ab;margin-top:2px}
.inventory-category-card strong{display:block;margin-top:8px;font-size:9px;color:#56616b}
.inventory-category-card.doll .stock-icon{background:#fff0f2;color:#e75a71}
.inventory-category-card.lego .stock-icon{background:#eef4ff;color:#4f8cff}
.inventory-category-card.toy .stock-icon{background:#fff6e4;color:#e4a128}
.inventory-category-card.figure .stock-icon{background:#f2edff;color:#7c61c9}
.inventory-category-card.stationery .stock-icon{background:#eaf9f3;color:#20a977}
.stocktake-panel{margin-top:10px;padding-top:10px;border-top:1px solid #edf0f3}
.stocktake-real-count{width:90px!important;min-height:30px!important;padding:4px 7px!important}
.stocktake-diff.negative{color:#c84747;font-weight:900}
.stocktake-diff.positive{color:#219365;font-weight:900}
#stocktakeTable{min-width:800px}
@media(max-width:1100px){.inventory-category-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.dashboard-finance-shortcuts{grid-template-columns:1fr 1fr}.inventory-category-grid{grid-template-columns:1fr 1fr}}

/* FAMITO OS v5.55 — CRM retail/wholesale */
.crm-segment-panel{margin:9px 0 11px;padding:10px;border:1px solid #e9edf1;border-radius:13px;background:#fff}
.crm-segment-title{display:flex;align-items:center;gap:8px}.crm-segment-title b{font-size:10px}.crm-segment-title small{font-size:7px;color:#9aa3ab}
.crm-segment-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.crm-segment-tab{border:1px solid #e8edf2!important;background:#fafbfc!important;border-radius:10px!important;padding:8px!important;color:#56616b!important;font-size:8px!important;font-weight:900!important}
.crm-segment-tab b{display:block;margin-top:3px;font-size:12px;color:#303b45}
.crm-segment-tab.active{background:#fff2ec!important;border-color:#ffcdb8!important;color:#e65c20!important}
.crm-type-select{min-width:78px!important;height:28px!important;padding:2px 6px!important;border-radius:8px!important;font-size:7.5px!important;font-weight:900!important}
.crm-type-select.wholesale{background:#fff0e9!important;color:#dc5b20!important;border-color:#ffc9b1!important}
.crm-type-select.retail{background:#edf7ff!important;color:#3979aa!important;border-color:#cbe6fa!important}
.crm-type-select.review{background:#fff8e5!important;color:#a87a19!important;border-color:#f1dea4!important}
@media(max-width:800px){.crm-segment-tabs{grid-template-columns:1fr 1fr}}

.crm-retail-levels{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:8px 0;padding:8px;border:1px solid #edf0f3;border-radius:10px;background:#fafbfc}
.crm-retail-levels>span{font-size:8px;font-weight:900;color:#5e6973}.crm-level-chip{border:1px solid #e3e8ed!important;background:#fff!important;border-radius:999px!important;padding:5px 9px!important;font-size:7px!important;font-weight:900!important}
.crm-level-chip.active{background:#edf6ff!important;color:#3479ad!important;border-color:#c7e0f5!important}.crm-level-chip.vip{color:#9b6a16!important;background:#fff6e7!important}
.crm-level-select{min-width:82px!important;height:28px!important;padding:2px 5px!important;border-radius:8px!important;font-size:7.5px!important;font-weight:900!important}
.crm-level-select.lead{background:#f4f5f6!important}.crm-level-select.new{background:#eef7ff!important;color:#3479ad!important}.crm-level-select.active{background:#eaf9f2!important;color:#238765!important}.crm-level-select.loyal{background:#f1edff!important;color:#7058b3!important}.crm-level-select.vip{background:#fff4df!important;color:#9b6a16!important}

/* =========================================================
   FAMITO OS v5.57 — Professional Persian/Gregorian task calendar
   ========================================================= */
.pro-calendar-head{margin-bottom:8px}
.dual-calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px!important;margin-bottom:8px}
.calendar-month-nav{display:flex;align-items:center;gap:10px}
.calendar-nav-btn{width:31px!important;height:31px!important;min-height:31px!important;padding:0!important;border-radius:9px!important;border:1px solid #e6ebef!important;background:#fff!important;color:#55616c!important}
.calendar-month-title{text-align:center;min-width:180px}.calendar-month-title b{display:block;font-size:14px;color:#34404a}.calendar-month-title span{display:block;margin-top:2px;font-size:7px;color:#9aa4ad}
.calendar-legends{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.calendar-legends span{display:flex;align-items:center;gap:5px;font-size:7px;color:#7d8790}.calendar-legends i{width:8px;height:8px;border-radius:50%}.holiday-dot{background:#ef6651}.occasion-dot{background:#e8b341}.task-dot{background:#4f8cff}

.pro-calendar-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.45fr);gap:8px}
.pro-month-card,.pro-day-sidebar{padding:11px!important}
.schedule-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}.schedule-weekdays span{text-align:center;padding:4px 0;font-size:7px;color:#8f99a3;font-weight:800}
.pro-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.pro-calendar-day{position:relative;min-height:108px!important;padding:7px!important;border:1px solid #e9edf1!important;border-radius:10px!important;background:#fff!important;text-align:right!important;color:#44515c!important;box-shadow:none!important;overflow:hidden}
.pro-calendar-day:hover{border-color:#cfd8e2!important;background:#fbfcfe!important}
.pro-calendar-day.outside{visibility:hidden}
.pro-calendar-day.holiday{background:#fff7f6!important;border-color:#f3d6d1!important}
.pro-calendar-day.has-task{box-shadow:inset 0 -3px 0 rgba(79,140,255,.22)!important}
.pro-calendar-day.important{border-top:3px solid #e8b341!important}.pro-calendar-day.urgent{border-top:3px solid #ef6651!important}
.pro-calendar-day.selected{border-color:#4f8cff!important;background:#f1f6ff!important;box-shadow:0 0 0 2px rgba(79,140,255,.10)!important}
.dual-date-line{display:flex;align-items:center;justify-content:space-between}.dual-date-line strong{font-size:11px}.dual-date-line small{font-size:7px;color:#a3abb3;direction:ltr}
.pro-calendar-day.holiday .dual-date-line strong{color:#d75045}
.cell-occasion{margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a6781d;font-size:6.5px}
.cell-task-avatars{display:flex;align-items:center;direction:ltr;margin-top:12px;min-height:26px}
.pro-task-avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;overflow:hidden;background:#eef2f6;color:#58636e;border:2px solid #fff;font-size:8px;font-weight:900;flex:0 0 auto}
.pro-task-avatar img{width:100%;height:100%;object-fit:cover}.cell-avatar{width:27px;height:27px;margin-right:-7px;box-shadow:0 2px 6px rgba(45,61,77,.14)}
.cell-task-avatars .cell-avatar:first-child{margin-right:0}.task-extra{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#eff2f5;color:#6e7983;font-size:6.5px;margin-right:-6px;border:2px solid #fff}
.cell-task-count{position:absolute;right:7px;bottom:5px;color:#6686b9;font-size:6.5px;font-weight:800}

.day-sidebar-date{padding:10px;border-radius:11px;background:#f7f9fc;margin-bottom:8px}.day-sidebar-date small{display:block;font-size:7px;color:#929ca5}.day-sidebar-date strong{display:block;margin-top:2px;font-size:13px;color:#37434d}.day-sidebar-date span{display:block;margin-top:2px;font-size:8px;color:#87919a}
.schedule-occasions{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}.occasion-chip{padding:4px 7px;border-radius:999px;font-size:7px;background:#fff7e8;color:#9c731e;border:1px solid #f0dfb5}.occasion-chip.holiday{background:#fff0ef;color:#c34e45;border-color:#f0d0cc}
.pro-day-task{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:7px;padding:8px;border:1px solid #edf0f3;border-radius:10px;background:#fff;margin-bottom:5px}
.pro-day-task.important{border-right:3px solid #e8b341}.pro-day-task.urgent{border-right:3px solid #ef6651}.day-avatar{width:35px;height:35px}
.pro-day-task-main{min-width:0}.pro-day-task-main b{display:block;font-size:8.5px;color:#3e4953;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pro-day-task-main span,.pro-day-task-main small{display:block;font-size:6.5px;color:#929ba4;margin-top:2px}
.priority-badge{padding:3px 5px;border-radius:6px;background:#f3f5f7;color:#737e88;font-size:6px}
.schedule-count{padding:4px 7px;border-radius:8px;background:#eef2f6;color:#707b85;font-size:7px}
.schedule-empty{padding:22px;text-align:center;color:#98a1aa;font-size:8px}

.schedule-team-strip{margin-top:8px;padding:11px!important}.schedule-team-workload{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.team-workload-card{display:flex;align-items:center;gap:7px;padding:8px;border:1px solid #edf0f3;border-radius:10px;background:#fff}.team-avatar{width:38px;height:38px}.team-workload-card>div{min-width:0;flex:1}.team-workload-card b{display:block;font-size:8px;color:#414c56}.team-workload-card small{display:block;font-size:6.5px;color:#949da6}.team-workload-card i{display:block;height:4px;margin-top:5px;background:#edf0f3;border-radius:4px;overflow:hidden}.team-workload-card em{display:block;height:100%;background:#4f8cff;border-radius:4px}
.schedule-modal-card{max-width:650px}.schedule-modal-card textarea{min-height:72px}

@media(max-width:1100px){.pro-calendar-layout{grid-template-columns:1fr}.schedule-team-workload{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.dual-calendar-toolbar{align-items:stretch;flex-direction:column}.calendar-legends{justify-content:center}.pro-calendar-day{min-height:82px!important}.cell-occasion{display:none}.cell-task-avatars{margin-top:8px}.cell-avatar{width:22px;height:22px}.schedule-team-workload{grid-template-columns:1fr}}

/* FAMITO OS v5.58 — calendar rendering safety */
#calendar.view:not(.hidden){display:block!important;min-height:700px!important}
#calendar .pro-calendar-layout{display:grid!important;visibility:visible!important;opacity:1!important}
#calendar .pro-month-card,#calendar .pro-day-sidebar{display:block!important;visibility:visible!important;opacity:1!important;min-height:560px!important}
#calendar .pro-calendar-grid{display:grid!important;visibility:visible!important;opacity:1!important;min-height:500px!important}
#calendar .dual-calendar-toolbar{display:flex!important;visibility:visible!important;opacity:1!important}
#calendar .schedule-weekdays{display:grid!important;visibility:visible!important}

/* =========================================================
   FAMITO OS v5.59 — Simple reliable monthly calendar
   ========================================================= */
#calendar.view:not(.hidden){display:block!important;min-height:auto!important}
.simple-cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.simple-cal-head small{font-size:7px;color:#9aa3ab}.simple-cal-head h2{margin:2px 0;font-size:18px;color:#303b45}.simple-cal-head p{margin:0;color:#87919a;font-size:8px}
.simple-cal-toolbar{display:flex!important;align-items:center!important;justify-content:center!important;gap:16px;padding:9px!important;margin-bottom:8px}
.simple-cal-toolbar button{width:32px!important;height:32px!important;min-height:32px!important;padding:0!important;border:1px solid #e4e9ee!important;border-radius:9px!important;background:#fff!important;color:#4f5b65!important}
.simple-cal-toolbar>div{text-align:center;min-width:210px}.simple-cal-toolbar strong{display:block;font-size:14px;color:#37434d}.simple-cal-toolbar span{display:block;margin-top:2px;font-size:7px;color:#939ca5}
.simple-cal-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.45fr);gap:8px}
.simple-cal-month,.simple-cal-side{padding:10px!important;min-height:auto!important}
.simple-cal-week,.simple-cal-grid{display:grid!important;grid-template-columns:repeat(7,1fr)!important;gap:4px!important;visibility:visible!important;opacity:1!important}
.simple-cal-week{margin-bottom:4px}.simple-cal-week span{text-align:center;padding:5px 2px;font-size:7px;font-weight:800;color:#7d8790}
.simple-cal-day{position:relative;display:block!important;min-height:92px!important;padding:7px!important;border:1px solid #e7ecf0!important;border-radius:9px!important;background:#fff!important;text-align:right!important;color:#414d57!important;box-shadow:none!important;overflow:hidden}
.simple-cal-day.empty{visibility:hidden}
.simple-cal-day:hover{background:#fafcff!important;border-color:#ccd6df!important}
.simple-cal-day.selected{background:#eff6ff!important;border-color:#6098e8!important;box-shadow:inset 0 0 0 1px rgba(96,152,232,.14)!important}
.simple-cal-day.friday .simple-day-numbers b{color:#d6534b}
.simple-cal-day.has-note{border-bottom:3px solid #ef6a2d!important}
.simple-day-numbers{display:flex;align-items:center;justify-content:space-between}.simple-day-numbers b{font-size:11px}.simple-day-numbers small{font-size:7px;color:#9ca5ad;direction:ltr}
.simple-note-preview{display:block;margin-top:5px;padding:3px 5px;border-radius:6px;background:#fff6ef;color:#86573c;font-size:6.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.simple-cal-day em{display:block;margin-top:3px;font-size:6px;font-style:normal;color:#8a949d}
.simple-cal-selected{padding:10px;border-radius:10px;background:#f7f9fb;margin-bottom:9px}.simple-cal-selected small{display:block;font-size:7px;color:#929ca5}.simple-cal-selected h3{margin:3px 0;font-size:13px;color:#35414b}.simple-cal-selected span{font-size:8px;color:#87919a}
.simple-cal-form{display:grid;gap:7px;padding-bottom:10px;border-bottom:1px solid #edf0f3}.simple-cal-form label span{display:block;margin-bottom:3px;font-size:7px;font-weight:800;color:#68737d}.simple-cal-form input,.simple-cal-form textarea{width:100%!important;box-sizing:border-box!important}.simple-cal-form textarea{min-height:75px!important;resize:vertical}
.simple-cal-list-head{display:flex;align-items:center;justify-content:space-between;margin:10px 0 6px}.simple-cal-list-head b{font-size:9px;color:#414c56}.simple-cal-list-head span{font-size:7px;color:#8e98a1}
.simple-cal-notes{display:grid;gap:6px}.simple-note-item{display:grid;grid-template-columns:1fr auto;gap:7px;padding:8px;border:1px solid #e9edf1;border-radius:9px;background:#fff}.simple-note-item.done{opacity:.55}.simple-note-item.done b{text-decoration:line-through}.simple-note-item b{display:block;font-size:8.5px;color:#3f4a54}.simple-note-item p{margin:3px 0;font-size:7px;color:#6f7a84;line-height:1.8}.simple-note-item small{font-size:6.5px;color:#9aa3ab}.simple-note-actions{display:flex;gap:4px}.simple-note-actions button{width:25px!important;height:25px!important;min-height:25px!important;padding:0!important;border-radius:7px!important;border:1px solid #e5e9ed!important;background:#fafbfc!important;color:#67727c!important}
@media(max-width:950px){.simple-cal-layout{grid-template-columns:1fr}.simple-cal-day{min-height:80px!important}}
@media(max-width:620px){.simple-cal-day{min-height:66px!important;padding:5px!important}.simple-note-preview{display:none}.simple-cal-week span{font-size:6px}}

/* =========================================================
   FAMITO OS v5.60 — Professional task schedule calendar
   ========================================================= */
#calendar.view:not(.hidden){display:block!important}
.taskcal-shell{padding:2px 0 10px}
.taskcal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.taskcal-top small{font-size:7px;color:#9aa3ad}.taskcal-top h2{margin:2px 0;font-size:18px;color:#35414b}.taskcal-top p{margin:0;font-size:8px;color:#8d97a0}
.taskcal-top-actions{display:flex;gap:6px}

.taskcal-card{padding:13px!important;background:#f4f7fb!important;border-color:#e8edf3!important}
.taskcal-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:12px}
.taskcal-nav-left{display:flex;gap:5px}
.taskcal-nav-left button{width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;border-radius:50%!important;background:#fff!important;border:1px solid #e2e8ef!important;color:#65717c!important}
.taskcal-title{text-align:center}.taskcal-title strong{display:block;font-size:14px;color:#33404a}.taskcal-title span{display:block;margin-top:2px;font-size:7px;color:#95a0aa}
.taskcal-legend{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}.taskcal-legend span{display:flex;align-items:center;gap:4px;font-size:7px;color:#7f8993}.taskcal-dot{width:7px;height:7px;border-radius:50%}.taskcal-dot.task{background:#5f7fe8}.taskcal-dot.note{background:#d3b54d}.taskcal-dot.holiday{background:#e86e65}

.taskcal-weekdays,.taskcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.taskcal-weekdays{margin-bottom:6px}.taskcal-weekdays span{text-align:center;font-size:7px;color:#98a2ac;font-weight:800}
.taskcal-day{position:relative;display:block!important;min-height:118px!important;padding:8px!important;border:0!important;border-radius:16px!important;background:#edf2f8!important;color:#46535f!important;text-align:right!important;box-shadow:none!important;overflow:hidden}
.taskcal-day:nth-child(3n){background:#f0f4f9!important}.taskcal-day.ghost{visibility:hidden}
.taskcal-day:hover{background:#e7edf6!important}
.taskcal-day.selected{background:#5579e6!important;color:#fff!important;box-shadow:0 9px 20px rgba(85,121,230,.18)!important}
.taskcal-day.friday:not(.selected){background:#fff1f0!important}
.taskcal-day.important:not(.selected){background:#fff4ca!important}.taskcal-day.urgent:not(.selected){background:#ffe5df!important}
.taskcal-date-row{display:flex;align-items:center;justify-content:space-between}.taskcal-date-row strong{font-size:11px}.taskcal-date-row small{font-size:7px;color:#9aa4ae}.taskcal-day.selected .taskcal-date-row small{color:#dfe7ff}
.taskcal-block{margin-top:8px;border-radius:10px;padding:6px;overflow:hidden}.taskcal-block.task{background:rgba(255,255,255,.72)}.taskcal-block.note{background:#fff8d9}.taskcal-day.selected .taskcal-block{background:rgba(255,255,255,.17);color:#fff}
.taskcal-block>span{display:block;margin-top:4px;font-size:6.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.taskcal-avatars{display:flex;direction:ltr;align-items:center}.tc-avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;overflow:hidden;background:#fff;border:2px solid #fff;color:#56616c;font-size:7px;font-weight:900;flex:0 0 auto}.tc-avatar img{width:100%;height:100%;object-fit:cover}.tc-avatar.cell{width:24px;height:24px;margin-right:-5px}.tc-avatar.cell:first-child{margin-right:0}.taskcal-more{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#dfe6ef;color:#65717c;font-size:6px;margin-right:-5px;border:2px solid #fff}

.taskcal-bottom{display:grid;grid-template-columns:1.1fr .9fr;gap:8px;margin-top:8px}.taskcal-day-panel,.taskcal-team-panel{padding:11px!important}
.taskcal-day-head{display:flex;align-items:start;justify-content:space-between;gap:8px;margin-bottom:8px}.taskcal-day-head small{display:block;font-size:6.5px;color:#9aa4ad}.taskcal-day-head h3{margin:2px 0;font-size:13px;color:#39454f}.taskcal-day-head span{font-size:7px;color:#87919a}
.taskcal-day-items{display:grid;gap:5px}.tc-day-item{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;padding:8px;border:1px solid #edf0f3;border-radius:10px;background:#fff}.tc-day-item.note{grid-template-columns:auto 1fr}.tc-avatar.large{width:34px;height:34px}.tc-day-item b{display:block;font-size:8.5px;color:#3e4953}.tc-day-item span,.tc-day-item small{display:block;margin-top:2px;font-size:6.5px;color:#919ba4}.tc-day-item em{font-size:6px;font-style:normal;padding:3px 5px;border-radius:6px;background:#f2f4f6;color:#707a84}.tc-note-icon{width:32px;height:32px;border-radius:9px;background:#fff6d8;display:grid!important;place-items:center;color:#a98519;font-size:13px}
.taskcal-team{display:grid;grid-template-columns:1fr 1fr;gap:5px}.tc-team-person{display:flex;align-items:center;gap:7px;padding:7px;border:1px solid #edf0f3;border-radius:10px;background:#fafbfc}.tc-avatar.team{width:34px;height:34px}.tc-team-person b{display:block;font-size:8px;color:#414d57}.tc-team-person small{display:block;font-size:6.5px;color:#959fa8}

.taskcal-modal-card{max-width:650px}.taskcal-modal-tabs{display:flex;gap:5px;margin-bottom:10px}.taskcal-modal-tabs button{flex:1;min-height:32px!important;border:1px solid #e6ebef!important;border-radius:9px!important;background:#fafbfc!important;color:#68747e!important;font-size:8px!important}.taskcal-modal-tabs button.active{background:#edf3ff!important;color:#4f70d6!important;border-color:#cbd9ff!important}

@media(max-width:1000px){.taskcal-bottom{grid-template-columns:1fr}.taskcal-team{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.taskcal-nav{grid-template-columns:1fr}.taskcal-nav-left,.taskcal-legend{justify-content:center}.taskcal-day{min-height:90px!important;padding:6px!important}.taskcal-block>span{display:none}.taskcal-team{grid-template-columns:1fr}}

/* =========================================================
   FAMITO OS v5.61 — dual date + personnel avatars + reminders
   ========================================================= */
.taskcal-reminder-status{
  display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;
  background:#edf8f2;color:#287657;border:1px solid #d4ecdf;font-size:7px;font-weight:900
}
.taskcal-reminder-status:before{content:"";width:6px;height:6px;border-radius:50%;background:#2ca773}

.taskcal-date-row{align-items:flex-start!important}
.taskcal-jalali-number,.taskcal-gregorian-number{display:flex;align-items:baseline;gap:3px}
.taskcal-jalali-number small,.taskcal-gregorian-number small{
  font-size:5.5px!important;opacity:.65;font-weight:900
}
.taskcal-jalali-number strong{font-size:12px!important}
.taskcal-gregorian-number strong{font-size:8px!important;font-weight:800;color:#8d98a3}
.taskcal-day.selected .taskcal-gregorian-number strong{color:#e0e8ff}

.taskcal-personnel-row{
  display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px
}
.taskcal-personnel-row>span{font-size:5.8px;color:#7f8a95}
.taskcal-day.selected .taskcal-personnel-row>span{color:#dfe7ff}
.taskcal-personnel-row .tc-avatar.cell{width:22px;height:22px}
.taskcal-block.task{margin-top:5px!important;padding:4px 6px!important}

.taskcal-reminder-tray{
  position:fixed;left:22px;bottom:22px;z-index:9999;
  display:flex;align-items:center;gap:12px;width:min(390px,calc(100vw - 44px));
  padding:12px 13px;border-radius:14px;background:#fff;border:1px solid #e6ebf0;
  box-shadow:0 14px 40px rgba(37,50,64,.16)
}
.taskcal-reminder-tray.hidden{display:none!important}
.taskcal-reminder-tray>div{min-width:0;flex:1}
.taskcal-reminder-tray small{display:block;font-size:6px;color:#9aa4ad;letter-spacing:1px}
.taskcal-reminder-tray b{display:block;margin-top:2px;font-size:9px;color:#35414b}
.taskcal-reminder-tray span{display:block;margin-top:3px;font-size:7px;color:#7f8a94;line-height:1.8}
.taskcal-reminder-tray button{
  min-height:30px!important;padding:5px 9px!important;border:1px solid #e1e7ec!important;
  border-radius:8px!important;background:#f6f8fa!important;color:#59656f!important;font-size:7px!important
}

/* =========================================================
   FAMITO OS v5.62 — Website Sales inside Finance dashboard
   ========================================================= */
#dashboardDomainFinance .finance-woo-dashboard{
  margin-top:10px;
  padding-top:0;
}
.finance-subsection-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:4px 0 8px;
  padding:9px 11px;
  border:1px solid #edf0f3;
  border-radius:10px;
  background:#fafbfc;
}
.finance-subsection-label small{
  display:block;
  font-size:6.5px;
  color:#9aa3ad;
  letter-spacing:1px;
}
.finance-subsection-label strong{
  display:block;
  margin-top:2px;
  font-size:10px;
  color:#3c4852;
}
.finance-subsection-label>span{
  padding:4px 7px;
  border-radius:999px;
  background:#eef6ff;
  color:#3979aa;
  font-size:7px;
  font-weight:800;
}
#dashboardDomainFinance .woo-dashboard-shell{
  border-top:0;
}
#dashboardDomainFinance .woo-dashboard-head h2{
  font-size:15px;
}
#dashboardDomainFinance #wooTopProductsTable{
  min-width:760px;
}

/* =========================================================
   FAMITO OS v5.63 — Cleaner sidebar + Finance/Team hubs
   ========================================================= */
.finance-management-dashboard{
  margin-top:11px;
  padding-top:11px;
  border-top:1px solid #edf0f3;
}
.finance-management-title{
  margin-top:0!important;
}
.finance-management-dashboard .dashboard-summary-strip{
  margin-top:8px;
}
.finance-management-dashboard .kpis{
  margin-top:8px;
}

.team-command-center{
  margin-top:9px;
  padding:13px!important;
}
.team-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.team-dashboard-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:7px!important;
  min-height:125px!important;
  padding:12px!important;
  border:1px solid #e8edf2!important;
  border-radius:14px!important;
  background:#fff!important;
  text-align:right!important;
  box-shadow:0 6px 18px rgba(42,58,75,.045)!important;
}
.team-dashboard-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(42,58,75,.075)!important;
}
.team-dashboard-icon{
  width:33px;height:33px;
  display:grid;place-items:center;
  border-radius:10px;
  font-size:14px;
}
.team-dashboard-card.employees .team-dashboard-icon{background:#eef4ff;color:#4f78db}
.team-dashboard-card.attendance .team-dashboard-icon{background:#eaf9f3;color:#24936e}
.team-dashboard-card.duties .team-dashboard-icon{background:#fff5e5;color:#bd8424}
.team-dashboard-card.calendar .team-dashboard-icon{background:#f2edff;color:#735bb5}
.team-dashboard-card div{min-width:0}
.team-dashboard-card b{display:block;font-size:10px;color:#3c4751}
.team-dashboard-card small{display:block;margin-top:3px;font-size:7px;color:#929ca5;line-height:1.8}
.team-dashboard-card em{margin-top:auto;font-size:7px;font-style:normal;font-weight:900;color:#66727c}
.team-dashboard-note{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:9px;padding:8px 10px;border-radius:9px;
  background:#f7f9fb;color:#87919a;font-size:7px
}
.team-dashboard-note b{color:#4f5b65}

@media(max-width:1050px){
  .team-dashboard-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .team-dashboard-grid{grid-template-columns:1fr}
}

/* =========================================================
   FAMITO OS v5.64 — Compact dashboard accordion
   ========================================================= */
.dashboard-domain-section{
  scroll-margin-top:78px;
  margin-top:9px!important;
}
.collapsible-domain-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:44px;
  cursor:default;
}
.domain-head-copy{
  display:flex;
  align-items:center;
  gap:8px;
}
.domain-head-copy span{
  font-size:13px;
  font-weight:900;
  color:#37424c;
}
.domain-head-copy small{
  font-size:7px;
  color:#a0a8b0;
}
.domain-toggle-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-width:105px!important;
  min-height:30px!important;
  padding:5px 9px!important;
  border:1px solid #e5eaf0!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#69747e!important;
  box-shadow:none!important;
  font-family:inherit!important;
}
.domain-toggle-btn span{
  font-size:7.5px!important;
  font-weight:900!important;
}
.domain-toggle-btn i{
  font-style:normal;
  font-size:10px;
  line-height:1;
}
.dashboard-domain-section.domain-open .domain-toggle-btn{
  background:#f7f9fb!important;
  border-color:#dce3e9!important;
  color:#3f4c57!important;
}

.domain-collapsible-body{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .28s ease,opacity .20s ease,margin .28s ease;
  margin-top:0;
  overflow:hidden;
}
.domain-collapsible-body>*{
  min-height:0;
  overflow:hidden;
}
.domain-collapsible-body.is-open{
  grid-template-rows:1fr;
  opacity:1;
  margin-top:8px;
}
.domain-collapsible-body.is-open>*{
  overflow:visible;
}

.dashboard-domain-card{
  cursor:pointer!important;
}
.dashboard-domain-card.domain-card-active{
  border-color:#d7dfe7!important;
  box-shadow:0 10px 28px rgba(38,52,68,.09)!important;
  transform:translateY(-2px);
}
.dashboard-domain-card.finance.domain-card-active{
  background:#fff8f4!important;
}
.dashboard-domain-card.warehouse.domain-card-active{
  background:#f5f9ff!important;
}
.dashboard-domain-card.team.domain-card-active{
  background:#f3fbf7!important;
}

/* Avoid the old internal panels adding excessive blank space when expanded. */
#dashboardDomainFinance .domain-collapsible-body.is-open,
#dashboardDomainWarehouse .domain-collapsible-body.is-open,
#dashboardDomainTeam .domain-collapsible-body.is-open{
  padding-bottom:2px;
}

@media(max-width:700px){
  .collapsible-domain-head{
    align-items:flex-start!important;
  }
  .domain-head-copy{
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
  }
  .domain-toggle-btn{
    min-width:92px!important;
  }
}

/* =========================================================
   FAMITO OS v5.65 — Remove empty space from collapsed domains
   ========================================================= */

/* v5.64 used a 0fr grid. Because each section contains several direct children,
   implicit grid rows could still reserve a large vertical area.
   Closed sections now use display:none so they occupy exactly zero height. */
.domain-collapsible-body{
  display:none!important;
  margin:0!important;
  padding:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  opacity:0!important;
}

.domain-collapsible-body.is-open{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin-top:8px!important;
  padding:0!important;
  overflow:visible!important;
  opacity:1!important;
}

/* Keep the three collapsed section headers compact and stacked together. */
.dashboard-domain-section{
  margin:6px 0!important;
  padding:0!important;
  min-height:0!important;
}
.dashboard-domain-section:not(.domain-open){
  min-height:0!important;
  height:auto!important;
}
.dashboard-domain-section:not(.domain-open) .collapsible-domain-head{
  margin:0!important;
}

/* Remove legacy spacing from internal panels while the section is closed. */
.dashboard-domain-section:not(.domain-open) .dashboard-finance-center,
.dashboard-domain-section:not(.domain-open) .inventory-dashboard,
.dashboard-domain-section:not(.domain-open) .team-command-center,
.dashboard-domain-section:not(.domain-open) .finance-woo-dashboard,
.dashboard-domain-section:not(.domain-open) .finance-management-dashboard{
  display:none!important;
  margin:0!important;
  padding:0!important;
}

/* The three headers should visually read as one compact accordion stack. */
#dashboardDomainFinance,
#dashboardDomainWarehouse,
#dashboardDomainTeam{
  margin-bottom:6px!important;
}

/* =========================================================
   FAMITO OS v5.66 — Menu reorganization
   ========================================================= */
.dashboard-finance-shortcuts [data-finance-module="payroll"]{
  background:#fff8ef!important;
  border-color:#f2dfc5!important;
}
.dashboard-finance-shortcuts [data-finance-module="payroll"]:hover{
  background:#fff3df!important;
  border-color:#e9ca9d!important;
}

/* =========================================================
   FAMITO OS v5.67 — Communications & Publishing clean hub
   ========================================================= */
.communications-clean-head{
  margin-bottom:12px;
  padding:4px 2px;
}
.communications-clean-head small{
  display:block;
  font-size:7px;
  color:#9aa3ad;
  letter-spacing:1px;
}
.communications-clean-head h2{
  margin:3px 0;
  font-size:20px;
  color:#303b45;
}
.communications-clean-head p{
  margin:0;
  font-size:9px;
  color:#8a949d;
}

.communications-clean-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.communications-clean-card{
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:10px!important;
  min-height:175px!important;
  padding:17px!important;
  border:1px solid #e7ecf0!important;
  border-radius:16px!important;
  background:#fff!important;
  text-align:right!important;
  font-family:inherit!important;
  box-shadow:0 8px 24px rgba(35,49,64,.06)!important;
}
.communications-clean-card:hover{
  transform:translateY(-3px);
  box-shadow:0 13px 30px rgba(35,49,64,.09)!important;
}
.communications-clean-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:17px;
  font-weight:900;
}
.communications-clean-card.websites .communications-clean-icon{
  background:#edf4ff;color:#4f8cff;
}
.communications-clean-card.socials .communications-clean-icon{
  background:#eaf9f3;color:#209a70;
}
.communications-clean-card.publisher .communications-clean-icon{
  background:#fff1eb;color:#f06416;
}
.communications-clean-card small{
  display:block;
  font-size:6.5px;
  color:#9aa3ad;
  letter-spacing:.8px;
}
.communications-clean-card h3{
  margin:3px 0;
  font-size:14px;
  color:#37424c;
}
.communications-clean-card p{
  margin:0;
  font-size:8px;
  line-height:1.9;
  color:#8a949d;
}
.communications-clean-card>b{
  margin-top:auto;
  font-size:8px;
  color:#59656f;
}
@media(max-width:900px){
  .communications-clean-grid{grid-template-columns:1fr}
}

/* FAMITO OS v5.68 — global back button */
.famito-global-back{
  position:fixed;
  top:66px;
  left:18px;
  z-index:900;
  display:flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 13px;
  border:1px solid #eadfd7;
  border-radius:11px;
  background:rgba(255,255,255,.96);
  color:#39434c;
  font-family:inherit;
  font-size:10px;
  cursor:pointer;
  box-shadow:0 5px 18px rgba(38,47,56,.08);
  backdrop-filter:blur(8px);
}
.famito-global-back:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(38,47,56,.12);
}
.famito-global-back span{
  font-size:15px;
  line-height:1;
}
.famito-global-back.hidden{
  display:none!important;
}

/* =========================================================
   FAMITO OS v5.69 — Click Import moved to Finance
   ========================================================= */
.dashboard-finance-shortcuts [data-finance-module="click-import"]{
  background:#f4f8ff!important;
  border-color:#dce8fb!important;
}
.dashboard-finance-shortcuts [data-finance-module="click-import"]:hover{
  background:#edf5ff!important;
  border-color:#c9dcf8!important;
}

/* =========================================================
   FAMITO OS v5.70 — Local back control on every page
   ========================================================= */
#globalBackBtn{display:none!important}

.famito-local-backbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  margin:0 0 10px;
  padding:0;
}

.famito-local-back{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:34px!important;
  padding:7px 12px!important;
  border:1px solid #e1e6eb!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#4d5963!important;
  font-family:inherit!important;
  font-size:8px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
  box-shadow:0 4px 14px rgba(35,48,61,.05)!important;
  transition:.16s ease!important;
}

.famito-local-back:hover{
  transform:translateY(-1px);
  border-color:#f0c9c9!important;
  color:#dc4e4e!important;
  box-shadow:0 7px 18px rgba(35,48,61,.08)!important;
}

.famito-back-arrow{
  font-family:Arial,sans-serif;
  font-size:15px;
  line-height:1;
}

/* Keep the back button clearly above page cards/forms. */
.view > .famito-local-backbar{
  position:relative;
  z-index:10;
}


/* =========================================================
   FAMITO OS v5.71 — Improved Back Button UX
   Larger, clearer, and aligned with the page header/action area.
   ========================================================= */
.view > .famito-local-backbar{
  width:100%!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  margin:2px 0 14px!important;
  padding:0 2px!important;
  position:relative!important;
  z-index:20!important;
}

.famito-local-back{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-width:138px!important;
  min-height:42px!important;
  padding:10px 16px!important;
  border:1px solid #ead7ca!important;
  border-radius:12px!important;
  background:#fffaf6!important;
  color:#26323d!important;
  font-family:inherit!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1.2!important;
  cursor:pointer!important;
  box-shadow:0 5px 16px rgba(35,48,61,.07)!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease!important;
}

.famito-local-back:hover{
  transform:translateY(-1px)!important;
  background:#fff4ec!important;
  border-color:#efbca0!important;
  color:#d95a28!important;
  box-shadow:0 8px 22px rgba(35,48,61,.11)!important;
}

.famito-local-back:active{
  transform:translateY(0)!important;
  box-shadow:0 3px 10px rgba(35,48,61,.08)!important;
}

.famito-back-arrow{
  width:24px!important;
  height:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:7px!important;
  background:#f4e8df!important;
  color:#303a43!important;
  font-family:Arial,sans-serif!important;
  font-size:17px!important;
  font-weight:700!important;
  line-height:1!important;
}

/* On narrower screens keep it usable without consuming the header. */
@media (max-width:700px){
  .view > .famito-local-backbar{
    margin-bottom:10px!important;
  }
  .famito-local-back{
    min-width:118px!important;
    min-height:40px!important;
    padding:9px 12px!important;
    font-size:9px!important;
  }
}

/* =========================================================
   FAMITO OS v5.72 — Important employee notes on calendar
   ========================================================= */
.important-note-row{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:8px 10px!important;
  border:1px solid #f1dfb7!important;
  border-radius:9px!important;
  background:#fff9eb!important;
}
.important-note-row input{width:auto!important}
.important-note-row span{margin:0!important;color:#7f681f!important;font-weight:900!important}

.taskcal-important-note{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:5px;
  padding:5px 6px;
  border-radius:9px;
  background:#fff3bf;
  color:#715b12;
  overflow:hidden;
}
.taskcal-important-note .taskcal-avatars{flex:0 0 auto}
.taskcal-important-note>span{
  min-width:0;
  font-size:6.3px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.important-note-avatar{
  box-shadow:0 0 0 2px #f0c951;
}
.important-note-item{
  border-right:3px solid #e6b62e!important;
  background:#fffaf0!important;
}

/* FAMITO OS v5.73 — password UX */
.password-field{display:flex;align-items:stretch;gap:7px;width:100%}
.password-field input{flex:1;min-width:0}
.password-toggle{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:78px!important;
  margin:0!important;
  padding:7px 10px!important;
  border-radius:9px!important;
  font-size:11px!important;
  white-space:nowrap;
}
.self-password-card{margin-top:12px}
.self-password-card .compact-panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px}

/* =========================================================
   FAMITO OS v5.74 — Manager view of employee important notes
   ========================================================= */
.taskcal-important-note{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}
.taskcal-important-note.multi{
  justify-content:flex-start!important;
  background:transparent!important;
  padding:3px 0!important;
}
.taskcal-important-note.multi > span{
  display:none!important;
}
.taskcal-important-note.multi .taskcal-avatars{
  padding:2px 3px;
  border-radius:999px;
  background:#fff6cc;
}
.taskcal-important-note .tc-avatar.cell{
  width:24px!important;
  height:24px!important;
  margin-right:-5px!important;
  border:2px solid #fff!important;
}
.taskcal-important-note .tc-avatar.cell:first-child{
  margin-right:0!important;
}
.taskcal-important-note .important-note-avatar{
  box-shadow:0 0 0 2px #f1c84e!important;
}

.important-note-item{
  grid-template-columns:auto 1fr!important;
  align-items:flex-start!important;
  gap:10px!important;
  padding:11px!important;
  border-right:4px solid #e5b72d!important;
  background:#fffaf0!important;
}
.important-note-item .tc-avatar.large{
  width:42px!important;
  height:42px!important;
}
.tc-note-copy b{
  display:block;
  font-size:9px!important;
  color:#35414b!important;
}
.tc-note-author{
  display:block;
  margin-top:2px!important;
  color:#b17a18!important;
  font-size:7px!important;
  font-weight:900!important;
}
.tc-note-copy p{
  margin:6px 0!important;
  font-size:8px!important;
  line-height:1.9!important;
  color:#616c76!important;
  white-space:normal!important;
}
.tc-note-copy small{
  display:block;
  color:#98a1aa!important;
  font-size:6.5px!important;
}

/* Make avatar clusters visually similar to the provided Tasks Schedule reference. */
.taskcal-day .taskcal-avatars{
  display:flex;
  align-items:center;
  direction:ltr;
}

/* v5.78 manager note recipient help */
#taskCalNoteForm .field-help{display:block;margin-top:4px;color:#8b959e;font-size:7px;line-height:1.7}

/* ===== FAMITO v5.80 Internal Tickets ===== */
.ticket-layout{display:grid;grid-template-columns:minmax(260px,34%) 1fr;gap:14px;min-height:480px}.ticket-list{display:flex;flex-direction:column;gap:8px;max-height:620px;overflow:auto}.ticket-item{width:100%;display:grid;grid-template-columns:1fr auto;gap:6px;text-align:right;padding:12px;border:1px solid #e3e8ee;background:#fff;border-radius:14px;cursor:pointer}.ticket-item.active{border-color:#ef7b45;box-shadow:0 0 0 2px #fff1e9}.ticket-item span{display:grid;gap:4px}.ticket-item small{color:#7c8792}.ticket-item em{font-style:normal;font-size:11px;color:#65717c}.ticket-priority{font-style:normal;font-size:10px;border-radius:20px;padding:4px 8px;background:#eef2f5}.p-فوری{background:#ffe5e5;color:#b42318}.p-مهم{background:#fff1d6;color:#9a6700}.ticket-conversation{border:1px solid #e5e9ed;border-radius:16px;background:#fafbfc;padding:14px;min-width:0}.ticket-empty{display:grid;place-items:center;min-height:180px;color:#9aa3ab}.ticket-thread-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid #e6eaee}.ticket-thread-head div{display:grid;gap:4px}.ticket-thread-head small{color:#87919a}.ticket-messages{display:flex;flex-direction:column;gap:10px;padding:16px 0;max-height:430px;overflow:auto}.ticket-message{max-width:78%;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid #e5e9ed;align-self:flex-start}.ticket-message.mine{align-self:flex-end;background:#eef7ff}.ticket-message p{white-space:pre-wrap;margin:6px 0}.ticket-message small{color:#8b959d}.ticket-reply{display:grid;grid-template-columns:1fr auto;gap:8px}.ticket-reply textarea{resize:vertical}.ticket-modal{position:fixed;inset:0;background:#17212b66;z-index:1000;display:grid;place-items:center;padding:20px}.ticket-modal.hidden{display:none}.ticket-compose-card{width:min(620px,96vw);background:#fff;border-radius:18px;padding:18px;display:grid;gap:12px;box-shadow:0 20px 60px #0003}.ticket-compose-card label{display:grid;gap:6px}.ticket-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ticket-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:10px;background:#e53935;color:white;font-size:10px}.ticket-badge.hidden{display:none}@media(max-width:800px){.ticket-layout{grid-template-columns:1fr}.ticket-row{grid-template-columns:1fr}.ticket-message{max-width:92%}}

/* =========================================================
   FAMITO OS v5.81 — Manager ticket control center
   ========================================================= */
.ticket-admin-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:10px 0}
.ticket-admin-kpis article{padding:12px;border:1px solid #e6ebef;border-radius:13px;background:#fff}
.ticket-admin-kpis span{display:block;font-size:8px;color:#88939d}.ticket-admin-kpis strong{display:block;margin-top:5px;font-size:19px;color:#33404b}
.ticket-admin-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:10px 0}
.ticket-admin-filters button{min-height:32px!important;padding:6px 10px!important;border:1px solid #e3e8ec!important;border-radius:9px!important;background:#fff!important;font-size:8px!important}
.ticket-admin-filters button.active{background:#fff1ec!important;border-color:#f1c8b8!important;color:#df5d2d!important}
.ticket-admin-filters input{margin-right:auto;min-width:260px;max-width:390px;height:34px}
.ticket-admin-layout{display:grid;grid-template-columns:minmax(300px,38%) 1fr;gap:10px;align-items:start}
.ticket-admin-list-card,.ticket-admin-thread-card{padding:10px!important;min-height:520px}
.ticket-list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:9px}
.ticket-admin-item{display:block!important;width:100%!important;text-align:right!important;padding:10px!important;margin-bottom:6px!important;border:1px solid #e8edf1!important;border-radius:11px!important;background:#fff!important}
.ticket-admin-item.unread{border-right:4px solid #ed6b3d!important;background:#fffaf7!important}
.ticket-item-top,.ticket-item-meta,.ticket-thread-tags,.ticket-admin-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ticket-flow{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:6.5px;font-weight:900}
.ticket-flow.employee-flow{background:#eef2ff;color:#5d6cc1}.ticket-flow.manager-flow{background:#edf9f4;color:#328564}
.ticket-unread-dot{padding:2px 6px;border-radius:999px;background:#f05d39;color:#fff;font-size:6px;font-weight:900}
.ticket-main-copy{display:block;margin:7px 0}.ticket-main-copy b{display:block;font-size:10px}.ticket-main-copy small{font-size:7px;color:#8b959e}
.ticket-item-meta{font-size:7px;color:#89939d}.ticket-item-meta em{font-style:normal}
.ticket-admin-thread-head{padding-bottom:9px;border-bottom:1px solid #edf0f2}
.ticket-admin-thread-head b{display:block;margin:6px 0 3px;font-size:14px}.ticket-admin-thread-head small{font-size:8px;color:#8a949d}
.ticket-admin-controls{margin:10px 0;padding:10px;border-radius:11px;background:#f8fafb;border:1px solid #e8edf1}
.ticket-admin-controls label{min-width:130px;flex:1}.ticket-admin-controls label span{display:block;font-size:7px;margin-bottom:4px}.ticket-admin-controls select{width:100%;height:34px}
.ticket-manager-notice{margin:8px 0;padding:9px 11px;border-radius:10px;background:#f2f0ff;color:#6656a0;font-size:8px;line-height:1.8}
.ticket-danger{background:#fff0f0!important;color:#c94444!important;border:1px solid #f1caca!important;border-radius:8px!important;padding:8px 10px!important}
.ticket-admin-error{padding:10px 12px;margin:8px 0;border-radius:10px;background:#fff0f0;color:#b73e3e;border:1px solid #f0cccc;font-size:9px}
.ticket-admin-error.hidden{display:none!important}
@media(max-width:1000px){.ticket-admin-kpis{grid-template-columns:repeat(2,1fr)}.ticket-admin-layout{grid-template-columns:1fr}.ticket-admin-filters input{margin-right:0;max-width:none;width:100%}}

/* =========================================================
   FAMITO OS v5.83 — Always-visible manager ticket send form
   ========================================================= */
.manager-ticket-send-card{
  margin:12px 0!important;
  padding:14px!important;
  border:1px solid #e4e9ee!important;
}
.manager-ticket-send-card .compact-panel-head{
  margin-bottom:10px;
}
.manager-ticket-send-card .compact-panel-head h3{
  margin:3px 0;
}
.manager-ticket-send-card .compact-panel-head p{
  margin:0;
  font-size:8px;
  color:#8a949d;
}
.manager-ticket-form-grid{
  display:grid;
  grid-template-columns:1.2fr 1.8fr 1fr 1fr;
  gap:9px;
}
.manager-ticket-form-grid label{
  display:block;
}
.manager-ticket-form-grid label>span{
  display:block;
  margin-bottom:5px;
  font-size:8px;
  font-weight:900;
  color:#59656f;
}
.manager-ticket-form-grid input,
.manager-ticket-form-grid select,
.manager-ticket-form-grid textarea{
  width:100%;
}
.manager-ticket-message{
  grid-column:1/-1;
}
.manager-ticket-form-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.manager-ticket-form-actions .btn-confirm{
  min-width:125px;
}
.manager-ticket-send-status{
  font-size:8px;
  font-weight:900;
}
.manager-ticket-send-status.success{color:#258262}
.manager-ticket-send-status.error{color:#c44747}
@media(max-width:950px){
  .manager-ticket-form-grid{grid-template-columns:1fr 1fr}
  .manager-ticket-message{grid-column:1/-1}
}
@media(max-width:620px){
  .manager-ticket-form-grid{grid-template-columns:1fr}
  .manager-ticket-message{grid-column:auto}
}

/* v5.85 — broadcast ticket UI */
#mgrTicketRecipient option[value="all"]{font-weight:900}
.success-ticket-message{color:#248260!important;background:#effaf5!important;border:1px solid #ccebdc!important;border-radius:10px;padding:14px!important}

/* v5.86 — ticket priority, sent/received, checklist and files */
.ticket-priority{font-style:normal!important;font-weight:900!important;border-radius:999px!important;padding:3px 8px!important}
.ticket-priority.p-normal{background:#edf4ff!important;color:#406fa8!important;border:1px solid #d7e5f7!important}
.ticket-priority.p-important{background:#fff4cc!important;color:#9b7411!important;border:1px solid #f0dda0!important}
.ticket-priority.p-urgent{background:#ffe7e7!important;color:#c44040!important;border:1px solid #f2c0c0!important}
.ticket-work-tools{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0}
.ticket-checklist-box,.ticket-attachment-box{border:1px solid #e5eaee;border-radius:11px;padding:10px;background:#fafbfc}
.ticket-tool-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.ticket-tool-head b{font-size:9px}.ticket-tool-head small{font-size:7px;color:#8d97a0}
.ticket-checklist{display:grid;gap:5px}.ticket-check-item{display:flex!important;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px!important;border:1px solid #e6eaee;border-radius:8px;background:#fff;font-size:8px}
.ticket-check-item.done{opacity:.7;background:#eef8f2;text-decoration:line-through}.ticket-check-item button{font-size:7px!important;padding:3px 6px!important}
.ticket-inline-form{display:flex;gap:6px;margin-top:8px}.ticket-inline-form input{flex:1;min-width:0}.ticket-inline-form button{white-space:nowrap}
.ticket-attachments{display:grid;gap:5px}.ticket-attachments a{display:block;padding:7px 8px;border:1px solid #e6eaee;border-radius:8px;background:#fff;font-size:8px;color:#55626e;text-decoration:none}
.ticket-empty-mini{font-size:7.5px;color:#9099a2;padding:7px}
@media(max-width:800px){.ticket-work-tools{grid-template-columns:1fr}}

/* =========================================================
   FAMITO OS v5.87 — Supplier Intelligence / Procurement
   ========================================================= */
.supplier-center-shortcut{margin-right:6px!important}
.procurement-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:18px;border:1px solid #e6ebef;border-radius:17px;background:#fff;margin-bottom:10px}
.procurement-hero small{font-size:7px;letter-spacing:1px;color:#98a2ab}.procurement-hero h2{margin:4px 0;font-size:20px;color:#313d47}.procurement-hero p{margin:0;max-width:760px;font-size:8.5px;line-height:1.9;color:#7f8a94}
.procurement-hero-actions{display:flex;gap:5px;flex-wrap:wrap}.procurement-hero-actions button{padding:7px 10px!important;border:1px solid #e4e9ed!important;border-radius:9px!important;background:#fff!important;font-size:8px!important}.procurement-hero-actions button.active{background:#fff2ec!important;border-color:#f0c9b8!important;color:#d96031!important}
.procurement-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:9px 0}.procurement-kpis article{background:#fff;border:1px solid #e6ebef;border-radius:13px;padding:12px}.procurement-kpis span{font-size:8px;color:#89949e;display:block}.procurement-kpis strong{font-size:20px;display:block;margin-top:5px;color:#34414b}
.procurement-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.supplier-source-list{display:grid;gap:6px;margin-top:10px}.supplier-source-card{display:grid;grid-template-columns:1.5fr auto auto auto;gap:9px;align-items:center;padding:9px;border:1px solid #e7ebef;border-radius:10px;background:#fafbfc}.supplier-source-card b{display:block;font-size:9px}.supplier-source-card small,.supplier-source-card span{font-size:7px;color:#87929c}.supplier-source-card a{font-size:7px;color:#4f75a0}
.catalog-import-box{margin-top:12px;padding:10px;border:1px dashed #ccd7df;border-radius:11px;background:#f8fafb}.catalog-import-box b{font-size:9px}.catalog-import-box p{font-size:7px;color:#87929b}.catalog-import-box form{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;align-items:center}.catalog-import-box span{display:block;margin-top:6px;font-size:7px;color:#4c7a63}
.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.catalog-toolbar h3{margin:0}.catalog-toolbar p{margin:3px 0 0;font-size:7px;color:#8b959e}.catalog-toolbar>div:last-child{display:flex;gap:6px}.catalog-toolbar input{min-width:260px}
.supplier-catalog-groups{display:grid;gap:12px}.catalog-category-block{border:1px solid #e7ebef;border-radius:13px;overflow:hidden}.catalog-category-head{display:flex;align-items:center;gap:7px;padding:9px 11px;background:#f7f9fa}.catalog-category-head b{font-size:11px}.catalog-category-head small{margin-right:auto;color:#8b959e;font-size:7px}
.catalog-product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:9px}.catalog-product-card{display:flex;flex-direction:column;border:1px solid #e8ecef;border-radius:11px;background:#fff;overflow:hidden}.catalog-product-card img,.catalog-image-fallback{width:100%;height:105px;object-fit:cover;background:#f1f4f6;display:grid;place-items:center;font-size:28px;color:#9aa3ab}.catalog-product-copy{padding:8px;display:grid;gap:3px}.catalog-product-copy small{font-size:6.5px;color:#929ba3}.catalog-product-copy b{font-size:9px}.catalog-product-copy span{font-size:7px;color:#7d8993}.catalog-product-copy strong{margin-top:3px;font-size:8px;color:#26775d}.catalog-product-copy strong.missing{color:#c1811d}.catalog-product-card .row-actions{padding:0 8px 8px}
.procurement-period{margin:6px 0 10px;font-size:8px;color:#77838d}.reorder-alert-row{background:#fffaf1}.reorder-alert-row>td:nth-child(4) strong{color:#c4553d}.procurement-tab-panel.hidden{display:none!important}
@media(max-width:1100px){.catalog-product-grid{grid-template-columns:repeat(3,1fr)}.procurement-grid-two{grid-template-columns:1fr}.procurement-hero{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){.procurement-kpis{grid-template-columns:1fr 1fr}.catalog-product-grid{grid-template-columns:1fr 1fr}.catalog-import-box form{grid-template-columns:1fr}.catalog-toolbar{align-items:stretch;flex-direction:column}.catalog-toolbar>div:last-child{flex-direction:column}.catalog-toolbar input{min-width:0;width:100%}}

/* =========================================================
   FAMITO OS v5.88 — SMS Communication Center
   ========================================================= */
.communications-clean-card.sms-center .communications-clean-icon{background:#fff2eb;color:#e26a35}
.sms-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:17px;border:1px solid #e5eaee;border-radius:16px;background:#fff}.sms-hero small{font-size:7px;letter-spacing:1px;color:#929da7}.sms-hero h2{margin:4px 0;font-size:20px}.sms-hero p{margin:0;font-size:8px;color:#7f8a94}
.sms-hero-tabs{display:flex;gap:5px;flex-wrap:wrap}.sms-hero-tabs button{padding:7px 10px!important;border:1px solid #e3e8ec!important;border-radius:9px!important;background:#fff!important;font-size:8px!important}.sms-hero-tabs button.active{background:#fff1eb!important;border-color:#efc5b2!important;color:#d75e2d!important}
.sms-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.sms-kpis article{padding:12px;background:#fff;border:1px solid #e5eaee;border-radius:13px}.sms-kpis span{display:block;font-size:8px;color:#89949e}.sms-kpis strong{display:block;margin-top:5px;font-size:20px}
.sms-grid-two{display:grid;grid-template-columns:1.3fr .7fr;gap:10px}.sms-panel.hidden{display:none!important}.sms-message-meta{display:flex;justify-content:space-between;padding:7px 9px;border-radius:8px;background:#f7f9fa;color:#78848e;font-size:7px}
.sms-copy-guide{display:grid;grid-template-columns:1fr 1fr;gap:7px}.sms-copy-guide span{padding:8px;border:1px solid #e6eaee;border-radius:9px;background:#fafbfc;font-size:8px}.sms-copy-guide code{display:block;margin-bottom:3px;color:#d75e2d}
.sms-quick-ideas{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.sms-quick-ideas button{padding:6px 9px!important;border-radius:999px!important;font-size:7px!important}.sms-idea-box{white-space:pre-line;padding:11px;border:1px dashed #d6dde2;border-radius:10px;background:#fbfcfd;font-size:8px;line-height:1.9}
.sms-audience-preview{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.sms-audience-preview span{padding:5px 7px;border-radius:999px;background:#f0f4f7;font-size:7px}.sms-preview-head{width:100%;font-weight:900;font-size:8px}
.sms-template-cards{display:grid;gap:7px}.sms-template-card{display:flex;justify-content:space-between;gap:10px;padding:10px;border:1px solid #e5eaee;border-radius:10px}.sms-template-card small{display:block;color:#8d97a0;font-size:6.5px}.sms-template-card b{display:block;margin:3px 0;font-size:9px}.sms-template-card p{white-space:pre-line;margin:0;font-size:7.5px;line-height:1.8;color:#65727d}
.sms-status{display:inline-block;padding:3px 7px;border-radius:999px;font-size:7px;font-weight:900}.sms-status.st-پیش‌نویس{background:#eef3f7;color:#64727e}.sms-status.st-ارسال‌شده{background:#eaf8f0;color:#27785b}.sms-status.st-ناموفق{background:#ffecec;color:#b94141}.sms-status.st-ارسال-ناقص{background:#fff4cf;color:#987216}.sms-settings-status{margin-top:8px;padding:8px;border-radius:9px;background:#f7f9fa;color:#687580;font-size:8px}
@media(max-width:900px){.sms-grid-two{grid-template-columns:1fr}.sms-hero{align-items:flex-start;flex-direction:column}}
@media(max-width:650px){.sms-kpis{grid-template-columns:1fr 1fr}.sms-copy-guide{grid-template-columns:1fr}}

/* v5.89 — social supplier ingestion and decision board */
.social-import-help{margin-top:10px;padding:9px 10px;border:1px solid #f0dfb7;border-radius:10px;background:#fff9ec;color:#86691f;font-size:8px;line-height:1.8}
.proc-decision-badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef5ff;color:#4a6f9f;font-size:7px;font-weight:900}

/* =========================================================
   FAMITO OS v5.92 — BaranToy visual supplier catalog
   ========================================================= */
.catalog-image-button{
  width:100%!important;height:118px!important;padding:0!important;border:0!important;
  border-radius:0!important;background:#f2f4f6!important;overflow:hidden!important;cursor:zoom-in!important;
}
.catalog-image-button img{
  width:100%!important;height:100%!important;object-fit:contain!important;background:#f7f8f9!important;
}
.supplier-image-modal{
  position:fixed;inset:0;z-index:99999;background:rgba(20,27,33,.82);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;
}
.supplier-image-modal.hidden{display:none!important}
.supplier-image-modal img{
  max-width:min(900px,92vw);max-height:78vh;object-fit:contain;background:#fff;border-radius:14px;
  box-shadow:0 22px 70px rgba(0,0,0,.35);
}
.supplier-image-modal #supplierImageModalCaption{
  margin-top:10px;padding:7px 12px;border-radius:999px;background:#fff;color:#34404a;font-size:11px;font-weight:900;
}
.supplier-image-close{
  position:absolute!important;top:18px!important;left:18px!important;width:42px!important;height:42px!important;
  border-radius:50%!important;background:#fff!important;color:#333!important;font-size:24px!important;padding:0!important;
}

/* Ticket manager selection + reply interaction fix */
#mgrTicketList .ticket-item[data-mgr-ticket]{pointer-events:auto!important;cursor:pointer!important;opacity:1!important}
#mgrTicketList .ticket-item[data-mgr-ticket]:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(35,52,68,.08)}
#mgrTicketList .ticket-item[data-mgr-ticket].active{outline:2px solid rgba(234,108,55,.24);background:#fff8f4!important}
#mgrTicketConversation{pointer-events:auto!important;opacity:1!important}
#mgrTicketConversation .manager-ticket-reply-active{display:flex!important;opacity:1!important;pointer-events:auto!important}
#mgrTicketConversation .manager-ticket-reply-active textarea,
#mgrTicketConversation .manager-ticket-reply-active button{pointer-events:auto!important;opacity:1!important}

/* Manager ticket selection hardening */
#mgrTicketList{position:relative;z-index:3}
#mgrTicketList .ticket-admin-item{
  position:relative!important;z-index:4!important;pointer-events:auto!important;
  cursor:pointer!important;user-select:none!important;
}
#mgrTicketList .ticket-admin-item *{pointer-events:none!important}
#mgrTicketList .ticket-admin-item.active{
  border-color:#f08a60!important;
  box-shadow:0 0 0 2px rgba(240,138,96,.16)!important;
  background:#fff7f2!important;
}
.ticket-loading{min-height:240px;display:grid;place-items:center;color:#7b8791;font-size:11px}
.ticket-open-error{min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#b64040;background:#fff6f6;border:1px solid #f0d0d0;border-radius:12px;padding:18px}
.ticket-open-error b{font-size:14px}.ticket-open-error span{font-size:10px}

/* Ticket filter reliability / active state */
#mgrTicketFilters{position:relative;z-index:8}
#mgrTicketFilters [data-ticket-filter]{
  position:relative!important;z-index:9!important;pointer-events:auto!important;cursor:pointer!important;
  user-select:none!important;opacity:1!important;
}
#mgrTicketFilters [data-ticket-filter] b{
  font-size:7px;font-weight:800;margin-right:3px;pointer-events:none;
}
#mgrTicketFilters [data-ticket-filter].active{
  background:#fff1ec!important;border-color:#ef9d79!important;color:#dc5c2b!important;
  box-shadow:0 0 0 2px rgba(239,157,121,.10)!important;
}
#mgrTicketFilters [data-ticket-filter]:hover{
  border-color:#efb79f!important;background:#fff8f4!important;
}

.theme-toggle{width:38px!important;height:38px!important;border-radius:11px!important;border:1px solid #e3e8ec!important;background:#fff!important;font-size:16px!important;display:grid!important;place-items:center!important}
.premium-ticket-composer{background:linear-gradient(180deg,#fff,#fbfcfd)!important;border:1px solid #e3e8ec!important;box-shadow:0 12px 34px rgba(32,48,63,.06)!important}
.manager-ticket-form-grid label{padding:8px;border:1px solid #edf0f2;border-radius:10px;background:#fff}
.manager-ticket-form-grid input,.manager-ticket-form-grid select,.manager-ticket-form-grid textarea{border:1px solid #dde4e9!important;background:#fbfcfd!important;border-radius:9px!important}
.ticket-admin-list-card,.ticket-admin-thread-card{box-shadow:0 10px 30px rgba(30,45,60,.045)!important}
.ticket-checklist-composer{margin-top:9px;padding:9px;border:1px solid #e5eaee;border-radius:10px;background:#fff}
.ticket-tag-input-wrap{display:flex;gap:6px}.ticket-tag-input-wrap input{flex:1;min-width:0}
.ticket-draft-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.ticket-draft-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:#eef4ff;color:#3d628e;font-size:8px;border:1px solid #d9e5f5}
.ticket-draft-tag button{width:18px!important;height:18px!important;padding:0!important;border-radius:50%!important;background:#fff!important}
.ticket-checklist-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}.ticket-checklist-actions small{font-size:7px;color:#7f8a94}
[data-theme="dark"] body{background:#0f151a!important;color:#e8edf1!important}
[data-theme="dark"] .card,[data-theme="dark"] .ticket-admin-item,[data-theme="dark"] .premium-ticket-composer,[data-theme="dark"] .manager-ticket-form-grid label,[data-theme="dark"] .ticket-checklist-composer,[data-theme="dark"] .ticket-checklist-box,[data-theme="dark"] .ticket-attachment-box{background:#172027!important;border-color:#2b3943!important;color:#e8edf1!important}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#11181e!important;color:#eef2f5!important;border-color:#34444f!important}
[data-theme="dark"] .theme-toggle{background:#172027!important;color:#fff!important;border-color:#34444f!important}
[data-theme="dark"] .ticket-admin-controls,[data-theme="dark"] .ticket-thread-head{background:#11181e!important;border-color:#2b3943!important}
@media(max-width:1100px){.ticket-admin-layout{grid-template-columns:1fr!important}.ticket-admin-list-card,.ticket-admin-thread-card{min-height:auto!important}.manager-ticket-form-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:720px){.manager-ticket-form-grid{grid-template-columns:1fr!important}.manager-ticket-message{grid-column:auto!important}.ticket-admin-filters{overflow-x:auto;flex-wrap:nowrap!important}.ticket-admin-filters button{white-space:nowrap}.ticket-work-tools{grid-template-columns:1fr!important}.ticket-tag-input-wrap{flex-direction:column}.ticket-checklist-actions{flex-direction:column;align-items:stretch}.ticket-checklist-actions button{width:100%}}

.manager-photo-report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.manager-photo-report-card{border:1px solid #e4e9ed;border-radius:14px;background:#fff;overflow:hidden}.manager-photo-report-card>img{width:100%;height:220px;object-fit:cover;background:#f2f4f6}.manager-photo-report-info{padding:11px}.manager-photo-report-info small{font-size:7px;color:#88939d}.manager-photo-report-info h4{margin:4px 0;font-size:12px}.manager-photo-report-info p{font-size:8px;color:#687580;line-height:1.8}.manager-photo-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:7px}.manager-photo-review{display:grid;grid-template-columns:1fr 120px auto;gap:6px;margin-top:9px}@media(max-width:1100px){.manager-photo-report-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.manager-photo-report-grid{grid-template-columns:1fr}.manager-photo-review{grid-template-columns:1fr}}

.manager-photo-duty{display:block;margin-top:4px;padding:4px 7px;border-radius:8px;background:#eef4ff;color:#45698f;font-size:7px;font-weight:900}
[data-theme="dark"] .manager-photo-duty{background:#22303a;color:#cbd8e2}

/* =========================================================
   Manager task completion reports
   ========================================================= */
.dashboard-task-proof-card{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:13px 14px;border:1px solid #e4e9ed;border-radius:14px;background:linear-gradient(135deg,#fff7f2,#fff);box-shadow:0 8px 22px rgba(37,50,61,.045)}
.dashboard-task-proof-card small{display:block;font-size:7px;color:#9a6c59}.dashboard-task-proof-card b{display:block;margin:3px 0;font-size:12px}.dashboard-task-proof-card span{font-size:8px;color:#78848d}.dashboard-task-proof-card button{white-space:nowrap}
.task-proof-manager-hero{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:16px;border:1px solid #e4e9ed;border-radius:16px;background:linear-gradient(135deg,#fff8f4,#fff)}
.task-proof-manager-hero small{font-size:7px;color:#d36b40;font-weight:900}.task-proof-manager-hero h2{margin:4px 0}.task-proof-manager-hero p{margin:0;font-size:8px;color:#7d8992}
.task-proof-manager-kpis{display:flex;gap:8px}.task-proof-manager-kpis article{min-width:90px;padding:9px 11px;border:1px solid #e8ecef;border-radius:11px;background:#fff;text-align:center}.task-proof-manager-kpis span{display:block;font-size:7px;color:#85919a}.task-proof-manager-kpis strong{display:block;margin-top:4px;font-size:17px}
.task-proof-manager-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.task-proof-manager-toolbar button{padding:7px 10px!important;border:1px solid #e1e7eb!important;background:#fff!important;border-radius:9px!important}.task-proof-manager-toolbar button.active{background:#fff1eb!important;border-color:#efb79e!important;color:#d85e2e!important}.task-proof-manager-toolbar input{margin-right:auto;min-width:260px}
.task-proof-manager-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.task-proof-manager-card{border:1px solid #e4e9ed;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 8px 22px rgba(40,54,67,.04)}
.task-proof-image-btn{width:100%!important;height:220px!important;padding:0!important;border:0!important;background:#f3f5f7!important}.task-proof-image-btn img{width:100%;height:100%;object-fit:cover}
.task-proof-manager-card-body{padding:11px}.task-proof-person{display:flex;align-items:center;gap:8px}.task-proof-person>img,.task-proof-person>span{width:34px;height:34px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#eef3f6}.task-proof-person b{display:block;font-size:10px}.task-proof-person small{font-size:7px;color:#87929a}
.task-proof-duty-title{margin:9px 0;padding:8px;border-radius:9px;background:#f7f9fa}.task-proof-duty-title small{display:block;font-size:7px;color:#89949d}.task-proof-duty-title strong{font-size:10px}
.task-proof-manager-card-body p{font-size:8px;line-height:1.8;color:#697680}.task-proof-time{font-size:7px;color:#929ca4;margin:6px 0}
.task-proof-review-controls{display:grid;grid-template-columns:120px 1fr auto;gap:6px}.task-proof-review-controls>*{min-width:0}
.duty-report-btn{margin-top:7px!important;background:#fff4ee!important;color:#d76231!important;border:1px solid #efc9b9!important}
.duty-photo-modal{position:fixed;inset:0;z-index:99999;background:rgba(19,27,33,.68);display:grid;place-items:center;padding:20px}.duty-photo-modal.hidden{display:none!important}.duty-photo-modal-card{width:min(900px,95vw);max-height:88vh;overflow:auto;background:#fff;border-radius:16px;padding:14px}.duty-photo-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.duty-photo-modal-head small{display:block;font-size:7px;color:#89949d}.duty-photo-modal-head h3{margin:3px 0}.duty-photo-modal-head button{width:36px!important;height:36px!important;padding:0!important}
.duty-photo-report-item{display:grid;grid-template-columns:180px 1fr;gap:10px;padding:9px;border:1px solid #e6eaed;border-radius:11px;margin-bottom:8px}.duty-photo-report-item img{width:180px;height:130px;object-fit:cover;border-radius:8px}.duty-photo-report-item p{font-size:9px}.duty-photo-report-item b{display:inline-block;padding:4px 7px;border-radius:999px;background:#eef4ff;font-size:8px}.duty-photo-report-item em{display:block;margin-top:6px;font-size:8px;color:#7d8992}
[data-theme="dark"] .dashboard-task-proof-card,[data-theme="dark"] .task-proof-manager-hero,[data-theme="dark"] .task-proof-manager-card,[data-theme="dark"] .duty-photo-modal-card{background:#172027!important;border-color:#2b3943!important;color:#e8edf1!important}
[data-theme="dark"] .task-proof-duty-title{background:#11181e!important}
@media(max-width:1100px){.task-proof-manager-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.task-proof-manager-hero{flex-direction:column;align-items:stretch}.task-proof-manager-kpis{overflow-x:auto}.task-proof-manager-grid{grid-template-columns:1fr}.task-proof-manager-toolbar{overflow-x:auto;flex-wrap:nowrap}.task-proof-manager-toolbar input{min-width:220px}.task-proof-review-controls{grid-template-columns:1fr}.dashboard-task-proof-card{flex-direction:column;align-items:stretch}.dashboard-task-proof-card button{width:100%}.duty-photo-report-item{grid-template-columns:1fr}.duty-photo-report-item img{width:100%;height:auto}}

.duties-task-proof-panel{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:12px 0;padding:14px;border:1px solid #e4e9ed;border-radius:14px;background:linear-gradient(135deg,#fff8f3,#fff)}
.duties-task-proof-copy small{font-size:7px;color:#d66a3d;font-weight:900}.duties-task-proof-copy h3{margin:4px 0}.duties-task-proof-copy p{margin:0;font-size:8px;color:#7a8790}
.duties-task-proof-summary{display:flex;align-items:center;gap:8px}.duties-task-proof-summary strong{font-size:18px;color:#d7602f}.duties-task-proof-summary button{white-space:nowrap}
.task-proof-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:#eef1f3;min-height:220px}.task-proof-gallery button{height:109px!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important}.task-proof-gallery img{width:100%;height:100%;object-fit:cover}.task-proof-more{display:grid!important;place-items:center!important;font-size:18px!important;font-weight:900!important;color:#fff!important;background:rgba(31,44,54,.78)!important}
.task-proof-photo-count{display:inline-flex;margin:5px 0;padding:3px 7px;border-radius:999px;background:#eef4ff;color:#496c92;font-size:7px;font-weight:900}
.task-photo-lightbox{position:fixed;inset:0;z-index:100000;background:rgba(7,11,14,.94);display:flex;align-items:center;justify-content:center;padding:26px}.task-photo-lightbox.hidden{display:none!important}
.task-photo-lightbox-stage{max-width:calc(100vw - 150px);max-height:calc(100vh - 70px);display:flex;flex-direction:column;align-items:center;gap:9px}.task-photo-lightbox-stage img{max-width:100%;max-height:calc(100vh - 115px);object-fit:contain;border-radius:8px}
#taskPhotoLightboxCaption{color:#fff;font-size:10px;background:rgba(255,255,255,.1);padding:5px 10px;border-radius:999px}
.task-photo-lightbox-close{position:absolute!important;top:18px!important;left:18px!important;width:42px!important;height:42px!important;border-radius:50%!important;padding:0!important;background:#fff!important;color:#222!important;font-size:24px!important}
.task-photo-lightbox-nav{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;width:46px!important;height:60px!important;padding:0!important;background:rgba(255,255,255,.12)!important;color:#fff!important;font-size:34px!important}.task-photo-lightbox-nav.prev{right:20px!important}.task-photo-lightbox-nav.next{left:20px!important}
@media(max-width:760px){.duties-task-proof-panel{flex-direction:column;align-items:stretch}.duties-task-proof-summary{justify-content:space-between;flex-wrap:wrap}.duties-task-proof-summary button{width:100%}.task-photo-lightbox{padding:12px}.task-photo-lightbox-stage{max-width:100vw;max-height:100vh}}

#taskProofManagerGrid .ticket-open-error{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
#taskProofManagerGrid .ticket-open-error button{margin-top:6px}

/* Restore task-proof entry inside Duties */
#dutiesTaskProofPanel.duties-task-proof-panel{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:14px!important;
  margin:14px 0 4px!important;
  padding:15px!important;
  border:1px solid #eadfd9!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#fff7f2,#fff)!important;
  box-shadow:0 8px 24px rgba(42,55,66,.05)!important;
}
#dutiesTaskProofPanel .duties-task-proof-copy small{font-size:7px;color:#d86639;font-weight:900}
#dutiesTaskProofPanel .duties-task-proof-copy h3{margin:4px 0;font-size:15px}
#dutiesTaskProofPanel .duties-task-proof-copy p{margin:0;font-size:8px;color:#7d8992}
#dutiesTaskProofPanel .duties-task-proof-summary{display:flex;align-items:center;gap:10px}
#dutiesTaskProofPanel .duties-task-proof-summary>div{display:flex;flex-direction:column;align-items:center;min-width:80px}
#dutiesTaskProofPanel .duties-task-proof-summary span{font-size:8px;color:#7d8992}
#dutiesTaskProofPanel .duties-task-proof-summary strong{font-size:20px;color:#da602d}
#openTaskProofReportsBtn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:135px!important;min-height:38px!important;
  background:#fff!important;color:#d75e2e!important;border:1px solid #efbfa9!important;
  border-radius:10px!important;font-weight:900!important;cursor:pointer!important;
}
[data-theme="dark"] #dutiesTaskProofPanel.duties-task-proof-panel{
  background:#172027!important;border-color:#2b3943!important;color:#eef2f5!important
}
@media(max-width:760px){
  #dutiesTaskProofPanel.duties-task-proof-panel{flex-direction:column!important;align-items:stretch!important}
  #dutiesTaskProofPanel .duties-task-proof-summary{justify-content:space-between!important;flex-wrap:wrap!important}
  #openTaskProofReportsBtn{width:100%!important}
}

/* Task reports are scoped ONLY to Duties page */
#duties #dutiesTaskProofPanel{display:flex!important}
#duties #dutiesTaskProofInline{margin:10px 0 16px}
#duties #dutiesTaskProofInline.hidden{display:none!important}
#duties #toggleDutiesTaskProofReports{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:140px!important;min-height:38px!important;
  background:#fff!important;color:#d75e2e!important;border:1px solid #efbfa9!important;
  border-radius:10px!important;font-weight:900!important;cursor:pointer!important;
}
#duties .duties-inline-report-head{margin-top:0!important}

@media(max-width:760px){
  #duties #toggleDutiesTaskProofReports{width:100%!important}
}

/* v5.109.4 — single task report block, Duties only */
#duties .duties-task-proof-panel{
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  gap:14px!important;margin:14px 0 10px!important;padding:15px!important;
  border:1px solid #eadfd9!important;border-radius:14px!important;
  background:linear-gradient(135deg,#fff7f2,#fff)!important;
}
#duties .duties-task-proof-copy small{font-size:7px;color:#d86639;font-weight:900}
#duties .duties-task-proof-copy h3{margin:4px 0;font-size:15px}
#duties .duties-task-proof-copy p{margin:0;font-size:8px;color:#7d8992}
#duties .duties-task-proof-summary{display:flex!important;align-items:center!important;gap:12px!important}
#duties .duties-task-proof-countbox{display:flex;flex-direction:column;align-items:center;min-width:75px}
#duties .duties-task-proof-countbox span{font-size:8px;color:#7d8992}
#duties .duties-task-proof-countbox strong{font-size:20px;color:#da602d}
#duties #toggleDutiesTaskProofReports{
  min-width:140px!important;min-height:38px!important;border-radius:10px!important;
  background:#fff!important;color:#d75e2e!important;border:1px solid #efbfa9!important;
  font-weight:900!important;cursor:pointer!important;
}
#duties .duties-task-proof-inline{margin:0 0 16px!important;padding:0!important}
#duties .duties-task-proof-inline.hidden{display:none!important}
[data-theme="dark"] #duties .duties-task-proof-panel{background:#172027!important;border-color:#2b3943!important;color:#eef2f5!important}
@media(max-width:760px){
  #duties .duties-task-proof-panel{flex-direction:column!important;align-items:stretch!important}
  #duties .duties-task-proof-summary{justify-content:space-between!important;flex-wrap:wrap!important}
  #duties #toggleDutiesTaskProofReports{width:100%!important}
}

/* v5.109.5 — fix Duties report button interaction */
#duties #toggleDutiesTaskProofReports{
  pointer-events:auto!important;
  cursor:pointer!important;
  opacity:1!important;
  position:relative!important;
  z-index:20!important;
}
#duties #dutiesTaskProofInline.hidden{
  display:none!important;
}
#duties #dutiesTaskProofInline:not(.hidden){
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
#duties #taskProofManagerGrid{
  min-height:120px;
}

/* Safe Employee PIN editor */
.employee-pin-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  align-items:center;
}
.employee-pin-show-btn{
  min-width:72px!important;
  height:40px!important;
  border-radius:9px!important;
}
.employee-pin-status{
  min-height:22px;
  padding:5px 7px;
  border-radius:8px;
  font-size:9px;
  font-weight:800;
}
.employee-pin-status:empty{display:none}
.employee-pin-status.success{
  display:block;
  color:#247a59;
  background:#eefaf4;
  border:1px solid #ccebdc;
}
.employee-pin-status.error{
  display:block;
  color:#b74545;
  background:#fff1f1;
  border:1px solid #f0caca;
}
@media(max-width:600px){
  .employee-pin-field{grid-template-columns:1fr}
  .employee-pin-show-btn{width:100%!important}
}