/* Design tokens loaded via <link rel="stylesheet" href="css/tokens.css"> in index.html */
/* Primitive → Semantic → Component layers live in css/tokens.css */
html{scroll-behavior:smooth;}
*{font-family:'Inter',system-ui,sans-serif;}
*:focus-visible{outline:none;}
.display-font{font-family:'Bebas Neue',sans-serif;letter-spacing:.02em;}
body{background:linear-gradient(180deg, var(--bg) 0%, #FBFAF8 100%);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;font-size:16px;}
@media (max-width:640px){
  body{font-size:15px;}
}
/* Print report — hidden on screen, visible when printing */
#printReport{display:none;}
@media print{
  body > *:not(#printReport){display:none!important;}
  #printReport{display:block!important;font-family:Arial,sans-serif;color:#1A2332;padding:20px;}
  #printReport .pr-logo{font-size:24px;font-weight:900;color:#2E5A8C;letter-spacing:2px;}
  #printReport .pr-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px;border-bottom:3px solid #2E5A8C;margin-bottom:20px;}
  #printReport .pr-grade{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;border:3px solid;}
  #printReport .pr-pass{background:#DCFCE7;color:#15803D;border-color:#86EFAC;}
  #printReport .pr-fail{background:#FEE2E2;color:#B91C1C;border-color:#FCA5A5;}
  #printReport .pr-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
  #printReport .pr-meta-box{background:#F5F1E8;padding:8px 10px;border-radius:6px;}
  #printReport .pr-meta-lbl{font-size:9px;font-weight:700;text-transform:uppercase;color:#6B7280;margin-bottom:2px;}
  #printReport .pr-meta-val{font-size:12px;font-weight:600;}
  #printReport .pr-sec{margin-bottom:18px;}
  #printReport .pr-sec-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#2E5A8C;border-bottom:1px solid #E8E1D2;padding-bottom:4px;margin-bottom:8px;}
  #printReport .pr-ai{background:#FFFBEB;border-left:4px solid #F4C842;padding:10px;border-radius:6px;font-size:12px;line-height:1.6;}
  #printReport table{width:100%;border-collapse:collapse;font-size:11px;}
  #printReport th{background:#2E5A8C;color:#fff;padding:6px 8px;text-align:left;}
  #printReport td{padding:6px 8px;border-bottom:1px solid #F0EBE0;vertical-align:top;}
  #printReport .pr-footer{margin-top:30px;padding-top:10px;border-top:1px solid #E8E1D2;font-size:10px;color:#9CA3AF;text-align:center;}
}
.bg-primary{background:var(--primary);}
.bg-accent{background:var(--accent);}
.text-primary{color:var(--primary);}
.text-accent{color:var(--accent);}
.text-ink{color:var(--ink);}

/* Dark nav background used in header */
.bg-ink{background:var(--primary-dark);}
.card{background:var(--surface);border:1px solid rgba(244,200,66,0.15);border-radius:var(--card-radius);box-shadow:var(--shadow-md);transition:var(--transition);position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-accent);opacity:0;transition:opacity 0.3s;}
.card:hover{box-shadow:var(--shadow-lg);border-color:rgba(244,200,66,0.3);}
.card:hover::before{opacity:1;}
.input{width:100%;padding:12px 14px;border:1.5px solid rgba(16,24,40,0.08);border-radius:10px;font-size:14px;background:linear-gradient(180deg,#fff,#FBFBFD);transition:var(--transition);min-height:44px;}
.input:hover{border-color:rgba(16,24,40,0.12);}
.input:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring);}
.input::placeholder{color:#B4B4C5;opacity:1;}
.input:disabled{background:#F9F7F3;color:#9CA3AF;cursor:not-allowed;}
.btn{padding:12px 18px;border-radius:12px;font-weight:700;font-size:14px;transition:var(--transition);cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;white-space:nowrap;user-select:none;}
.btn:disabled{opacity:0.6;cursor:not-allowed;}
.btn-primary{background:var(--gradient-accent);color:var(--primary);box-shadow:0 8px 20px rgba(244,200,66,0.25);border:none;font-weight:700;letter-spacing:0.5px;}
.btn-primary:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 16px 40px rgba(244,200,66,0.35);filter:brightness(1.08);}
.btn-primary:focus-visible{outline:none;box-shadow:0 16px 40px rgba(244,200,66,0.35),var(--focus-ring);}
.btn-primary:active:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px rgba(244,200,66,0.2);}
.btn-secondary{background:rgba(255,255,255,0.8);border:2px solid rgba(244,200,66,0.3);color:var(--ink);transition:var(--transition);backdrop-filter:blur(8px);}
.btn-secondary:hover:not(:disabled){background:rgba(255,255,255,1);border-color:var(--accent);box-shadow:0 6px 16px rgba(244,200,66,0.2);transform:translateY(-2px);}
.btn-secondary:focus-visible{outline:none;box-shadow:var(--focus-ring-primary);}
.btn-secondary:active:not(:disabled){background:rgba(244,200,66,0.08);}
.btn-ai{background:var(--accent);color:var(--ink);transition:var(--transition);}
.btn-ai:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05);}
.btn-ai:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.btn-ai:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.btn-ghost{color:#5a6678;transition:var(--transition);}
.btn-ghost:hover{background:#F0EBDF;}
.btn-ghost:focus-visible{outline:none;box-shadow:var(--focus-ring-primary);}
.grid-pattern{background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.15) 1px,transparent 0);background-size:24px 24px;backdrop-filter:blur(6px);}
.hidden{display:none;}
.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:13px;z-index:50;animation:slideIn .3s;box-shadow:var(--shadow-md);}
@keyframes slideIn{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.brand-card{transition:all .18s;cursor:pointer;border-radius:12px;}
.brand-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,24,40,0.08);}

/* Top nav tabs */
.tab-btn{background:transparent;border:2px solid transparent;color:#fff;padding:12px 16px;cursor:pointer;transition:var(--transition);border-radius:12px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.tab-btn:hover{background:rgba(255,255,255,0.1);border-color:rgba(244,200,66,0.3);}
.tab-btn:focus-visible{outline:2px solid rgba(244,200,66,0.5);}
.tab-btn.active{background:var(--gradient-accent);color:var(--primary);border-color:transparent;border-radius:12px;box-shadow:0 8px 20px rgba(244,200,66,0.25);font-weight:700;}
/* Icons inside tab buttons must follow the button's own text color,
   not the global .mi dark-navy default */
.tab-btn .mi{color:currentColor;}
/* Task styles */
.priority-urgent{background:#FEE2E2;color:#991B1B;}
.priority-high{background:#FEF3C7;color:#92400E;}
.priority-medium{background:#DBEAFE;color:#1E40AF;}
.priority-low{background:#F3F4F6;color:#6B7280;}
.task-card{transition:var(--transition);cursor:pointer;border-radius:12px;}
.task-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.07);}
.task-card:focus-within{outline:2px solid var(--accent);}
.task-done .task-title{text-decoration:line-through;color:#9CA3AF;}
.task-done{opacity:.65;}
.done-toggle{font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px;cursor:pointer;border:1.5px solid transparent;transition:var(--transition);white-space:nowrap;min-height:32px;}
.done-toggle:focus-visible{outline:2px solid var(--accent);}
.done-toggle-todo{background:#F0EBDF;color:#9CA3AF;border-color:#E8DFD0;}
.done-toggle-todo:hover{background:#E8DFD0;color:var(--ink);}
.done-toggle-done{background:#DCFCE7;color:#15803D;border-color:#BBF7D0;}
.done-toggle-done:hover{background:#BBF7D0;color:#15803D;}
.due-overdue{color:#DC2626;font-weight:600;}
.due-today{color:#D97706;font-weight:600;}
.due-future{color:#6B7280;}
.stat-chip{padding:8px 16px;border-radius:12px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:8px;border:2px solid;transition:var(--transition);background:var(--accent-light);border-color:var(--accent);color:var(--primary);}
.stat-chip:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(244,200,66,0.2);}
.stat-chip .mi{font-size:24px;color:var(--accent);}
.ai-panel{background:linear-gradient(135deg,#fffbeb 0%,#fef9f0 100%);border:2px solid var(--accent);border-left:4px solid var(--accent);border-radius:var(--card-radius);box-shadow:var(--shadow-md);transition:var(--transition);}
.ai-panel:hover{box-shadow:var(--shadow-lg);}
.ai-rank{width:36px;height:36px;min-width:36px;border-radius:50%;background:var(--gradient-accent);color:var(--primary);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:18px;font-weight:700;box-shadow:0 4px 12px rgba(244,200,66,0.2);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
@keyframes shimmer{0%{background-position:200% center;}100%{background-position:-200% center;}}
.ai-loading{animation:pulse 1.2s infinite;}
.skeleton{background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size:200% 100%;animation:shimmer 2s infinite;border-radius:8px;}
.skel-line{height:14px;border-radius:7px;}
.skel-line-sm{height:10px;border-radius:5px;}
.skel-line-xs{height:8px;border-radius:4px;}
.skel-circle{border-radius:50%;}
.skel-badge{height:22px;border-radius:11px;}
/* Material icons helper */
.mi{display:inline-flex;font-size:22px;vertical-align:middle;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;color:var(--primary);flex-shrink:0;font-weight:400;}
.mi.icon-accent{color:var(--accent);font-size:24px;font-weight:600;}
.mi.icon-success{color:#10B981;font-weight:600;}
.mi.icon-danger{color:#EF4444;font-weight:600;}
.mi.icon-warning{color:#F59E0B;font-weight:600;}
.mi.icon-info{color:#3B82F6;font-weight:600;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:12px;background:transparent;border:1.5px solid rgba(16,24,40,0.08);cursor:pointer;transition:var(--transition);min-height:44px;}
.icon-btn:hover{background:rgba(16,24,40,0.04);border-color:rgba(16,24,40,0.12);}
.icon-btn:focus-visible{outline:none;box-shadow:var(--focus-ring-primary);}
.kbd{background:#F3F4F6;border-radius:8px;padding:6px 10px;font-size:12px;color:#374151;border:1px solid rgba(16,24,40,0.08);font-family:monospace;}

/* Site logo */
.site-logo{height:48px;width:auto;display:block;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.1));transition:filter 0.3s;}
.site-logo--small{height:40px;}
header:hover .site-logo{filter:drop-shadow(0 4px 12px rgba(244,200,66,0.2));}
/* Inline SVG theming helpers */
.site-logo-inline .st0{fill:var(--logo-text,#fff)}
.site-logo-inline .st1{fill:var(--logo-mark,#F4C842)}
.site-logo-inline .st2{fill:var(--logo-mark-2,#ebbe52)}
/* Calendar styles */
.cal-cell{min-height:96px;border-radius:10px;padding:6px;background:#fff;border:1px solid #EDE8DF;transition:background .15s;overflow:hidden;}
.cal-cell:hover{background:#FAFAF8;}
.cal-cell.today{border-color:var(--primary);background:#EFF4FB;}
.cal-cell.other-month{background:#F9F7F3;opacity:.5;}
.cal-cell.has-tasks{cursor:pointer;}
.cal-date{font-size:12px;font-weight:700;color:#6B7280;margin-bottom:4px;}
.cal-cell.today .cal-date{color:var(--primary);}
.cal-task-chip{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;display:block;}
.cal-task-chip.urgent{background:#FEE2E2;color:#991B1B;}
.cal-task-chip.high{background:#FEF3C7;color:#92400E;}
.cal-task-chip.medium{background:#DBEAFE;color:#1E40AF;}
.cal-task-chip.low{background:#F3F4F6;color:#6B7280;}
.cal-task-chip.done{background:#F3F4F6;color:#9CA3AF;text-decoration:line-through;}
.cal-more{font-size:10px;color:#9CA3AF;font-weight:600;padding:1px 4px;}
.cal-day-header{font-size:11px;font-weight:700;color:#9CA3AF;text-align:center;padding:6px 0;text-transform:uppercase;letter-spacing:.05em;}

/* Calendar mobile — smaller cells that fit on phone screens */
@media (max-width:640px){
  .cal-cell{min-height:54px;padding:3px 2px;border-radius:6px;}
  .cal-date{font-size:10px;margin-bottom:2px;}
  .cal-task-chip{font-size:8px;padding:1px 3px;margin-bottom:1px;border-radius:3px;}
  .cal-more{font-size:8px;padding:0 2px;}
  .cal-day-header{font-size:9px;padding:4px 0;letter-spacing:0;}
  #calGrid{gap:2px!important;}
}

/* ── Mobile bottom navigation ─────────────────────────────────────────────── */
.mobile-bottom-nav{display:none;}
@media (max-width:640px){
  /* Hide scrollable top tab row; logo header still shows */
  nav.bg-ink{display:none;}
  /* Add bottom padding so content clears the nav bar */
  main{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;}
  /* Nav bar itself */
  .mobile-bottom-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;
    background:var(--primary);
    border-top:1px solid rgba(255,255,255,0.08);
    box-shadow:0 -4px 20px rgba(0,0,0,0.25);
    z-index:40;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .mob-tab-btn{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:8px 2px;
    background:transparent;border:none;cursor:pointer;
    color:rgba(255,255,255,0.5);
    transition:color 0.18s;
    min-height:52px;min-width:0;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-tab-btn:hover,.mob-tab-btn.active{color:var(--accent);}
  .mob-tab-icon{font-size:22px;line-height:1;display:block;}
  .mob-tab-label{font-size:9px;font-weight:700;letter-spacing:0.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  /* More drawer sheet */
  .mobile-more-sheet{
    position:fixed;bottom:0;left:0;right:0;
    background:var(--surface);
    border-radius:20px 20px 0 0;
    padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 40px rgba(0,0,0,0.18);
  }
  .mobile-more-handle{width:36px;height:4px;background:#E5E7EB;border-radius:2px;margin:0 auto 20px;}
  .mobile-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .mob-more-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:8px;padding:16px 8px;
    background:#F9F7F3;border:1px solid rgba(244,200,66,0.15);border-radius:14px;
    cursor:pointer;font-size:12px;font-weight:700;color:var(--ink);
    transition:background 0.15s,transform 0.15s;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-more-item:hover{background:var(--accent-light);transform:translateY(-2px);}
}

/* ── Empty state component ────────────────────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;}
.empty-state-icon{width:64px;height:64px;background:var(--accent-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0;}
.empty-state-icon .material-icons-outlined{font-size:32px;color:var(--accent-dark);}
.empty-state-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.02em;margin-bottom:6px;color:var(--ink);}
.empty-state-body{font-size:13px;color:var(--muted);margin-bottom:20px;max-width:280px;line-height:1.6;}

/* Audit styles */
.audit-card{transition:box-shadow .15s;}
.audit-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.07);}
.score-ring{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:22px;font-weight:700;flex-shrink:0;}
.score-pass{background:#DCFCE7;color:#15803D;border:3px solid #86EFAC;}
.score-fail{background:#FEE2E2;color:#B91C1C;border:3px solid #FCA5A5;}
.score-na{background:#F3F4F6;color:#6B7280;border:3px solid #D1D5DB;}
.resp-group{display:flex;gap:4px;flex-shrink:0;}
.resp-btn{padding:5px 10px;border-radius:7px;font-size:12px;font-weight:600;border:1.5px solid #E5E7EB;background:#fff;cursor:pointer;transition:all .1s;color:#6B7280;}
.resp-btn:hover{border-color:#9CA3AF;}
.resp-btn.active-pass{background:#DCFCE7;border-color:#4ADE80;color:#15803D;}
.resp-btn.active-fail{background:#FEE2E2;border-color:#F87171;color:#B91C1C;}
.resp-btn.active-na{background:#F3F4F6;border-color:#9CA3AF;color:#4B5563;}
.category-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9CA3AF;padding:12px 0 6px;}
.action-immediate{border-left:3px solid #DC2626;background:#FFF5F5;}
.action-short_term{border-left:3px solid #D97706;background:#FFFBEB;}
.action-routine{border-left:3px solid #3B82F6;background:#EFF6FF;}
/* Grade badges */
.grade-badge{font-family:'Bebas Neue',sans-serif;letter-spacing:.04em;padding:3px 10px;border-radius:8px;font-size:16px;font-weight:700;}
.grade-AA{background:#14532D;color:#FFFFFF;}
.grade-Aplus{background:#15803D;color:#FFFFFF;}
.grade-A{background:#16A34A;color:#FFFFFF;}
.grade-B{background:#1D4ED8;color:#FFFFFF;}
.grade-C{background:#D97706;color:#FFFFFF;}
.grade-D{background:#EA580C;color:#FFFFFF;}
.grade-F{background:#DC2626;color:#FFFFFF;}
/* Team styles */
.member-card{transition:box-shadow .15s;}
.member-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.07);}
.role-badge-owner{background:#1A2332;color:#F4C842;}
.role-badge-admin{background:#EDE9FE;color:#5B21B6;}
.role-badge-ops{background:#FEF3C7;color:#92400E;}
.role-badge-manager{background:#DBEAFE;color:#1E40AF;}
.role-badge-driver{background:#F3E8FF;color:#6D28D9;}

/* ── Mobile polish ─────────────────────────────────────────────────────────── */
/* Horizontal scroll for any table on small screens */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:520px;}

/* Pull-to-refresh indicator */
#pullRefreshIndicator{
  position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-60px);
  background:var(--accent);color:var(--primary);
  padding:8px 20px;border-radius:0 0 16px 16px;
  font-size:12px;font-weight:700;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  z-index:60;white-space:nowrap;
  box-shadow:0 4px 16px rgba(244,200,66,0.3);
}
#pullRefreshIndicator.visible{transform:translateX(-50%) translateY(0);}

/* Modal swipe-down dismiss — animation helper */
.modal-inner-swipe{
  transition:transform .25s ease;
  will-change:transform;
}

/* ── Header icon buttons (bell, logout, install) ── */
.btn-hdr-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  background:transparent;border:none;
  color:#fff;cursor:pointer;flex-shrink:0;position:relative;
  transition:background .15s;
}
.btn-hdr-icon:hover{background:rgba(255,255,255,0.12);}
.btn-hdr-icon:active{background:rgba(255,255,255,0.2);}
.btn-hdr-icon .mi{font-size:24px;color:inherit;}

/* ── Vertical divider between logo and title ── */
.hdr-divider{
  width:1px;height:32px;
  background:rgba(255,255,255,0.22);
  flex-shrink:0;border-radius:1px;
}

/* ── Notification panel ── */
#notifPanel{max-height:80vh;overflow:hidden;display:flex;flex-direction:column;}
#notifContent{overflow-y:auto;flex:1;}

/* Responsive utilities */
@media (max-width:768px){
  .btn{padding:10px 14px;font-size:13px;min-height:40px;}
  .input{padding:10px 12px;min-height:40px;}
  .tab-btn{padding:8px 12px;min-height:40px;font-size:13px;}
  .display-font{letter-spacing:.01em;}
  .max-w-\[1400px\]{padding-left:12px;padding-right:12px;}
}
@media (max-width:640px){
  .btn{padding:9px 12px;font-size:12px;min-height:36px;}
  .input{padding:9px 11px;min-height:36px;font-size:13px;}
  .tab-btn{padding:6px 10px;min-height:36px;font-size:12px;}
  .done-toggle{font-size:11px;padding:4px 10px;min-height:28px;}
  .mi{font-size:18px;width:20px;height:20px;}
  /* Header: single non-wrapping row, compressed */
  .hdr-wrap{padding:8px 14px!important;gap:4px!important;flex-wrap:nowrap!important;}
  .hdr-right{gap:2px!important;}
  .hdr-email{display:none!important;}
  .hdr-badge{display:none!important;}
  .hdr-title{font-size:1rem!important;}
  .hdr-divider{height:24px!important;}
  .btn-hdr-icon{width:36px!important;height:36px!important;}
  .btn-hdr-icon .mi{font-size:20px!important;}
  /* Logo slightly smaller on mobile */
  .site-logo{height:38px!important;}
  main{padding-left:14px!important;padding-right:14px!important;padding-top:18px!important;}
}
/* Phones: nav tabs show icon only, all 8 fit in one row */
@media (max-width:520px){
  .tab-btn{font-size:0!important;padding:7px!important;min-width:0!important;flex:1!important;gap:0!important;opacity:0.6;border-radius:10px!important;}
  .tab-btn:hover,.tab-btn.active{opacity:1;}
  .tab-btn .mi{font-size:23px!important;color:currentColor!important;width:auto!important;height:auto!important;}
  .tab-label{display:none;}
  .hdr-nav{padding-left:4px!important;padding-right:4px!important;gap:2px!important;}
}
@media (hover:none) and (pointer:coarse){
  .btn:active:not(:disabled){transform:translateY(-1px);}
  .brand-card:active{transform:translateY(-2px);}
}
/* Template editor drag-and-drop */
.tpl-drop-over{outline:2px solid var(--accent);outline-offset:2px;background:rgba(244,200,66,0.06)!important;}
/* Dashboard date range toggle */
.dash-range-btn{font-size:12px;font-weight:600;padding:5px 14px;border-radius:8px;border:1px solid var(--dash-sep);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;}
.dash-range-btn:hover{color:var(--ink);border-color:var(--ink);}
.dash-range-btn.active{background:var(--primary);color:var(--accent);border-color:var(--primary);}
/* Supplier contact action buttons */
.contact-action-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;text-decoration:none;transition:background .15s;max-width:210px;overflow:hidden;white-space:nowrap;}
.contact-action-btn .material-icons-outlined{font-size:14px;flex-shrink:0;}
.contact-btn-phone{background:#DBEAFE;color:#1E40AF;}
.contact-btn-phone:hover{background:#BFDBFE;}
.contact-btn-whatsapp{background:#D1FAE5;color:#065F46;}
.contact-btn-whatsapp:hover{background:#A7F3D0;}
.contact-btn-email{background:#F3F4F6;color:#374151;}
.contact-btn-email:hover{background:#E5E7EB;}
/* Brand workspace tab bar */
.bw-tab{display:flex;align-items:center;gap:5px;flex:1;justify-content:center;padding:11px 4px;font-size:12px;font-weight:600;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
.bw-tab .material-icons-outlined{font-size:16px;}
.bw-tab:hover{color:var(--ink);}
.bw-tab.active{color:var(--primary);border-bottom-color:var(--primary);}
.driver-tab{display:flex;align-items:center;gap:5px;flex:1;justify-content:center;padding:10px 4px;font-size:12px;font-weight:600;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
.driver-tab:hover{color:var(--ink);}
.driver-tab.active{color:var(--primary);border-bottom-color:var(--primary);}