/* ==========================================================================
   IPC Unified UI — drop-in styles
   Theme: deep-navy background, electric-blue accents (matches the map vibe)
   One file to rule them all.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

  .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:2000}
  .modal.show{display:flex}
  .modal .sheet{background:#fff;border-radius:12px;max-width:520px;width:92%;padding:16px;border:1px solid #e5e7eb;box-shadow:0 10px 30px rgba(0,0,0,.2)}
  .modal .list label{display:flex;align-items:center;gap:10px;padding:6px 4px}
  
:root{
  /* core palette */
  --bg: #0b122b;             /* page background */
  --bg-2: #0e1734;           /* section background */
  --card: #101828;           /* dark card */
  --card-contrast: #ffffff;  /* light card text */
  --surface: #ffffff;        /* light surfaces (forms/cards) */
  --text: #0f172a;           /* primary text for light cards */
  --muted: #6b7280;
  --border: #e5e7eb;

  --accent: #0d63ff;         /* primary accent */
  --accent-600: #0a4fce;
  --accent-700: #083ea3;

  --good: #22c55e;
  --bad:  #ef4444;
  --warn: #f59e0b;

  --radius: 12px;
  --shadow-1: 0 1px 2px rgba(16,24,40,.06);
  --shadow-2: 0 6px 18px rgba(16,24,40,.12);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,body { min-height:100%; }

body{
  margin:0;
  font-family: "Roboto", sans-serif;
  line-height:1.45;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #172554 0%, transparent 60%),
    radial-gradient(1000px 600px at 110% 20%, #0f1e47 0%, transparent 55%),
    var(--bg);
}

/* ========================================================================== */
/* Layout helpers                                                             */
/* ========================================================================== */

.container{
  width:100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0px;
}

.wrap{ /* login page centerer */
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}

.card{
  background: var(--surface);
  color: #0e1734;
  border: 1px solid #f0f0f0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 8px;
}

.headerbar{
  background: linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,.05)), var(--bg-2);
  color:#e5e7eb;
  padding:10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.headerbar a{ color:#e5e7eb; text-decoration:none; }
.headerbar a:hover{ text-decoration:underline; }

/* ========================================================================== */
/* Typography & links                                                         */
/* ========================================================================== */

h1,h2,h3{ margin:0 0 12px; line-height:1.2; }
h1{ font-size: 22px; }
h2{ font-size: 18px; }
h3{ font-size: 16px; }
p { margin: 8px 0 12px; }
a { color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* muted text + utility */
.muted{ color: var(--muted); }
.hidden{ display: none !important; }

/* ========================================================================== */
/* Forms                                                                      */
/* ========================================================================== */

label{ display:block; margin:10px 0 6px; font-weight:600; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select, textarea{
  width: auto;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .02s ease;
  box-shadow: var(--shadow-1);
}
textarea{ height: auto; padding:10px 12px; min-height: 100px; resize: vertical; }

input:focus, select:focus, textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13,99,255,.15), var(--shadow-2);
}

.form-row{ display:flex; gap:8px; align-items:center; flex-wrap: wrap; }



/* ========================================================================== */
/* Buttons                                                                    */
/* ========================================================================== */

button, .btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: 38px; padding: 0 14px;
  border: 0; border-radius: 10px;
  background: var(--accent);
  color: #fff; font-weight:700;
  cursor:pointer;
  transition: background .12s ease, box-shadow .12s ease, transform .02s ease, filter .12s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
  user-select: none;
}
button:hover, .btn:hover{
  filter: brightness(1.05);
  background: #023aa3;
  
}
button:active, .btn:active{
  transform: translateY(-1);
  box-shadow: 0 0px 0 rgba(0,0,0,.12);
}
button:disabled, .btn:disabled{ opacity:.6; cursor:not-allowed; }

/* variants */
.btn--ghost{
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn--danger{ background: var(--bad); }
.btn--ok{ background: var(--good); }
.btn--muted{
  background: #eef2f7;
  color: #111827;
}

/* Button groups */
.btn-group{ display:inline-flex; gap:8px; align-items:center; flex-wrap:nowrap; }


/* ========================================================================== */
/* Tables                                                                     */
/* ========================================================================== */

table{
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
    border-top: 1px solid var(--border);
 /* border-radius: var(--radius) var(--radius) 0px 0px; */
  overflow: hidden;
  
}
th, td{
  border-bottom: 1px solid var(--border);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}
thead th{
  background: #0f1f59;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
tbody tr:hover{
  background: #f3f6fb;
}

/* Inputs inside table cells */
td input[type="text"],
td input[type="email"]{
  width: 100%;
  height: 34px;
}

/* ========================================================================== */
/* Status / alerts                                                            */
/* ========================================================================== */

#status{
  display:none;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #f7f7f9;
  color: #111827;
}
#status.ok{
  border-color: #86efac;
  background: #ecfdf5;
  color: #166534;
}
#status.err{
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

/* ========================================================================== */
/* Login page polish                                                          */
/* ========================================================================== */

.login-hero{
  /* optional: give login card the white-on-navy look */
  background: var(--surface);
  color: var(--text);
}
/* Login message: reserve space so the card never changes height */
.msg{
  margin-top:10px;
  font-size:14px;
  height:22px;                 /* fixed line-height space */
  line-height:22px;
  overflow:hidden;             /* clip long messages */
  white-space:nowrap;
  text-overflow:ellipsis;
  opacity:0;                   /* hidden by default but space reserved */
  transition:opacity .15s ease;
}
.msg:not(:empty){ opacity:1; } /* show when there’s text */
.msg.error{ color:#b42318; }
.msg.ok{ color:#067647; }
 
/* ========================================================================== */
/* Cards & panels                                                             */
/* ========================================================================== */

.panel{ 
  background: var(--surface);
  border: 1px solid var(--border);

  box-shadow: var(--shadow-1);
  padding: 16px;

  min-height: 100vh; /* fill the screen */
}


/* ========================================================================== */
/* Misc                                                                       */
/* ========================================================================== */

hr{ border:0; border-top:1px solid var(--border); margin:16px 0; }

.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:12px; background:#eef2ff; color:#3730a3;
}

/* reduce motion for folks who prefer it */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}
#grid tbody tr:nth-child(even) {
  background-color: #f4f4f4; /* very light gray */
}
/* alternating striping */
#grid tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* hover highlight that blends with striping */
#grid tbody tr:hover {
  background-color: #f3f6fb !important;
}

/* ========================================================================== */
/* Modals                                                                       */
/* ========================================================================== */


 /* Universal Modal Styles */
    .universal-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 10000;
      display: none;
    }

    .universal-modal.active {
      display: block;
    }

    .universal-modal-window {
      position: absolute;
      background: white;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      min-width: 300px;
      min-height: 200px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .universal-modal-header {
      background: #0b122b;
	  color:#fff;
      border-bottom: 1px solid #e9ecef;
      padding: 12px;
      cursor: move;
      user-select: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 800;
      font-size: 22px;
    }

    .universal-modal-close {
      background: #fff;
      border: none;
      font-size: 20px;
      cursor: pointer;
      padding: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      color: #000;
    }

    .universal-modal-close:hover {
      background: #0d63ff;
      color: #fff;
    }

    .universal-modal-content {
      flex: 1;
      padding: 16px;
      overflow: auto;
    }

    .universal-modal-footer {
      border-top: 1px solid #e9ecef;
      padding: 12px 16px;
      display: none;
      justify-content: flex-end;
      gap: 8px;
    }

    .universal-modal-footer.has-footer {
      display: flex;
    }

    /* Resize handles */
    .universal-resize-handle {
      position: absolute;
      background: transparent;
    }

    .universal-resize-handle.se {
      bottom: 0;
      right: 0;
      width: 20px;
      height: 20px;
      cursor: se-resize;
    }

    .universal-resize-handle.e {
      top: 0;
      right: 0;
      width: 8px;
      height: 100%;
      cursor: e-resize;
    }

    .universal-resize-handle.s {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 8px;
      cursor: s-resize;
    }

    .universal-resize-handle.se::after {
      content: '';
      position: absolute;
      bottom: 2px;
      right: 2px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-bottom: 8px solid #dee2e6;
    }

    /* Modal states */
    .universal-modal-window.dragging,
    .universal-modal-window.resizing {
      transition: none;
    }

    .universal-modal.dragging *,
    .universal-modal.resizing * {
      user-select: none !important;
      pointer-events: none;
    }

    .universal-modal.dragging .universal-modal-header,
    .universal-modal.resizing .universal-resize-handle {
      pointer-events: auto;
    }

 

    /* Form styles */
    .modal-form-group {
      margin-bottom: 15px;
    }

    .modal-form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: 600;
    }

    .modal-form-group input,
    .modal-form-group select,
    .modal-form-group textarea {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
    }

    .modal-btn {
      background: #007cba;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .modal-btn:hover {
      background: #005a8b;
    }

    .modal-btn.secondary {
      background: #6c757d;
    }

    .modal-btn.secondary:hover {
      background: #545b62;
    }