/* Global Modal Styles - Shared across site */

.modal {
    /* display controlled by the static modal controller */
    position: fixed;
    inset: 0;
    z-index: 2000; /* High enough to clear everything */
    overflow: hidden;
}

.modal[hidden] {
    display: none !important;
}

[x-cloak] { display: none !important; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
}

.modal-dialog {
position: relative;
max-width: min(800px, 96vw);
margin: 4rem auto;
background: var(--paper, #fff);
color: var(--ink, #333);
padding: 1.5rem 1.75rem 1.75rem;
max-height: 90vh;
overflow: auto;
display: flex;
flex-direction: column;
border-radius: var(--nec-radius-dialog);
border: 1px solid var(--nec-line-control);
box-shadow: var(--nec-shadow-overlay);
}

/* Modal Sizes */
.modal-dialog.max-w-900 { max-width: min(900px, 96vw); }
.modal-dialog.max-w-95vw { max-width: 95vw; }
.modal-dialog.max-w-700 { max-width: min(700px, 96vw); }
.modal-dialog.max-w-500 { max-width: min(500px, 96vw); }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--line-strong, #ccc);
    flex-shrink: 0;
}

.modal-header h2, .modal-header h3 {
    margin: 0;
    color: var(--charcoal, #222);
    font-family: var(--font-serif, serif);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.modal-close {
background: transparent;
color: var(--ink, #333);
border: 1.5px solid var(--line-strong, #ccc);
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
padding: 0.35rem 0.6rem;
transition: all 200ms ease;
line-height: 1;
border-radius: var(--nec-radius);
min-height: var(--nec-control-default);
min-width: var(--nec-control-default);
}

.modal-close:hover {
background: rgba(0, 0, 0, 0.03);
border-color: var(--ink, #333);
}

.modal-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light, #eee);
    flex-shrink: 0;
}

body.modal-open {
    overflow: hidden;
}

/* Specific Modal Adjustments */
.kg-modal-body {
    height: 600px;
    display: flex;
    flex-direction: column;
}

.json-preview-wrap, .html-preview-wrap {
    background: #fdfdfd;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #eee;
    font-family: monospace;
    white-space: pre-wrap;
    font-size: 0.9rem;
}

.csv-preview-wrap {
    background: #fdfdfd;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid #eee;
    font-family: inherit;
    white-space: normal;
    font-size: 0.95rem;
}

.modal.csv-modal .modal-dialog {
    max-width: 95vw;
    margin: 2rem auto;
}

/* ==========================================================================
   MOBILE MODAL OVERRIDES — full-screen on small devices
   ========================================================================== */

@media (max-width: 768px) {
  .modal-dialog {
    box-sizing: border-box;
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: none;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
  }

  /* Size variants also go full-screen */
  .modal-dialog.max-w-900,
  .modal-dialog.max-w-95vw,
  .modal-dialog.max-w-700,
  .modal-dialog.max-w-500 {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0;
    border-radius: 0;
  }

  .modal-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: var(--paper, #fff);
    z-index: 1;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .modal-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 0;
  }

  .modal-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--paper, #fff);
    padding-top: 0.75rem;
  }

  /* Logistics modal: override wide dialog */
  .logistics-modal-dialog {
    max-width: 100vw !important;
  }

  /* Knowledge graph container: fit mobile */
  .kg-modal-body {
    height: calc(100vh - 8rem);
  }

  #knowledge-graph-container {
    height: calc(100vh - 12rem);
  }
}

/* The account/operator dialog shell uses the same shared dialog owner. */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); }
.modal-overlay.active { display: flex; }
.modal-container { background: var(--paper-bright); border-radius: var(--r-3); box-shadow: var(--shadow-3); max-width: 95vw; max-height: 90vh; width: 100%; display: flex; flex-direction: column;  }
.modal-xl { width: 98vw; }
.modal-title { font-family: var(--font-serif); font-size: 1.5rem; margin: 0; }
.modal-body::-webkit-scrollbar { width: 12px; height: 12px; }
.modal-body::-webkit-scrollbar-track { background: var(--gray-1); border-radius: var(--nec-radius); }
.modal-body::-webkit-scrollbar-thumb { background: var(--gray-4); border: 3px solid var(--gray-1); border-radius: var(--nec-radius); }
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--ink); }

.modal-container { padding: 16px; border: 1px solid var(--nec-line-control); border-radius: var(--nec-radius-dialog); }
.modal-container > .modal-body { padding: 0; scrollbar-width: auto; scrollbar-color: var(--nec-muted) var(--nec-paper); }