@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --green:#16824d;
  --green-strong:#0e663b;
  --green-soft:#eaf7ef;
  --green-pale:#f5fbf7;
  --nav:#eef5f1;
  --ink:#15251d;
  --muted:#66776d;
  --line:#dce7e0;
  --line-strong:#c9d9cf;
  --bg:#f5f8f6;
  --panel:#ffffff;
  --amber:#ef9d1b;
  --amber-soft:#fff5df;
  --danger:#d34943;
  --danger-soft:#fff0ef;
  --shadow-sm:0 2px 4px rgba(18,53,35,.03),0 10px 28px rgba(18,53,35,.055);
  --shadow-md:0 18px 48px rgba(18,53,35,.12);
  --radius:16px;
}

html{font-size:16px}
body{background:var(--bg);color:var(--ink);font:500 14px/1.65 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:0}
html[dir=rtl] body{font-family:Cairo,"Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:0}
button,input,select,textarea{font:inherit}

/* Bright navigation shell */
.sidebar{width:264px;padding:20px 14px 16px;background:linear-gradient(180deg,#f3f8f5 0%,#eaf2ed 100%);border-inline-end:1px solid #c9d9d0;color:var(--ink);box-shadow:7px 0 30px rgba(20,55,38,.08);overflow:hidden}
.sidebar:before{inset:-160px -190px auto auto;width:330px;height:330px;border-color:rgba(22,130,77,.08);box-shadow:0 0 0 58px rgba(22,130,77,.025),0 0 0 116px rgba(22,130,77,.018)}
.brand{padding:0 10px 19px;border-bottom:1px solid #cbdcd2}
.brand-mark{width:42px;height:42px;border:0;border-radius:13px;background:linear-gradient(145deg,#188d54,#0f6d40);box-shadow:0 8px 18px rgba(22,130,77,.22)}
.brand strong{color:#163b29;font-size:16px;letter-spacing:.055em}
.brand span{color:#6f887a;font-size:9px;letter-spacing:.11em}
.sidebar .nav-group{margin:19px 11px 7px;color:#648474;font-size:9px;font-weight:800;letter-spacing:.13em}
.sidebar nav{scrollbar-color:#aebfb5 transparent}
.sidebar nav a{min-height:44px;margin:3px 0;padding:8px 10px;border-radius:11px;color:#365247;font-size:13px;font-weight:700}
.sidebar nav a:hover{background:#e0eee6;color:#126c40;transform:translateX(2px)}
.sidebar nav a.active{background:linear-gradient(90deg,#cfe9da,#e5f3eb);color:#0d6238;box-shadow:inset 4px 0 0 #16824d,0 5px 15px rgba(22,130,77,.08);font-weight:800}
.sidebar .nav-icon{width:30px;height:30px;border-radius:9px;background:#dfeae4;color:#47725f;font-size:15px}
.sidebar nav a.active .nav-icon{background:#bfe0cd;color:#0d6238}
.sidebar nav a em{background:#ffe9c4;color:#8c5600}
.operations-state{margin:10px 4px 0;padding:11px;border-color:#c5d8cd;background:rgba(255,255,255,.62)}
.operations-state b{color:#1f4934;font-size:11px}.operations-state small{color:#587566;font-size:9px}
.profile{border-top-color:var(--line);color:var(--ink)}
.profile small{color:#71877b;font-size:9px}.profile>a{color:var(--green)}
.mobile-close{color:var(--ink)}

/* Spacious header and content */
.main{margin-left:264px}.topbar{min-height:72px;height:72px;padding:0 28px;background:rgba(255,255,255,.95);border-color:var(--line);box-shadow:0 3px 18px rgba(20,55,38,.035)}
.global-search{width:min(560px,43vw);height:44px;border-radius:12px;background:#f7faf8}.global-search input{font-size:13px}
.branch-filter{height:44px;min-width:205px;border-radius:12px}.branch-filter select{font-size:12px}
.sound-toggle{width:40px;height:40px;border-radius:11px}.language-switch{padding:9px 12px;font-size:10px}
.api-status{padding:8px 11px;font-size:10px}.today{font-size:9px}.today b{font-size:11px}
.content{max-width:1680px;padding:30px 32px 48px}.page-head{margin-bottom:24px}.page-head h1{font-size:30px;line-height:1.3}.page-head p{font-size:13px}.eyebrow{font-size:9px!important}

/* Clear reusable cards and controls */
.panel{padding:20px}.panel,.kpis article,.dashboard-kpis .kpi-card{border-color:var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
.panel h2{font-size:16px}.panel-head p{font-size:11px}.panel-head a{font-size:11px}
.primary,.outline,.danger{min-height:42px;padding:9px 15px;border-radius:10px;font-size:12px}
.module-search{height:44px}.module-search input{font-size:13px}.tabs a{padding:9px 13px;font-size:11px}
.editor-grid label{font-size:12px}.editor-grid label small{font-size:10px}.editor-grid input,.editor-grid select,.editor-grid textarea{font-size:13px}.editor-grid input,.editor-grid select{height:46px}
.message{font-size:12px}.count-badge{font-size:10px}

/* Dashboard based on selected concept 3 */
.dashboard-kpis{gap:14px}.dashboard-kpis .kpi-card,.dashboard-kpis article{min-height:124px;padding:18px}.kpi-icon{width:44px;height:44px;border-radius:12px;font-size:18px}.kpis small{font-size:11px}.kpis b{font-size:27px}.kpis em{font-size:10px}
.dashboard-board{gap:14px}.journey b,.branch-row b,.branch-row strong,.attention-panel b,.quick-panel b{font-size:11px}.journey strong{font-size:17px}.attention-panel small,.quick-panel small,.branch-row small{font-size:9px}

/* Readable data surfaces */
.table-wrap{border-radius:12px}table{font-size:12px}th,td{padding:12px 13px;font-size:11px}th{font-size:10px}.status{font-size:9px}.table-thumb{width:54px;height:54px}
.catalog-manager-head h2{font-size:30px}.catalog-manager-head p{font-size:12px}.catalog-search input{font-size:13px}.catalog-filter-chip>span{font-size:12px}.catalog-filter-chip select{font-size:11px}.catalog-result-count{font-size:11px}.catalog-product-info strong{font-size:13px}.catalog-product-info small{font-size:10px}.catalog-price b{font-size:14px}.catalog-price small,.catalog-category-pill,.catalog-category-select,.catalog-product-toggle span{font-size:10px}

/* Login: selected concept 3 with very clear type */
.auth-page{background:linear-gradient(135deg,#edf6ef,#dcecdf);padding:clamp(16px,2.2vw,32px)}
.login-shell{width:min(1180px,100%);min-height:min(700px,calc(100vh - 64px));grid-template-columns:minmax(0,1.1fr) minmax(410px,.9fr);border:1px solid #d3e2d8;border-radius:30px;box-shadow:0 34px 90px rgba(20,57,38,.2)}
.login-brand{padding:36px 40px 46px}.login-brand:before{background:linear-gradient(180deg,rgba(8,36,25,.12),rgba(8,36,25,.08) 42%,rgba(5,25,17,.78))}
.login-brand-top{background:rgba(12,48,33,.78);border-color:rgba(255,255,255,.4)}
.login-brand-top strong{font-size:15px}.login-brand-top small{font-size:8px}.login-brand-copy h1{font-size:clamp(40px,4.3vw,60px);line-height:1.15}.login-brand-copy p{font-size:14px;line-height:1.8}
.login-card{padding:clamp(38px,5vw,72px);background:radial-gradient(circle at 100% 0,#edf8f1 0,transparent 36%),#fff}
.login-card-intro small{font-size:11px}.login-card-intro h2{font-size:clamp(32px,3vw,40px);line-height:1.3}.login-card-intro p{font-size:14px}.login-card label{font-size:13px}.login-card input{height:56px;font-size:14px}.login-card .primary.wide{min-height:56px;font-size:14px}.security-note{font-size:10px!important}.auth-language{font-size:11px}

html[dir=rtl] .sidebar{border:0;border-left:1px solid var(--line)}
html[dir=rtl] .main{margin-left:0;margin-right:264px}
html[dir=rtl] .sidebar nav a.active{box-shadow:inset -3px 0 0 var(--green)}

@media(max-width:980px){.branch-filter{min-width:155px}}
@media(max-width:820px){
  .sidebar{width:min(310px,88vw)}
  .main,html[dir=rtl] .main{margin:0}
  .topbar{height:auto;min-height:68px;padding:11px 14px}
  .content{padding:22px 15px 38px}
  .login-shell{grid-template-columns:1fr;max-width:590px}.login-brand{min-height:265px}.login-card{padding:30px}
}
@media(max-width:560px){
  body{font-size:14px}.page-head h1{font-size:25px}.page-head p{font-size:11px}
  .dashboard-kpis .kpi-card,.dashboard-kpis article{min-height:110px;padding:13px}.kpis b{font-size:22px}.kpis small{font-size:10px}
  .panel{padding:15px}.panel h2{font-size:14px}.login-card-intro h2{font-size:30px}.login-card-intro p{font-size:13px}
}
@media(max-width:480px){.login-brand{min-height:230px}.login-card{min-height:calc(100vh - 230px);padding:26px 22px 30px}}

/* Operations login — Theme 3: immersive fresh-market cover with a centered card. */
body.auth-page{
  min-height:100vh;
  padding:0;
  display:grid;
  place-items:center;
  background:#eaf2ec;
  font-family:"Cairo","Inter","Segoe UI",Arial,sans-serif;
}
body.auth-page .login-shell{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
  width:100%;
  min-height:100vh;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:#183a2b;
  box-shadow:none;
}
body.auth-page .login-brand{
  position:absolute;
  z-index:-1;
  inset:0;
  display:block;
  min-height:100%;
  padding:0;
  background:#173728;
}
body.auth-page .login-branch-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.96) contrast(1.02) brightness(.78);
}
body.auth-page .login-brand:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:linear-gradient(90deg,rgba(7,28,19,.2),rgba(7,28,19,.08) 48%,rgba(7,28,19,.24));
}
body.auth-page .login-brand:after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border:0;
  background:linear-gradient(180deg,rgba(5,24,16,.1),rgba(5,24,16,.1) 55%,rgba(5,24,16,.38));
}
body.auth-page .login-brand-top,
body.auth-page .login-brand-copy{display:none}
body.auth-page .login-card{
  position:relative;
  z-index:2;
  width:min(440px,calc(100% - 40px));
  min-height:0;
  padding:44px 42px 34px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 26px 70px rgba(5,29,18,.3);
  backdrop-filter:blur(18px);
}
body.auth-page .login-card-top{position:relative;justify-content:center;margin:0 0 18px;padding-top:2px}
body.auth-page .login-card-logo{display:block;width:170px;height:auto;object-fit:contain}
body.auth-page .login-card-top .auth-language{position:absolute;inset-inline-end:0;top:0}
body.auth-page .auth-language{min-height:38px;padding:7px 14px;font-size:12px}
body.auth-page .login-card-intro{margin:0 0 26px;text-align:center}
body.auth-page .login-card-intro small{display:block;color:#16833f;font-size:12px;font-weight:800;letter-spacing:.08em}
body.auth-page .login-card-intro h2{margin:10px 0 7px;color:#14271c;font-size:36px;font-weight:800;line-height:1.3;letter-spacing:0}
body.auth-page .login-card-intro p{margin:0;color:#617368;font-size:14px;font-weight:500;line-height:1.8}
body.auth-page .login-card label{gap:9px;margin-bottom:15px;color:#263f31;font-size:14px;font-weight:700}
body.auth-page .login-card input{height:57px;border:1px solid #d5e3d9;border-radius:13px;background:#fbfdfb;color:#152d20;font-family:inherit;font-size:15px}
body.auth-page .login-card input:focus{border-color:#198244;box-shadow:0 0 0 4px rgba(25,130,68,.13)}
body.auth-page .login-card .primary.wide{min-height:58px;margin-top:10px;border-radius:13px;background:linear-gradient(105deg,#087932,#159447);font-family:inherit;font-size:16px;font-weight:800;box-shadow:0 14px 28px rgba(8,121,50,.24)}
body.auth-page .security-note{margin-top:18px!important;color:#708177!important;font-size:11px!important;font-weight:600}
body.auth-page .login-card-foot{margin-top:24px;padding-top:20px;border-top:1px solid #e3ebe5;color:#87978d;font-size:9px}
html[dir=rtl] body.auth-page .login-card-intro,
html[dir=rtl] body.auth-page .login-card label{text-align:right}

@media(max-width:680px){
  body.auth-page{padding:0}
  body.auth-page .login-shell{width:100%;min-height:100vh;border:0;border-radius:0}
  body.auth-page .login-card{width:min(430px,calc(100% - 28px));padding:34px 26px 28px;border-radius:22px}
  body.auth-page .login-card-intro h2{font-size:31px}
  body.auth-page .login-card-logo{width:154px}
}