/* ==========================================================================
   LNE 外贸工作台 — Responsive & device adaptation
   Preserves the original layout guarantees (no overflow, safe areas, touch
   targets, viewport-unit modals) while keeping the Apple visual language.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Structural safety net (kept from the original system)
   -------------------------------------------------------------------------- */
.app-shell, .login-shell { min-height: 100dvh; }
.sidebar { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.sidebar nav, .sidebar-bottom { flex-shrink: 0; }
.topbar-user { max-width: 190px; overflow-wrap: anywhere; }
.grid-2 > *, .split > *, .form-grid > *, .document-grid > * { min-width: 0; }
.panel-head, .detail-title, .inline-record { flex-wrap: wrap; }
.panel-head > h2, .detail-title > div, .inline-record > div { min-width: 0; overflow-wrap: anywhere; }
.panel-head .actions, .detail-title > button, .inline-record > button { flex-shrink: 0; align-self: flex-start; }
.page-heading, .task-main, .notification, .deal, .document-card,
.notice, .suggestion, .raw-result, .login-form { overflow-wrap: anywhere; }
.table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
/* The table must be allowed to shrink with its container. A fixed min-width
   here overflowed narrow panels (e.g. the customer list inside a two-column
   split), pushing the last column outside the panel and clipping its text. */
.table-wrap table { width: 100%; min-width: 0; table-layout: auto; }
/* Keep a readable minimum only where horizontal scrolling is expected —
   narrow screens, where the wrap is the full viewport width. */
@media (max-width: 760px) {
  .table-wrap table { min-width: 560px; }
}
.table-wrap td { max-width: 340px; overflow-wrap: anywhere; }
/* Last column needs breathing room so its text never touches the panel edge. */
.table-wrap th:last-child,
.table-wrap td:last-child { padding-right: 22px; }
.table-wrap td .actions { min-width: 124px; }
.kanban { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
.kanban-column { min-width: 0; }
.items-editor table { min-width: 720px; }
.items-editor .item-actions { min-width: 54px; }
.login-shell { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.login-brand, .login-main, .login-form { min-width: 0; }
.login-form { max-width: 100%; }
.login-brand h1 { overflow-wrap: anywhere; }
.toast { overflow-wrap: anywhere; bottom: max(18px, env(safe-area-inset-bottom)); }

/* Modal is pinned into the visual viewport so it stays reachable when the
   on-screen keyboard opens on mobile. */
dialog {
  position: fixed;
  top: var(--modal-viewport-top, 0px);
  bottom: calc(100% - var(--modal-viewport-top, 0px) - var(--modal-viewport-height, 100%));
  max-height: min(90dvh, calc(var(--modal-viewport-height, 100dvh) - 24px));
  overflow: hidden;
}
.modal-head, .modal-footer { position: static; flex-shrink: 0; }
.modal-head h2 { min-width: 0; overflow-wrap: anywhere; }
.modal-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.modal-footer { flex-wrap: wrap; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.close { min-width: 44px; min-height: 44px; flex-shrink: 0; }
.pdf-toolbar { flex-wrap: wrap; gap: 8px; }
.pdf-canvas-wrap { max-height: 65dvh; overscroll-behavior: contain; }
.pdf-canvas-wrap[data-fit="true"] canvas { max-width: 100%; height: auto !important; }

/* --------------------------------------------------------------------------
   Large desktop — cap content width so lines never run too long
   -------------------------------------------------------------------------- */
@media (min-width: 1800px) {
  main { max-width: 1680px; }
  .topbar { padding-left: max(32px, calc((100% - 1680px) / 2 + 32px)); }
}

/* --------------------------------------------------------------------------
   ≤ 1150px — tighter desktop / small laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  :root { --sidebar-w: 208px; --pad: 24px; }
  main { padding: 26px 24px 44px; }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .stats { gap: 14px; }
  .stat { padding: 16px 18px; }
  .stat strong { font-size: 30px; }
  /* Bilingual contract: side-by-side no longer fits comfortably */
  .contract-segment { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ai-proposal-details > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .login-brand { padding: 56px 8%; }
  .login-brand h1 { font-size: 34px; }
  h1 { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   ≤ 1000px — sidebar collapses into a horizontal, scrollable nav bar
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .app-shell { display: block; }
  .sidebar {
    --sidebar-nav-font-size: 14.5px;
    --sidebar-nav-tracking: 0.02em;
    --sidebar-nav-padding: 8px 13px;
    position: static;
    height: auto;
    padding: 12px max(14px, env(safe-area-inset-left));
    overflow: visible;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .sidebar .brand { padding: 0; flex-shrink: 0; }
  .sidebar .brand small, .sidebar-bottom { display: none; }
  /* min-width:0 lets the flex child actually shrink below its content
     width; without it the scroll track sizes to the nav and overflows. */
  .sidebar nav {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 0;
    gap: 8px;
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .sidebar nav::-webkit-scrollbar { display: none; }
  button:not(.primary):not(.ghost):not(.close):not(.lne-motion).nav-button {
    width: auto;
    min-height: 44px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .topbar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  main {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   ≤ 900px — auth stacks
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .login-shell { grid-template-columns: minmax(0, 1fr); }
  .login-brand { padding: 30px; min-height: 180px; gap: 22px; justify-content: flex-start; }
  .login-brand h1 { font-size: 26px; margin: 0; letter-spacing: -0.014em; }
  .login-brand p, .login-brand .line, .login-brand > small { display: none; }
  .login-main { padding: 36px max(26px, env(safe-area-inset-left)); }
  .login-form { width: 100%; max-width: 400px; }
}

/* --------------------------------------------------------------------------
   ≤ 760px — phones
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  h1 { font-size: 27px; line-height: 1.148; }
  h2 { font-size: 19px; }
  .topbar { min-height: 52px; flex-wrap: wrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .topbar-title { flex-basis: 100%; font-size: 12px; }
  .topbar-title > .badge.teal { font-size: 16px; line-height: 1.45; letter-spacing: 0.03em; padding: 0; }
  .topbar-actions { width: 100%; justify-content: flex-end; }
  .topbar-user { margin-right: auto; max-width: 56%; }
  .avatar { display: none; }
  main { padding: 20px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); }
  .page-heading { flex-direction: column; margin-bottom: 22px; }
  .page-heading .actions { width: 100%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 14px 16px; border-radius: 16px; }
  .stat strong { font-size: 26px; }
  .grid-2, .split, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field.full { grid-column: auto; }
  .panel { border-radius: 16px; }
  .panel-head, .panel-body { padding: 16px; }
  .panel-head h2 { font-size: 18px; }
  .task-row, .notification { padding: 16px; }
  .notification.unread { padding-left: 16px; box-shadow: inset 3px 0 0 var(--accent); }
  .actions { gap: 6px; }
  .toolbar .search { width: 100%; flex-basis: 100%; }
  .toolbar input, .toolbar select { flex: 1; }
  .details { grid-template-columns: 88px minmax(0, 1fr); }
  .document-grid { grid-template-columns: minmax(0, 1fr); }
  .kanban { grid-template-columns: repeat(7, 244px); }
  /* New components — contract / pricing / AI */
  .contract-segment { padding: 14px 15px; border-radius: 16px; }
  .contract-segment textarea { min-height: 96px; }
  .contract-clauses { gap: 12px; }
  .contract-clauses > section { padding: 14px 15px; }
  .pricing-calculator > summary { padding: 13px 15px; font-size: 14px; }
  .pricing-calculator > *:not(summary) { padding-left: 15px; padding-right: 15px; }
  .ai-sources li { padding: 7px 10px 7px 26px; font-size: 12.5px; }
  .ai-proposal-reason { padding: 11px 13px; font-size: 13px; }
  td, th { padding: 13px 14px; }
  .toast { bottom: max(16px, env(safe-area-inset-bottom)); }
  .pdf-frame { height: 60vh; }
  .modal-head { padding: 12px 16px; }
  .modal-body { padding: 18px 16px; }
  .modal-footer { padding-left: 16px; padding-right: 16px; }
  dialog, dialog.wide {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    border-radius: 20px;
    max-height: calc(var(--modal-viewport-height, 100dvh) - 16px);
  }
  .pdf-canvas-wrap { padding: 8px; max-height: 60dvh; }
  .pdf-toolbar { padding: 8px; }
  .pdf-toolbar > button { font-size: 12.5px; padding: 8px 14px; }
  .pdf-scale-label { flex-basis: 100%; justify-content: center; }
  .pdf-toolbar .number { font-size: 12.5px; }
  .boot { padding: 44px 20px; }
  .translation-languages, .translation-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .translation-grid textarea { min-height: 200px; }
  .translation-actions .hint { flex-basis: 100%; margin: 4px 0 0; }
  .task-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .task-row > .actions { grid-column: 2; }
  .inline-record > button { margin-left: auto; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex-shrink: 0; }
  .search { min-width: 0; }
  /* Modals on phones get the Apple sheet treatment: docked to the bottom */
  dialog[open] { animation-name: sheet-up; }
  @keyframes sheet-up {
    from { opacity: 0; transform: translateY(28px) scale(0.99); }
    to { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------------------
   Touch devices — 44px targets, 16px inputs (prevents iOS zoom-on-focus)
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 1000px) {
  button, .button, a.row-title, summary { min-height: 44px; min-width: 44px; }
  a.row-title { display: inline-flex; align-items: center; }
  button.small, .button.small, .filter-chip { min-height: 38px; }
  input, select, textarea { font-size: 16px; }
  input:not([type="checkbox"]), select { min-height: 44px; }
  select { padding-right: 36px; background-position: right 14px center; }
  textarea { min-height: 110px; }
  input[type="checkbox"] { width: 20px; height: 20px; vertical-align: middle; margin: 12px 6px; }
  .task-check { width: 44px; height: 44px; min-height: 44px; }
  .pdf-scale-label select { min-height: 38px; }
}

/* Keep every navigation item reachable on shorter desktop windows. */
@media (max-height: 700px) and (min-width: 1001px) {
  .sidebar {
    --sidebar-nav-font-size: 14.5px;
    --sidebar-nav-tracking: 0.02em;
    --sidebar-nav-padding: 6px 14px;
    padding-top: 20px;
    padding-bottom: 16px;
  }
  .sidebar nav { gap: 3px; margin-top: 48px; }
  .sidebar-bottom { padding-top: 12px; }
  button:not(.primary):not(.ghost):not(.close):not(.lne-motion).nav-button { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Coarse-pointer polish — Windows touch laptops & iPad-like devices
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* Hover-only affordances become persistent focus affordances */
  tr[data-action]:hover td { background: transparent; }
  tr[data-action]:focus-within td { background: var(--accent-softer); }
  .stat:hover, .document-card:hover, .deal:hover { transform: none; box-shadow: var(--sh-1); }
}

/* Type metrics are shared. These used to fork letter-spacing by operating system. */
/* Windows has no overlay scrollbars; keep the material feel with a light track */
html[data-os="win"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-os="win"] ::-webkit-scrollbar-thumb { border-width: 2px; }
/* Snap layout animations are smoother on Windows with the compositor */
html[data-os="win"] button:active,
html[data-os="win"] .button:active { transform: scale(0.97); }

/* --------------------------------------------------------------------------
   Windows High Contrast / forced-colors
   Translucent materials and soft shadows collapse in this mode, so restore
   hard edges and system colours. Windows users can turn this on in Settings.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .sidebar,
  .topbar,
  .login-brand,
  .toast,
  dialog::backdrop {
    background: Canvas;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    forced-color-adjust: none;
    color: CanvasText;
    border-color: CanvasText;
  }
  .login-brand {
    background: Canvas;
    color: CanvasText;
  }
  .login-brand h1, .login-brand h2, .login-brand h3, .login-brand p,
  .login-brand .line, .login-brand > small, .login-brand .brand small {
    color: CanvasText;
    forced-color-adjust: none;
  }
  .login-brand .line { background: CanvasText; }
  button, .button, .panel, .stat, .document-card, .deal,
  .suggestion, .dialog, dialog, input, select, textarea, .kanban-column,
  .inline-record, .notice, .badge, .table-wrap, .pdf-canvas-wrap {
    border: 1px solid CanvasText;
    box-shadow: none;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: none;
  }
  button.primary, .button.primary {
    background: Highlight;
    color: HighlightText;
    border-color: HighlightText;
    forced-color-adjust: none;
  }
  button.primary:hover { background: Highlight; color: HighlightText; }
  .stat strong, h1, h2, h3, .row-title { color: CanvasText; }
  .nav-button.active { background: Highlight; color: HighlightText; }
  .badge { border: 1px solid CanvasText; }
  .topbar-title > .badge.teal { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .sidebar, .topbar, .actions, .toolbar, .tabs { display: none !important; }
  body, .app-shell { background: #fff; }
  main { padding: 0; max-width: none; }
  .panel { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
}