/* ═══════════════════════════════════════════════════════════════
   Humble Streamline — Elite tier (deeper polish + motion)
   ═══════════════════════════════════════════════════════════════ */

/* —— Compact daily quote (override) —— */
.daily-quote-bar{
  margin-bottom:10px!important;
  transform:none!important;
}
.daily-quote-bar:hover{
  transform:none!important;
}
.daily-quote-inner{padding:8px 13px!important;}
.daily-quote-primary{font-size:13px!important;line-height:1.4!important;}
.daily-quote-urdu{font-size:12.5px!important;margin-top:2px!important;}
.daily-quote-meta{margin-top:3px!important;gap:8px!important;}
/* Ayat bar readability bump */
.daily-quote-primary{font-size:14px!important;line-height:1.5!important;font-weight:600!important;}
.daily-quote-urdu{font-size:13.5px!important;line-height:1.6!important;}
.daily-quote-ref,.daily-quote-day{font-size:11px!important;}

/* —— Slightly darker page tone —— */
html,body,body.hm-app{
  color:#1a2332!important;
}

/* —— Button click ripple (stable, subtle) —— */
.btn,button,.toggle-chip{position:relative!important;overflow:hidden!important;}
.hm-ripple{
  position:absolute!important;
  border-radius:50%!important;
  transform:scale(0)!important;
  animation:hmRipple .35s ease-out forwards!important;
  pointer-events:none!important;
  opacity:.32!important;
  z-index:2!important;
}
@keyframes hmRipple{
  to{transform:scale(1);opacity:0;}
}

body.hm-app::before,
body.hm-app::after{
  content:"";
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(80px);
  opacity:.55;
  animation:hmOrbDrift 22s ease-in-out infinite alternate;
}
body.hm-app::before{
  width:520px;height:520px;
  top:-120px;right:-80px;
  background:radial-gradient(circle,rgba(99,102,241,.22),transparent 70%);
  opacity:.42;
}
body.hm-app::after{
  width:440px;height:440px;
  bottom:-100px;left:-60px;
  background:radial-gradient(circle,rgba(14,165,233,.18),transparent 70%);
  opacity:.42;
}
.shell{position:relative;z-index:1;}

@keyframes hmOrbDrift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(30px,24px) scale(1.08);}
}

/* —— Glass cards —— */
.card,.metric,.form-card,.machine-card,.builder-panel,.list-row,.compact-queue-item{
  background:rgba(248,250,252,.94)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  border:1px solid rgba(200,211,224,.9)!important;
}
.card{padding:14px!important;margin-bottom:12px!important;}
.metric{
  min-height:unset!important;
  padding:12px 14px!important;
  justify-content:flex-start!important;
}
.dashboard-queue-list .compact-queue-row{min-height:unset!important;}

/* —— Sidebar nav icons —— */
.nav a,.nav .logout-btn{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
}
.nav-ico{
  width:20px;height:20px;border-radius:7px;
  display:inline-grid;place-items:center;
  font-size:11px;font-weight:800;
  background:rgba(255,255,255,.1)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#c7d2fe!important;
  flex-shrink:0;
  transition:transform .35s var(--hm-spring, cubic-bezier(.34,1.56,.64,1)),background .28s ease,box-shadow .28s ease!important;
}
.nav a:hover .nav-ico,.nav a.is-active .nav-ico{
  transform:scale(1.12) rotate(-3deg)!important;
  background:rgba(255,255,255,.18)!important;
  box-shadow:0 4px 14px rgba(99,102,241,.35)!important;
  color:#fff!important;
}
.nav a.is-active .nav-ico{
  background:linear-gradient(135deg,rgba(56,189,248,.35),rgba(99,102,241,.35))!important;
  border-color:rgba(199,210,254,.35)!important;
}
.nav a::after{
  content:""!important;
  width:7px!important;height:7px!important;
  border-radius:50%!important;
  margin-left:auto!important;
  background:rgba(199,210,254,.25)!important;
  box-shadow:none!important;
  transition:transform .32s var(--hm-spring),background .25s ease,box-shadow .25s ease!important;
  flex-shrink:0!important;
  position:static!important;
}
.nav a:hover::after,.nav a.is-active::after{
  background:#38bdf8!important;
  box-shadow:0 0 14px rgba(56,189,248,.75)!important;
  transform:scale(1.35)!important;
}
.nav .logout-btn::after{display:none!important;}
.nav .logout-btn:hover{
  background:rgba(244,63,94,.22)!important;
  border-color:rgba(251,113,133,.35)!important;
}

/* —— Topbar shimmer —— */
.topbar::before{
  animation:hmTopbarShine 6s ease-in-out infinite!important;
}
@keyframes hmTopbarShine{
  0%,100%{opacity:1;transform:translateX(0);}
  50%{opacity:.85;transform:translateX(4px);}
}
.topbar::after{
  background-size:200% 100%!important;
  animation:hmRainbowSlide 8s linear infinite!important;
}
@keyframes hmRainbowSlide{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

/* —— Section headers —— */
.section-head{
  padding-bottom:12px!important;
  margin-bottom:16px!important;
  border-bottom:1px solid transparent!important;
  background:linear-gradient(#e8eef6,#e8eef6) bottom/100% 1px no-repeat!important;
  position:relative!important;
}
.section-head::after{
  content:""!important;
  position:absolute!important;bottom:-1px!important;left:0!important;
  width:72px!important;height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#6366f1,#38bdf8,#14b8a6)!important;
  transition:width .4s var(--hm-ease, cubic-bezier(.22,1,.36,1))!important;
}
.card:hover .section-head::after,.section-head:hover::after{width:140px!important;}

/* —— Dashboard metrics — watermark orbs —— */
.metric{
  overflow:hidden!important;
}
.metric::before{
  z-index:6!important;
}
.metric strong{position:relative;z-index:2!important;}
.metric span{position:relative;z-index:2!important;}
.metric-active{
  background-image:
    radial-gradient(circle at calc(100% - 24px) 24px,rgba(59,130,246,.16) 0 28px,transparent 29px),
    linear-gradient(165deg,rgba(255,255,255,.95),rgba(239,246,255,.92))!important;
}
.metric-completed{
  background-image:
    radial-gradient(circle at calc(100% - 24px) 24px,rgba(16,185,129,.16) 0 28px,transparent 29px),
    linear-gradient(165deg,rgba(255,255,255,.95),rgba(236,253,245,.92))!important;
}
.metric-hold{
  background-image:
    radial-gradient(circle at calc(100% - 24px) 24px,rgba(245,158,11,.16) 0 28px,transparent 29px),
    linear-gradient(165deg,rgba(255,255,255,.95),rgba(255,251,235,.92))!important;
}
.metric-chat{
  background-image:
    radial-gradient(circle at calc(100% - 24px) 24px,rgba(139,92,246,.16) 0 28px,transparent 29px),
    linear-gradient(165deg,rgba(255,255,255,.95),rgba(245,243,255,.92))!important;
}
.metric:hover{
  transform:translateY(-2px) scale(1.002)!important;
}

/* —— 3D tilt (JS adds .hm-tilt) —— */
.hm-tilt{
  transform-style:preserve-3d!important;
  will-change:transform;
}
.hm-tilt-inner{transform:translateZ(20px);}

/* —— Magnetic button glow —— */
.btn.primary,.btn.btn-primary,.topbar .btn.primary{
  isolation:isolate!important;
}
.btn.primary::before,.btn.btn-primary::before{
  content:""!important;
  position:absolute!important;inset:-2px!important;
  border-radius:inherit!important;
  background:linear-gradient(135deg,#6366f1,#2563eb,#0ea5e9)!important;
  z-index:-1!important;
  opacity:0!important;
  filter:blur(10px)!important;
  transition:opacity .35s ease!important;
}
.btn.primary:hover::before,.btn.btn-primary:hover::before{opacity:.65!important;}

/* —— Search boxes —— */
.search-box input,.search-box select{
  background:rgba(255,255,255,.92)!important;
  border:1px solid #cbd5e1!important;
  box-shadow:0 2px 8px rgba(99,102,241,.04)!important;
  transition:border-color .25s ease,box-shadow .3s var(--hm-ease),transform .25s var(--hm-ease)!important;
}
.search-box input:hover,.search-box select:hover{
  border-color:#93c5fd!important;
  transform:translateY(-1px)!important;
}
.search-box input:focus,.search-box select:focus{
  border-color:#6366f1!important;
  box-shadow:0 0 0 4px rgba(99,102,241,.12),0 8px 20px rgba(99,102,241,.1)!important;
}

/* —— Stage preview cards —— */
.stage-card{
  background:linear-gradient(135deg,#fff,#f8fafc)!important;
  transition:transform .32s var(--hm-ease),box-shadow .32s var(--hm-ease),border-color .28s ease!important;
}
.stage-card:hover{
  transform:translateX(2px) translateY(-1px)!important;
  border-color:#93c5fd!important;
  box-shadow:0 6px 16px rgba(99,102,241,.1)!important;
}
.stage-number{
  background:linear-gradient(135deg,#4338ca,#2563eb)!important;
  box-shadow:0 4px 14px rgba(37,99,235,.35)!important;
  transition:transform .35s var(--hm-spring)!important;
}
.stage-card:hover .stage-number{transform:scale(1.03) rotate(-2deg)!important;}

/* —— Builder / recipe sheets —— */
.sheet-card,.item-card{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.9))!important;
  border:1px solid #dbeafe!important;
}
.sheet-head h5,.item-head h4{
  font-family:var(--hm-font-display)!important;
  font-weight:700!important;
  color:#1e293b!important;
}
.builder-panel .builder-head{
  background:linear-gradient(90deg,#eff6ff,#fff)!important;
  border-bottom:1px solid #dbeafe!important;
}

/* —— Overdue / due-soon pulse —— */
.compact-due.is-overdue strong{
  animation:hmOverduePulse 2.4s ease-in-out infinite!important;
}
.compact-due.is-soon strong{color:#b45309!important;}
@keyframes hmOverduePulse{
  0%,100%{color:#dc2626;text-shadow:none;}
  50%{color:#ef4444;text-shadow:0 0 12px rgba(239,68,68,.35);}
}

/* —— Empty states —— */
.empty-state{
  background:linear-gradient(180deg,#f8fafc,#fff)!important;
  border:2px dashed #cbd5e1!important;
  text-align:center!important;
  color:#64748b!important;
  padding:32px 24px!important;
  transition:border-color .3s ease,background .3s ease,transform .35s var(--hm-ease)!important;
}
.empty-state:hover{
  border-color:#93c5fd!important;
  background:linear-gradient(180deg,#eff6ff,#fff)!important;
  transform:translateY(-1px)!important;
}

/* —— Reports page (inline v4 classes) —— */
.reports-v4-hero{
  background:rgba(255,255,255,.9)!important;
  backdrop-filter:blur(14px)!important;
  border:1px solid #dbeafe!important;
  border-radius:22px!important;
  box-shadow:var(--hm-shadow-md, 0 16px 40px rgba(99,102,241,.1))!important;
  transition:transform .38s var(--hm-ease),box-shadow .38s var(--hm-ease)!important;
}
.reports-v4-hero:hover{
  transform:translateY(-5px)!important;
  box-shadow:var(--hm-shadow-lg)!important;
}
.reports-v4-card{
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(10px)!important;
  min-height:unset!important;
  padding:14px!important;
  transition:transform .35s var(--hm-ease),box-shadow .35s var(--hm-ease)!important;
}
.reports-v4-card:hover{
  transform:translateY(-2px) scale(1.003)!important;
  box-shadow:0 10px 24px rgba(99,102,241,.12)!important;
}
.reports-v4-card .icon{
  transition:transform .4s var(--hm-spring)!important;
}
.reports-v4-card:hover .icon{transform:scale(1.03) rotate(-1deg)!important;}
.reports-v4-panel{
  background:rgba(255,255,255,.9)!important;
  backdrop-filter:blur(10px)!important;
  transition:transform .35s var(--hm-ease),box-shadow .35s var(--hm-ease)!important;
}
.reports-v4-panel:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.1)!important;
}
.reports-v4-table th{
  background:linear-gradient(135deg,#312e81,#3730a3,#2563eb)!important;
}

/* —— Custom scrollbars —— */
.sidebar,.main,.chat-contact-list,.chat-thread-body{
  scrollbar-width:thin;
  scrollbar-color:rgba(129,140,248,.45) transparent;
}
.sidebar::-webkit-scrollbar,.main::-webkit-scrollbar{width:7px;height:7px;}
.sidebar::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(129,140,248,.5),rgba(56,189,248,.4));
  border-radius:999px;
}
.main::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(99,102,241,.35),rgba(14,165,233,.3));
  border-radius:999px;
}

/* —— Flash messages upgrade —— */
.flash.success{border-left:4px solid #10b981!important;}
.flash.error{border-left:4px solid #ef4444!important;}
.flash.warning{border-left:4px solid #f59e0b!important;}
.flash.info{border-left:4px solid #0ea5e9!important;}

/* —— Hero card —— */
.hero{
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(239,246,255,.88))!important;
  border:1px solid #dbeafe!important;
}

/* —— Progress bars —— */
.progress-line{
  background:#e2e8f0!important;
  height:9px!important;
  box-shadow:inset 0 1px 3px rgba(15,23,42,.06)!important;
}
.progress-line span{
  background:linear-gradient(90deg,#6366f1,#3b82f6,#38bdf8,#14b8a6)!important;
  background-size:200% 100%!important;
  animation:hmProgressFlow 3s linear infinite!important;
}
@keyframes hmProgressFlow{
  0%{background-position:0% 50%;}
  100%{background-position:200% 50%;}
}

/* —— Control tiles (daily control) —— */
.control-tile{
  transition:transform .35s var(--hm-ease),box-shadow .35s var(--hm-ease)!important;
}
.control-tile:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.1)!important;
}

/* —— Card spotlight layer (must not affect layout) —— */
.card,
.metric,
.machine-card,
.compact-queue-item,
.report-action,
.reports-v4-card,
.reports-v4-panel,
.stage-card{
  position:relative!important;
  overflow:hidden!important;
}
.hm-spotlight-layer{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:280px!important;
  height:280px!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
  opacity:0!important;
  z-index:0!important;
  transition:opacity .22s ease!important;
  background:radial-gradient(circle,rgba(99,102,241,.18),rgba(56,189,248,.06) 45%,transparent 68%)!important;
}
.card:hover .hm-spotlight-layer,
.metric:hover .hm-spotlight-layer,
.machine-card:hover .hm-spotlight-layer,
.compact-queue-item:hover .hm-spotlight-layer,
.reports-v4-card:hover .hm-spotlight-layer,
.reports-v4-panel:hover .hm-spotlight-layer,
.stage-card:hover .hm-spotlight-layer{
  opacity:.52!important;
}

/* —— Professional sizing pass (reduce mixed scales) —— */
:root{
  --hm-pro-fs-body:14px;
  --hm-pro-fs-muted:13px;
  --hm-pro-fs-heading:17px;
  --hm-premium-start:#26235f;
  --hm-premium-mid:#1f3f8d;
  --hm-premium-end:#185f6b;
  --hm-premium-text:#f8fbff;
}

body,.main{font-size:var(--hm-pro-fs-body)!important;}
.muted,.muted-note,.topbar p.muted{font-size:var(--hm-pro-fs-muted)!important;line-height:1.45!important;}
.section-head h3,.card h3{font-size:var(--hm-pro-fs-heading)!important;font-weight:600!important;}
.nav-section{font-size:10.5px!important;letter-spacing:.12em!important;}
.table th{font-size:11px!important;}
.table td{font-size:13.5px!important;}

/* KPI cards should fit content, not look like empty boxes */
.card-grid{align-items:start!important;gap:12px!important;}
.card-grid .card.metric{
  min-height:88px!important;
  height:auto!important;
  display:block!important;
  padding:12px 14px!important;
}
.card-grid .metric span{
  margin-bottom:6px!important;
  font-size:12px!important;
}
.card-grid .metric strong{
  font-size:1.55rem!important;
  line-height:1.1!important;
}

/* Queue card text scale balance */
.compact-item,.compact-item-link{
  font-size:18px!important;
  line-height:1.2!important;
  font-weight:700!important;
}
.compact-customer{
  font-size:12px!important;
  font-weight:700!important;
}
.compact-queue-row{padding:10px 12px!important;}
.compact-stage-badge{font-size:12px!important;padding:6px 9px!important;}

/* Button motion simplified for professional feel */
.btn::after{display:none!important;}
.btn,a.btn,button.btn{
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease!important;
}
.btn:hover:not(:disabled),a.btn:hover,button.btn:hover:not(:disabled){
  transform:translateY(-1px)!important;
  box-shadow:0 4px 10px rgba(37,99,235,.16)!important;
}
.btn:active,.btn.primary:active,.btn.btn-primary:active,button.btn:active{
  transform:translateY(0)!important;
  box-shadow:0 2px 4px rgba(15,23,42,.12)!important;
}
.hm-ripple{opacity:.18!important;animation-duration:.28s!important;}

/* Main app buttons: darken base color on hover (sidebar untouched) */
.main .btn,
.main a.btn,
.main button.btn{
  transition:filter .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease!important;
}
.main .btn:hover:not(:disabled),
.main a.btn:hover,
.main button.btn:hover:not(:disabled){
  filter:brightness(.88)!important;
}

/* Calm nav micro-animations */
.nav a:hover .nav-ico,.nav a.is-active .nav-ico{
  transform:scale(1.03)!important;
}
.nav a:hover::after,.nav a.is-active::after{
  transform:scale(1.1)!important;
}

@media (prefers-reduced-motion:reduce){
  body.hm-app::before,body.hm-app::after,.topbar::before,.topbar::after,.progress-line span,.compact-due.is-overdue strong{
    animation:none!important;
  }
}

@media(max-width:1024px){
  body.hm-app::before,body.hm-app::after{display:none;}
  .search-box.search-box-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:720px){
  .search-box.search-box-grid{
    grid-template-columns:1fr!important;
  }
  .search-box-actions{
    width:100%!important;
  }
  .search-box-actions .btn{
    width:100%!important;
  }
}

/* ==========================================================
   Compact professional layout pass (tight spacing + right-size cards)
   ========================================================== */
main.main{
  padding:10px 12px!important;
}
.topbar{
  margin-bottom:10px!important;
  padding:12px 14px!important;
  background:linear-gradient(120deg,var(--hm-premium-start) 0%,var(--hm-premium-mid) 55%,var(--hm-premium-end) 100%)!important;
  border-color:rgba(255,255,255,.16)!important;
}
.topbar h2{
  font-size:1.2rem!important;
}

.card,
.hero-card,
.current-card,
.report-card,
.machine-card,
.machine-board-card,
.form-card,
.builder-panel,
.sheet-card,
.item-card,
.reports-v4-panel{
  padding:10px 12px!important;
  margin-bottom:10px!important;
  border-radius:12px!important;
}

.card-grid{
  gap:8px!important;
  margin-bottom:10px!important;
  align-items:start!important;
}
.card-grid .card.metric{
  min-height:unset!important;
  height:auto!important;
  padding:8px 10px!important;
}
.metric{
  min-height:unset!important;
  display:block!important;
  justify-content:flex-start!important;
}
.metric span{
  font-size:11px!important;
  margin-bottom:3px!important;
  line-height:1.25!important;
}
.metric strong{
  font-size:1.22rem!important;
  line-height:1.1!important;
  font-weight:700!important;
}

/* KPI cards: remove oversized empty look entirely */
.card-grid{
  grid-auto-rows:minmax(0,auto)!important;
}
.card-grid .metric,
.card-grid .card.metric{
  min-height:66px!important;
  max-height:86px!important;
  padding:8px 10px!important;
  border-radius:10px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  gap:2px!important;
  background:#f8fafc!important;
  background-image:none!important;
}
.card-grid .metric::before,
.card-grid .metric::after{
  display:none!important;
}
.card-grid .metric span{
  margin:0!important;
  font-size:11px!important;
  line-height:1.2!important;
}
.card-grid .metric strong{
  margin:0!important;
  font-size:1.3rem!important;
  line-height:1.08!important;
}
/* KPI font size bump (still compact layout) */
.card-grid .metric span{
  font-size:12.5px!important;
  line-height:1.25!important;
  font-weight:600!important;
}
.card-grid .metric strong{
  font-size:1.55rem!important;
  line-height:1.1!important;
  font-weight:700!important;
}

.section-head{
  margin-bottom:8px!important;
  padding-bottom:7px!important;
}
.section-head h3{
  font-size:15px!important;
}
.muted,.muted-note{
  font-size:12px!important;
  line-height:1.35!important;
}

.two-col,.three-col,.recipe-builder{
  gap:10px!important;
}

.compact-queue-row,
.compact-queue-summary{
  padding:8px 10px!important;
  gap:10px!important;
}
.compact-item,.compact-item-link{
  font-size:16px!important;
  line-height:1.18!important;
}
.compact-subline{
  margin-top:4px!important;
  gap:6px!important;
  font-size:11px!important;
}
.compact-stage-badge{
  padding:5px 8px!important;
  font-size:11px!important;
}

.list-row{
  padding:9px 10px!important;
}
.table th,.table td{
  padding:9px 10px!important;
}

.search-box{
  gap:7px!important;
}
.search-box input,.search-box select{
  padding:8px 10px!important;
}
.search-box.search-box-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(220px,2fr) repeat(5,minmax(140px,1fr)) auto!important;
  gap:10px!important;
  align-items:end!important;
  background:rgba(255,255,255,.75)!important;
  border:1px solid #dbe7f3!important;
  border-radius:14px!important;
  padding:10px!important;
}
.search-box-field{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
}
.search-box-field label{
  font-size:11px!important;
  font-weight:700!important;
  color:#5b6778!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
.search-box-actions{
  display:flex!important;
  gap:8px!important;
  align-items:end!important;
  flex-wrap:wrap!important;
}

/* Dashboard row 2: force compact height, no wasted blank area */
.dashboard-bottom-grid{
  align-items:start!important;
}
.dashboard-recent-card,
.dashboard-workload-card{
  height:auto!important;
  min-height:unset!important;
  align-self:start!important;
}
.dashboard-recent-card .table{
  margin-bottom:0!important;
}
.dashboard-workload-list{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  margin:0!important;
}
.dashboard-workload-list .list-row{
  min-height:44px!important;
  max-height:none!important;
  padding:8px 10px!important;
  border-radius:10px!important;
  align-items:center!important;
}
.dashboard-workload-list .list-row > div:first-child strong{
  font-size:14px!important;
  font-weight:600!important;
}

/* Prevent grid-induced stretching across app sections */
.two-col,
.three-col,
.machine-grid,
.control-grid,
.dashboard-top-grid,
.dashboard-bottom-grid,
.daily-control-grid{
  align-items:start!important;
}
.two-col > .card,
.three-col > .card,
.machine-grid > .machine-card,
.control-grid > .control-tile,
.dashboard-top-grid > .card,
.dashboard-bottom-grid > .card,
.daily-control-grid > .card{
  align-self:start!important;
  height:auto!important;
  min-height:unset!important;
}

/* Dashboard specific compactness */
.dashboard-queue-card,
.dashboard-overdue-card,
.dashboard-recent-card,
.dashboard-workload-card{
  padding-bottom:8px!important;
}
.dashboard-overdue-card .list,
.dashboard-workload-card .list{
  gap:6px!important;
  margin:0!important;
}
.dashboard-overdue-card .list-row,
.dashboard-workload-card .list-row{
  padding:7px 9px!important;
  min-height:40px!important;
}
.dashboard-recent-card .table{
  margin:0!important;
}

/* Empty states should not create large blank areas */
.empty-state{
  padding:12px!important;
  min-height:unset!important;
}
.dashboard-overdue-card .muted,
.dashboard-workload-card .muted,
.dashboard-recent-card .muted{
  margin:0!important;
}

/* Machine cards: compact rows, no stretched blanks */
.machine-grid{
  gap:10px!important;
}
.machine-card{
  padding:10px 11px!important;
}
.machine-card .machine-job-row{
  padding:8px 0!important;
}

/* Daily control cards and tiles tighter */
.daily-control-grid .card{
  padding:10px 11px!important;
}
.control-grid{
  gap:8px!important;
}
.control-tile{
  padding:9px 10px!important;
}
.control-tile strong{
  font-size:22px!important;
  margin-top:4px!important;
}

/* Daily control summary must never reserve extra vertical area */
.daily-control-summary-card{
  display:block!important;
  height:auto!important;
  min-height:unset!important;
  max-height:none!important;
  align-self:start!important;
  overflow:visible!important;
}
.daily-control-summary-card .control-grid{
  margin-top:8px!important;
  display:grid!important;
  grid-auto-flow:row!important;
  grid-auto-rows:max-content!important;
  align-content:start!important;
  align-items:start!important;
}
.daily-control-summary-card .control-tile{
  min-height:unset!important;
  height:auto!important;
}

/* Dashboard: ensure no card stretches to row height */
.dashboard-top-grid > .dashboard-queue-card,
.dashboard-top-grid > .dashboard-overdue-card,
.dashboard-bottom-grid > .dashboard-recent-card,
.dashboard-bottom-grid > .dashboard-workload-card{
  display:block!important;
  height:auto!important;
  min-height:unset!important;
  max-height:none!important;
}

/* Table sections should end exactly at last row */
.dashboard-recent-card .table,
.daily-control-grid .table{
  border-collapse:collapse!important;
  margin:0!important;
}

/* Machine cards: never stretch with column */
.machine-grid > .machine-card{
  display:block!important;
  height:auto!important;
  min-height:unset!important;
  max-height:none!important;
}

/* ==========================================================
   Unified premium header palette + readable table headings
   ========================================================== */
.topbar h2,
.topbar p.muted{
  color:var(--hm-premium-text)!important;
}

.table thead th,
.current-table thead th,
.reports-v4-table th{
  background:linear-gradient(120deg,var(--hm-premium-start) 0%,var(--hm-premium-mid) 55%,var(--hm-premium-end) 100%)!important;
  color:var(--hm-premium-text)!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
  text-shadow:0 1px 0 rgba(0,0,0,.18)!important;
  border-bottom:1px solid rgba(255,255,255,.2)!important;
}

.table thead th a,
.current-table thead th a,
.reports-v4-table th a{
  color:var(--hm-premium-text)!important;
}

/* ==========================================================
   Mobile navigation + phone-fit layout
   ========================================================== */
.topbar-title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.mobile-nav-toggle{
  display:none;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.12);
  color:#fff;
  border-radius:12px;
  width:40px;
  height:40px;
  font-size:20px;
  line-height:1;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}
.mobile-nav-overlay{
  display:none;
}
body.mobile-nav-open{
  overflow:hidden!important;
}

@media (max-width:1024px){
  .shell{
    grid-template-columns:1fr!important;
    min-height:100dvh!important;
  }
  .mobile-nav-toggle{
    display:inline-flex!important;
  }
  .sidebar{
    display:block!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    width:min(84vw,320px)!important;
    height:100dvh!important;
    z-index:70!important;
    transform:translateX(-105%)!important;
    transition:transform .24s ease!important;
    box-shadow:0 16px 32px rgba(2,6,23,.45)!important;
  }
  body.mobile-nav-open .sidebar{
    transform:translateX(0)!important;
  }
  .mobile-nav-overlay{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:60!important;
    background:rgba(2,6,23,.48)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .24s ease!important;
  }
  body.mobile-nav-open .mobile-nav-overlay{
    opacity:1!important;
    pointer-events:auto!important;
  }
  .main{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }
  .topbar{
    flex-direction:row!important;
    align-items:center!important;
    position:relative!important;
    top:auto!important;
  }
  .topbar-title-wrap{
    min-width:0!important;
  }
  .topbar-title-wrap > div{
    min-width:0!important;
  }
  .topbar h2{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .actions-inline{
    width:auto!important;
    justify-content:flex-end!important;
  }
}

@media (max-width:720px){
  .topbar{
    flex-wrap:wrap!important;
    gap:10px!important;
  }
  .actions-inline{
    width:100%!important;
    justify-content:flex-start!important;
  }
}