/* Dawn Maritime v0.8.92 — mobile and touch-first layout refinements.
   Shared component styles stay in style.css; these rules only refine compact viewports. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 150px; }
body { min-width: 0; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
img, svg, canvas, video { max-width: 100%; }
#content, #content > *, .platform-console, .platform-company-panel { min-width: 0; }
.platform-company-cards { display: none; }

@media (max-width: 760px) {
  html { scroll-padding-top: 145px; }
  body { overflow-x: clip; }
  .layout { width: 100%; min-width: 0; }
  .layout > aside.fleet-topbar {
    padding-left: max(9px, env(safe-area-inset-left));
    padding-right: max(9px, env(safe-area-inset-right));
    padding-top: env(safe-area-inset-top);
    -webkit-backdrop-filter: saturate(1.2) blur(14px);
    backdrop-filter: saturate(1.2) blur(14px);
  }
  .fleet-topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 3px 6px;
    padding: 5px 0 0;
  }
  .fleet-identity { min-width: 0; max-width: 100%; overflow: hidden; }
  .fleet-topbar .brand { max-width: 100%; font-size: clamp(13px, 3.8vw, 16px); letter-spacing: 0; }
  .fleet-topbar .brand-anchor { font-size: 17px; }
  .fleet-topbar .caption { font-size: 7px; letter-spacing: .6px; line-height: 1.25; }
  .fleet-utilities {
    grid-column: 2; grid-row: 1;
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end;
    min-width: 0; max-width: 100%; margin: 0; padding: 0; gap: 2px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .fleet-utilities::-webkit-scrollbar { display: none; }
  .fleet-utilities .chip, .fleet-utilities .primary {
    flex: 0 0 auto; min-width: 32px; width: auto; height: 36px; min-height: 36px;
    padding: 0 7px; border-radius: 9px; font-size: 11px;
  }
  .fleet-utilities .fleet-icon-button { width: 36px; min-width: 36px; height: 36px; padding: 0; }
  .fleet-utilities .fleet-account-control { width: 36px; min-width: 36px; max-width: 36px; padding: 3px; }
  .fleet-utilities .fleet-account-avatar { width: 27px; height: 27px; flex-basis: 27px; border-radius: 7px; }
  .fleet-account-name { display: none; }
  .fleet-utilities #lang { min-width: 42px; height: 36px; gap: 4px; }
  .fleet-utilities #lang .fleet-util-svg { width: 15px; height: 15px; }
  .fleet-utilities .fleet-add-control { min-width: 36px; width: 36px; padding: 0; }
  .fleet-utilities .fleet-add-control [data-i="addVessel"] { display: none; }
  .fleet-util-divider { height: 19px; margin: 0 1px; flex: 0 0 1px; }
  #fleet-nav {
    grid-column: 1 / -1; grid-row: 2;
    display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
    width: 100%; min-width: 0; min-height: 45px; height: auto; margin: 0;
    gap: 4px; padding: 4px 0 max(7px, env(safe-area-inset-bottom, 0px));
    overflow-x: auto !important; overflow-y: hidden !important;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
    -webkit-overflow-scrolling: touch;
  }
  #fleet-nav .nav-group, #fleet-nav .nav-leaf { flex: 0 0 auto; scroll-snap-align: start; }
  #fleet-nav .nav, .fleet-topbar-inner #fleet-nav .nav {
    min-height: 39px; height: 39px; padding: 0 11px; border-radius: 10px;
    font-size: 12px; line-height: 1.15; gap: 7px;
  }
  #fleet-nav .nav-parent { max-width: min(60vw, 240px); }
  #fleet-nav .nav-parent > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #fleet-nav .nav-children {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    width: auto !important; max-width: none !important;
    max-height: min(58dvh, 470px); padding: 8px;
    border-radius: 14px; box-shadow: 0 18px 48px #0009;
    overflow-y: auto; overscroll-behavior: contain;
  }
  #fleet-nav .nav-child {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    padding: 11px 12px; font-size: 14px; line-height: 1.3; border-radius: 9px;
  }
  .layout > main {
    min-width: 0; width: 100%; max-width: 100%; padding: 15px 12px max(22px, env(safe-area-inset-bottom));
  }
  .layout > main > header { align-items: flex-start; gap: 8px; margin-bottom: 14px; }
  .layout > main > header h1 { font-size: clamp(21px, 5.5vw, 27px); line-height: 1.2; overflow-wrap: anywhere; }
  .layout > main > header .eyebrow { font-size: 9px; letter-spacing: 1.2px; }
  #content { width: 100%; min-width: 0; }
  #content h2 { font-size: clamp(18px, 4.8vw, 23px); line-height: 1.25; overflow-wrap: anywhere; }
  #content h3 { line-height: 1.3; }
  #content .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  #content .card, #content .panel { min-width: 0; padding: 13px; border-radius: 12px; }
  #content .metric { font-size: clamp(21px, 6vw, 30px); overflow-wrap: anywhere; }
  #content .sub, #content small { overflow-wrap: anywhere; }
  #content .panels { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #content .rowactions, #content .platform-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  #content .rowactions > button, #content .platform-actions > button { min-height: 40px; }
  #content form, #content .fields, #content .ops-form, #content .wf-form { min-width: 0; }
  #content input:not([type="checkbox"]):not([type="radio"]),
  #content select, #content textarea,
  dialog input:not([type="checkbox"]):not([type="radio"]), dialog select, dialog textarea {
    width: 100%; max-width: 100%; min-width: 0; min-height: 44px; font-size: 16px;
  }
  #content textarea, dialog textarea { min-height: 100px; }
  #content button, dialog button { touch-action: manipulation; }
  #content .chip, #content .primary, dialog .chip, dialog .primary { min-height: 40px; }
  .tablewrap, .table-wrapper, .wf-table-wrap, .pb-scroll, .platform-table-scroll,
  .ops-table-wrap, .data-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .tablewrap table, .table-wrapper table, .wf-table, .pb-lines, .platform-table, .ops-table {
    min-width: 640px; max-width: none; font-size: 12px;
  }
  .table th, .table td, .platform-table th, .platform-table td { padding: 10px 11px; }
  #dawn-connectivity, #notice { max-width: 100%; overflow-wrap: anywhere; line-height: 1.5; }
  .dawn-connectivity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .dawn-connectivity .chip { min-height: 40px; }
  dialog {
    width: calc(100% - 16px); max-width: 560px; max-height: calc(100dvh - 18px - env(safe-area-inset-top));
    margin: auto; padding: 14px; border-radius: 15px; overscroll-behavior: contain;
  }
  dialog::backdrop { background: rgba(2, 8, 18, .74); }
  dialog .dialoghead { align-items: flex-start; gap: 10px; }
  dialog .dialogactions, dialog .dialog-foot, dialog .dialog-foot>div { display: flex; flex-wrap: wrap; gap: 8px; }
  dialog .dialogactions > button, dialog .dialog-foot > div > button { flex: 1 1 120px; }
  .fleet-auth-card { width: calc(100% - 20px); max-width: 440px; margin: 12px auto; padding: 19px; }
  .fleet-auth-card label { gap: 7px; }
  .fleet-auth-card input { width: 100%; min-height: 46px; font-size: 16px; }
  .fleet-auth-card button { min-height: 44px; }
  .platform-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .platform-stat { min-width: 0; padding: 12px; }
  .platform-stat strong { font-size: clamp(20px, 5.5vw, 26px); overflow-wrap: anywhere; }
  .platform-stat small { line-height: 1.35; }
  .platform-section-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .platform-section-head > .primary { width: 100%; min-height: 44px; }
  .platform-company-form { padding: 12px; }
  .platform-form-grid { grid-template-columns: minmax(0, 1fr); }
  .platform-form-actions { align-items: stretch; }
  .platform-form-actions .primary, .platform-form-actions .chip { min-height: 44px; }
  .platform-table-scroll { display: none; }
  .platform-company-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .platform-company-card { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .platform-company-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .platform-company-card-head > div { min-width: 0; }
  .platform-company-card-head strong { display: block; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
  .platform-company-card-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
  .platform-company-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 13px 0; }
  .platform-company-facts > div { min-width: 0; padding: 9px; border-radius: 8px; background: color-mix(in srgb, var(--blue) 5%, var(--side)); }
  .platform-company-facts dt { color: var(--muted); font-size: 10px; }
  .platform-company-facts dd { margin: 4px 0 0; font-size: 13px; font-weight: 750; overflow-wrap: anywhere; }
  .platform-company-facts dd small { font-size: 10px; font-weight: 500; color: var(--muted); }
  .platform-company-facts .platform-company-date { grid-column: 1 / -1; }
  .platform-company-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .platform-company-card-actions .chip { min-width: 0; min-height: 44px; padding: 8px; white-space: normal; font-size: 12px; }
  .platform-footnote { display: flex; align-items: flex-start; gap: 8px; }
  .layout footer { margin-top: 18px; padding-bottom: max(8px, env(safe-area-inset-bottom)); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .layout > aside.fleet-topbar { padding-left: max(7px, env(safe-area-inset-left)); padding-right: max(7px, env(safe-area-inset-right)); }
  .fleet-topbar .caption { display: none; }
  .fleet-topbar .brand { font-size: 13px; }
  .fleet-topbar .brand-anchor { font-size: 15px; }
  .fleet-utilities { gap: 1px; }
  .fleet-utilities .chip, .fleet-utilities .primary { min-width: 30px; height: 34px; min-height: 34px; padding: 0 4px; }
  .fleet-utilities .fleet-icon-button, .fleet-utilities .fleet-account-control, .fleet-utilities .fleet-add-control { min-width: 30px; width: 30px; height: 34px; min-height: 34px; }
  .fleet-utilities #lang { min-width: 37px; width: 37px; }
  #fleet-nav { min-height: 44px; gap: 3px; padding-bottom: 6px; }
  #fleet-nav .nav, .fleet-topbar-inner #fleet-nav .nav { min-height: 38px; height: 38px; padding: 0 9px; font-size: 11px; }
  #content .cards { gap: 7px; }
  #content .card, #content .panel { padding: 11px; }
  .platform-company-card-actions { grid-template-columns: minmax(0, 1fr); }
  .platform-company-card-actions .chip { width: 100%; }
}

@media (max-width: 340px) {
  .fleet-topbar-inner { column-gap: 3px; }
  .fleet-topbar .brand { font-size: 12px; }
  .fleet-utilities .chip, .fleet-utilities .primary, .fleet-utilities .fleet-icon-button,
  .fleet-utilities .fleet-account-control, .fleet-utilities .fleet-add-control { min-width: 28px; width: 28px; height: 32px; min-height: 32px; padding: 0 2px; }
  .fleet-utilities #lang { min-width: 34px; width: 34px; }
  #fleet-nav .nav, .fleet-topbar-inner #fleet-nav .nav { padding: 0 8px; font-size: 10.5px; }
  .platform-stats { gap: 6px; }
  .platform-stat { padding: 10px; }
}


/* Dawn Maritime v0.8.93 — consistent phone-first behavior for every data-entry workflow.
   These rules are additive: desktop layouts and record semantics remain unchanged. */
@media (max-width: 760px) {
  #content :is(.ops-form, .wf-form, .fields, .crew-form-grid, .crew-detail-grid,
    .pms-grid-entry-fields, .next-grid, .fleetos-reports-fields, .platform-form-grid,
    .pb-fields, .fleet-permission-grid, .rob-fields) {
    min-width: 0;
    gap: 10px;
  }

  #content :is(.ops-form, .wf-form, .crew-form-grid, .crew-detail-grid,
    .pms-grid-entry-fields, .next-grid, .fleetos-reports-fields) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #content :is(.ops-form, .wf-form, .crew-form-grid, .crew-detail-grid,
    .pms-grid-entry-fields, .next-grid, .fleetos-reports-fields) > *,
  #content :is(.ops-form, .wf-form, .crew-form-grid, .crew-detail-grid,
    .pms-grid-entry-fields, .next-grid, .fleetos-reports-fields) label {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #content :is(.ops-form, .wf-form, .crew-form-grid, .pms-grid-entry-fields,
    .next-grid, .fleetos-reports-fields) label {
    align-self: stretch;
  }

  #content :is(.ops-form, .wf-form, .crew-form-grid, .pms-grid-entry-fields,
    .next-grid, .fleetos-reports-fields) label:has(textarea),
  #content .pms-grid-entry-fields .pms-grid-entry-note,
  #content .fleetos-reports-fields .wide,
  #content .ops-form .ops-wide {
    grid-column: 1 / -1;
  }

  dialog :is(.ops-form, .wf-form, .fields, .crew-form-grid, .pms-grid-entry-fields,
    .next-grid, .pb-fields, .platform-form-grid, .fleetos-reports-fields),
  dialog .fleet-permission-grid {
    min-width: 0;
    gap: 10px;
  }

  dialog :is(.ops-form, .wf-form, .crew-form-grid, .pms-grid-entry-fields,
    .next-grid, .fleetos-reports-fields) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  dialog :is(.ops-form, .wf-form, .crew-form-grid, .pms-grid-entry-fields,
    .next-grid, .fleetos-reports-fields) > *,
  dialog :is(.ops-form, .wf-form, .crew-form-grid, .pms-grid-entry-fields,
    .next-grid, .fleetos-reports-fields) label {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  dialog :is(.ops-form, .wf-form, .crew-form-grid, .pms-grid-entry-fields,
    .next-grid, .fleetos-reports-fields) label:has(textarea),
  dialog .pms-grid-entry-fields .pms-grid-entry-note {
    grid-column: 1 / -1;
  }

  dialog .pb-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog .pb-fields .pb-span2 { grid-column: span 2; }
  dialog .pb-fields .pb-span3 { grid-column: 1 / -1; }

  #content :is(.ops-form, .wf-form, .fields, .crew-form-grid, .pms-grid-entry-fields,
    .next-grid, .pb-fields, .platform-form-grid) :is(input, select, textarea),
  #content :is(.up-form-strip, .up-filterbar, .upload-form, .vessel-rob-form) :is(input, select, textarea),
  #pms-dialog :is(input, select, textarea), #ops-dialog :is(input, select, textarea),
  #pb-dialog :is(input, select, textarea), #crew-management-dialog :is(input, select, textarea) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 16px;
  }

  #content :is(.ops-toolbar, .pms-header, .pms-info, .equipment-head,
    .crew-toolbar, .crew-head, .crew-detail-top, .pb-list-head, .pb-upload-row,
    .up-filterbar, .up-form-strip, .up-actions, .upload-form, .rob-footer) {
    align-items: stretch;
    min-width: 0;
    gap: 9px;
  }

  #content :is(.ops-toolbar, .pms-info, .crew-toolbar, .up-filterbar, .up-form-strip) > label,
  #content .pb-upload-row label,
  #content .upload-form > *,
  #content .equipment-head > label {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }

  #content :is(.ops-toolbar, .pms-info, .equipment-head, .crew-toolbar,
    .pb-list-head, .pb-upload-row, .up-filterbar, .up-form-strip, .upload-form) button,
  #content :is(.ops-form, .wf-form, .up-dialog, .up-form-strip) button[type="submit"],
  #content .pms-grid-entry-title .primary {
    min-height: 44px;
    max-width: 100%;
  }

  #content :is(.dialogactions, .wf-dialog-actions, .wf-actions, .platform-form-actions,
    .pb-dialog-foot, .pb-dialog-foot > div, .up-actions, .rowactions, .platform-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  #content :is(.dialogactions, .wf-dialog-actions, .pb-dialog-foot) > button,
  #content .pb-dialog-foot > div > button,
  #content .platform-form-actions > button {
    flex: 1 1 135px;
    min-width: 0;
    min-height: 44px;
    white-space: normal;
  }

  #content :is(.up-upload-label, .upload-form) input[type="file"],
  dialog input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    padding: 8px;
    font-size: 13px;
  }

  #content .pms-grid-quickentry { padding: 12px; }
  #content .pms-grid-entry-title { align-items: stretch; gap: 10px; }
  #content .pms-grid-entry-title .primary { width: 100%; }
  #content .pms-info form { width: 100%; align-items: stretch; }
  #content .pms-info form label { flex: 1 1 100%; min-width: 0; }
  #content .pms-info input { width: 100%; }

  #content .pb-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #content .pb-fields .pb-span2 { grid-column: span 2; }
  #content .pb-fields .pb-span3 { grid-column: 1 / -1; }
  #content .pb-batch-meta { padding: 10px; }
  #content .pb-upload-row label { min-width: 0; }
  #content .pb-upload-row button { width: 100%; white-space: normal; }
  #content .pb-edit-row { padding: 10px; }
  #content .pb-item-head { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  #content .pb-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #content .crew-stcw-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  #content .crew-stcw-row > * { min-width: 0; }
  #content .crew-stcw-row .chip { align-self: end; min-height: 44px; }
  #content .crew-search { min-width: 0; width: 100%; }
  #content .crew-section { min-width: 0; }

  #content .fleet-permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #content .fleet-perm-row { flex-wrap: wrap; min-width: 0; }
  #content .fleet-perm-row select { max-width: 100%; min-width: 0; }
  #content .rob-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #content .vessel-rob-form { min-width: 0; }

  #content .up-form-strip label { min-width: 0; }
  #content .up-dialog { width: calc(100vw - 20px); max-width: 560px; padding: 14px; }
  #content .up-dialog form { min-width: 0; }
  #content .up-calendar-nav { gap: 9px; flex-wrap: wrap; }
  #content .up-calendar-grid { gap: 3px; }
  #content .up-day { min-width: 0; overflow: hidden; }

  dialog form { min-width: 0; }
  dialog .dialoghead { min-width: 0; }
  dialog .dialoghead > div { min-width: 0; overflow-wrap: anywhere; }
  dialog .dialogactions { padding-top: 8px; }
  #ops-dialog form, #pms-dialog form, #crew-management-dialog form { padding: 4px 0; }
  #crew-management-dialog .crew-section { padding: 12px; }
}

@media (max-width: 480px) {
  #content :is(.ops-form, .wf-form, .fields, .crew-form-grid, .crew-detail-grid,
    .pms-grid-entry-fields, .next-grid, .fleetos-reports-fields, .pb-fields) {
    grid-template-columns: minmax(0, 1fr);
  }

  #content :is(.ops-form, .wf-form, .crew-form-grid, .crew-detail-grid,
    .pms-grid-entry-fields, .next-grid, .fleetos-reports-fields) label:has(textarea),
  #content .pms-grid-entry-fields .pms-grid-entry-note,
  #content .pb-fields .pb-span2,
  #content .pb-fields .pb-span3 {
    grid-column: auto;
  }

  #content .fleet-permission-grid { grid-template-columns: minmax(0, 1fr); }
  #content .rob-fields { grid-template-columns: minmax(0, 1fr); }
  #content .pb-fields { grid-template-columns: minmax(0, 1fr); }
  #content .pb-fields .pb-span2, #content .pb-fields .pb-span3 { grid-column: auto; }
  #content .pb-photo-grid { grid-template-columns: minmax(0, 1fr); }
  #content .crew-stcw-row { grid-template-columns: minmax(0, 1fr); }
  #content .pb-dialog-foot > div { width: 100%; }
  #content .pb-dialog-foot > div > button { flex: 1 1 100%; }
  #content :is(.dialogactions, .wf-dialog-actions, .platform-form-actions) > button { flex: 1 1 100%; width: 100%; }
  #content .pms-info form > * { flex: 1 1 100%; width: 100%; }
  #content .fleet-perm-row { justify-content: space-between; }
  #content .fleet-perm-row select { flex: 0 1 145px; }
  #content .up-upload-label { line-height: 1.5; overflow-wrap: anywhere; }
  #content .up-upload-label input[type="file"] { font-size: 12px; }
  #content .pb-batch-head { align-items: stretch; }
  #content .pb-batch-head > button { width: 100%; min-height: 44px; }
  dialog :is(.ops-form, .wf-form, .fields, .crew-form-grid, .pms-grid-entry-fields,
    .next-grid, .fleetos-reports-fields, .pb-fields) { grid-template-columns: minmax(0, 1fr); }
  dialog :is(.ops-form, .wf-form, .crew-form-grid, .pms-grid-entry-fields,
    .next-grid, .fleetos-reports-fields) label:has(textarea),
  dialog .pms-grid-entry-fields .pms-grid-entry-note,
  dialog .pb-fields .pb-span2, dialog .pb-fields .pb-span3 { grid-column: auto; }
  dialog .fleet-permission-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
  #content .cards, #content .platform-stats { grid-template-columns: minmax(0, 1fr); }
  #content .pb-fields { gap: 9px; }
  #content .pms-tabs, #content .pb-tabs, #content .crew-ism-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  #content .pms-tab, #content .pb-tab, #content .crew-ism-tabs > * { flex: 0 0 auto; }
  #content :is(.chip, .primary) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}