/* ============================================================
   Sadan Factory — shared design system (Theme B: cream + wood)
   Tokens + common chrome (sidebar, topbars, clock, buttons, toast).
   Page-specific styles live in each page view via @push('styles').
   Login uses its own dark "wood-night" theme (see auth layout).
   ============================================================ */
:root{
  --wood-dark:#4A2E1A; --wood-mid:#7B4A2A; --wood-light:#A0622A; --wood-warm:#C4854A;
  --cream:#FAF6F0; --cream2:#F2EBE0; --cream3:#E8DDD0; --white:#FFFFFF;
  --text-dark:#2C1A0E; --text-mid:#6B4A30; --text-light:#A08060; --text-faint:#C0A888;
  --border:#DDD0BC; --border-wood:#C4A882;
  --red:#C0392B; --red-bg:#FDEEEC; --red-border:#F5C5BE;
  --green:#2E7D4A; --green-bg:#EAF5EE; --green-border:#B8DEC4;
  --blue:#2563A8; --blue-bg:#EAF0FA; --blue-border:#C8DCEE;
  --amber:#C47A1A; --amber-bg:#FDF4E8; --amber-border:#E8C890;
  --shadow:rgba(74,46,26,.10); --shadow-md:rgba(74,46,26,.16); --shadow-lg:rgba(74,46,26,.24);
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Tajawal',sans-serif;direction:rtl;background:var(--cream);color:var(--text-dark);min-height:100vh;}
body.has-texture::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(92deg,transparent 0,transparent 48px,rgba(160,98,42,.018) 48px,rgba(160,98,42,.018) 50px);}

/* ===== Layout shells ===== */
.app{display:flex;min-height:100vh;position:relative;z-index:1;}
.main{flex:1;overflow:auto;display:flex;flex-direction:column;}
.content{padding:24px 26px;flex:1;}

/* ===== Sidebar (dashboard roles) ===== */
.sidebar{width:210px;flex-shrink:0;background:linear-gradient(180deg,var(--wood-dark),#3A2214);
  display:flex;flex-direction:column;box-shadow:4px 0 24px var(--shadow-lg);position:relative;overflow:hidden;}
.sidebar::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(175deg,transparent 0,transparent 22px,rgba(255,255,255,.014) 22px,rgba(255,255,255,.014) 24px);}
.sidebar::after{content:'';position:absolute;top:0;left:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent 5%,rgba(196,133,74,.45) 40%,rgba(196,133,74,.45) 60%,transparent 95%);}
.sb-brand{padding:20px 16px 16px;border-bottom:1px solid rgba(196,133,74,.18);}
.brand-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.brand-gem{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--wood-warm),var(--wood-mid),var(--wood-dark));
  border:1px solid rgba(196,133,74,.4);display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14);flex-shrink:0;}
.brand-name{font-size:14px;font-weight:900;color:var(--cream);}
.brand-sub{font-size:10px;color:rgba(192,168,136,.6);font-weight:300;}
.user-card{background:rgba(255,255,255,.06);border:1px solid rgba(196,133,74,.18);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:9px;}
.user-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--wood-warm),var(--wood-mid));
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--cream);flex-shrink:0;}
.user-name{font-size:12px;font-weight:700;color:var(--cream);}
.user-role{font-size:10px;color:rgba(192,168,136,.65);}
.sb-nav{padding:10px 0;flex:1;}
.nav-lbl{font-size:9px;font-weight:700;letter-spacing:2px;color:rgba(192,168,136,.35);padding:10px 16px 5px;text-transform:uppercase;}
.nav-item{display:flex;align-items:center;gap:9px;padding:11px 16px;font-size:13px;color:rgba(192,168,136,.6);
  cursor:pointer;border-right:3px solid transparent;transition:all .2s;text-decoration:none;}
.nav-item:hover{color:var(--cream);background:rgba(255,255,255,.05);}
.nav-item.active{color:var(--cream);background:rgba(196,133,74,.14);border-right-color:var(--wood-warm);}
.nav-item svg{width:15px;height:15px;flex-shrink:0;}
.sb-footer{padding:12px 16px;border-top:1px solid rgba(196,133,74,.12);}
.sign-out{font-size:12px;color:rgba(192,100,80,.65);cursor:pointer;display:flex;align-items:center;gap:6px;background:none;border:none;font-family:'Tajawal',sans-serif;}

/* ===== Dashboard topbar ===== */
.topbar{background:var(--white);border-bottom:1px solid var(--border);padding:11px 26px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;box-shadow:0 2px 14px var(--shadow);}
.tb-r{display:flex;gap:8px;align-items:center;}
.tb-l{display:flex;align-items:center;gap:8px;}

/* ===== Station topbar (workshop pages) ===== */
.station-topbar{background:#4A2E1A;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;}
.station-topbar .topbar-title{font-size:17px;font-weight:900;color:#FAF6F0;}
.station-topbar .topbar-sub{font-size:11px;color:rgba(250,246,240,.5);margin-top:1px;}
.shift-pill{background:rgba(46,125,74,.22);border:1.5px solid #2E7D4A;border-radius:8px;padding:5px 13px;font-size:12px;font-weight:700;color:#6BDE9A;display:flex;align-items:center;gap:6px;}
.pulse{width:7px;height:7px;border-radius:50%;background:#2E7D4A;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ===== Live clock ===== */
.clock{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--wood-mid);
  background:var(--cream);border:1px solid var(--border);border-radius:8px;padding:5px 12px;}
.clock-plain{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:rgba(250,246,240,.65);}

/* ===== Buttons ===== */
.btn{padding:8px 16px;border-radius:10px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:7px;
  font-family:'Tajawal',sans-serif;font-weight:700;transition:all .2s;border:none;}
.btn-wood{background:linear-gradient(135deg,var(--wood-warm),var(--wood-mid));color:var(--cream);box-shadow:0 3px 12px rgba(123,74,42,.32);}
.btn-wood:hover{box-shadow:0 5px 18px rgba(123,74,42,.42);}
.btn-outline{background:var(--white);color:var(--text-mid);border:1.5px solid var(--border);}
.btn-outline:hover{background:var(--cream);border-color:var(--border-wood);}
.btn-green{background:linear-gradient(135deg,var(--green),#1A5030);color:var(--white);box-shadow:0 3px 12px rgba(46,125,74,.3);}
.btn-green:hover{box-shadow:0 5px 18px rgba(46,125,74,.42);}

/* ===== Toast ===== */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:500;display:flex;flex-direction:column;gap:8px;}
.toast{color:#fff;padding:13px 22px;border-radius:13px;font-size:14px;font-weight:700;box-shadow:0 4px 20px rgba(0,0,0,.2);animation:toastIn .3s ease;}
.toast.green{background:#2E7D4A;} .toast.red{background:#C0392B;} .toast.amber{background:#C47A1A;}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ===== Shared keyframes ===== */
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:perspective(700px) rotateX(8deg) translateY(16px)}to{opacity:1;transform:perspective(700px) rotateX(2deg) translateY(0)}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.page-footer{text-align:center;font-size:11px;color:var(--text-faint);padding:14px 0 18px;}

/* ============================================================
   Responsive — applies to every page (all load this stylesheet).
   Page grids share these class names; breakpoints collapse them.
   ============================================================ */

/* Tablet / small laptop: halve the 4-col grids, stack 2-col shells.
   !important beats each page's own unconditional grid rule, which is
   pushed via @stack('styles') *after* this file (later = wins otherwise). */
@media (max-width:1100px){
  .kpi-row,.stats-grid,.departments{grid-template-columns:repeat(2,1fr)!important;}
  .bottom-grid,.two-col,.two-panel{grid-template-columns:1fr!important;}
  .carve-grid,.icon-grid{grid-template-columns:repeat(4,1fr)!important;}
  .content{padding:20px 18px;}
}

/* Sidebar becomes a horizontal, scrollable top bar (labels kept) */
@media (max-width:820px){
  .app{flex-direction:column;}
  .sidebar{width:100%;flex-direction:column;overflow:visible;box-shadow:0 4px 16px var(--shadow-lg);}
  .sidebar::after{display:none;}
  .sb-brand{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;}
  .sb-brand .user-card{margin:0;}
  .sb-nav{flex:none;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px 10px;}
  .nav-lbl{display:none;}
  .nav-item{white-space:nowrap;border-right:none;border-bottom:3px solid transparent;border-radius:8px;padding:9px 13px;}
  .nav-item.active{border-right-color:transparent;border-bottom-color:var(--wood-warm);}
  .sb-footer{border-top:none;padding:8px 16px 12px;}
  .topbar{padding:10px 16px;}
}

/* Phone: everything single column */
@media (max-width:560px){
  .kpi-row,.stats-grid,.departments,
  .field-grid,.field-grid.cols3,.pay-body,.payment-phases,
  .door-type-grid,.stages-grid,.detail-dims{grid-template-columns:1fr!important;}
  .carve-grid,.icon-grid{grid-template-columns:repeat(3,1fr)!important;}
  .dept-bars{flex-wrap:wrap;}
  .content{padding:16px 12px;}
  .ps-main{padding:20px 12px;}
  /* let wide tables scroll instead of overflowing the viewport */
  table.dash{display:block;overflow-x:auto;white-space:nowrap;}
  .sb-brand{flex-wrap:wrap;}
}