/* Phone layout for the existing dashboard. All business content stays in the
 * original DOM so the same API, permission and action handlers serve both sizes. */
.mobile-more, .mobile-local-nav, .mobile-group-opener,
.mobile-group-close, .mobile-row-toggle, .mobile-top-title, .mobile-source { display: none; }
@media (max-width: 767px) {
  html { scroll-padding-top: 72px; }
  body { min-width: 0; overflow-x: hidden; }
  button, a, input, select, textarea { touch-action: manipulation; }
  button, .button-link, .side-nav a { min-height: 44px; }
  input, select, textarea { font-size: 16px; max-width: 100%; }
  .layout { display: block; min-height: 100dvh; }
  .sidebar { display: none !important; }
  .workspace { margin: 0; width: 100%; min-width: 0; }
  .topbar {
    position: sticky; top: 0; z-index: 30;
    min-height: calc(56px + env(safe-area-inset-top)); height: auto;
    padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
    flex-direction: row; align-items: center;
    background: #102a38; color: #fff; border: 0;
    box-shadow: 0 2px 12px #102a3820;
  }
  .topbar .breadcrumbs { display: none; }
  .mobile-top-title { display: block; min-width: 0; margin-right: auto; color: #fff; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
  .topbar .top-actions { display: none; }
  .mobile-more { display: inline-flex; flex: none; color: #fff; border: 1px solid #ffffff4a; background: #ffffff16; border-radius: 9px; padding: 8px 12px; }
  .content, .admin-content {
    width: 100%; max-width: none; min-width: 0;
    padding: 18px 16px calc(112px + env(safe-area-inset-bottom));
  }
  .content > * { min-width: 0; }
  .page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
  body[data-role=boss] .page-head > div:first-child,
  body[data-role=manager] .page-head > div:first-child,
  body[data-role=employee] .page-head > div:first-child { display: none; }
  .mobile-source { display: block; flex: 1 1 160px; min-width: 0; order: 1; }
  .mobile-source summary {
    display: flex; align-items: center; min-height: 44px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 9px;
    color: var(--sub); background: var(--panel); font-size: 12px; cursor: pointer;
  }
  .mobile-source summary::before { content: 'ⓘ'; margin-right: 5px; color: var(--green); font-size: 15px; }
  .mobile-source[open] summary { border-color: var(--green); color: var(--green); }
  .mobile-source p {
    display: block; margin: 8px 0 0; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--panel); color: var(--sub); font-size: 12px; line-height: 1.6;
  }
  .page-head h1 { font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
  .page-head p { font-size: 13px; line-height: 1.65; }
  .head-actions { margin: 0; flex: 0 1 auto; order: 2; flex-wrap: wrap; }
  .head-actions button { min-height: 44px; }
  .panel, .employee-hero, .focus-section {
    min-width: 0; border-radius: 12px; margin-bottom: 14px;
  }
  .panel { padding: 16px; }
  .panel-head { align-items: flex-start; gap: 10px; flex-wrap: wrap; }
  .panel-head h2, .focus-heading h2 { font-size: 17px; line-height: 1.35; }
  .panel-head p, .focus-heading p, .muted.small { line-height: 1.6; }
  .metrics, .focus-metrics, .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .metric, .focus-empty, .focus-card { min-width: 0; padding: 13px; border-radius: 12px; }
  .metric-label { white-space: normal; overflow-wrap: anywhere; }
  .metric-value { font-size: clamp(21px, 6vw, 28px); overflow-wrap: anywhere; }
  .metric-value small { font-size: 11px; margin-left: 3px; }
  .metric-foot { overflow-wrap: anywhere; line-height: 1.5; }
  body[data-role=boss] .report-metrics .metric-value { font-size: clamp(18px, 5vw, 24px); white-space: normal; }
  .two-col, .connected-grid { display: grid; grid-template-columns: 1fr !important; gap: 12px; }
  .process-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .process, .flow-card, .workload-tab { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .process { padding: 13px; }
  .process-title, .binding-process .process-title { white-space: normal; overflow-wrap: anywhere; }
  .flow-scroll { overflow: visible; }
  .flow { display: flex; flex-direction: column; width: 100%; min-width: 0; gap: 5px; }
  .flow-card { width: 100%; }
  .flow .branch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .flow-arrow { width: 100%; height: 18px; display: grid; place-items: center; }
  .flow-arrow svg { display: none; }
  .flow-arrow::before { content: '↓'; color: var(--green); font-size: 20px; line-height: 1; }
  .toolbar { overflow-x: auto; flex-wrap: nowrap; padding: 2px 0 10px; scrollbar-width: thin; }
  .toolbar > button { flex: none; min-height: 44px; }
  .report-controls form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .report-controls form label, .report-controls form input { grid-column: 1 / -1; width: 100%; }
  .report-controls .report-picker-anchor { grid-column: 1 / -1; width: 100%; }
  .report-controls .report-picker { position: fixed; inset: auto 12px calc(70px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: min(520px, 72dvh); }
  .report-controls form button { min-width: 0; white-space: normal; }
  .report-controls input[type=date], .report-controls input[type=month] { font-size: 16px; }
  .report-tabs, .admin-tabs, .mobile-local-nav {
    position: fixed; inset: auto 0 0; z-index: 40;
    display: flex; gap: 2px; width: 100%;
    margin: 0; padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
    background: #102a38; color: #d5e5eb;
    box-shadow: 0 -4px 16px #102a3826;
  }
  .report-tabs button, .admin-tabs button, .mobile-local-nav button {
    flex: 1 1 0; min-width: 0; min-height: 52px;
    display: grid; place-content: center; justify-items: center;
    gap: 2px; padding: 5px 2px; border: 0; border-radius: 9px;
    color: inherit; background: transparent; font-size: 12px;
    white-space: normal; text-align: center;
  }
  .report-tabs button.active, .admin-tabs button.active, .mobile-local-nav button[aria-current=page] {
    color: #eafff4; background: #1d514f;
  }
  .report-tabs .icon { width: 18px; height: 18px; }
  .admin-mobile-nav { display: none; }
  .mobile-menu {
    position: fixed; inset: auto 0 0; width: 100%; max-width: none;
    max-height: min(82dvh, 720px); margin: 0; overflow: auto;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
    border: 0; border-radius: 20px 20px 0 0;
    background: var(--panel); color: var(--ink);
  }
  .mobile-menu::backdrop { background: #0d24349c; }
  .mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .mobile-menu-heading strong { font-size: 18px; }
  .mobile-menu nav, .mobile-menu-actions { display: grid; gap: 8px; }
  .mobile-menu nav a, .mobile-menu-actions > * {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
    min-height: 44px; white-space: normal; overflow-wrap: anywhere;
  }
  .mobile-menu nav a.active { color: var(--green); border-color: var(--green); background: var(--green-soft); }
  .mobile-menu nav a .icon { flex: none; }
  .mobile-menu-actions { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
  .mobile-menu-actions button { justify-content: flex-start; text-align: left; }
  .mobile-menu-actions .auth-user { max-width: none; }

  .table-scroll { width: 100%; max-width: 100%; overflow: visible; }
  table.mobile-card-table, .mobile-card-table tbody { display: block; width: 100%; min-width: 0; }
  .mobile-card-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .mobile-card-table tbody tr {
    display: block; width: 100%; margin: 0 0 10px;
    padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--panel); box-shadow: var(--shadow);
  }
  .mobile-card-table tbody tr:last-child { margin-bottom: 0; }
  .mobile-card-table tbody td {
    display: grid; grid-template-columns: minmax(82px, 32%) minmax(0, 1fr);
    gap: 8px; width: 100%; max-width: none; min-width: 0;
    padding: 8px 0; border: 0; border-bottom: 1px solid var(--line);
    white-space: normal; overflow-wrap: anywhere; text-align: left;
    font-size: 13px; line-height: 1.5;
  }
  .mobile-card-table tbody td:last-child { border-bottom: 0; }
  .mobile-card-table tbody td::before {
    content: attr(data-mobile-label); color: var(--sub); font-size: 12px;
    font-weight: 500; line-height: 1.5;
  }
  .mobile-card-table tbody td:first-child { font-weight: 650; color: var(--ink); }
  .mobile-card-table tbody td:first-child::before { color: var(--green); }
  .mobile-card-table tbody td small { display: block; grid-column: 2; font-weight: 400; color: var(--sub); }
  .mobile-card-table tbody td button { min-height: 44px; white-space: normal; text-align: left; }
  .mobile-card-table .mobile-message-row td {
    display: block; padding: 12px 0; text-align: center; border: 0;
  }
  .mobile-card-table .mobile-message-row td::before { display: none; }
  .mobile-card-table .mobile-task-row:not(.mobile-expanded) td:not(:first-child):not(:nth-child(2)):not(.mobile-priority) { display: none; }
  .mobile-row-toggle {
    display: block; grid-column: 2; margin-top: 5px;
    color: var(--green); border: 0; background: transparent;
    padding: 6px 0; font-size: 12px; text-decoration: underline;
  }
  .mobile-card-table .row-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .mobile-card-table .row-detail-actions::before { flex-basis: 100%; }
  .mobile-card-table .row-detail-actions button { flex: 1; }
  .report-pager, .printing-pager { gap: 9px; align-items: stretch; }
  .report-pager > div, .printing-pager > div { width: 100%; }
  .report-pager button, .printing-pager button { flex: 1; min-height: 44px; }
  .order-list-panel, #details, #current { scroll-margin-top: 76px; }

  #modal, #admin-dialog, #admin-confirm, #auth-password-dialog, .feedback-dialog {
    position: fixed; inset: 0; width: 100vw; max-width: none;
    height: 100dvh; max-height: 100dvh; margin: 0;
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
    border: 0; border-radius: 0; background: var(--bg); color: var(--ink);
    overflow-y: auto; overscroll-behavior: contain;
  }
  #modal::backdrop, #admin-dialog::backdrop, #admin-confirm::backdrop,
  #auth-password-dialog::backdrop, .feedback-dialog::backdrop { background: #0d243499; }
  #modal .dialog-head, #admin-dialog .dialog-head, #auth-password-dialog .dialog-head {
    position: sticky; top: calc(-16px - env(safe-area-inset-top));
    z-index: 2; margin: calc(-16px - env(safe-area-inset-top)) -16px 16px;
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    background: var(--panel); border-bottom: 1px solid var(--line);
    align-items: center;
  }
  #modal .dialog-head h2, #admin-dialog .dialog-head h2 { font-size: 19px; }
  #modal .dialog-head .icon-btn, #admin-dialog .dialog-head .icon-btn { min-width: 44px; }
  #modal .dialog-actions, #admin-dialog .dialog-actions { gap: 8px; padding-bottom: 8px; }
  #modal .dialog-actions button, #admin-dialog .dialog-actions button { white-space: normal; }
  #modal.focus-dialog {
    inset: auto 0 0; height: auto; max-height: 88dvh;
    border-radius: 20px 20px 0 0; background: var(--panel);
  }
  #modal.focus-dialog .focus-choices { max-height: 44dvh; overflow-y: auto; }
  .mobile-group-opener { display: block; width: 100%; margin: 8px 0 12px; text-align: left; }
  .workload-tabs[data-mobile-groups=ready] {
    display: none; position: fixed; inset: auto 0 0; z-index: 60;
    width: 100%; max-height: 78dvh; overflow-y: auto;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0; background: var(--panel);
    box-shadow: 0 -20px 60px #0d243459;
  }
  .workload-tabs[data-mobile-groups=ready].mobile-groups-open { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mobile-group-close { display: block; grid-column: 1 / -1; width: 100%; }
  .workload-tabs .workload-tab { width: 100%; min-width: 0; flex-basis: auto; margin: 0; }
  .employee-hero { display: block; }
  .employee-hero .work-amount { margin-top: 12px; }
  .work-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .work-actions button { white-space: normal; }
  .entry { min-height: 100dvh; padding: 0 16px calc(20px + env(safe-area-inset-bottom)); }
  .entry-nav { display: flex; flex-wrap: wrap; gap: 10px; padding-top: calc(12px + env(safe-area-inset-top)); }
  .entry-nav .brand { padding-bottom: 0; }
  .entry-nav .top-actions { width: 100%; justify-content: flex-start; }
  .entry-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .login-page { min-height: 100dvh; padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)); }
  .login-card { width: 100%; max-width: 430px; padding: 24px 20px; border-radius: 18px; }
  .login-card .field input, .auth-dialog .field input { font-size: 16px; }
  .admin-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-toolbar .search { grid-column: 1 / -1; min-width: 0; }
  .admin-toolbar button { min-width: 0; white-space: normal; }
  .admin-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .admin-row-actions button { flex: 1; }
  .footer-note { overflow-wrap: anywhere; }
}