/**
 * mobile-app.css — Teakworld Digital Platform
 * Mobile-only. Desktop is 100% untouched.
 * SINGLE source of truth for all mobile styles.
 */

/* ── RESET & BASE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --tab-h:64px; --nav-h:54px; --safe-bot:env(safe-area-inset-bottom,0px); }
  html,body { overflow-x:hidden; -webkit-text-size-adjust:100%; touch-action:manipulation; }
  body { padding-bottom:calc(var(--tab-h) + var(--safe-bot)); }
  input,select,textarea { font-size:16px !important; }
  button,[role="button"] { min-height:44px; }
}

/* ── SIDEBAR ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar-toggle { display:none !important; }
  .sidebar {
    transform:translateX(-100%);
    transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
    position:fixed; top:0; left:0; height:100%;
    z-index:600; width:280px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .sidebar.open { transform:translateX(0); box-shadow:8px 0 40px rgba(0,0,0,0.25); }
  .sidebar-logo { padding-top:20px !important; }
  .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:599; }
  .sidebar-overlay.open { display:block; }
}

/* ── TOP APP NAVBAR ───────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar {
    position:fixed !important; top:0; left:0; right:0;
    height:var(--nav-h) !important; background:#fff !important;
    border-bottom:1px solid #EDE8E0 !important;
    box-shadow:0 1px 8px rgba(0,0,0,0.07) !important;
    z-index:500 !important; display:flex !important;
    align-items:center !important; padding:0 14px !important;
    gap:10px !important; margin-bottom:0 !important;
    flex-wrap:nowrap !important;
  }
  .topbar-greeting,.topbar-role,.search-bar { display:none !important; }
  /* Hide greeting in topbar — shown in greeting card below instead */
  .topbar #greeting { display:none !important; }
  .topbar h1:not(#greeting) {
    position:absolute !important; left:50% !important;
    transform:translateX(-50%) !important;
    font-size:16px !important; font-weight:700 !important;
    color:#014A52 !important; white-space:nowrap !important;
    overflow:hidden !important; text-overflow:ellipsis !important;
    max-width:50vw !important; margin:0 !important;
  }
  .topbar-actions { margin-left:auto !important; display:flex !important; align-items:center !important; gap:6px !important; }
  .topbar-actions > *:not(.notif-wrapper):not(#notifWrapper):not(.hris-btn) { display:none !important; }
  .hris-btn { display:flex !important; align-items:center !important; gap:4px !important; width:auto !important; padding:0 10px !important; font-size:12px !important; font-weight:700 !important; }
  .icon-btn { width:38px !important; height:38px !important; border-radius:10px !important; }
  .notif-dropdown {
    position:fixed !important; top:var(--nav-h) !important;
    left:8px !important; right:8px !important; width:auto !important;
    max-height:65vh; overflow-y:auto;
    border-radius:16px !important; box-shadow:0 8px 40px rgba(0,0,0,0.18) !important;
    z-index:9999 !important;
  }
}

/* ── MOBILE TOPBAR LOGO ───────────────────────────────────── */
.mobile-topbar-logo { display:none !important; }
@media (max-width: 768px) {
  .mobile-topbar-logo {
    display:block !important; height:24px !important; width:auto !important;
    max-width:110px !important; object-fit:contain !important;
    flex-shrink:0 !important; cursor:pointer !important;
    filter:brightness(0) saturate(100%) invert(23%) sepia(57%) saturate(500%) hue-rotate(143deg) brightness(85%) !important;
  }
}

/* ── MAIN CONTENT ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .main {
    margin-left:0 !important;
    padding:16px 14px !important;
    padding-top:calc(var(--nav-h) + 14px) !important;
    padding-bottom:calc(var(--tab-h) + var(--safe-bot) + 14px) !important;
    width:100% !important; box-sizing:border-box !important;
    min-height:100svh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
}

/* ── BOTTOM TAB BAR ───────────────────────────────────────── */
.mobile-tab-bar { display:none; }
@media (max-width: 768px) {
  .mobile-tab-bar {
    display:flex; position:fixed; bottom:0; left:0; right:0;
    height:calc(var(--tab-h) + var(--safe-bot));
    padding-bottom:var(--safe-bot);
    background:#fff; border-top:1px solid #EDE8E0;
    box-shadow:0 -2px 12px rgba(0,0,0,0.07);
    z-index:550; align-items:stretch; justify-content:space-around;
  }
  .tab-item {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px;
    text-decoration:none; color:#A09080; position:relative;
    padding:6px 4px 0; cursor:pointer; transition:color 0.15s;
    -webkit-tap-highlight-color:transparent;
  }
  .tab-item:active { transform:scale(0.9); }
  .tab-item.tab-active { color:#01646D; }
  .tab-item.tab-active::before {
    content:''; position:absolute; top:0; left:50%;
    transform:translateX(-50%);
    width:28px; height:3px; background:#01646D;
    border-radius:0 0 4px 4px;
  }
  .tab-icon { width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
  .tab-icon svg { width:22px; height:22px; stroke:currentColor; }
  .tab-label { font-size:10px; font-weight:600; font-family:'Montserrat',sans-serif; line-height:1; }
  .tab-badge {
    position:absolute; top:2px; right:calc(50% - 20px);
    background:#C0392B; color:#fff;
    font-size:9px; font-weight:700;
    min-width:16px; height:16px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    padding:0 4px; border:2px solid #fff;
  }
}

/* ── CARDS & GRIDS ────────────────────────────────────────── */
@media (max-width: 768px) {
  .dashboard-grid,.analytics-grid { grid-template-columns:1fr !important; gap:12px !important; }
  .kpi-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  [class*="card-"] { grid-column:span 1 !important; }
  .card { border-radius:14px !important; padding:16px !important; box-shadow:0 2px 10px rgba(0,0,0,0.06) !important; }
  .stats-row { display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .stat-card { padding:14px !important; border-radius:14px !important; }
  .stat-value { font-size:26px !important; }
  .stat-label { font-size:11px !important; }
  .kpi-card { padding:14px 16px !important; border-radius:14px !important; }
  .kpi-value { font-size:28px !important; }
  .kpi-label { font-size:10px !important; }
  /* Inline grids → 2-col max (not single block — that breaks KPI cards) */
  div[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  div[style*="grid-template-columns:2fr"],
  div[style*="grid-template-columns: 2fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .chart-card { width:100% !important; box-sizing:border-box !important; margin-bottom:12px !important; }
  canvas { max-width:100% !important; }
}

/* ── QUICK ACCESS — old 2-col rule removed, see icon grid below ── */
@media (max-width: 768px) {
  /* Placeholder — actual rules in QUICK ACTIONS icon grid section */
  /* hr-quick-actions — see icon grid section below */
}

/* ── MODALS — bottom sheet ────────────────────────────────── */
@media (max-width: 768px) {
  .modal-overlay { align-items:flex-end !important; padding:0 !important; }
  .modal,.modal-box {
    width:100% !important; max-width:100% !important;
    border-radius:20px 20px 0 0 !important;
    padding:20px 18px 28px !important;
    max-height:88svh !important; overflow-y:auto !important;
  }
  .modal-actions { flex-direction:column-reverse !important; gap:8px !important; }
  .modal-btn { width:100% !important; text-align:center !important; min-height:48px !important; border-radius:12px !important; }
}

/* ── TABLES — stacked rows ────────────────────────────────── */
@media (max-width: 768px) {
  .audit-table thead,.analytics-table thead,.hd-table thead,.cp-table thead { display:none !important; }
  .audit-table,.audit-table tbody,.audit-table tr,.audit-table td,
  .analytics-table,.analytics-table tbody,.analytics-table tr,.analytics-table td,
  .hd-table,.hd-table tbody,.hd-table tr,.hd-table td,
  .cp-table,.cp-table tbody,.cp-table tr,.cp-table td { display:block !important; width:100% !important; }
  .audit-table tr,.analytics-table tr,.hd-table tr,.cp-table tr { border-bottom:1px solid #EDE8E0 !important; padding:10px 0 !important; }
  .audit-table td,.analytics-table td,.hd-table td,.cp-table td { border:none !important; padding:2px 0 !important; font-size:12px !important; }
  .audit-table td::before,.analytics-table td::before,.hd-table td::before,.cp-table td::before {
    content:attr(data-label) ": " !important; font-weight:700 !important; font-size:10px !important; color:#A09080 !important;
  }
}

/* ── CHARTS ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .chart-wrap { height:180px !important; }
}

/* ── ANNOUNCEMENTS ────────────────────────────────────────── */
@media (max-width: 768px) {
  .filter-bar {
    display:flex !important; overflow-x:auto !important;
    flex-wrap:nowrap !important; gap:6px !important;
    padding-bottom:6px !important; scrollbar-width:none !important;
    margin-bottom:12px !important;
  }
  .filter-bar::-webkit-scrollbar { display:none !important; }
  .filter-btn {
    flex-shrink:0 !important; white-space:nowrap !important;
    font-size:12px !important; padding:7px 14px !important;
    border-radius:20px !important;
  }
  .ann-card { padding:16px !important; border-radius:14px !important; margin-bottom:10px !important; }
  .ann-title { font-size:15px !important; font-weight:700 !important; }
  .ann-meta { flex-wrap:wrap !important; gap:4px !important; font-size:11px !important; }
  .feed-actions { display:flex !important; gap:6px !important; flex-wrap:wrap !important; margin-top:10px !important; }
  .feed-action-btn { padding:7px 12px !important; font-size:11px !important; border-radius:8px !important; min-height:36px !important; }
  /* FAB */
  .mobile-ann-fab {
    position:fixed !important;
    bottom:calc(var(--tab-h) + var(--safe-bot) + 14px) !important;
    right:16px !important; z-index:490 !important;
    background:#01646D !important; color:#fff !important;
    border:none !important; border-radius:16px !important;
    padding:12px 18px !important; font-size:13px !important;
    font-weight:700 !important; font-family:'Montserrat',sans-serif !important;
    cursor:pointer !important; box-shadow:0 4px 20px rgba(1,100,109,0.4) !important;
    display:flex !important; align-items:center !important; gap:6px !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  .btn-new-ann-topbar { display:none !important; }
}

/* ── HELPDESK ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-title { font-size:14px !important; font-weight:700 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:48vw !important; }
  .page-sub { display:none !important; }
  .form-input,.form-select,.form-textarea { width:100% !important; box-sizing:border-box !important; font-size:16px !important; }
  .fab-new-ticket,a[style*="position:fixed"][style*="bottom"],a[style*="position: fixed"][style*="bottom"] {
    bottom:calc(var(--tab-h) + var(--safe-bot) + 14px) !important;
  }
}

/* ── PAGE-HEADER (used on profile, chat, directory, audit-logs etc) ── */
@media (max-width: 768px) {
  /* page-header is the topbar equivalent on non-dashboard pages */
  .page-header {
    position:fixed !important; top:0; left:0; right:0 !important;
    height:var(--nav-h) !important; background:#fff !important;
    border-bottom:1px solid #EDE8E0 !important;
    box-shadow:0 1px 8px rgba(0,0,0,0.07) !important;
    z-index:500 !important; display:flex !important;
    align-items:center !important; padding:0 14px !important;
    margin-bottom:0 !important; gap:10px !important; flex-wrap:nowrap !important;
  }
  .page-header .page-title, .page-header h1 {
    position:absolute !important; left:50% !important;
    transform:translateX(-50%) !important;
    font-size:16px !important; font-weight:700 !important;
    color:#014A52 !important; max-width:50vw !important;
    white-space:nowrap !important; overflow:hidden !important;
    text-overflow:ellipsis !important; margin:0 !important;
  }
  .page-header .notif-wrapper { margin-left:auto !important; }
  .page-header > div:first-child > p,
  .page-header .page-sub { display:none !important; }
  /* main needs top padding when page-header is fixed */
  .main { padding-top:calc(var(--nav-h) + 14px) !important; }
}

/* ── CHAT / MESSAGES ──────────────────────────────────────── */
@media (max-width: 768px) {

  .chat-layout {
    display:flex !important; flex-direction:column !important;
    overflow:hidden !important; grid-template-columns:unset !important;
    border-radius:0 !important; border:none !important;
    position:relative !important;
    height:calc(100svh - var(--nav-h) - var(--tab-h) - var(--safe-bot)) !important;
    margin-top:var(--nav-h) !important;
  }
  .contacts-sidebar {
    display:flex !important; flex-direction:column !important;
    width:100% !important; height:100% !important;
    border-right:none !important; overflow:hidden !important;
  }
  .contacts-list { flex:1 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; }
  .chat-window {
    display:none !important; flex-direction:column !important;
    position:absolute !important; top:0; left:0; right:0; height:100% !important;
    z-index:10 !important; background:#F8F4EE !important;
  }
  .chat-layout.conversation-open .contacts-sidebar { display:none !important; }
  .chat-layout.conversation-open .chat-window { display:flex !important; }

  .chat-header {
    display:flex !important; align-items:center !important; gap:10px !important;
    padding:10px 14px !important; background:#fff !important;
    border-bottom:1px solid #EDE8E0 !important;
    min-height:54px !important; flex-shrink:0 !important;
  }
  .mobile-chat-back {
    display:flex !important; align-items:center !important;
    justify-content:center !important;
    width:36px !important; height:36px !important;
    border-radius:10px !important; background:#EDE8E0 !important;
    border:none !important; cursor:pointer !important;
    flex-shrink:0 !important; color:#014A52 !important;
    -webkit-tap-highlight-color:transparent !important; min-height:unset !important;
  }
  .chat-messages {
    flex:1 !important; overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:12px 14px !important; display:flex !important;
    flex-direction:column !important; gap:8px !important;
  }
  .msg-bubble-wrap { max-width:80% !important; min-width:60px !important; }
  .msg-bubble { padding:9px 13px !important; font-size:14px !important; line-height:1.5 !important; word-break:break-word !important; white-space:pre-wrap !important; border-radius:16px !important; }
  .chat-input-area {
    flex-shrink:0 !important; padding:10px 12px !important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important;
    background:#fff !important; border-top:1px solid #EDE8E0 !important;
    display:flex !important; align-items:center !important; gap:8px !important;
  }
  .chat-input-area textarea,.chat-input-area input[type="text"] {
    font-size:16px !important; flex:1 !important;
    min-height:40px !important; max-height:120px !important;
    resize:none !important; border-radius:20px !important; padding:10px 14px !important;
  }
  .contact-item { padding:12px 16px !important; min-height:60px !important; cursor:pointer !important; border-bottom:1px solid #F8F4EE !important; }
  .contact-item:active { background:#F0F7F0 !important; }
  .new-chat-btn { margin:10px 14px !important; width:calc(100% - 28px) !important; min-height:44px !important; border-radius:10px !important; font-size:14px !important; }
}

/* ── DIRECTORY & DEPARTMENTS ──────────────────────────────── */
@media (max-width: 768px) {
  .dir-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .dept-filters { overflow-x:auto !important; flex-wrap:nowrap !important; padding-bottom:4px !important; scrollbar-width:none !important; }
  .dept-filters::-webkit-scrollbar { display:none !important; }
  .dept-btn { white-space:nowrap !important; flex-shrink:0 !important; }
}

/* ── CONTROL PANEL ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Control panel tabs — horizontal scroll, beats control-panel.css flex-wrap:wrap */
  .cp-tabs {
    display:flex !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    padding-bottom:4px !important;
    scrollbar-width:none !important;
    gap:4px !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .cp-tabs::-webkit-scrollbar { display:none !important; }
  .cp-tab {
    white-space:nowrap !important;
    flex-shrink:0 !important;
    flex:0 0 auto !important;
  }
  .panel-toolbar { flex-wrap:wrap !important; gap:8px !important; }
  .panel-toolbar .panel-search { width:100% !important; box-sizing:border-box !important; }

  /* Control panel settings cards — full width on mobile */
  #panel-settings > div,
  #panel-settings .settings-card,
  [id^="panel-settings"] > div { max-width:100% !important; }

  /* Fix inputs inside settings cards */
  #panel-settings input[type="url"],
  #panel-settings input[type="email"],
  #panel-settings input[type="text"] {
    width:100% !important;
    box-sizing:border-box !important;
    font-size:16px !important;
  }

  /* Stack save button row on mobile */
  #panel-settings .panel-btn { width:100% !important; margin-bottom:6px !important; }
}

/* ── PROFILE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-header { flex-direction:column !important; align-items:center !important; text-align:center !important; gap:14px !important; }
  .profile-grid { grid-template-columns:1fr !important; gap:12px !important; }
  .profile-field input,.profile-field select { font-size:16px !important; width:100% !important; box-sizing:border-box !important; }
  .profile-actions .btn { width:100% !important; text-align:center !important; }
}

/* ── SMALL PHONE ≤480px ───────────────────────────────────── */
@media (max-width: 480px) {
  .main { padding:12px !important; padding-top:calc(var(--nav-h) + 12px) !important; padding-bottom:calc(var(--tab-h) + var(--safe-bot) + 12px) !important; }
  .card { padding:14px !important; border-radius:12px !important; }
  .kpi-card { padding:12px !important; }
  .kpi-value { font-size:24px !important; }
  .stat-card { padding:12px !important; }
  .stat-value { font-size:22px !important; }
  /* quick-access + hr-qa 480px */
  .quick-access .qa-btn, .hr-qa { font-size:10px !important; padding:12px 6px !important; }
  .hr-qa { font-size:11px !important; padding:9px 12px !important; }
  .spotlight-card { flex-direction:column !important; text-align:center !important; align-items:center !important; }
  .ann-title { font-size:14px !important; }
  .feed-action-btn { font-size:10px !important; padding:6px 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   EXTENDED PAGE-SPECIFIC MOBILE FIXES
   All desktop styles untouched — mobile only below
   ═══════════════════════════════════════════════════════════════ */

/* ── CALENDAR — uses .cal-topbar ─────────────────────────── */
@media (max-width: 768px) {
  .cal-topbar {
    position: fixed !important;
    top: 0; left: 0; right: 0 !important;
    height: var(--nav-h) !important;
    background: #fff !important;
    border-bottom: 1px solid #EDE8E0 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important;
    z-index: 500 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
  }
  .cal-topbar > div:first-child { flex: 1; min-width: 0; }
  .cal-topbar h1, .cal-topbar .page-title {
    position: absolute !important;
    left: 50% !important; transform: translateX(-50%) !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: #014A52 !important; white-space: nowrap !important;
    margin: 0 !important; max-width: 50vw !important;
  }
  .cal-topbar .page-sub { display: none !important; }
  .cal-topbar-actions { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 6px !important; }

  /* Calendar layout stacks on mobile */
  .cal-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-template-columns: unset !important;
  }
  /* Calendar grid — shrink day cells */
  .cal-day { min-height: 44px !important; padding: 4px 3px !important; font-size: 11px !important; }
  .cal-day-num { font-size: 11px !important; }
  .cal-event { font-size: 9px !important; padding: 1px 3px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .cal-nav { gap: 8px !important; }
  .cal-month { font-size: 15px !important; }
  /* Add task button — above tab bar */
  #openAddModal {
    position: fixed !important;
    bottom: calc(var(--tab-h) + var(--safe-bot) + 14px) !important;
    right: 16px !important;
    z-index: 490 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(1,100,109,0.35) !important;
  }
}

/* ── LESSONS — inline padding:32px override + page-header-row ── */
@media (max-width: 768px) {
  /* Beat the inline style="padding:32px" */
  main.main[style*="padding"] {
    padding: 16px 14px !important;
    padding-top: calc(var(--nav-h) + 14px) !important;
    padding-bottom: calc(var(--tab-h) + var(--safe-bot) + 14px) !important;
  }
  .page-header-row {
    position: fixed !important;
    top: 0; left: 0; right: 0 !important;
    height: var(--nav-h) !important;
    background: #fff !important;
    border-bottom: 1px solid #EDE8E0 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important;
    z-index: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    margin-bottom: 0 !important;
    gap: 10px !important;
  }
  .page-header-row h1, .page-header-row .page-title {
    position: absolute !important;
    left: 50% !important; transform: translateX(-50%) !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: #014A52 !important; white-space: nowrap !important; margin: 0 !important;
  }
  .page-header-row > div { margin-left: auto !important; }
  /* Lesson cards */
  .lesson-card { padding: 14px !important; border-radius: 14px !important; margin-bottom: 10px !important; }
  .lesson-card-header { flex-wrap: wrap !important; gap: 6px !important; }
  /* Filter row */
  .filter-row {
    display: flex !important; overflow-x: auto !important;
    flex-wrap: nowrap !important; gap: 6px !important;
    padding-bottom: 4px !important; scrollbar-width: none !important;
  }
  .filter-row::-webkit-scrollbar { display: none !important; }
}

/* ── ANNOUNCEMENT-DETAIL — no topbar, add back-link as header ── */
@media (max-width: 768px) {
  /* The bell + back-link row at top becomes our navbar */
  .detail-back {
    position: fixed !important;
    top: 0; left: 0; right: 0 !important;
    height: var(--nav-h) !important;
    background: #fff !important;
    border-bottom: 1px solid #EDE8E0 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important;
    z-index: 500 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
  }
  .back-link {
    font-size: 14px !important; font-weight: 600 !important;
    color: #01646D !important; text-decoration: none !important;
  }
  /* Hide the inline notif div at top (bell is in fixed detail-back now replaced) */
  .main > div:first-child { display: none !important; }
  /* Detail content */
  .detail-content, #detailContent { padding-top: 8px !important; }
  .detail-title { font-size: 20px !important; line-height: 1.3 !important; }
  .detail-meta { flex-wrap: wrap !important; gap: 6px !important; font-size: 12px !important; }
  .detail-body { font-size: 14px !important; line-height: 1.7 !important; }
}

/* ── CREATE-ANNOUNCEMENT — same pattern as detail ─────────── */
@media (max-width: 768px) {
  .form-back {
    position: fixed !important;
    top: 0; left: 0; right: 0 !important;
    height: var(--nav-h) !important;
    background: #fff !important;
    border-bottom: 1px solid #EDE8E0 !important;
    z-index: 500 !important;
    display: flex !important; align-items: center !important;
    padding: 0 14px !important;
  }
  /* Hide inline bell row */
  .main > div[style*="justify-content:space-between"]:first-child,
  .main > div[style*="justify-content: space-between"]:first-child { display: none !important; }
  .form-card { border-radius: 14px !important; padding: 16px !important; }
  .form-title { font-size: 18px !important; }
  .form-group input, .form-group select, .form-group textarea {
    font-size: 16px !important; width: 100% !important; box-sizing: border-box !important;
  }
}

/* ── EMPLOYEES — uses .emp-page-header ───────────────────── */
@media (max-width: 768px) {
  .emp-wrap { padding: 0 !important; }
  .emp-page-header {
    position: fixed !important;
    top: 0; left: 0; right: 0 !important;
    height: var(--nav-h) !important;
    background: #fff !important;
    border-bottom: 1px solid #EDE8E0 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important;
    z-index: 500 !important;
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important; gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .emp-page-header h1, .emp-page-header .page-title {
    position: absolute !important; left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: #014A52 !important; white-space: nowrap !important; margin: 0 !important;
  }
  .emp-page-header .notif-wrapper { margin-left: auto !important; }
  /* Employee list items */
  .emp-row { flex-wrap: wrap !important; gap: 6px !important; padding: 10px 0 !important; }
  /* Drawer */
  .drawer { width: 100% !important; max-width: 100% !important; }
}

/* ── CATEGORIES — uses .wrap with h1 inside ──────────────── */
@media (max-width: 768px) {
  .wrap > h1.page-title,
  .wrap > .page-title:first-child {
    position: fixed !important;
    top: 0; left: 0; right: 0 !important;
    height: var(--nav-h) !important;
    background: #fff !important;
    border-bottom: 1px solid #EDE8E0 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important;
    z-index: 500 !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: #014A52 !important; margin: 0 !important;
    padding: 0 14px !important;
  }
  .wrap > .page-sub { display: none !important; }
  .wrap { padding-top: calc(var(--nav-h) + 14px) !important; }
  .add-row { flex-direction: column !important; gap: 8px !important; }
  .add-input { width: 100% !important; font-size: 16px !important; }
  .add-btn { width: 100% !important; min-height: 44px !important; }
}

/* ── DOCUMENT-VIEWER — uses .viewer-topbar ───────────────── */
@media (max-width: 768px) {
  .viewer-topbar {
    padding: 10px 14px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .viewer-title { font-size: 13px !important; }
  .viewer-badge { display: none !important; }
  .no-download-notice { display: none !important; }
  .viewer-back { font-size: 12px !important; }
  /* Viewer content */
  .viewer-body { padding: 12px !important; }
  iframe[style], embed[style], object[style] {
    width: 100% !important; height: calc(100svh - 54px) !important;
  }
}

/* ── PROFILE-VIEW — uses .profile-wrap + .profile-back btn ── */
@media (max-width: 768px) {
  .profile-wrap { padding: 0 !important; }
  .profile-back {
    position: fixed !important;
    top: 0; left: 0; right: 0 !important;
    height: var(--nav-h) !important;
    background: #fff !important;
    border-bottom: 1px solid #EDE8E0 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important;
    z-index: 500 !important;
    display: flex !important; align-items: center !important;
    padding: 0 14px !important; gap: 8px !important;
    font-size: 14px !important; font-weight: 600 !important;
    color: #01646D !important; cursor: pointer !important;
    background-color: #fff !important;
    border-radius: 0 !important; width: 100% !important;
    border-left: none !important; border-right: none !important;
    border-top: none !important; text-align: left !important;
    min-height: unset !important;
  }
  #profileContent { padding-top: calc(var(--nav-h) + 14px) !important; }
  .profile-info-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .profile-avatar-section { flex-direction: column !important; align-items: center !important; text-align: center !important; }
}

/* ── TRACKING — uses inline .page-header div ─────────────── */
@media (max-width: 768px) {
  /* tracking has .page-header as a regular div, not a fixed header */
  /* It gets covered by our global .page-header fixed rule */
  .tracking-grid, .analytics-grid-tracking {
    grid-template-columns: 1fr !important; gap: 12px !important;
  }
  /* Analytics-modern charts on tracking */
  .metric-card { padding: 14px !important; border-radius: 14px !important; }
  .metric-value { font-size: 26px !important; }
  .chart-container { height: 160px !important; }
}

/* ── USER-MANAGEMENT — uses inline .page-header div ─────── */
@media (max-width: 768px) {
  .user-mgmt-grid, [class*="user"][class*="grid"] {
    grid-template-columns: 1fr !important;
  }
  .user-row { flex-wrap: wrap !important; gap: 6px !important; padding: 10px 0 !important; }
  .user-actions { flex-wrap: wrap !important; gap: 6px !important; }
}

/* ── WAITING PAGE — special standalone ───────────────────── */
@media (max-width: 768px) {
  /* waiting.html has its own topbar div, no sidebar, no tab bar */
  .waiting-container {
    padding: 20px 16px !important;
    max-width: 100% !important;
  }
  .waiting-title { font-size: 20px !important; }
  .waiting-subtitle { font-size: 13px !important; }
}

/* ── LOGIN & REGISTER — centred form pages ───────────────── */
@media (max-width: 768px) {
  /* Login/register use their own CSS, just ensure form fits */
  .card { margin: 16px !important; width: calc(100% - 32px) !important; }
  .card-body { padding: 24px 20px !important; }
  .card-header { padding: 20px !important; }
  .card-header h1 { font-size: 22px !important; }
  .form-group input { font-size: 16px !important; }
}

/* ── GLOBAL: all inline padding overrides on main ───────── */
@media (max-width: 768px) {
  /* Any main with inline padding — override it */
  main[style*="padding"] {
    padding: 16px 14px !important;
    padding-top: calc(var(--nav-h) + 14px) !important;
    padding-bottom: calc(var(--tab-h) + var(--safe-bot) + 14px) !important;
  }
  /* Any page-header defined as inline div style */
  div.page-header {
    position: fixed !important;
    top: 0; left: 0; right: 0 !important;
    height: var(--nav-h) !important;
    background: #fff !important;
    border-bottom: 1px solid #EDE8E0 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important;
    z-index: 500 !important;
    display: flex !important; align-items: center !important;
    padding: 0 14px !important; gap: 10px !important;
    flex-wrap: nowrap !important; margin-bottom: 0 !important;
  }
  div.page-header h1, div.page-header .page-title {
    font-size: 16px !important; font-weight: 700 !important;
    color: #014A52 !important; white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    max-width: 50vw !important; margin: 0 !important;
    flex: 1 !important; text-align: center !important;
  }
  div.page-header p, div.page-header .page-sub { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE DASHBOARD REDESIGN
   Revolutionary mobile experience — desktop 100% untouched
   ═══════════════════════════════════════════════════════════════ */

/* ── STAT COMMAND STRIP — horizontal scroll chips ────────── */
@media (max-width: 768px) {
  .stats-row {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 4px 2px 10px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    grid-template-columns: unset !important;
  }
  .stats-row::-webkit-scrollbar { display: none !important; }

  .stat-card {
    flex: 0 0 140px !important;
    min-width: 140px !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
    background: #fff !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  /* Accent left border as coloured strip */
  .stat-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; bottom: 0;
    width: 4px !important;
    background: #01646D !important;
    border-radius: 0 !important;
  }
  .stat-card:nth-child(2)::before { background: #4A90D9 !important; }
  .stat-card:nth-child(3)::before { background: #E67E22 !important; }
  .stat-card:nth-child(4)::before { background: #9B59B6 !important; }

  .stat-value {
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
    color: #014A52 !important;
  }
  .stat-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #2D2D2D !important;
    margin-bottom: 2px !important;
  }
  .stat-sub {
    font-size: 10px !important;
    color: #A09080 !important;
    font-weight: 500 !important;
  }
}

/* ── KPI CARDS — enhanced on mobile ─────────────────────── */
@media (max-width: 768px) {
  .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    overflow: visible !important;
  }
  .kpi-card {
    padding: 16px 14px !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
  }
  .kpi-card::before { height: 4px !important; }
  .kpi-value { font-size: 30px !important; font-weight: 800 !important; }
  .kpi-label { font-size: 10px !important; letter-spacing: 0.4px !important; }
  .kpi-icon {
    width: 36px !important; height: 36px !important;
    border-radius: 10px !important; margin-bottom: 10px !important;
  }
  .kpi-delta { font-size: 10px !important; padding: 2px 6px !important; margin-top: 6px !important; }
}

/* ── QUICK ACTIONS — app icon grid ──────────────────────── */
@media (max-width: 768px) {
  .quick-access {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
  }

  .quick-access .qa-btn,
  .quick-access button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 16px !important;
    min-height: 72px !important;
    background: #fff !important;
    border: 1.5px solid #EDE8E0 !important;
    color: #014A52 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
    -webkit-tap-highlight-color: transparent !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .quick-access .qa-btn:active,
  .quick-access button:active {
    transform: scale(0.94) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  }

  /* Primary action button */
  .quick-access .qa-btn.qa-green,
  .quick-access .qa-btn.qa-primary {
    background: #01646D !important;
    color: #fff !important;
    border-color: #01646D !important;
  }

  /* Icon inside button — make bigger */
  .quick-access .qa-btn svg,
  .quick-access button svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ── HR QUICK ACTIONS — 3-col icon grid (same as quick-access) ── */
@media (max-width: 768px) {
  .hr-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
    flex-wrap: unset !important;
  }

  .hr-qa {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 16px !important;
    min-height: 72px !important;
    background: #fff !important;
    border: 1.5px solid #EDE8E0 !important;
    color: #014A52 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
  }

  .hr-qa:active {
    transform: scale(0.94) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  }

  .hr-qa.qa-primary {
    background: #01646D !important;
    color: #fff !important;
    border-color: #01646D !important;
  }

  .hr-qa svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }
}

/* ── CHART CAROUSEL — swipeable, snap, full width ────────── */
@media (max-width: 768px) {
  /* Wrapper injected by JS around chart cards */
  .mobile-chart-carousel {
    position: relative !important;
    margin-bottom: 20px !important;
  }

  .mobile-chart-track {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    padding: 4px 2px 12px !important;
  }
  .mobile-chart-track::-webkit-scrollbar { display: none !important; }

  .mobile-chart-track .chart-card {
    flex: 0 0 calc(100% - 4px) !important;
    min-width: calc(100% - 4px) !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    border-radius: 18px !important;
    padding: 18px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.09) !important;
    box-sizing: border-box !important;
  }

  /* Canvas inside carousel card — always visible, full height */
  .mobile-chart-track .chart-card canvas,
  .mobile-chart-track .chart-card [style*="height:200px"],
  .mobile-chart-track .chart-card [style*="height: 200px"],
  .mobile-chart-track .chart-card div[style*="height:"] {
    display: block !important;
    height: 200px !important;
    width: 100% !important;
  }

  /* Dot indicators */
  .mobile-chart-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 4px 0 8px !important;
  }
  .mobile-chart-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #D0C8BE !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
  }
  .mobile-chart-dot.active {
    background: #01646D !important;
    width: 18px !important;
    border-radius: 3px !important;
  }

  /* Chart card header inside carousel */
  .mobile-chart-track .chart-card-header {
    margin-bottom: 12px !important;
  }
  .mobile-chart-track .chart-card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  .mobile-chart-track .chart-card-sub {
    font-size: 11px !important;
    margin-top: 2px !important;
  }

  /* Lesson KPI 4-col inline grid → 2×2 */
  div[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns: repeat(4"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Side-by-side grids → single column */
  div[style*="grid-template-columns:2fr"],
  div[style*="grid-template-columns: 2fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── MOBILE GREETING CARD ────────────────────────────────── */
@media (max-width: 768px) {
  .mobile-greeting-card {
    background: linear-gradient(135deg, #01646D 0%, #014A52 100%) !important;
    border-radius: 20px !important;
    padding: 20px 18px !important;
    margin-bottom: 16px !important;
    color: #fff !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 6px 24px rgba(1,100,109,0.35) !important;
  }
  .mobile-greeting-card::after {
    content: '' !important;
    position: absolute !important;
    top: -30px; right: -30px !important;
    width: 120px; height: 120px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.06) !important;
  }
  .mobile-greeting-name {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
    color: #fff !important;
  }
  .mobile-greeting-role {
    font-size: 12px !important;
    color: rgba(255,255,255,0.7) !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
  }
  .mobile-greeting-date {
    font-size: 11px !important;
    color: rgba(255,255,255,0.55) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  .mobile-greeting-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(255,255,255,0.15) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-top: 10px !important;
  }

  /* Hide the default topbar greeting on mobile — replaced by greeting card */
  .topbar-greeting { display: none !important; }
}

/* ── CARD POLISH ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* All content cards */
  .card, .chart-card {
    border-radius: 18px !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07) !important;
  }
  /* Card title styling */
  .card-title, .chart-card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
  }
  /* Section spacing */
  .dashboard-grid { gap: 14px !important; }
}

/* ── CAROUSEL MOUSE DRAG (desktop) ──────────────────────── */
.mobile-chart-track {
  cursor: grab;
  user-select: none;
}
.mobile-chart-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none !important;
}