/* Shared module: modals — auto-split from the old single styles.css, 24 rule block(s). Do not duplicate class names across files. */

.modal{width:min(760px,96vw);max-height:calc(100dvh - var(--secura-top,72px) - 34px);overflow:hidden;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.25);display:flex;flex-direction:column;min-height:0}

body[data-theme="dark"] .panel-head,body[data-theme="dark"] .modal-head,body[data-theme="dark"] .modal-foot{border-color:#203b4d!important}

body[data-theme="dark"] .page-header h1,body[data-theme="dark"] .panel-head h3,body[data-theme="dark"] .modal h3,body[data-theme="dark"] .gate-card h4,body[data-theme="dark"] .sensor-card h4{color:#edf7fb}

@media (max-width:700px){
.modal{width:100%;max-height:calc(100dvh - var(--secura-top,72px) - 20px);border-radius:14px}
}

.modal .weather-metric-grid>div{min-height:72px;height:72px}

@media (max-width:700px){
.weather-metric-grid>div,.modal .weather-metric-grid>div{height:66px;min-height:66px;padding:8px 10px}
}

.modal .map-engine-v24:not(:fullscreen) .map-v24-toolbar{top:7px;right:7px;left:7px}

.modal .map-engine-v24:not(:fullscreen) .map-v24-group{padding:3px;gap:3px;border-radius:8px}

.modal .map-engine-v24:not(:fullscreen) .map-v24-toolbar button{
  width:28px;height:28px;min-width:28px;padding:0;font-size:13px
}

.modal .map-engine-v24:not(:fullscreen) .map-v24-toolbar select{
  height:28px;min-width:84px;max-width:98px;padding:0 6px;font-size:10px
}

.modal .map-engine-v24:not(:fullscreen) .map-v24-status{height:26px;font-size:8px;padding:0 7px}

.modal .map-engine-v24:not(:fullscreen) .map-v24-viewport{bottom:26px}

.modal .map-engine-v24:not(:fullscreen) .map-v24-popup{min-width:105px;max-width:150px;padding:5px 7px}

.modal .map-engine-v24:not(:fullscreen) .map-v24-popup b{font-size:9.5px}

.modal .map-engine-v24:not(:fullscreen) .map-v24-popup small{font-size:8.5px}

.modal *,
.modal-card *{
  font-family:var(--platform-font)!important;
}

.modal h2,
.modal h3,
.modal-card h2,
.modal-card h3{
  font-weight:600!important;
}

#modalBody:has(.waterway-route-builder),
.modal-body:has(.waterway-route-builder){
  overflow-x:hidden!important;
}

@media (max-width:900px){
.permission-modal-wide .switch{transform:scale(.9)}
}

.v161-modal-trigger.condition{display:flex;flex-direction:column;gap:8px}

.v161-modal-trigger.condition .v161-critical-text{font-size:17px}

.gw-editor-modal .modal-body{padding:14px 16px 18px!important}

.gw-editor-modal .modal-foot{position:sticky;bottom:0;z-index:5;background:var(--panel);box-shadow:0 -8px 18px rgba(10,45,65,.06)}

body[data-theme="dark"] .gw-editor-modal .modal-foot{background:#0b2132}

/* V231 — unified modal readability + dark file upload controls across the platform */
.modal,
.modal-card{--modal-field-bg:#ffffff;--modal-field-text:#17384a;--modal-field-muted:#668392;--modal-field-line:#cbdce6;--modal-upload-bg:#f4f9fc;--modal-upload-btn:#0ea5e9;--modal-upload-btn-hover:#0284c7}
body[data-theme="dark"] .modal,
body[data-theme="dark"] .modal-card{--modal-field-bg:#081c2a;--modal-field-text:#eef8fc;--modal-field-muted:#9ebdca;--modal-field-line:#2a4c60;--modal-upload-bg:#0a2a3d;--modal-upload-btn:#18bde8;--modal-upload-btn-hover:#25caef}

.modal label,.modal-card label{color:var(--modal-field-text)!important;font-weight:700}
.modal label>small,.modal-card label>small,.modal .helper-text,.modal-card .helper-text{color:var(--modal-field-muted)!important}
.modal input:not([type="checkbox"]):not([type="radio"]),
.modal select,.modal textarea,
.modal-card input:not([type="checkbox"]):not([type="radio"]),
.modal-card select,.modal-card textarea{
  background:var(--modal-field-bg)!important;
  color:var(--modal-field-text)!important;
  border-color:var(--modal-field-line)!important;
}
.modal input::placeholder,.modal textarea::placeholder,.modal-card input::placeholder,.modal-card textarea::placeholder{color:var(--modal-field-muted)!important;opacity:.9}

/* Native file inputs are restyled so Windows/Chrome never injects the bright white control inside dark dialogs. */
.modal input[type="file"],.modal-card input[type="file"]{
  width:100%;max-width:100%;min-height:42px;box-sizing:border-box;padding:5px 7px!important;
  border:1px solid var(--modal-field-line)!important;border-radius:10px!important;
  background:var(--modal-upload-bg)!important;color:var(--modal-field-text)!important;
  font-size:11px!important;line-height:1.4;cursor:pointer;color-scheme:dark;
}
body:not([data-theme="dark"]) .modal input[type="file"],body:not([data-theme="dark"]) .modal-card input[type="file"]{color-scheme:light}
.modal input[type="file"]::file-selector-button,.modal-card input[type="file"]::file-selector-button{
  min-height:30px;margin-inline-end:10px;padding:6px 13px;border:0;border-radius:8px;
  background:var(--modal-upload-btn)!important;color:#fff!important;font-family:var(--platform-font)!important;
  font-size:11px;font-weight:800;cursor:pointer;transition:background .18s ease,transform .18s ease;
}
.modal input[type="file"]::file-selector-button:hover,.modal-card input[type="file"]::file-selector-button:hover{background:var(--modal-upload-btn-hover)!important}
.modal input[type="file"]::-webkit-file-upload-button,.modal-card input[type="file"]::-webkit-file-upload-button{
  min-height:30px;margin-inline-end:10px;padding:6px 13px;border:0;border-radius:8px;
  background:var(--modal-upload-btn)!important;color:#fff!important;font-family:var(--platform-font)!important;font-size:11px;font-weight:800;cursor:pointer;
}

/* Make modal content hierarchy readable in both themes. */
body[data-theme="dark"] .modal-body,body[data-theme="dark"] .modal-card{color:#e9f5fa}
body[data-theme="dark"] .modal-body small,body[data-theme="dark"] .modal-card small{color:#9ebdca}
body[data-theme="dark"] .modal-body b,body[data-theme="dark"] .modal-card b{color:#f3fbff}