/* ---------------------------------------------------------------------------
   AtaPorta theme — matches the branded VitalPBX 4.2 admin UI so the billing
   app reads as part of the same suite.

   Measurements and colours are taken from the PBX dashboard and the Inbound
   Routes form. If you rebrand the PBX, the tokens below are the only thing
   that needs to change.
   ------------------------------------------------------------------------ */

:root {
  --teal:        #17A2B8;   /* accent: stat circles, active nav, tab underline */
  --teal-dark:   #128799;
  --teal-soft:   #E4F4F7;

  --topbar:      #EAE0E0;   /* the dusty rose header band */
  --topbar-line: #DCCFCF;
  --canvas:      #EDF1F3;   /* content area behind the cards */
  --panel:       #FFFFFF;
  --rail:        #FFFFFF;
  --userblock:   #8C8C8C;

  --ink:         #444444;
  --ink-strong:  #333333;
  --muted:       #777777;
  --faint:       #999999;
  --line:        #E3E3E3;
  --line-soft:   #EFEFEF;
  --field-line:  #CCCCCC;

  --green:       #2E9E4F;
  --green-dark:  #268543;
  --red:         #DC3545;
  --red-dark:    #C22333;
  --blue:        #1C7ED6;
  --blue-dark:   #1668B3;
  --amber:       #B4761A;
  --amber-soft:  #FCF4E6;

  --rail-w:      86px;
  --submenu-w:   214px;
  --topbar-h:    60px;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Open Sans', 'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

/* --- top bar ------------------------------------------------------------ */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  background: var(--topbar);
  border-bottom: 1px solid var(--topbar-line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  z-index: 40;
}

.topbar-burger {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--ink-strong);
  display: flex;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink-strong);
  letter-spacing: -.2px;
  white-space: nowrap;
}
.topbar-brand .mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700;
}
.topbar-brand small {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .6px;
}

.topbar-search {
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.topbar-search input {
  width: 100%;
  height: 40px;
  border: 1px solid #DCDCDC;
  border-radius: 6px;
  background: #fff;
  padding: 0 14px 0 42px;
  font: inherit;
  color: var(--ink);
}
.topbar-search input::placeholder { color: #A8A8A8; }
.topbar-search svg {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #8A8A8A;
  pointer-events: none;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-strong);
  white-space: nowrap;
}
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
}
.avatar.lg { width: 54px; height: 54px; font-size: 26px; }

.dryrun-flag {
  background: var(--amber-soft);
  border: 1px solid #E4CDA1;
  color: var(--amber);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: 3px;
}


/* --- app switcher -------------------------------------------------------- */
/* Sits in the top bar of both surfaces so the phone system and billing read
   as two rooms in one building rather than two products. */

.appswitch {
  display: inline-flex;
  border: 1px solid #D3C7C7;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.55);
}
.appswitch a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #6A5F5F;
  text-decoration: none;
  white-space: nowrap;
}
.appswitch a:hover { background: rgba(255,255,255,.85); text-decoration: none; }
.appswitch a.is-current {
  background: var(--teal);
  color: #fff;
}
.appswitch a + a { border-left: 1px solid #D3C7C7; }

@media (max-width: 780px) {
  .appswitch a span { display: none; }
  .appswitch a { padding: 7px 11px; }
}

/* --- left navigation ---------------------------------------------------- */

.userblock {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  width: calc(var(--rail-w) + var(--submenu-w));
  height: 92px;
  background: var(--userblock);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  overflow: hidden;
  z-index: 30;
}
/* the diagonal highlight across the corner of the PBX user panel */
.userblock::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(255,255,255,.16) 0 42%, transparent 42%);
  pointer-events: none;
}
.userblock-name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.userblock-sub  { font-size: 13px; opacity: .85; }

.rail {
  position: fixed;
  top: calc(var(--topbar-h) + 92px);
  bottom: 0;
  left: 0;
  width: var(--rail-w);
  background: var(--rail);
  padding-top: 10px;
  z-index: 30;
}
.rail-item {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 14px 4px 12px;
  cursor: pointer;
  color: #4A4A4A;
  text-align: center;
  font: inherit;
}
.rail-item span {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.rail-item:hover { color: var(--teal); }
.rail-item.is-active { color: var(--teal); }

.submenu {
  position: fixed;
  top: calc(var(--topbar-h) + 92px);
  bottom: 0;
  left: var(--rail-w);
  width: var(--submenu-w);
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 10px 0;
  overflow-y: auto;
  z-index: 20;
}
.submenu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  padding: 11px 16px;
  cursor: pointer;
  text-align: left;
}
.submenu-item:hover { background: #F6F8F9; }
.submenu-item.is-active { color: var(--teal); font-weight: 600; }
.submenu-item svg { flex: none; }
.submenu-item .grow { flex: 1; }
.submenu-item .mark { color: var(--faint); font-size: 15px; line-height: 1; }
.submenu-item.is-active .mark { color: var(--teal); }

/* --- content shell ------------------------------------------------------ */

.shell {
  margin: var(--topbar-h) 0 0 calc(var(--rail-w) + var(--submenu-w));
  min-height: calc(100vh - var(--topbar-h));
  padding: 0 16px 40px;
}
.shell.no-nav { margin-left: 0; padding-top: 18px; }

.tabstrip {
  display: flex;
  gap: 2px;
  padding-top: 10px;
}
.tab {
  position: relative;
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--ink);
  padding: 12px 46px 12px 20px;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  font-size: 14px;
}
.tab.is-active { background: var(--panel); font-weight: 600; }
.tab-icons {
  position: absolute;
  right: 9px; top: 6px;
  display: flex; gap: 5px;
  color: var(--faint);
}
.tab-icons i {
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.tab-icons i:hover { color: var(--ink); }

.tabpanel { display: none; padding-top: 16px; }
.tabpanel.is-active { display: block; }

/* --- cards -------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin-bottom: 16px;
}
.card-head {
  padding: 15px 18px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.card-body { padding: 15px 18px; }
.card-body.tight { padding: 10px 18px; }

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 16px;
}

/* stat card: teal disc, uppercase label, muted detail line */
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-disc {
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid; place-items: center;
}
.stat-disc.is-amber { background: var(--amber); }
.stat-disc.is-green { background: var(--green); }
.stat-label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--ink);
  text-transform: uppercase;
}
.stat-value { font-size: 14px; color: var(--muted); margin-top: 2px; }
.stat-value strong { color: var(--ink-strong); font-weight: 600; }

/* the ringed list rows from the Uptime card */
.ringlist { list-style: none; margin: 0; padding: 0; }
.ringlist li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
}
.ring {
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--teal);
  border-radius: 50%;
  color: var(--teal);
  display: grid; place-items: center;
}
.ringlist .t { font-weight: 600; color: var(--ink); }
.ringlist .s { font-size: 13px; color: var(--muted); }

/* label/value rows from System Information */
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.kv tr:last-child td { border-bottom: 0; }
.kv td:last-child { text-align: right; color: var(--ink-strong); }
.kv td:first-child { color: var(--muted); }

/* the big-number footer strip under the traffic cards */
.figures {
  display: flex;
  border-top: 1px solid var(--line-soft);
}
.figures div {
  flex: 1;
  text-align: center;
  padding: 16px 6px;
  border-left: 1px solid var(--line-soft);
}
.figures div:first-child { border-left: 0; }
.figures b { display: block; font-size: 22px; font-weight: 600; color: var(--ink); }
.figures span { font-size: 12.5px; color: var(--muted); }

/* --- data table --------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-strong);
  vertical-align: middle;
}
.table tbody tr:hover { background: #F7FAFB; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .empty { text-align: center; color: var(--muted); padding: 28px; }

.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 3px 9px;
  border-radius: 11px;
  background: #EEE;
  color: #555;
  white-space: nowrap;
}
.badge.lv0 { background: #E8F5EC; color: var(--green-dark); }
.badge.lv1 { background: var(--amber-soft); color: var(--amber); }
.badge.lv2,
.badge.lv3 { background: #FBE9DC; color: #B0530F; }
.badge.lv4 { background: #FBE3E5; color: var(--red-dark); }

/* --- forms -------------------------------------------------------------- */

.formtabs {
  display: flex;
  gap: 24px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}
.formtab {
  background: none; border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 15px 2px 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.formtab.is-active { color: var(--teal); border-bottom-color: var(--teal); }

.formgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 6px 48px;
}
.field {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.field > label { color: var(--ink); font-size: 13.5px; }
.field .req { color: var(--red); }

input[type=text],
input[type=email],
input[type=tel],
select,
textarea {
  width: 100%;
  height: 38px;
  border: 1px solid var(--field-line);
  border-radius: 3px;
  background: #fff;
  padding: 0 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-strong);
}
textarea { height: auto; padding: 8px 10px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(23,162,184,.14);
}
input:disabled, select:disabled { background: #F4F4F4; color: var(--faint); }

.formsection {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 26px 0 4px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

/* the No/Yes rocker used throughout the PBX forms */
.rocker {
  display: inline-flex;
  align-items: center;
  width: 68px; height: 34px;
  border: 1px solid #D6D6D6;
  border-radius: 3px;
  background: #EDEDED;
  cursor: pointer;
  padding: 3px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.rocker .knob {
  flex: 1;
  height: 100%;
  background: #fff;
  border: 1px solid #D6D6D6;
  border-radius: 2px;
  display: grid; place-items: center;
}
.rocker[aria-pressed="true"] { background: var(--teal-soft); border-color: #A8DCE5; }
.rocker[aria-pressed="true"] .knob { order: 2; background: var(--teal); border-color: var(--teal); color: #fff; }

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 3px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn-green  { background: var(--green); }
.btn-green:hover:not(:disabled)  { background: var(--green-dark); }
.btn-red    { background: var(--red); }
.btn-red:hover:not(:disabled)    { background: var(--red-dark); }
.btn-blue   { background: var(--blue); }
.btn-blue:hover:not(:disabled)   { background: var(--blue-dark); }
.btn-teal   { background: var(--teal); }
.btn-teal:hover:not(:disabled)   { background: var(--teal-dark); }
.btn-plain  { background: #fff; color: var(--ink); border: 1px solid var(--field-line); }
.btn-plain:hover:not(:disabled)  { background: #F4F6F7; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }

/* the fixed Update / Delete / Cancel strip at the foot of a PBX form */
.actionbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

/* --- messages ----------------------------------------------------------- */

.alert {
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  color: #7A5310;
  padding: 12px 15px;
  border-radius: 0 3px 3px 0;
  margin-bottom: 16px;
}
.alert.is-error { border-left-color: var(--red); background: #FBE9EB; color: #8E2530; }
.alert.is-ok    { border-left-color: var(--green); background: #E9F6ED; color: #1E6B37; }
.alert strong { font-weight: 700; }

.hint { color: var(--muted); font-size: 13px; }
.hidden { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

.money { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .userblock, .rail, .submenu { display: none; }
  .shell { margin-left: 0; }
  .topbar-search { display: none; }
  .field { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}