/* Shared screen layout for phones, tablets and desktop. Print uses the original paper styles. */
@media screen {
  .workspace, .content, .panel, .filters, .panel-head, .panel-actions,
  .topbar-left > div, .form-grid > *, .director-approval-card { min-width: 0; }
  .content > *, .table-wrap { max-width: 100%; }
  .table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .panel-head, .panel-actions, .filters { flex-wrap: wrap; gap: 12px; }
  .panel-head h3 { overflow-wrap: anywhere; }
  .director-approval-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
  .session-chip { position: static !important; inset: auto !important; width: auto; max-width: 100%; margin: 12px 20px; flex-wrap: wrap; }
  .session-chip strong { overflow-wrap: anywhere; }
  #authShell { min-width: 0; }
  .modal input, .modal select, .modal textarea { max-width: 100%; min-width: 0; }
  #signaturePad { max-width: 100%; touch-action: none; }
  .signature-tools { flex-wrap: wrap; }
}
@media screen and (min-width: 1025px) {
  .topbar { flex-wrap: wrap; }
  .topbar-actions { flex: 1 1 540px; flex-wrap: wrap; justify-content: flex-end; }
  .topbar-actions .searchbox { flex: 1 1 220px; min-width: 160px; max-width: 400px; }
  .topbar-actions button { flex-shrink: 0; }
}
@media screen and (max-width: 1024px) {
  .app-shell, .app-shell.collapsed { display: block !important; grid-template-columns: none !important; min-height: 100dvh !important; }
  .sidebar, .app-shell.collapsed .sidebar {
    position: sticky !important; inset: 0 0 auto !important; z-index: 60 !important;
    display: block !important; width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: none !important; padding: 8px !important;
    transform: none !important; overflow: hidden !important;
  }
  .sidebar .brand, .sidebar .collapse-button { display: none !important; }
  #mainNav { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important;
    overflow-x: auto !important; overflow-y: hidden !important; padding: 2px 0 4px !important;
    max-height: none !important; -webkit-overflow-scrolling: touch; }
  #mainNav button, .app-shell.collapsed #mainNav button {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    flex: 0 0 auto !important; width: auto !important; min-width: 112px !important;
    max-width: none !important; min-height: 44px !important; padding: 10px 12px !important;
    white-space: nowrap !important; font-size: 14px !important;
  }
  .app-shell.collapsed #mainNav button span:last-child { display: inline !important; }
  .workspace { width: 100% !important; min-width: 0 !important; }
  .menu-toggle { display: none !important; }
  .topbar { position: static !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; padding: 14px 16px !important; }
  .topbar-left { display: flex !important; width: 100%; }
  #pageTitle { font-size: clamp(22px, 3.5vw, 30px) !important; line-height: 1.35 !important; }
  .topbar-actions { display: grid !important; width: 100% !important; grid-template-columns: minmax(0, 1fr) 48px auto auto !important; gap: 8px !important; }
  .topbar-actions .searchbox { grid-column: 1 !important; width: 100% !important; min-width: 0 !important; }
  .topbar-actions > .icon-button { grid-column: 2 !important; }
  .topbar-actions > .ghost-button { grid-column: 3 !important; }
  .topbar-actions > .primary-button { grid-column: 4 !important; }
  .topbar-actions > button { width: auto !important; min-height: 44px !important; padding: 10px 12px !important; white-space: normal; }
  .content { padding: 16px !important; padding-bottom: 24px !important; overflow-x: visible !important; }
  .kpi-grid, .graphic-kpi-grid, .bottom-grid, .module-grid, .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .session-chip { display: flex !important; margin: 12px 16px !important; }
  button, input, select { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; }
}
@media screen and (max-width: 600px) {
  .topbar-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important; }
  .topbar-actions .searchbox { grid-column: 1 / 3 !important; grid-row: 1 !important; }
  .topbar-actions > .icon-button { grid-column: 3 !important; grid-row: 1 !important; }
  .topbar-actions > .ghost-button { grid-column: 1 !important; grid-row: 2 !important; }
  .topbar-actions > .primary-button { grid-column: 2 / 4 !important; grid-row: 2 !important; }
  .content { padding: 12px !important; }
  .panel { padding: 14px !important; }
  .panel-head, .filters { align-items: stretch; }
  .panel-actions { width: 100%; }
  .panel-actions button { flex: 1 1 auto; }
  .filters > input, .filters > select, .filters > label { width: 100%; min-width: 0 !important; }
  .kpi-grid, .graphic-kpi-grid, .bottom-grid, .module-grid, .stat-band { grid-template-columns: minmax(0, 1fr) !important; }
  .director-command-hero { padding: 18px; }
  .session-chip { margin: 12px !important; gap: 8px !important; }
  .session-chip > span { flex: 1 1 100%; }
  .session-chip > button { flex: 1 1 auto; }
  #requestDialog .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .modal-head h2 { font-size: 20px; overflow-wrap: anywhere; }
  .modal-actions { padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }
}
@media screen and (min-width: 601px) {
  .topbar-actions > .primary-button { min-width: 104px; }
}
@media screen and (max-width: 1024px) {
  .table-wrap > table:not(.driver-assignment-excel) { font-size: 14px; }
  .table-wrap > table:not(.driver-assignment-excel) th,
  .table-wrap > table:not(.driver-assignment-excel) td { padding: 10px 12px; }
  #authLayer { min-width: 0; }
}
/* Personal signature slots remain usable inside the approval panel on all screens. */
@media screen {
  .personal-signature-library { min-width: 0; margin: 12px 0 18px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; }
  .personal-signature-library h4 { margin: 0 0 8px; }
  .personal-signature-library p { font-size: 14px; margin: 8px 0; line-height: 1.5; }
  .personal-signature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .personal-signature-slot { min-width: 0; display: grid; gap: 6px; padding: 6px; border: 2px solid transparent; border-radius: 10px; background: #fff; }
  .personal-signature-slot.selected { border-color: #078a8e; }
  .personal-signature-choice { display: grid; align-content: start; gap: 6px; width: 100%; min-height: 128px; padding: 8px; border: 0; background: transparent; text-align: center; }
  .personal-signature-choice img { width: 100%; height: 64px; object-fit: contain; }
  .personal-signature-choice small { overflow-wrap: anywhere; }
  .personal-signature-library button { white-space: normal; min-height: 44px; }
  .personal-signature-library [data-library-save] { margin-top: 10px; width: 100%; }
  .personal-signature-library button:focus-visible { outline: 3px solid #2468b7; outline-offset: 2px; }
  .personal-signature-library button:disabled { opacity: .6; cursor: wait; }
}
@media screen {
  #directorSignatureManager .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #directorSignatureManager .form-grid > .wide { grid-column: 1 / -1; min-width: 0; }
  #directorSignatureManager .director-signature-preview img { max-width: 100%; height: 80px; object-fit: contain; }
  #signaturePad[hidden] { display: none !important; }
  #manageDirectorSignatures { margin-bottom: 12px; background: #fff; color: #083153; }
}
@media screen {
  #directorSignatureManager.modal {
    width: min(1080px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: min(840px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  #directorSignatureManager .modal-panel {
    display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important;
    width: 100% !important; height: 100% !important; max-height: 100% !important;
    overflow: hidden !important;
  }
  #directorSignatureManager .form-grid { min-height: 0; overflow: auto !important; }
  #directorSignatureManager .modal-actions { min-height: 68px; }
  .signature-tools label { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; min-height: 44px; }
  .signature-tools input[type="radio"] { width: 18px !important; height: 18px !important; min-height: 18px !important; padding: 0 !important; flex: 0 0 18px; }
}
@media screen {
  #authLayer { min-width: 0; }
  .account-entry, #authLayer .session-chip.account-entry { display: flex !important; align-items: center; justify-content: space-between; gap: 12px !important; flex-wrap: wrap; margin: 0 !important; padding: 12px 20px !important; width: 100%; max-width: 100%; border: 0; border-bottom: 1px solid #d6e3ef; border-radius: 0; background: #fff; box-shadow: none; }
  .account-entry p { margin: 4px 0 0; font-size: 14px; color: #475569; }
  .account-entry .account-status { color: #15803d; font-weight: 700; }
  .account-entry > span { margin-right: auto; }
  .account-entry-guest { background: #eff6ff; }
  .request-entry-guide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 20px; border: 1px solid #b9dedb; border-radius: 14px; background: #eefbf8; }
  .request-entry-guide > div { min-width: 0; }
  .request-entry-guide h2 { margin: 0 0 8px; font-size: 22px; }
  .request-entry-guide p { margin: 0 0 12px; color: #334155; line-height: 1.5; }
  .request-entry-steps { display: flex; flex-wrap: wrap; gap: 12px 30px; padding-left: 20px; margin: 0; color: #475569; font-size: 14px; }
  .auth-card { position: relative; }
  .auth-close-button { position: absolute; top: 10px; right: 10px; }
}
@media screen and (max-width: 600px) {
  .account-entry, #authLayer .session-chip.account-entry { padding: 12px !important; }
  .account-entry .inline-actions { display: flex; flex-wrap: wrap; width: 100%; }
  .account-entry .inline-actions button { flex: 1 1 120px; min-height: 44px; }
  .request-entry-guide { padding: 16px; }
  .request-entry-guide .inline-actions { width: 100%; display: flex; flex-wrap: wrap; }
  .request-entry-guide .inline-actions button { width: 100%; min-height: 44px; white-space: normal; }
  .auth-card { max-width: calc(100vw - 24px); }
}
@media screen {
  .auth-backdrop { position: fixed !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: auto !important; padding: 12px !important; }
  .auth-card { position: relative !important; flex: 0 1 480px; min-width: 0; max-width: 100% !important; max-height: calc(100dvh - 24px) !important; overflow-y: auto !important; margin: auto !important; transform: none !important; }
  .auth-title { padding-top: 20px; }
}
@media screen {
  .vehicle-conflict-warning { padding: 14px; border: 1px solid #edb85c; border-radius: 10px; background: #fff7e6; color: #854d0e; }
  .vehicle-conflict-warning[hidden] { display: none !important; }
  .vehicle-conflict-warning p { margin: 8px 0; white-space: pre-line; overflow-wrap: anywhere; }
  .vehicle-conflict-warning label { display: flex !important; align-items: center; gap: 8px; min-height: 44px; }
  .vehicle-conflict-warning input[type="checkbox"] { width: 20px !important; height: 20px !important; min-height: 20px !important; flex: 0 0 20px; }
}
@media screen {
  .line-login-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid #008f45; border-radius: 10px; background: #06c755; color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-align: center; }
  .line-login-button:hover:not(:disabled) { background: #05b34c; }
  .line-login-button:focus-visible { outline: 3px solid #083153; outline-offset: 3px; }
  .line-login-button:disabled { opacity: .6; cursor: default; }
  .line-login-options { margin: 12px 0 18px; padding-bottom: 14px; border-bottom: 1px solid #cbd5e1; }
  .line-login-options .line-login-button { width: 100%; }
  .line-login-options p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #475569; }
  .line-login-notice { margin: 0; padding: 12px 20px; background: #e8f7ee; border-bottom: 1px solid #aed5bb; line-height: 1.5; overflow-wrap: anywhere; }
}
@media screen and (max-width: 600px) {
  .account-entry .line-login-button { white-space: normal; }
  .account-entry > .line-login-button { flex: 1 1 100%; }
}
@media screen and (min-width: 1025px) {
  .dashboard-visual-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-visual-grid > * { min-width: 0; }
  .graphic-chart svg { max-width: 100%; }
}