/* Humble UI — professional theme + typography */
:root{
  --hm-ease:cubic-bezier(.22,1,.36,1);
  --hm-ease-out:cubic-bezier(.16,1,.3,1);
  --hm-hover-lift:-2px;
  --hm-quote-bg-start:var(--hm-quote-start,#e8edf5);
  --hm-quote-bg-end:var(--hm-quote-end,#eef1f8);
  --hm-quote-text:var(--hm-quote-color,#1a2e4a);
  --hm-quote-muted:#5b6778;
  --hm-quote-accent:#4f46e5;
  --hm-shadow-card:0 2px 4px rgba(15,23,42,.06),0 8px 22px rgba(15,23,42,.08);
  --hm-shadow-card-hover:0 4px 12px rgba(15,23,42,.1),0 12px 24px rgba(15,23,42,.1);
  --hm-shadow-btn:0 8px 22px rgba(37,99,235,.28);
}

/* —— Global typography —— */
html,body{
  font-family:var(--hm-font-body,"Inter",system-ui,sans-serif)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:14px!important;
  line-height:1.5!important;
  letter-spacing:0!important;
  color:#1a2332!important;
}
h1,h2,h3,h4,h5,h6,
.topbar h2,.page-head h1,.current-page-head h1,
.brand h1,.section-head h3,.card h3,.card h4,
.btn,a.btn,button.btn,.nav a,.nav .logout-btn,
.table thead th,.metric strong{
  font-family:var(--hm-font-display,"Inter",system-ui,sans-serif)!important;
  letter-spacing:-.015em;
}
.brand h1{font-weight:700!important;letter-spacing:-.02em!important;}
.topbar h2{font-weight:700!important;font-size:1.45rem!important;}
.section-head h3,.card h3{font-weight:600!important;color:#152033!important;font-size:1rem!important;}
.muted,.topbar p.muted{font-weight:400!important;color:#5b6778!important;}
label{font-family:var(--hm-font-body,"Inter",system-ui,sans-serif)!important;font-weight:600!important;font-size:13px!important;letter-spacing:0!important;color:#334155!important;}
.btn,a.btn,button.btn{font-weight:600!important;letter-spacing:0!important;}
.nav a,.nav .logout-btn{font-weight:600!important;font-size:13.5px!important;}
.badge,.pill,.summary-pill{font-weight:600!important;letter-spacing:.02em!important;}
.table thead th{font-weight:600!important;text-transform:uppercase;letter-spacing:.05em!important;font-size:10.5px!important;}

/* —— Daily quote bar — compact —— */
.daily-quote-bar{
  margin-bottom:12px;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(105deg,var(--hm-quote-bg-start),var(--hm-quote-bg-end));
  border:1px solid #b8c5d8;
  border-left:3px solid var(--hm-quote-accent);
  box-shadow:0 2px 8px rgba(15,23,42,.06);
  position:relative;
  transition:box-shadow .25s var(--hm-ease),border-color .25s ease;
}
.daily-quote-bar:hover{
  transform:none;
  box-shadow:0 4px 12px rgba(15,23,42,.08);
  border-left-color:#3730a3;
  border-color:#a8b8cc;
}
.daily-quote-bar::before{display:none;}
.daily-quote-inner{display:block;padding:9px 14px;position:relative;z-index:1;}
.daily-quote-badge{display:none!important;}
.daily-quote-primary{
  margin:0;font-size:13.5px;font-weight:600;line-height:1.45;
  color:var(--hm-quote-text);
  font-family:var(--hm-font-body)!important;
}
.daily-quote-urdu{
  margin:3px 0 0;font-size:13px;line-height:1.55;color:#334155;
  font-family:var(--hm-font-urdu)!important;font-weight:400;
  direction:rtl;text-align:right;
}
.daily-quote-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px;}
.daily-quote-ref,.daily-quote-day{margin:0;font-size:10.5px;font-weight:600;color:var(--hm-quote-muted);}
.daily-quote-ref{color:#4f46e5;}

/* —— Page topbar — vivid gradient —— */
.topbar{
  background:linear-gradient(118deg,var(--hm-topbar-start,#1d4ed8) 0%,var(--hm-topbar-mid,#2563eb) 48%,var(--hm-topbar-end,#0e7490) 100%)!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:14px!important;
  box-shadow:0 12px 32px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.2)!important;
  padding:17px 22px!important;
  margin-bottom:14px!important;
  position:relative;overflow:hidden;
  transition:transform .32s var(--hm-ease),box-shadow .32s var(--hm-ease)!important;
}
.topbar::before{
  content:""!important;display:block!important;position:absolute!important;inset:0!important;
  background:linear-gradient(90deg,rgba(255,255,255,.14),transparent 35%,rgba(255,255,255,.06))!important;
  opacity:1!important;pointer-events:none;z-index:0;
}
.topbar::after{
  content:""!important;display:block!important;position:absolute!important;
  bottom:0!important;left:0!important;right:0!important;height:3px!important;
  background:linear-gradient(90deg,#fbbf24,#f59e0b,#38bdf8,#6366f1)!important;
  opacity:.95!important;
}
.topbar:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 10px 24px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
.topbar > div{position:relative;z-index:1;}
.topbar h2{color:var(--hm-topbar-text)!important;text-shadow:0 1px 3px rgba(0,0,0,.12);}
.topbar p.muted{color:rgba(255,255,255,.88)!important;}
.topbar .btn:not(.primary){
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.28)!important;
  color:#fff!important;
  backdrop-filter:blur(6px);
}
.topbar .btn:not(.primary):hover{
  background:rgba(255,255,255,.28)!important;
  transform:translateY(-1px)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.15)!important;
}
.topbar .btn.primary,.topbar .btn.btn-primary{
  background:linear-gradient(135deg,#fbbf24,#f59e0b)!important;
  border-color:rgba(255,255,255,.4)!important;
  color:#78350f!important;
}
.topbar .btn.primary:hover,.topbar .btn.btn-primary:hover{
  background:linear-gradient(135deg,#fcd34d,#fbbf24)!important;
  color:#451a03!important;
  box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
}

/* —— Sidebar —— */
.nav-section{
  margin:16px 0 7px 4px;font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(199,210,254,.55)!important;
  font-family:var(--hm-font-display)!important;
}
.nav a.is-active{
  background:linear-gradient(90deg,rgba(99,102,241,.5),rgba(56,189,248,.2))!important;
  border-color:rgba(199,210,254,.3)!important;
  box-shadow:inset 3px 0 0 #38bdf8,0 4px 16px rgba(0,0,0,.2)!important;
  transform:translateX(2px)!important;
}
.nav a:hover:not(.is-active),.nav .logout-btn:hover{
  background:rgba(129,140,248,.25)!important;
  transform:translateX(2px)!important;
  box-shadow:0 4px 14px rgba(99,102,241,.2)!important;
}
.brand-mark{
  background:linear-gradient(135deg,#6366f1,#2563eb,#0ea5e9)!important;
  box-shadow:0 6px 20px rgba(99,102,241,.4)!important;
  font-family:var(--hm-font-display)!important;font-weight:800!important;
}
.sidebar-user-card{
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(199,210,254,.2)!important;
  border-radius:12px!important;
}
.sidebar-user-card strong{font-family:var(--hm-font-display)!important;font-weight:700!important;}

/* —— Cards —— */
.card,.hero-card,.current-card,.report-card,.machine-card,.machine-board-card,
.compact-queue-item,.list-row,.form-card,.order-card,.builder-panel,.sheet-card{
  transition:transform .32s var(--hm-ease),box-shadow .32s var(--hm-ease),border-color .28s ease!important;
  box-shadow:var(--hm-shadow-card)!important;
}
.card:hover,.hero-card:hover,.current-card:hover,.report-card:hover,.machine-card:hover,
.machine-board-card:hover,.compact-queue-item:hover,.list-row:hover,.form-card:hover,
.order-card:hover,.builder-panel:hover,.sheet-card:hover{
  transform:translateY(var(--hm-hover-lift))!important;
  box-shadow:var(--hm-shadow-card-hover)!important;
  border-color:#93c5fd!important;
}
.card::before,.hero-card::before,.current-card::before,.report-card::before,.machine-card::before,
.machine-board-card::before,.compact-queue-item::before,.list-row::before,.form-card::before,.order-card::before{
  height:4px!important;
  background:linear-gradient(90deg,#6366f1,#3b82f6,#38bdf8,#14b8a6)!important;
  opacity:0!important;
  transition:opacity .3s var(--hm-ease)!important;
}
.card:hover::before,.hero-card:hover::before,.current-card:hover::before,.report-card:hover::before,
.machine-card:hover::before,.machine-board-card:hover::before,.compact-queue-item:hover::before,
.list-row:hover::before,.form-card:hover::before,.order-card:hover::before{opacity:1!important;}
.card::after,.hero-card::after,.current-card::after,.report-card::after,.machine-card::after,
.machine-board-card::after,.form-card::after,.order-card::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(180deg,#6366f1,#3b82f6);
  border-radius:14px 0 0 14px;transition:width .3s var(--hm-ease);
  pointer-events:none;z-index:4;
}
.card:hover::after,.hero-card:hover::after,.current-card:hover::after,.report-card:hover::after,
.machine-card:hover::after,.machine-board-card:hover::after,.form-card:hover::after,.order-card:hover::after{width:4px;}

/* —— Buttons —— */
.btn.primary,.btn.btn-primary,button.btn-primary{
  background:linear-gradient(135deg,#3b82f6,#2563eb)!important;
  border-color:transparent!important;
  color:#fff!important;
}
.btn:hover:not(:disabled),a.btn:hover,button.btn:hover:not(:disabled){
  transform:translateY(-1px)!important;
  box-shadow:0 4px 12px rgba(37,99,235,.2)!important;
}
.btn.primary:hover,.btn.btn-primary:hover,button.btn-primary:hover{
  background:linear-gradient(135deg,#60a5fa,#3b82f6)!important;
  box-shadow:0 8px 18px rgba(37,99,235,.28)!important;
}
.btn:active,.btn.primary:active,.btn.btn-primary:active,button.btn:active{
  transform:translateY(0)!important;
  box-shadow:0 2px 6px rgba(37,99,235,.16)!important;
}
.toggle-chip.active{
  background:linear-gradient(135deg,#eff6ff,#e0f2fe)!important;
  border-color:#3b82f6!important;
  color:#1d4ed8!important;
}
.toggle-chip:active{
  transform:translateY(0)!important;
}

/* —— Tables & queues —— */
.table thead th{
  background:linear-gradient(135deg,#1e40af,#2563eb,#0e7490)!important;
}
.table tbody tr:hover,.current-table tbody tr:hover{
  background:#eff6ff!important;
  box-shadow:inset 5px 0 0 #3b82f6,0 2px 10px rgba(59,130,246,.08)!important;
}
.compact-queue-row:hover,.machine-job-row:hover{
  transform:translateX(2px) translateY(0)!important;
  background:linear-gradient(90deg,#eff6ff,#fff)!important;
  border-color:#93c5fd!important;
  box-shadow:0 8px 24px rgba(59,130,246,.12),inset 4px 0 0 #3b82f6!important;
}
.compact-customer,.compact-item{font-family:var(--hm-font-display)!important;}
.compact-customer{font-weight:700!important;color:#1e40af!important;}
.compact-item{font-weight:600!important;}

/* —— Dashboard metrics —— */
.metric strong{font-size:1.85rem!important;font-weight:700!important;}
.metric span{font-weight:500!important;color:#5b6778!important;}
.metric-active{border-top:3px solid #3b82f6!important;}
.metric-active strong{color:#2563eb!important;background:linear-gradient(135deg,#2563eb,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.metric-completed{border-top:3px solid #10b981!important;}
.metric-completed strong{color:#059669!important;}
.metric-hold{border-top:3px solid #f59e0b!important;}
.metric-hold strong{color:#d97706!important;}
.metric-chat{border-top:3px solid #8b5cf6!important;}
.metric-chat strong{color:#7c3aed!important;}
.metric::after{display:none;}

/* —— Inputs —— */
input,select,textarea,.form-control{
  font-family:var(--hm-font-body)!important;
  font-size:13.5px!important;
}
input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color:#3b82f6!important;
  box-shadow:0 0 0 3px rgba(59,130,246,.18)!important;
}

/* —— Machine cards —— */
.machine-card,.machine-board-card{
  background:linear-gradient(180deg,#fff 0%,#f0f9ff 100%)!important;
  border-color:#bae6fd!important;
}
.ui-machine-name{color:#1e40af!important;font-weight:700!important;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  .card:hover,.metric:hover,.btn:hover,.topbar:hover,.daily-quote-bar:hover{transform:none!important;}
  .metric-active strong{-webkit-text-fill-color:#2563eb;}
}

@media(max-width:900px){
  .daily-quote-urdu{text-align:right;direction:rtl;}
}