/* 1995 FOOD & BEER — Admin Mobile UI v2.0.3
   Mobile-only layer. Desktop >= 768px remains unchanged. */
@media (max-width: 767px) {
  html, body, #root {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: #f4f7fb;
  }

  /* On admin mobile, ManagerLayout becomes the single app chrome. */
  header:has(+ .admin-shell) {
    display: none !important;
  }

  .admin-shell {
    display: block !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #f4f7fb !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;
  }

  /* Compact one-handed top bar: hamburger + current section only. */
  .admin-mobile-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 45 !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px !important;
    min-height: calc(60px + env(safe-area-inset-top, 0px));
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.07) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .admin-mobile-toolbar > div {
    min-height: 44px;
    gap: 10px !important;
  }
  .admin-mobile-menu-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    justify-content: center !important;
    background: #0f172a !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.15) !important;
  }
  .admin-mobile-menu-button > span { display: none !important; }
  .admin-mobile-menu-button svg { width: 20px !important; height: 20px !important; }

  .admin-mobile-current-tab {
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
  }
  .admin-mobile-current-tab > button {
    display: none !important;
  }
  .admin-mobile-current-tab > button[class*="bg-blue-600"] {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 0 8px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    box-shadow: none !important;
    ring: 0 !important;
    pointer-events: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
  }
  .admin-mobile-current-tab > button[class*="bg-blue-600"] svg {
    width: 20px !important;
    height: 20px !important;
    color: #2563eb !important;
  }
  .admin-mobile-current-tab > button[class*="bg-blue-600"] > span:not(:first-of-type) {
    font-size: 10px !important;
    background: #dbeafe !important;
    color: #1d4ed8 !important;
  }

  /* Drawer: bigger tap targets, safe area, cleaner density. */
  .admin-mobile-drawer {
    width: min(88vw, 340px) !important;
    max-width: min(88vw, 340px) !important;
    background: #081827 !important;
    box-shadow: 20px 0 60px rgba(2,6,23,.35) !important;
  }
  .admin-mobile-drawer > div:first-child {
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 14px !important;
  }
  .admin-mobile-drawer nav {
    padding: 12px !important;
    display: grid !important;
    gap: 4px !important;
  }
  .admin-mobile-drawer nav button {
    min-height: 48px !important;
    border-radius: 14px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }
  .admin-mobile-drawer nav button svg { width: 18px !important; height: 18px !important; }
  .admin-mobile-drawer > div:last-child {
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .admin-mobile-drawer > div:last-child button {
    min-height: 46px !important;
    font-size: 13px !important;
  }

  /* Main content canvas. */
  .admin-main {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  .admin-main > div > :not([hidden]) ~ :not([hidden]) {
    margin-top: 12px !important;
  }

  /* Card rhythm on mobile. */
  .admin-main .bg-white.rounded-2xl,
  .admin-main .bg-white.rounded-3xl {
    border-radius: 16px !important;
    box-shadow: 0 3px 12px rgba(15,23,42,.045) !important;
  }
  .admin-main .bg-white.p-5,
  .admin-main .bg-white.p-6,
  .admin-main .bg-white[class*="p-5"],
  .admin-main .bg-white[class*="p-6"] {
    padding: 14px !important;
  }
  .admin-main h2 {
    font-size: 16px !important;
    line-height: 1.35 !important;
    letter-spacing: -.015em !important;
  }
  .admin-main h3 { line-height: 1.35 !important; }
  .admin-main p { line-height: 1.45 !important; }

  /* Form controls: 16px prevents iOS zoom; 46px tap target. */
  .admin-main input,
  .admin-main select,
  .admin-main textarea {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    border-radius: 12px !important;
  }
  .admin-main input:not([type="checkbox"]):not([type="radio"]),
  .admin-main select {
    min-height: 46px !important;
  }
  .admin-main textarea { min-height: 88px !important; }
  .admin-main button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Primary page actions become full-width and easy to tap. */
  .admin-main > div > div:first-child > button,
  .admin-main > div > div:first-child > div:last-child > button {
    min-height: 44px;
  }

  /* Filter/chip rows: horizontal scroll instead of crushed buttons. */
  .admin-main .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-main .overflow-x-auto::-webkit-scrollbar { display: none; }
  .admin-main .bg-slate-100.p-1.rounded-xl,
  .admin-main .bg-white.p-2\.5.rounded-2xl {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap;
  }

  /* Employees: search/filter and action cards. */
  .admin-main .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    gap: 10px !important;
  }
  .admin-main .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > div {
    border-radius: 16px !important;
  }
  .admin-main .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > div > div:last-child button {
    min-height: 40px !important;
  }

  /* Shifts: compact cards while keeping content readable. */
  .admin-main .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > div[class*="cursor-pointer"] {
    padding: 14px !important;
  }

  /* Modal -> bottom sheet on phones. */
  .admin-main .fixed.inset-0[class*="z-50"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .admin-main .fixed.inset-0[class*="z-50"] > .bg-white {
    width: 100% !important;
    max-width: none !important;
    max-height: min(92dvh, 820px) !important;
    overflow-y: auto !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    border-bottom: 0 !important;
    animation: none !important;
  }
  .admin-main .fixed.inset-0[class*="z-50"] form .grid-cols-2,
  .admin-main .fixed.inset-0[class*="z-50"] form .grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .admin-main .fixed.inset-0[class*="z-50"] form > div:last-child {
    position: sticky;
    bottom: calc(-16px - env(safe-area-inset-bottom, 0px));
    z-index: 2;
    background: rgba(255,255,255,.97);
    margin-left: -16px !important;
    margin-right: -16px !important;
    margin-bottom: calc(-16px - env(safe-area-inset-bottom, 0px)) !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid #e2e8f0 !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .admin-main .fixed.inset-0[class*="z-50"] form > div:last-child button {
    min-height: 44px !important;
    flex: 1 1 0 !important;
    justify-content: center !important;
  }

  /* Common large tables become labeled cards; no horizontal panning. */
  .admin-main .admin-mobile-table {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
  .admin-main .admin-mobile-table thead { display: none !important; }
  .admin-main .admin-mobile-table tbody {
    display: grid !important;
    gap: 10px !important;
    padding: 10px !important;
    background: #f8fafc;
  }
  .admin-main .admin-mobile-table tbody tr {
    display: block !important;
    width: 100% !important;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 7px rgba(15,23,42,.035) !important;
  }
  .admin-main .admin-mobile-table tbody td {
    display: flex !important;
    width: 100% !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 7px 0 !important;
    border: 0 !important;
    text-align: right !important;
    white-space: normal !important;
  }
  .admin-main .admin-mobile-table tbody td::before {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    text-align: left;
  }
  .admin-main .admin-mobile-table tbody td[colspan] {
    display: block !important;
    text-align: center !important;
    padding: 28px 12px !important;
  }
  .admin-main .admin-mobile-table tbody td[colspan]::before { display: none !important; }
  .admin-main .admin-mobile-table tbody td:nth-child(1) { display: none !important; }
  .admin-main .admin-mobile-table tbody td:nth-child(2) {
    display: block !important;
    min-height: 0 !important;
    text-align: left !important;
    padding: 0 0 10px !important;
    margin-bottom: 2px;
    border-bottom: 1px solid #eef2f7 !important;
  }
  .admin-main .admin-mobile-table tbody td:nth-child(2)::before { display: none !important; }

  /* Dashboard attendance table labels. */
  .admin-dashboard-table td:nth-child(3)::before { content: "Vai trò"; }
  .admin-dashboard-table td:nth-child(4)::before { content: "Ca làm"; }
  .admin-dashboard-table td:nth-child(5)::before { content: "Giờ vào"; }
  .admin-dashboard-table td:nth-child(6)::before { content: "Giờ ra"; }
  .admin-dashboard-table td:nth-child(7)::before { content: "Tổng giờ"; }
  .admin-dashboard-table td:nth-child(8)::before { content: "Trạng thái"; }
  .admin-dashboard-table td:nth-child(9)::before { content: "Vị trí"; }
  .admin-dashboard-table td:nth-child(10)::before { content: "Thao tác"; }
  .admin-dashboard-table td:nth-child(10) button { min-width: 42px; min-height: 40px; }

  /* Daily attendance labels. */
  .admin-attendance-table td:nth-child(3)::before { content: "Trạng thái"; }
  .admin-attendance-table td:nth-child(4)::before { content: "Ca làm"; }
  .admin-attendance-table td:nth-child(5)::before { content: "Giờ vào"; }
  .admin-attendance-table td:nth-child(6)::before { content: "Giờ ra"; }
  .admin-attendance-table td:nth-child(7)::before { content: "Tổng giờ"; }
  .admin-attendance-table td:nth-child(8)::before { content: "Vị trí"; }
  .admin-attendance-table td:nth-child(9)::before { content: "Ghi chú"; }

  /* Payroll cards: surface only what matters, but keep every value accessible. */
  .admin-payroll-table td:nth-child(3)::before { content: "Vai trò"; }
  .admin-payroll-table td:nth-child(4)::before { content: "Lương giờ"; }
  .admin-payroll-table td:nth-child(5)::before { content: "Số giờ"; }
  .admin-payroll-table td:nth-child(6)::before { content: "Tiền theo giờ"; }
  .admin-payroll-table td:nth-child(7)::before { content: "Thưởng"; }
  .admin-payroll-table td:nth-child(8)::before { content: "Tăng ca"; }
  .admin-payroll-table td:nth-child(9)::before { content: "Phạt"; }
  .admin-payroll-table td:nth-child(10)::before { content: "Tạm ứng"; }
  .admin-payroll-table td:nth-child(11)::before { content: "Thực nhận"; }
  .admin-payroll-table td:nth-child(12)::before { content: "Thao tác"; }
  .admin-payroll-table td:nth-child(11) {
    margin-top: 3px;
    padding-top: 10px !important;
    border-top: 1px dashed #cbd5e1 !important;
  }
  .admin-payroll-table td:nth-child(12) {
    display: block !important;
    padding-top: 10px !important;
    border-top: 1px solid #eef2f7 !important;
    text-align: left !important;
  }
  .admin-payroll-table td:nth-child(12)::before {
    display: block !important;
    margin-bottom: 8px;
  }
  .admin-payroll-table td:nth-child(12) > div {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  .admin-payroll-table td:nth-child(12) button { min-height: 40px !important; }

  /* Reports employee table labels. */
  .admin-reports-table td:nth-child(3)::before { content: "Bộ phận"; }
  .admin-reports-table td:nth-child(4)::before { content: "Ngày công"; }
  .admin-reports-table td:nth-child(5)::before { content: "Tổng giờ"; }
  .admin-reports-table td:nth-child(6)::before { content: "TB/ngày"; }
  .admin-reports-table td:nth-child(7)::before { content: "Trễ / Sớm"; }
  .admin-reports-table td:nth-child(8)::before { content: "Lương kỳ"; }

  /* Requests: actions at bottom, full-width tap targets. */
  .admin-main .space-y-3\.5 > .bg-white.p-5 {
    padding: 14px !important;
    gap: 12px !important;
  }
  .admin-main .space-y-3\.5 > .bg-white.p-5 > div:last-child button {
    min-height: 44px !important;
  }

  /* Reports/dashboard charts: avoid overflow and excessive height. */
  .admin-main .h-56 { height: 190px !important; }
  .admin-main .h-52 { height: 180px !important; }
  .admin-main svg { max-width: 100%; }

  /* Settings save bar and general bottom actions. */
  .admin-main .border-t.flex.items-center.justify-end > button,
  .admin-main .border-t.border-slate-100.flex.items-center.justify-end > button {
    min-height: 44px !important;
  }

  /* Compact informational footer rows to avoid mobile overflow. */
  .admin-main .border-t.border-slate-100.flex.items-center.justify-between {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
}

/* Very narrow phones (320–374px): reduce card padding, preserve touch size. */
@media (max-width: 374px) {
  .admin-main { padding: 9px !important; }
  .admin-main .bg-white.p-5,
  .admin-main .bg-white.p-6,
  .admin-main .bg-white[class*="p-5"],
  .admin-main .bg-white[class*="p-6"] { padding: 12px !important; }
  .admin-mobile-toolbar { padding-left: 9px !important; padding-right: 9px !important; }
  .admin-mobile-current-tab > button[class*="bg-blue-600"] { font-size: 15px !important; }
}