:root{
  --bg:#0b0f17;          /* deep navy-black */
  --card:#0f172a;        /* panel */
  --text:#e6edf3;        /* primary text */
  --muted:#9fb0c2;       /* secondary text */
  --line:#233041;        /* row separators */
  --line-strong:#2e3d53; /* header/bolder lines */
  --accent:#10b2a5;      /* teal accent */
  --accent-weak:rgba(16,178,165,.15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.container{max-width:1100px;margin:0 auto;padding:16px}
.counter{ font-size:13px; color:var(--muted); margin-right:8px }
/* Header */
header{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.flag{font-size:22px}


:root{
  /* adjust to taste; warm amber stands out on dark theme */
  --tenant-color: #f59e0b;
}
.tenant-text{
  color: var(--tenant-color);
  font-weight: 300;   /* a bit bolder for visibility */
}


/* Inputs / buttons */
.card{background:var(--card);border:1px solid var(--line-strong);border-radius:16px;padding:16px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
input,select,button{
  background:#0c1424;border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:10px 12px
}
input::placeholder{color:#7e90a6}
button{cursor:pointer;background:var(--accent-weak)}
.primary{background:var(--accent);color:#062f2b;font-weight:700}
.ghost{background:transparent}
.pill{
  font-size:12px;padding:2px 8px;border-radius:999px;background:#0c1424;
  border:1px dashed var(--line);color:var(--muted)
}

/* Table – crisp lines & alignment */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;            /* header widths control columns */
}
th,td{
  padding:12px 10px;
  text-align:left;
  vertical-align:top;
  overflow-wrap:anywhere;        /* wrap long emails/phones */
  word-break:break-word;
}
th{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.5px;
  text-transform:uppercase;
  background:#0c1424;            /* your dark header strip */
  border-bottom:1px solid var(--line-strong);
}
td{ border-bottom:1px solid var(--line); }
tbody tr:hover{ background:rgba(16,178,165,.05); }

/* Column sizing */
th.col-flat, td.col-flat{
  width:80px;                   /* ~4 chars + padding */
  min-width:100px; max-width:90px;
  white-space:nowrap;
  text-align:center;
}
th.col-tower, td.col-tower{
  width:30px; min-width:25px;
  white-space:nowrap; text-align:center;
}
th.col-name, td.col-name{
  width:200px;
  padding-left:6px;              /* pull Name closer to Tower */
 white-space: nowrap;      /* do not wrap */
  overflow: hidden;         /* clip overflow */
  text-overflow: ellipsis;  /* show … when too long */
}
th.col-emails, td.col-emails{
  width:260px;                   /* give emails their own space */
}
th.col-occupancy, td.col-occupancy{
  width:140px;
  white-space:nowrap;            /* keep occupancy on one line */
}


 

/* Responsive: relax email width on smaller screens */
@media (max-width:1100px){
  th.col-emails, td.col-emails { width:auto; }
}
/* Dialog */


/* === Add Entry / Edit dialog: single-column, tidy spacing === */
#dlg #frm{
  display: grid !important;
  grid-template-columns: 1fr !important;   /* one row per field group */
  row-gap: 12px !important;
}
 

/* specific tweaks for the tags textarea */
#f-feature1{
  min-height:20px;            /* bigger by default */
  resize:vertical;             /* allow user to resize */
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height:20px;
  width: 550px;
}
/* Each field group: Label | Input on the same line */
#dlg #frm > div{
  display: grid !important;
  grid-template-columns: 170px minmax(0,1fr) !important;  /* tweak 170px as needed */
  column-gap: 10px !important;
  align-items: center !important;
}

/* Tidy label/input */
#dlg #frm > div > label{
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
  text-align: right !important;
  padding-right: 4px !important;
}
#dlg #frm > div > input,
#dlg #frm > div > select,
#dlg #frm > div > textarea{
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: #0c1424 !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
}

/* Kill any leftover 2-column helpers inside the form */
#dlg #frm .row-grid,
#dlg #frm .two-col,
#dlg #frm .columns,
#dlg #frm .grid-2{
  display: contents !important;  /* flatten wrapper so children become rows */
}
#dlg #frm .row-grid > div,
#dlg #frm .two-col > div,
#dlg #frm .columns > div,
#dlg #frm .grid-2 > div{
  display: grid !important;
  grid-template-columns: 170px minmax(0,1fr) !important;  /* label | input */
  column-gap: 10px !important;
  align-items: center !important;
  grid-column: 1 / -1 !important;  /* each child uses a whole row */
}

/* Small screens: stack label over input for readability */
@media (max-width: 560px){
  #dlg #frm > div{ grid-template-columns: 1fr !important; }
  #dlg #frm > div > label{ text-align: left !important; padding-right: 0 !important; }
}

/* Tenant highlight */


dialog{background:var(--card);border:1px solid var(--line-strong);border-radius:16px;padding:0;color:var(--text);width:min(720px,92vw)}
.modal-head{padding:14px 16px;border-bottom:1px solid var(--line-strong);display:flex;justify-content:space-between;align-items:center}
.modal-body{padding:16px}
.modal-actions{padding:14px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}