/* Minimal Mobile — single font, 8pt grid, whitespace, one primary action */

/* Base */
*{ -webkit-font-smoothing: antialiased; }
body{ background: var(--cw-canvas); color: var(--cw-text); font-family: var(--cw-font); font-size: var(--cw-text-md); line-height: 1.5; font-weight: var(--cw-weight-regular); }
h1,h2,h3,h4{ font-family: var(--cw-font); font-weight: var(--cw-weight-semibold); color: var(--cw-text-strong); letter-spacing: -0.01em; line-height: 1.2; }
h1{ font-size: var(--cw-text-h1); } h2{ font-size: var(--cw-text-h2); } h3{ font-size: var(--cw-text-md); font-weight: var(--cw-weight-semibold); }
p{ margin-bottom: var(--cw-space-md); }
.eyebrow{ font-size: var(--cw-text-caption); font-weight: var(--cw-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cw-muted); }

/* Shell — no blueprint grid */
.admin-shell{ display:flex; min-height:100vh; }
.admin-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.admin-content{ flex:1; padding: var(--cw-space-lg) var(--cw-space-md); background: var(--cw-canvas); max-width:100%; }
@media(min-width:768px){ .admin-content{ padding: var(--cw-space-lg) var(--cw-space-lg); } }
.admin-footer{ padding: var(--cw-space-sm) var(--cw-space-md); font-size: var(--cw-text-caption); color: var(--cw-faint); border-top: 1px solid var(--cw-border); }

/* Sidebar — minimal, neutral, 44px targets */
.admin-sidebar{ width: 240px; flex-shrink:0; background: var(--cw-surface); border-right: 1px solid var(--cw-border); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:1045; }
.sidebar-brand{ display:flex; align-items:center; justify-content:space-between; padding: var(--cw-space-md); border-bottom:1px solid var(--cw-border); }
.sidebar-nav{ list-style:none; padding: var(--cw-space-sm) 0; margin:0; flex:1; }
.sidebar-section{ font-size: var(--cw-text-caption); font-weight: var(--cw-weight-semibold); letter-spacing:0.08em; text-transform:uppercase; color: var(--cw-muted); padding: var(--cw-space-md) var(--cw-space-md) var(--cw-space-xs); }
.sidebar-link{ display:flex; align-items:center; gap: var(--cw-space-sm); padding: 0 var(--cw-space-md); min-height: var(--cw-touch-target-min); color: var(--cw-text); text-decoration:none; font-size: 0.9375rem; font-weight: var(--cw-weight-regular); border-radius: var(--cw-radius-sm); margin: 2px var(--cw-space-sm); transition: background var(--cw-dur-fast) var(--cw-ease), color var(--cw-dur-fast) var(--cw-ease); }
.sidebar-link i{ font-size: 1.15rem; color: var(--cw-muted); }
.sidebar-link:hover{ background: var(--cw-surface-2); color: var(--cw-text-strong); }
.sidebar-link.active{ background: var(--cw-gray-900); color:#fff; font-weight: var(--cw-weight-semibold); }
.sidebar-link.active i{ color:#fff; }
.sidebar-user-footer{ border-top:1px solid var(--cw-border); padding: var(--cw-space-md); background: var(--cw-surface); }

/* Topbar — minimal */
.admin-topbar{ background: var(--cw-surface); border-bottom: 1px solid var(--cw-border); padding: 0 var(--cw-space-md); min-height: 56px; display:flex; align-items:center; justify-content:space-between; gap: var(--cw-space-md); position:sticky; top:0; z-index:1020; }
.topbar-title{ margin:0; font-size: var(--cw-text-h2); }
.topbar-user{ display:flex; align-items:center; gap: var(--cw-space-sm); }
.topbar-clock{ font-size: var(--cw-text-caption); color: var(--cw-muted); padding-right: var(--cw-space-md); border-right:1px solid var(--cw-border); }
.user-chip{ display:flex; align-items:center; gap: var(--cw-space-xs); font-size: 0.875rem; font-weight: var(--cw-weight-semibold); color: var(--cw-text-strong); }
.role-chip{ font-size: 0.6875rem; font-weight: var(--cw-weight-semibold); letter-spacing:0.06em; text-transform:uppercase; color: var(--cw-primary); background: var(--cw-accent-tint); border:1px solid var(--cw-border); padding:2px 8px; border-radius: var(--cw-radius-sm); }

/* Buttons — 48-56 CTA, 44 touch, one primary per screen */
.btn{ border-radius: var(--cw-radius-md); font-weight: var(--cw-weight-semibold); font-size: 0.9375rem; line-height:1; min-height: var(--cw-cta-height); padding: 0 var(--cw-space-lg); touch-action: manipulation; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; white-space:nowrap; }
.btn:active{ transform: scale(0.98); }
.btn-sm{ min-height: 36px; padding:0 var(--cw-space-md); font-size: 0.875rem; }
.btn-xs{ min-height: 28px; padding:0 var(--cw-space-sm); font-size: 0.75rem; }
.btn-link{ min-height: auto; padding:0; font-size: inherit; font-weight: var(--cw-weight-semibold); text-decoration:none; display:inline-flex; align-items:center; gap: var(--cw-space-xs); }
.btn-link:active{ transform:none; }
.btn-touch{ min-height: var(--cw-touch-target-min); min-width: var(--cw-touch-target-min); }
.btn-primary{ --bs-btn-color:#fff; --bs-btn-bg:var(--cw-primary); --bs-btn-border-color:var(--cw-primary); --bs-btn-hover-bg:var(--cw-primary-hover); --bs-btn-active-bg:var(--cw-primary-active); }
.btn-outline-secondary{ --bs-btn-color:var(--cw-text); --bs-btn-border-color:var(--cw-border-strong); --bs-btn-hover-bg:var(--cw-surface-2); }
.btn-outline-danger{ --bs-btn-color:var(--cw-danger); --bs-btn-border-color:#E2A8A8; }

/* Cards — whitespace, 16px padding, md radius, no heavy borders */
.card{ border:1px solid var(--cw-border); border-radius: var(--cw-radius-md); background: var(--cw-surface); box-shadow: var(--cw-shadow-sm); }
.card-header{ background: transparent; border-bottom:1px solid var(--cw-border); font-size: var(--cw-text-caption); font-weight: var(--cw-weight-semibold); letter-spacing:0.06em; text-transform:uppercase; color: var(--cw-muted); padding: var(--cw-space-sm) var(--cw-space-md); }

/* Tables — minimal, no strong header bg */
.table{ margin-bottom:0; }
.table thead th{ font-size: var(--cw-text-caption); font-weight: var(--cw-weight-semibold); letter-spacing:0.06em; text-transform:uppercase; color: var(--cw-muted); background: var(--cw-surface); border-bottom:1px solid var(--cw-border); padding: var(--cw-space-sm) var(--cw-space-md); white-space:nowrap; }
.table tbody td{ border-bottom:1px solid var(--cw-border); padding: var(--cw-space-sm) var(--cw-space-md); vertical-align:middle; font-size: 0.875rem; }
.table-hover tbody tr:hover{ background: var(--cw-gray-50); }

/* Status badges — dot + label, still, but softer */
.status-badge{ display:inline-flex; align-items:center; gap:6px; font-size: 0.6875rem; font-weight: var(--cw-weight-semibold); letter-spacing:0.04em; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid transparent; }
.status-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-active,.status-ok{ color:var(--cw-success); background:var(--cw-success-tint); }
.status-pending,.status-in_progress,.status-scheduled{ color:var(--cw-warning); background:var(--cw-warning-tint); }
.status-danger,.status-rejected{ color:var(--cw-danger); background:var(--cw-danger-tint); }
.status-muted,.status-draft{ color:var(--cw-muted); background:var(--cw-surface-2); }
.status-info,.status-assigned{ color:var(--cw-info); background:var(--cw-info-tint); }
.status-accent,.status-accepted{ color:var(--cw-primary); background:var(--cw-accent-tint); }

/* Forms — 44px inputs, 16px body, full width mobile */
.form-label{ font-size: var(--cw-text-caption); font-weight: var(--cw-weight-semibold); letter-spacing:0.04em; text-transform:uppercase; color: var(--cw-muted); margin-bottom: var(--cw-space-xs); }
.form-control,.form-select{ border:1px solid var(--cw-border-strong); border-radius: var(--cw-radius-md); min-height: var(--cw-input-height); padding: 0 var(--cw-space-sm); font-size: var(--cw-text-md); color: var(--cw-text-strong); background: var(--cw-surface); }
.form-control::placeholder{ color: var(--cw-faint); }
.form-control:focus,.form-select:focus{ border-color: var(--cw-primary); box-shadow: 0 0 0 3px rgba(2,132,199,0.12); }

/* Alerts — left border only */
.alert{ border-radius: var(--cw-radius-md); border-width:1px 1px 1px 3px; font-size: 0.875rem; }

/* Pagination */
.pagination{ --bs-pagination-color:var(--cw-text); --bs-pagination-active-bg:var(--cw-primary); --bs-pagination-active-border-color:var(--cw-primary); }
.page-link{ font-size: var(--cw-text-caption); }

/* Mobile table → cards */
@media(max-width:767.98px){
  .table-cards thead{ display:none; }
  .table-cards,.table-cards tbody,.table-cards tr,.table-cards td{ display:block; width:100%; }
  .table-cards tr{ border:1px solid var(--cw-border); border-radius: var(--cw-radius-md); padding: var(--cw-space-sm); margin-bottom: var(--cw-space-md); background: var(--cw-surface); }
  .table-cards td{ display:flex; justify-content:space-between; align-items:center; gap:var(--cw-space-sm); border-bottom:1px dashed var(--cw-border); padding: var(--cw-space-xs) 0; text-align:right; font-size:0.875rem; }
  .table-cards td:last-child{ border-bottom:0; }
  .table-cards td::before{ content: attr(data-label); font-size: var(--cw-text-caption); font-weight: var(--cw-weight-semibold); text-transform:uppercase; color: var(--cw-muted); text-align:left; }
}

/* Empty */
.empty-state{ text-align:center; padding: var(--cw-space-xxl) var(--cw-space-md); color: var(--cw-muted); }
.empty-state-icon{ font-size:2rem; color: var(--cw-faint); }

/* Stat cards — flat, no gradients, whitespace */
.stat-card{ display:flex; flex-direction:column; justify-content:space-between; min-height:104px; background:var(--cw-surface); border:1px solid var(--cw-border); border-radius:var(--cw-radius-md); padding: var(--cw-space-md); text-decoration:none; color:inherit; transition: border-color var(--cw-dur-fast) var(--cw-ease); }
.stat-card:hover{ border-color: var(--cw-border-strong); }
.stat-card:active{ transform: scale(0.99); }
.stat-card-value{ font-size: 1.75rem; font-weight: var(--cw-weight-semibold); color: var(--cw-text-strong); line-height:1; }
.stat-card-label{ font-size: var(--cw-text-caption); font-weight: var(--cw-weight-semibold); text-transform:uppercase; letter-spacing:0.06em; color: var(--cw-muted); margin-top: var(--cw-space-sm); }
.stat-icon-wrapper{ width:40px; height:40px; border-radius: var(--cw-radius-sm); display:grid; place-items:center; font-size:1.25rem; background: var(--cw-surface-2); color: var(--cw-muted); }

/* Auth */
.auth-shell{ min-height:100vh; display:flex; }
.auth-panel{ flex:1 1 46%; background: var(--cw-gray-900); color: var(--cw-gray-400); display:flex; flex-direction:column; padding: var(--cw-space-xl); }
.auth-panel-title{ font-size: clamp(1.75rem,3vw,2.5rem); font-weight: var(--cw-weight-semibold); color:#fff; line-height:1.1; margin:auto 0 0; }
.auth-panel-title .accent{ color: var(--cw-primary); }
.auth-form-side{ flex:1 1 54%; display:grid; place-items:center; padding: var(--cw-space-lg); background: var(--cw-canvas); }
.auth-card{ width:100%; max-width:380px; }

/* Reveal — subtle */
.reveal{ opacity:0; animation: rise 200ms ease forwards; animation-delay: var(--d,0ms); }
@keyframes rise{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* Focus */
a:focus-visible,button:focus-visible,.form-control:focus-visible{ outline:2px solid var(--cw-primary); outline-offset:2px; }

/* Responsive */
@media(max-width:991.98px){
  .admin-sidebar{ position:fixed; left:0; top:0; z-index:1040; transform:translateX(-100%); transition: transform var(--cw-dur-med) ease; box-shadow: var(--cw-shadow-lg); }
  .admin-sidebar.open{ transform:none; }
  .sidebar-backdrop{ display:none; position:fixed; inset:0; z-index:1030; background:rgba(15,23,42,0.4); }
  .sidebar-backdrop.show{ display:block; }
  .admin-content{ padding: 12px; }
  .admin-topbar{ padding:0 var(--cw-space-md); }
}

/* Touch */
.btn-touch{ min-height: var(--cw-touch-target-min); min-width: var(--cw-touch-target-min); display:inline-flex; align-items:center; justify-content:center; }
.btn-icon-touch{ min-height: var(--cw-touch-target-min); min-width: var(--cw-touch-target-min); display:inline-flex; align-items:center; justify-content:center; padding:0; }

/* Mobile bottom nav — 56px, single layer */
.mobile-bottom-nav{ position:fixed; bottom:0; left:0; right:0; height: calc(var(--cw-bottom-nav-height) + var(--cw-safe-area-bottom)); padding-bottom: var(--cw-safe-area-bottom); background: var(--cw-surface); border-top:1px solid var(--cw-border); display:flex; align-items:stretch; z-index:var(--cw-z-mobile-bottom-nav); }
.mobile-bottom-nav .nav-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--cw-muted); text-decoration:none; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; border:none; background:transparent; }
.mobile-bottom-nav .nav-item i{ font-size:1.35rem; line-height:1; }
.mobile-bottom-nav .nav-item.active{ color:var(--cw-primary); }
.mobile-bottom-nav .nav-item:focus-visible{ outline:2px solid var(--cw-primary); outline-offset:-2px; }
.mobile-bottom-nav .fab-item{ position:relative; }
.mobile-bottom-nav .fab-circle{ width:48px; height:48px; border-radius:50%; background:var(--cw-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; border:3px solid var(--cw-surface); margin-top:-12px; }
.mobile-bottom-nav .fab-circle:active{ transform:scale(0.92); }

/* Tasks magic popover — absolutely positioned above nav (MUST stay out of flex flow) */
.tasks-magic-popover{ position:absolute; bottom: calc(var(--cw-bottom-nav-height) + 12px); left:50%; transform:translateX(-50%) translateY(12px) scale(0.85); opacity:0; pointer-events:none; background:var(--cw-gray-900); border:1.5px solid var(--cw-primary); border-radius:8px; box-shadow:0 12px 36px rgba(0,0,0,0.4); padding:6px; min-width:224px; transition:opacity 0.2s var(--cw-ease), transform 0.22s ease; z-index:var(--cw-z-fab); }
.tasks-magic-popover.open{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); }
.tasks-magic-popover .tpop-item{ display:flex; align-items:center; gap:0.6rem; min-height:var(--cw-touch-target-min); padding:0 0.85rem; color:#fff; text-decoration:none; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; font-weight:var(--cw-weight-semibold); border-radius:6px; }
.tasks-magic-popover .tpop-item i{ color:var(--cw-primary); font-size:1.15rem; }
.tasks-magic-popover .tpop-item:active{ transform:scale(0.97); }
.tasks-magic-popover .tpop-item:hover,.tasks-magic-popover .tpop-item:focus-visible{ background:rgba(2,132,199,0.2); }
.tasks-magic-popover .tpop-item.active{ background:var(--cw-primary); color:#fff; }
.tasks-magic-popover .tpop-item.active i{ color:#fff; }

/* Quick actions bottom sheet */
.mobile-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:var(--cw-z-bottom-sheet); background:var(--cw-surface); border-radius:var(--cw-radius-lg) var(--cw-radius-lg) 0 0; border-top:1px solid var(--cw-border); box-shadow:var(--cw-shadow-lg); transform:translateY(105%); transition:transform var(--cw-dur-med) var(--cw-ease); max-height:70vh; overflow-y:auto; }
.mobile-sheet.open{ transform:none; }
.mobile-sheet .sheet-handle{ width:40px; height:4px; border-radius:2px; background:var(--cw-border-strong); margin:10px auto 4px; }
.mobile-sheet .sheet-item{ display:flex; align-items:center; gap:var(--cw-space-sm); min-height:var(--cw-touch-target-min); padding:0 var(--cw-space-md); color:var(--cw-text-strong); text-decoration:none; font-weight:var(--cw-weight-semibold); }
.mobile-sheet .sheet-item i{ font-size:1.15rem; color:var(--cw-primary); width:22px; text-align:center; }
.mobile-sheet .sheet-item:hover{ background:var(--cw-surface-2); }
.nav-badge{ position:absolute; top:-4px; right:-10px; font-size:9px; }

/* Pills — 44px, 8px gap */
.filter-pills{ display:flex; gap:var(--cw-touch-gap-min); overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.filter-pills::-webkit-scrollbar{ display:none; }
.filter-pills .pill{ min-height:44px; flex:0 0 auto; display:inline-flex; align-items:center; padding:0 var(--cw-space-md); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--cw-muted); background:var(--cw-surface); border:1px solid var(--cw-border); border-radius:999px; text-decoration:none; white-space:nowrap; }
.filter-pills .pill.active{ color:#fff; background:var(--cw-primary); border-color:var(--cw-primary); }

/* Status icons — colored icon, no text */
.status-icon{ font-size:1.15rem; line-height:1; width:2rem; height:2rem; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--cw-surface-2); }
.status-icon.status-active{ color:var(--cw-success); background:var(--cw-success-tint); }
.status-icon.status-warning{ color:var(--cw-warning); background:var(--cw-warning-tint); }
.status-icon.status-danger{ color:var(--cw-danger); background:var(--cw-danger-tint); }
.status-icon.status-info{ color:var(--cw-info); background:var(--cw-info-tint); }
.status-icon.status-muted{ color:var(--cw-muted); background:var(--cw-surface-2); }

/* Dashboard punch console buttons — compact */
.dash-punch-btn{ min-height: 34px; padding: 0 0.875rem; }

/* Task cards — matches my-tasks card design */
.task-card-item{ border-radius:12px; border:1px solid #e2e8f0; background:#ffffff; box-shadow:0 1px 3px rgba(0,0,0,0.05); overflow:hidden; margin-bottom:1rem; }
.task-card-head{ padding:0.75rem 1.25rem; border-bottom:1px solid #f1f5f9; display:flex; justify-content:space-between; align-items:flex-start; gap:0.75rem; }
.task-card-title{ font-size:1.05rem; font-weight:800; color:#0f172a; margin-bottom:0.15rem; line-height:1.3; }
.task-card-address{ font-size:0.85rem; color:#64748b; }
.task-card-body{ padding:0.75rem 1.25rem; }
.task-card-meta, .task-card-assignees{ font-size:0.85rem; color:#64748b; }
.task-card-type{ font-size:0.95rem; font-weight:600; color:#334155; margin-top:0.4rem; margin-bottom:0.4rem; }
.task-card-footer{ border-top:1px solid #f1f5f9; padding:0.25rem 0.75rem; display:flex; align-items:center; gap:0.25rem; background-color:#fafafa; }
.task-card-footer .icon-btn{ min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; color:#64748b; font-size:1.2rem; border-radius:6px; text-decoration:none; }
.task-card-footer .icon-btn:hover{ color:#0284c7; background:#ffffff; }
.task-card-footer .icon-btn.primary{ color:#0284c7; }

.mobile-task-card{ display:block; background:var(--cw-surface); border:1px solid var(--cw-border); border-radius:var(--cw-radius-md); padding: var(--cw-space-sm) var(--cw-space-md); text-decoration:none; color:inherit; }
.mobile-task-card:active{ border-color:var(--cw-primary); }
.mobile-task-card .mtc-ref{ font-size:10px; color:var(--cw-faint); letter-spacing:0.06em; }
.mobile-task-card .mtc-title{ font-weight:var(--cw-weight-semibold); color:var(--cw-text-strong); font-size:0.9375rem; }
.mobile-task-card .mtc-meta{ font-size:0.8125rem; color:var(--cw-muted); }

@media(max-width:991.98px){ body{ padding-bottom: calc(var(--cw-bottom-nav-height) + var(--cw-safe-area-bottom) + 12px); } .topbar-bell{ display:none; } }
@media(max-width:575.98px){
  /* Global mobile type scale-down — everything smaller */
  html{ font-size:14px; }
  .admin-content{ padding: 12px; }
  .admin-topbar{ display:none; }
  .dash-sticky-wrap{ position:-webkit-sticky; position:sticky; top:0; z-index:1010; background:var(--cw-canvas); padding: 0.25rem 0 0; }
  .btn:not(.btn-sm):not(.btn-xs):not(.btn-link){ min-height:44px; }
  .card-header{ font-weight:var(--cw-weight-semibold); }
  /* Compact task cards — smaller text, smaller icons, tighter spacing */
  .task-card-item{ margin-bottom: var(--cw-space-sm); }
  .task-card-head{ padding: 0.5rem 0.75rem; gap: var(--cw-space-sm); }
  .task-card-title{ font-size: 0.875rem; }
  .task-card-address{ font-size: 0.6875rem; }
  .task-card-body{ padding: 0.5rem 0.75rem; }
  .task-card-meta{ font-size: 0.6875rem; }
  .task-card-type{ font-size: 0.8125rem; margin-top: 2px; }
  .task-card-assignees{ font-size: 0.6875rem; margin-top: 2px; }
  .task-card-footer{ gap: 0; padding: 2px 0.5rem; }
  .task-card-footer .icon-btn{ min-height: 36px; min-width: 36px; font-size: 1rem; }
  .d-lg-none.p-2{ padding: 0.5rem !important; }
  .d-lg-none.gap-2{ gap: 0.5rem !important; }
}
.work-action-bar{ position:fixed; left:0; right:0; bottom: calc(var(--cw-bottom-nav-height) + var(--cw-safe-area-bottom)); z-index: var(--cw-z-mobile-header); background:var(--cw-surface); border-top:1px solid var(--cw-border); padding: var(--cw-space-sm) var(--cw-space-md); display:none; }
.checklist-item,.subtask-item{ min-height: var(--cw-touch-target-min); display:flex; align-items:center; }
.checklist-item .form-check-input,.subtask-item .form-check-input{ width:1.35rem; height:1.35rem; }

/* Desktop typography — comfortable reading size (mobile scaled down separately) */
@media (min-width: 576px){
  /* Sticky dashboard: punch + tabs pinned below topbar */
  .dash-sticky-wrap{ position:-webkit-sticky; position:sticky; top:56px; z-index:1010; background:var(--cw-canvas); padding: 0.5rem 0 0; }
  .dash-sticky-wrap .card{ box-shadow: var(--cw-shadow-md); }
  html{ font-size: 16px; }
  body{ font-size: 1rem; line-height: 1.6; }
  h1{ font-size: 1.75rem; }
  h2{ font-size: 1.375rem; }
  h3{ font-size: 1.125rem; }
  .eyebrow{ font-size: 0.75rem; }
  .card-header{ font-size: 0.8125rem; }
  .form-label{ font-size: 0.75rem; }
  .btn{ font-size: 0.9375rem; }
  .table thead th{ font-size: 0.75rem; }
  .table tbody td{ font-size: 0.9375rem; }
  .status-badge{ font-size: 0.6875rem; }
  .mobile-task-card .mtc-title{ font-size: 1rem; }
}