/* ============================================================
   Nexim WorldFeed 360 — AWS Cloudscape theme
   Faithful to AWS Console design tokens
   ============================================================ */

:root{
  /* Cloudscape surface tokens */
  --bg-page:    #fafafa;       /* layout-main */
  --bg-deep:    #f4f4f4;
  --bg-1:       #ffffff;
  --bg-2:       #ffffff;       /* container */
  --bg-3:       #f4f4f4;       /* container header / table thead */
  --bg-disabled:#eaeded;

  /* Top app bar (very dark, like new AWS Console header) */
  --topbar-bg:  #000716;
  --topbar-fg:  #ffffff;
  --topbar-fg-dim: #d1d5db;

  /* Sidebar (classic Cloudscape side nav — Squid Ink) */
  --nav-bg:     #232f3e;
  --nav-bg-2:   #1b2531;
  --nav-fg:     #ffffff;
  --nav-fg-dim: #d1d5db;
  --nav-line:   #414d5c;
  --nav-active-bg: #1a242f;

  /* Text — high-contrast Cloudscape */
  --text:       #000716;       /* body / heading default */
  --text-dim:   #232f3e;       /* secondary (was #414d5c — bumped darker for readability) */
  --muted:      #414d5c;       /* tertiary / muted captions (was #5f6b7a) */
  --muted-2:    #5f6b7a;       /* disabled-form (was #7d8998) */

  /* Borders */
  --line:       #e9ebed;       /* divider-default */
  --line-2:     #d1d5db;       /* input-default */
  --line-3:     #7d8998;       /* button border */

  /* Brand & accents */
  --accent:     #ec7211;       /* AWS orange (primary action) */
  --accent-2:   #ff9900;       /* bright AWS orange (logo) */
  --accent-3:   #ce6112;       /* primary hover */
  --link:       #0972d3;
  --link-hover: #033160;

  /* Status */
  --ok:        #037f0c;
  --ok-bg:     #f2f8f0;
  --ok-bd:     #aecaa1;
  --warn:      #855900;
  --warn-bg:   #fff6e7;
  --warn-bd:   #f1d49a;
  --bad:       #d91515;
  --bad-bg:    #fff7f7;
  --bad-bd:    #f3c0bb;
  --info:      #0972d3;
  --info-bg:   #f1f8ff;
  --info-bd:   #b8d8f0;

  /* Geometry */
  --radius:        16px;       /* container border-radius (Cloudscape) */
  --radius-sm:     8px;        /* input / smaller surface */
  --radius-button: 20px;       /* button (Cloudscape pill) */
  --radius-pill:   999px;

  --shadow:    0 1px 1px 0 rgba(0,28,36,.08), 0 1px 8px 1px rgba(0,28,36,.05);
  --shadow-md: 0 4px 8px 0 rgba(0,28,36,.10), 0 1px 1px 0 rgba(0,28,36,.05);
  --shadow-lg: 0 8px 24px 0 rgba(0,28,36,.16);

  --sidebar-w:  280px;
  --topbar-h:   54px;
}

* { box-sizing: border-box; }

html, body{
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: 'Open Sans','Helvetica Neue', Roboto, Arial, sans-serif;
  font-size: 14px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 22px;
}

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

::selection{ background: rgba(9,114,211,.20); }

/* ===== App shell ===== */
.wf-shell{ display: block; min-height: 100vh; }
.wf-bg{ display: none; }

/* ===== Sidebar ===== */
.wf-sidebar{
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--nav-bg);
  padding: 0 0 18px;
  z-index: 60;
  overflow: auto;
  color: var(--nav-fg);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.wf-sidebar::-webkit-scrollbar{ width: 6px; }
.wf-sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 6px; }

.wf-brand{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--nav-line);
  background: var(--nav-bg-2);
}
.wf-brand .logo-wrap{
  display: flex; align-items: center; justify-content: center;
  height: 36px; width: 100%;
}
.wf-brand img{
  display: block;
  max-height: 36px; max-width: 80%;
  width: auto; height: auto;
  object-fit: contain;
  /* Logo is black-on-white — invert to white for the dark sidebar */
  filter: brightness(0) invert(1);
}
.wf-brand .text-wrap{ width: 100%; }
.wf-brand .nm{
  font-weight: 700;
  font-size: 13px; letter-spacing: 0;
  color: #fff; line-height: 18px;
}
.wf-brand .sb{
  font-size: 11px; color: var(--nav-fg-dim);
  margin-top: 2px;
}

.wf-section{
  font-weight: 700;
  font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase;
  color: #aab7c4;
  padding: 18px 22px 6px;
  border-top: 1px solid var(--nav-line);
  margin-top: 4px;
}
.wf-section:first-of-type{ border-top: none; margin-top: 0; }

.wf-nav a{
  display: flex; align-items: center; gap: 12px;
  padding: 7px 18px 7px 22px;
  color: var(--nav-fg);
  background: transparent;
  border-left: 3px solid transparent;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.wf-nav a i{ width: 16px; text-align: center; color: #aab7c4; font-size: 13px; flex-shrink: 0; }
.wf-nav a:hover{
  background: var(--nav-active-bg);
  color: #fff;
  text-decoration: none;
}
.wf-nav a:hover i{ color: var(--accent-2); }
.wf-nav a.active{
  background: var(--nav-active-bg);
  color: #fff;
  border-left-color: var(--accent-2);
  font-weight: 700;
}
.wf-nav a.active i{ color: var(--accent-2); }
.wf-nav a .badge{
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  padding: 1px 8px;
  font-size: 11px; font-weight: 700;
  border-radius: var(--radius-pill);
}

/* ===== Service launcher pills inside the sidebar ===== */
.wf-console-home{
  display: flex; align-items: center; gap: 10px;
  margin: 12px 16px 8px;
  padding: 9px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: var(--nav-fg);
  font-weight: 600; font-size: 13px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.10);
  transition: background .12s ease, border-color .12s ease;
}
.wf-console-home i{ color: var(--accent-2); font-size: 13px; }
.wf-console-home:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); color:#fff; text-decoration: none; }

.wf-env-pill{
  display: flex; align-items: center; gap: 12px;
  margin: 0 16px 8px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border-left: 4px solid var(--env-color, var(--accent-2));
}
.wf-env-pill i{ font-size: 18px; color: var(--env-color, var(--accent-2)); flex-shrink: 0; }
.wf-env-pill .lbl{ font-size: 10px; font-weight: 700; color: #95a3b8; text-transform: uppercase; letter-spacing: .06em; line-height: 12px; }
.wf-env-pill .nm{ color: #fff; font-weight: 700; font-size: 13px; line-height: 17px; margin-top: 2px; }

/* ===== Top app bar (dark navy, like AWS Console header) ===== */
.wf-main{ margin-left: var(--sidebar-w); min-height: 100vh; background: var(--bg-page); }
.wf-topbar{
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: var(--topbar-bg);
  color: var(--topbar-fg);
  border-bottom: 1px solid #232f3e;
  position: sticky; top: 0; z-index: 40;
}
.wf-topbar-left{ display: flex; align-items: center; gap: 14px; }
.wf-burger{
  display: none;
  border: 1px solid rgba(255,255,255,.20);
  background: transparent;
  color: var(--topbar-fg);
  border-radius: 4px;
  padding: 6px 9px;
  cursor: pointer;
}
.wf-title{
  font-weight: 700;
  font-size: 14px;
  color: var(--topbar-fg);
}

/* ===== Service switcher (AWS "Services" button + dropdown grid) ===== */
.wf-svc-switcher{ position: relative; }
.wf-svc-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--topbar-fg);
  border-radius: 4px;
  font-weight: 600; font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease;
}
.wf-svc-btn:hover{ background: rgba(255,255,255,.14); }
.wf-svc-btn i.fa-th-large{ color: var(--accent-2); }
.wf-svc-panel{
  position: absolute; top: calc(100% + 8px); left: 0;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,7,22,.40);
  width: min(720px, 90vw);
  max-height: 70vh; overflow: auto;
  z-index: 100;
  display: none;
  color: var(--text);
}
.wf-svc-panel.open{ display: block; }
.wf-svc-panel-h{
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--bg-3);
}
.wf-svc-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  padding: 12px;
}
.wf-svc-tile{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
  transition: background .12s ease, border-color .12s ease;
}
.wf-svc-tile:hover{ background: var(--bg-3); border-color: var(--line-3); text-decoration: none; color: var(--text); }
.wf-svc-tile.active{ border-color: var(--accent); background: #fef4ea; }
.wf-svc-tile i{ font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.wf-svc-tile .ttl{ font-weight: 700; font-size: 14px; line-height: 18px; color: var(--text); }
.wf-svc-tile .desc{ color: var(--text-dim); font-size: 12px; line-height: 16px; margin-top: 2px; }

/* ===== Search box (AWS Console-style omnibox) ===== */
.wf-search{
  position: relative;
  display: flex; align-items: center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 6px;
  padding: 0 10px;
  height: 32px;
  width: clamp(220px, 32vw, 420px);
}
.wf-search:focus-within{
  background: #fff;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(255,153,0,.20);
}
.wf-search > i.fa-magnifying-glass{
  color: rgba(255,255,255,.65);
  font-size: 13px;
  margin-right: 8px;
  flex-shrink: 0;
}
.wf-search:focus-within > i.fa-magnifying-glass{ color: var(--text-dim); }
.wf-search input{
  flex: 1; min-width: 0;
  background: transparent;
  border: none; outline: none;
  color: var(--topbar-fg);
  font-size: 13px; font-family: inherit;
  padding: 0;
  height: 100%;
}
.wf-search input::placeholder{ color: rgba(255,255,255,.55); }
.wf-search:focus-within input{ color: var(--text); }
.wf-search:focus-within input::placeholder{ color: var(--muted); }
.wf-search-kbd{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; font-weight: 700;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.18);
  flex-shrink: 0;
  margin-left: 6px;
}
.wf-search:focus-within .wf-search-kbd{ display: none; }

.wf-search-results{
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,7,22,.40);
  max-height: 60vh; overflow-y: auto;
  display: none;
  z-index: 110;
}
.wf-search-results.open{ display: block; }
.wf-search-results .group{
  padding: 8px 14px 4px;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line);
}
.wf-search-results a{
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: background .08s ease;
}
.wf-search-results a:last-child{ border-bottom: none; }
.wf-search-results a:hover,
.wf-search-results a.active{ background: var(--info-bg); color: var(--link-hover); text-decoration: none; }
.wf-search-results a .ico{
  width: 30px; height: 30px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: #fff;
}
.wf-search-results a .ttl{ font-weight: 700; font-size: 14px; line-height: 18px; color: var(--text); }
.wf-search-results a .sub{ font-size: 12px; color: var(--text-dim); line-height: 16px; }
.wf-search-results a .sub mark{ background: #fff8d6; color: var(--text); padding: 0 1px; border-radius: 2px; }
.wf-search-results a .ttl mark{ background: #fff8d6; color: var(--text); padding: 0 1px; border-radius: 2px; }
.wf-search-results a .arr{
  margin-left: auto; color: var(--muted);
  font-size: 12px;
}
.wf-search-results .empty{ padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }
.wf-search-results .hint{ padding: 8px 14px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); background: var(--bg-3); }
.wf-search-results .hint kbd{
  background: #fff; border: 1px solid var(--line-2); border-radius: 3px;
  padding: 1px 5px; font-family: ui-monospace, monospace; font-size: 10px;
  color: var(--text-dim);
}

/* ===== Breadcrumbs (AWS-style) ===== */
.wf-crumbs{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--topbar-fg-dim);
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
.wf-crumbs a{ color: var(--topbar-fg-dim); text-decoration: none; }
.wf-crumbs a:hover{ color: #fff; text-decoration: underline; }
.wf-crumbs .sep{ opacity: .5; }
.wf-crumbs .cur{ color: #fff; font-weight: 600; }

@media (max-width: 980px){
  .wf-svc-btn span{ display: none; }
  .wf-crumbs{ display: none; }
  .wf-search{ width: 180px; }
  .wf-search input::placeholder{ font-size: 12px; }
}
@media (max-width: 720px){
  .wf-search{ display: none; }
}
.wf-topbar-right{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.wf-pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  color: var(--topbar-fg);
  font-size: 12px; font-weight: 600;
}
.wf-pill i{ font-size: 11px; }

/* Pills used inside content area (light) */
.wf-content .wf-pill,
.wf-card .wf-pill,
.wf-table .wf-pill,
.wf-page-h .wf-pill{
  border-color: var(--line-2);
  background: #fff;
  color: var(--text-dim);
}
.wf-content .wf-pill.live,    .wf-content .wf-pill.bad   { color: var(--bad);  border-color: var(--bad-bd);  background: var(--bad-bg);  }
.wf-content .wf-pill.ok       { color: var(--ok);   border-color: var(--ok-bd);   background: var(--ok-bg);   }
.wf-content .wf-pill.warn     { color: var(--warn); border-color: var(--warn-bd); background: var(--warn-bg); }
.wf-content .wf-pill.info     { color: var(--info); border-color: var(--info-bd); background: var(--info-bg); }
.wf-content .wf-pill.violet   { color: #5e3fa3; border-color: #d4cae9; background: #f5f1fb; }

/* Topbar pills override (dark) */
.wf-topbar .wf-pill.warn{ color: #ffe1b3; border-color: rgba(236,114,17,.55); background: rgba(236,114,17,.20); }
.wf-topbar .wf-pill.ok  { color: #c9efc7; border-color: rgba(3,127,12,.55);   background: rgba(3,127,12,.20); }
.wf-topbar .wf-pill.bad { color: #ffc7c2; border-color: rgba(217,21,21,.55);  background: rgba(217,21,21,.20); }
.wf-topbar .wf-pill.info{ color: #cfe8ff; border-color: rgba(9,114,211,.55);  background: rgba(9,114,211,.20); }
.wf-topbar .wf-pill.violet{ color:#dccff5; border-color: rgba(94,63,163,.55); background: rgba(94,63,163,.20); }

/* ===== Content ===== */
.wf-content{ padding: 24px 28px; max-width: 1600px; }

/* ===== Page header (Cloudscape page-heading) ===== */
.wf-page-h{
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.wf-page-h h1{
  margin: 0;
  font-weight: 800;
  font-size: 24px; line-height: 30px;
  color: var(--text);
}
.wf-page-h h1 i{ color: var(--accent); margin-right: 8px; font-size: 22px; }
.wf-page-h .sub{
  margin-top: 6px;
  color: var(--text-dim); font-size: 14px; max-width: 920px;
}
.wf-page-h .actions{ display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Container (Cloudscape) ===== */
.wf-card{
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 20px;
}
.wf-card-h{
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 700;
  font-size: 18px; line-height: 22px;
  color: var(--text);
}
.wf-card-h i { color: var(--accent); margin-right: 8px; font-size: 16px; }
.wf-card-b{ padding: 20px; background: var(--bg-2); color: var(--text); }
.wf-card-b.flush{ padding: 0; }
.wf-card .wf-card{ background: var(--bg-3); border-radius: var(--radius-sm); }

/* ===== KPI (Cloudscape "Key/value" big-number cards) ===== */
.wf-kpi-row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.wf-kpi{
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}
.wf-kpi .lbl{
  font-size: 12px; font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em;
}
.wf-kpi .val{ margin-top: 8px; font-size: 28px; font-weight: 800; color: var(--text); line-height: 32px; letter-spacing: -.01em; }
.wf-kpi.warn .val{ color: var(--warn); }
.wf-kpi.bad  .val{ color: var(--bad); }
.wf-kpi.ok   .val{ color: var(--ok); }
.wf-kpi.info .val{ color: var(--info); }
.wf-kpi.violet .val{ color: #5e3fa3; }

/* ===== Forms ===== */
.wf-label{
  display: block;
  font-size: 14px; font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.wf-label + small,
.wf-label .desc{ font-weight: 400; color: var(--text-dim); }

.wf-input, .wf-select, .wf-textarea, .form-control, .form-select,
select.wf-input, select.wf-select, select.form-control{
  width: 100%;
  background: #fff !important;
  border: 1px solid var(--line-3) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px;
  font-size: 14px; line-height: 22px;
  font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
/* Force native <option> to be readable in all themes (some browsers inherit page bg) */
.wf-content select option,
.wf-content option,
.wf-input option, .wf-select option, .form-control option, .form-select option{
  background: #fff !important;
  color: var(--text) !important;
}
.wf-content select optgroup,
.wf-content optgroup{
  background: var(--bg-3) !important;
  color: var(--text) !important;
  font-weight: 700;
}
.wf-input::placeholder, .wf-textarea::placeholder{ color: var(--muted); }
.wf-input:focus, .wf-select:focus, .wf-textarea:focus, .form-control:focus, .form-select:focus{
  outline: none;
  border-color: var(--link) !important;
  box-shadow: 0 0 0 2px rgba(9,114,211,.30) !important;
}
.wf-input:disabled, .wf-select:disabled, .wf-textarea:disabled{
  background: var(--bg-disabled) !important;
  color: var(--muted) !important;
  cursor: not-allowed;
}
.wf-textarea{ min-height: 90px; resize: vertical; }

.wf-row{ display: grid; gap: 16px; }
.wf-row.cols-2{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wf-row.cols-3{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wf-row.cols-4{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ===== Buttons (Cloudscape-faithful) ===== */
.wf-btn{
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 4px 20px;
  min-height: 32px;
  border-radius: var(--radius-button);
  font-weight: 700;
  font-size: 14px; line-height: 22px;
  border: 2px solid var(--link);
  background: #fff;
  color: var(--link);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  font-family: inherit;
}
.wf-btn:hover{
  background: #f2f8fd;
  border-color: var(--link-hover);
  color: var(--link-hover);
  text-decoration: none;
}
.wf-btn:active{ background: #e9f3fb; }
.wf-btn:focus-visible{ outline: 2px solid var(--link); outline-offset: 2px; }

.wf-btn.primary{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.wf-btn.primary:hover{ background: var(--accent-3); border-color: var(--accent-3); color: #fff; }
.wf-btn.primary:active{ background: #b8520c; }

.wf-btn.ok    { background: #fff; color: var(--ok);   border-color: var(--ok);   }
.wf-btn.ok:hover{ background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.wf-btn.ok.solid,
.wf-btn.ok-solid { background: var(--ok); color: #fff; }

.wf-btn.warn  { background: #fff; color: var(--warn); border-color: var(--warn); }
.wf-btn.warn:hover{ background: var(--warn-bg); color: var(--warn); }

.wf-btn.bad   { background: #fff; color: var(--bad);  border-color: var(--bad);  }
.wf-btn.bad:hover{ background: var(--bad-bg); color: var(--bad); }

.wf-btn.info  { background: var(--link); color: #fff; border-color: var(--link); }
.wf-btn.info:hover{ background: var(--link-hover); border-color: var(--link-hover); color: #fff; }

.wf-btn.violet{ background: #fff; color: #5e3fa3; border-color: #5e3fa3; }
.wf-btn.violet:hover{ background: #f5f1fb; color: #5e3fa3; }

.wf-btn.sm{ padding: 2px 14px; min-height: 28px; font-size: 13px; }
.wf-btn.lg{ padding: 6px 24px; min-height: 38px; font-size: 16px; }
.wf-btn.block{ width: 100%; }

.wf-btn.ghost{
  background: transparent;
  border-color: transparent;
  color: var(--link);
  padding: 4px 10px;
}
.wf-btn.ghost:hover{ background: #f2f8fd; color: var(--link-hover); }

/* ===== Status indicator (Cloudscape "status" component) ===== */
.wf-status{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px; line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  white-space: nowrap;
}
.wf-status::before{
  content: "●"; font-size: 10px; line-height: 1;
  color: currentColor;
}
.wf-status.pending,
.wf-status.investigating,
.wf-status.major,
.wf-status.warn   { color: var(--warn); }
.wf-status.confirmed,
.wf-status.resolved,
.wf-status.online,
.wf-status.accepted,
.wf-status.ok     { color: var(--ok); }
.wf-status.canceled,
.wf-status.offline,
.wf-status.open,
.wf-status.critical,
.wf-status.live,
.wf-status.bad    { color: var(--bad); }
.wf-status.completed{ color: #5e3fa3; }
.wf-status.draft,
.wf-status.closed { color: var(--muted); }
.wf-status.issued,
.wf-status.info,
.wf-status.minor  { color: var(--info); }
.wf-status.revised{ color: var(--accent); }
.wf-status.feasibility{ color: #5e3fa3; }
.wf-status.inprogress,
.wf-status.in-progress{ color: var(--info); }

/* ===== Tables ===== */
.wf-table{
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg-2); color: var(--text);
}
.wf-table thead th{
  position: sticky; top: 0;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line-2);
  text-align: left; padding: 10px 18px;
  font-weight: 700;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim);
}
.wf-table tbody td, .wf-table > tbody > tr > th{
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 22px;
  vertical-align: top;
  background: var(--bg-2);
  color: var(--text);
}
.wf-table tbody td.wf-text-dim,
.wf-table tbody td.wf-text-muted{ color: var(--text-dim); }
/* Make sure inline small inside tables stays readable */
.wf-table small{ color: var(--text-dim); font-size: 12px; font-weight: 500; }
.wf-table > tbody > tr > th{ width: 30%; color: var(--text-dim); font-weight: 700; background: var(--bg-3); }
.wf-table tbody tr:hover td,
.wf-table tbody tr:hover th{ background: #f7faff; }
.wf-table tbody tr.row-pending td,
.wf-table tbody tr.row-pending th{ background: var(--warn-bg); }
.wf-table tbody tr.row-live td,
.wf-table tbody tr.row-live th{ background: var(--bad-bg); }

.wf-table-wrap{ overflow: auto; background: var(--bg-2); }

/* Bootstrap table override */
.wf-content table,
.wf-content .table,
.wf-content .table-responsive,
.wf-content table.table-dark,
.wf-content table.table-bordered,
.wf-content table.table-hover,
.wf-content table.table-striped{
    background: var(--bg-2) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}
.wf-content table th,
.wf-content table td,
.wf-content .table th,
.wf-content .table td{
    background: var(--bg-2) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}
.wf-content table thead th,
.wf-content .table thead th{
    background: var(--bg-3) !important;
    color: var(--text-dim) !important;
    border-color: var(--line-2) !important;
}
.wf-content table tbody tr:hover > td,
.wf-content .table tbody tr:hover > td,
.wf-content .table-hover tbody tr:hover > td{ background: #f7faff !important; }
.wf-content .table-responsive,
.wf-content .table-wrapper { background: var(--bg-2); border-radius: var(--radius-sm); }

.wf-content .text-muted,
.wf-content .text-gray-400,
.wf-content .text-gray-300{ color: var(--text-dim) !important; }
.wf-content small.text-muted,
.wf-content .small.text-muted{ color: var(--muted) !important; }

/* ===== Plain HTML elements ===== */
.wf-content pre{
    background: var(--bg-3);
    color: var(--text);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    overflow: auto;
    font-size: 13px; line-height: 20px;
}
.wf-content code{
    background: rgba(236,114,17,.10);
    color: var(--accent-3);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
}
.wf-content blockquote{
    border-left: 3px solid var(--accent);
    padding: 8px 14px;
    color: var(--text-dim);
    background: var(--bg-3);
    border-radius: 0 4px 4px 0;
    margin: 12px 0;
}
.wf-content hr{ border: none; border-top: 1px solid var(--line); margin: 16px 0; }

/* Bootstrap dropdowns/modals */
.wf-content .modal-content,
.wf-content .dropdown-menu{
    background: var(--bg-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--line-2) !important;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-sm);
}
.wf-content .dropdown-menu .dropdown-item{ color: var(--text); padding: 6px 12px; }
.wf-content .dropdown-menu .dropdown-item:hover{ background: var(--bg-3); color: var(--link-hover); }

/* Legacy button shims (btn-neo, btn-outline-neo used by older user pages) */
.wf-content .btn.btn-neo,
.wf-content .btn-neo{
    display: inline-flex; align-items: center; gap: 7px; justify-content: center;
    padding: 7px 16px; min-height: 32px;
    border-radius: var(--radius-button);
    font-weight: 700; font-size: 14px;
    border: 2px solid var(--accent);
    background: var(--accent);
    color: #fff !important;
    text-decoration: none !important;
    cursor: pointer;
}
.wf-content .btn.btn-neo:hover,
.wf-content .btn-neo:hover{ background: var(--accent-3) !important; border-color: var(--accent-3); color:#fff !important; }
.wf-content .btn.btn-outline-neo,
.wf-content .btn-outline-neo{
    display: inline-flex; align-items: center; gap: 7px; justify-content: center;
    padding: 5px 14px; min-height: 32px;
    border-radius: var(--radius-button);
    font-weight: 700; font-size: 14px;
    border: 2px solid var(--link);
    background: #fff;
    color: var(--link) !important;
    text-decoration: none !important;
    cursor: pointer;
}
.wf-content .btn.btn-outline-neo:hover,
.wf-content .btn-outline-neo:hover{ background: var(--info-bg) !important; border-color: var(--link-hover); color: var(--link-hover) !important; }
.wf-content .btn-sm.btn-neo,
.wf-content .btn-sm.btn-outline-neo{ padding: 3px 10px; min-height: 28px; font-size: 12px; }

/* Legacy class shims */
.wf-content .neo-card{
    background: var(--bg-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    color: var(--text);
}
.wf-content .neo-card-header,
.wf-content .neo-header{
    padding: 14px 20px;
    border-bottom: 1px solid var(--line) !important;
    background: var(--bg-2) !important;
    font-weight: 700;
    font-size: 18px;
    color: var(--text) !important;
}
.wf-content .neo-card .card-body,
.wf-content .neo-card .neo-card-body{ background: var(--bg-2) !important; color: var(--text) !important; padding: 18px; }
.wf-content .pill{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-2);
    background: #fff;
    font-size: 12px; font-weight: 600;
    color: var(--text-dim);
}
.wf-content .form-control,
.wf-content .form-select{
    background: #fff !important;
    border: 1px solid var(--line-3) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
}
.wf-content .form-control:focus,
.wf-content .form-select:focus{
    border-color: var(--link) !important;
    box-shadow: 0 0 0 2px rgba(9,114,211,.30) !important;
}
.wf-content .text-info{ color: var(--info) !important; }

/* Native <dialog> */
dialog{
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0;
}
dialog::backdrop{ background: rgba(0,7,22,.55); }

/* AdminLTE leftover */
.wf-content .card{ background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-radius: var(--radius); }
.wf-content .card-header{ background: var(--bg-2) !important; color: var(--text) !important; border-bottom: 1px solid var(--line) !important; font-weight: 700; }
.wf-content .card-body{ background: var(--bg-2) !important; color: var(--text) !important; }
.wf-content .alert{ background: var(--bg-3); color: var(--text); border-color: var(--line-2); border-radius: var(--radius-sm); }
.wf-content .alert-success{ background: var(--ok-bg) !important; color: var(--ok) !important; border-color: var(--ok-bd) !important; }
.wf-content .alert-info,
.wf-content .alert-primary{ background: var(--info-bg) !important; color: var(--info) !important; border-color: var(--info-bd) !important; }
.wf-content .alert-warning{ background: var(--warn-bg) !important; color: var(--warn) !important; border-color: var(--warn-bd) !important; }
.wf-content .alert-danger{ background: var(--bad-bg) !important; color: var(--bad) !important; border-color: var(--bad-bd) !important; }

/* ===== Alerts (Cloudscape "Flashbar") ===== */
.wf-alert{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: #fff;
  margin-bottom: 14px;
  font-size: 14px; line-height: 22px;
  color: var(--text);
  box-shadow: var(--shadow);
}
.wf-alert::before{
  content: ""; flex-shrink: 0;
  width: 18px; height: 18px; margin-top: 2px;
  background-repeat: no-repeat; background-size: contain;
}
.wf-alert.ok  { border-color: var(--ok-bd);   background: var(--ok-bg);   color: #00440b; }
.wf-alert.warn{ border-color: var(--warn-bd); background: var(--warn-bg); color: #5b3d00; }
.wf-alert.bad { border-color: var(--bad-bd);  background: var(--bad-bg);  color: #870c0c; }
.wf-alert.info{ border-color: var(--info-bd); background: var(--info-bg); color: #033160; }

/* ===== Modal overlay ===== */
.wf-overlay{
  position: fixed; inset: 0;
  background: rgba(0,7,22,.55);
  z-index: 80;
  display: none;
}
.wf-overlay.show{ display: block; }

/* ===== Service tiles ===== */
.wf-tile-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; }
.wf-tile{
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text); text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.wf-tile:hover{
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  color: var(--text);
  text-decoration: none;
}
.wf-tile i{ font-size: 22px; color: var(--accent); }
.wf-tile .ttl{ font-weight: 700; font-size: 16px; color: var(--text); }
.wf-tile .desc{ color: var(--text-dim); font-size: 13px; line-height: 20px; }

/* ===== Timeline ===== */
.wf-timeline-item{
  border-left: 2px solid var(--line-3);
  padding: 8px 14px;
  margin-bottom: 8px;
}
.wf-timeline-item .who{ color: var(--text); font-size: 14px; font-weight: 700; }
.wf-timeline-item .nt { color: var(--text-dim); font-size: 14px; }
.wf-timeline-item .ts{ color: var(--muted); font-size: 12px; }

/* ===== Login screen ===== */
.wf-login-screen{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: #232f3e;
  background-image:
    radial-gradient(circle at 20% 18%, rgba(255,153,0,.12), transparent 55%),
    radial-gradient(circle at 80% 82%, rgba(9,114,211,.10), transparent 55%),
    linear-gradient(180deg, #232f3e 0%, #16202d 100%);
  overflow: auto;
}
.wf-login-card{
  position: relative;
  width: min(440px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.40);
  overflow: hidden;
}
.wf-login-h{
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  text-align: center;
}
.wf-login-h .ttl{ font-weight: 800; font-size: 18px; color: var(--text); }
.wf-login-h .sb{ font-size: 14px; color: var(--text-dim); margin-top: 6px; }
.wf-login-b{ padding: 22px 24px; }

/* ===== Synopsis printable ===== */
.wf-syn-print{ background: #fff; color: #000716; }
@media print{
  .wf-no-print { display: none !important; }
  body { background: #fff !important; }
  .wf-syn-print { color: #000; }
}

/* ===== Misc ===== */
.wf-mono{ font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace; font-size: .94em; }
.wf-divider{ height: 1px; background: var(--line); margin: 16px 0; }
.wf-mb-0{ margin-bottom: 0 !important; }
.wf-text-muted{ color: var(--text-dim); font-weight: 500; }
.wf-text-dim{ color: var(--text-dim); }
.wf-text-tertiary{ color: var(--muted); }
/* small + muted is double-dim: bump to body color for readability */
small.wf-text-muted, .wf-text-muted small,
small.wf-text-dim,   .wf-text-dim   small{ color: var(--text-dim) !important; font-weight: 500; }
.wf-flex{ display: flex; gap: 8px; flex-wrap: wrap; }
.wf-flex-between{ display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-flex-center{ display: flex; justify-content: center; align-items: center; gap: 8px; }
.wf-flex-col{ display: flex; flex-direction: column; gap: 6px; }
.wf-grow{ flex: 1; }
.wf-text-end{ text-align: right; }
.wf-mt-1{ margin-top: 8px; } .wf-mt-2{ margin-top: 14px; } .wf-mt-3{ margin-top: 20px; }
.wf-mb-1{ margin-bottom: 8px; } .wf-mb-2{ margin-bottom: 14px; } .wf-mb-3{ margin-bottom: 20px; }
.wf-blink{ animation: wf-blink 1.4s infinite; }
@keyframes wf-blink{ 0%,100%{opacity: 1;} 50%{opacity: .35;} }

/* ===== Chat thread ===== */
.wf-chat{ display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding: 4px; }
.wf-chat-msg{
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 14px; max-width: 80%;
  position: relative; word-wrap: break-word;
}
.wf-chat-msg .meta{ font-size: 12px; color: var(--muted); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.wf-chat-msg .body{ color: var(--text); white-space: pre-wrap; line-height: 22px; }
.wf-chat-msg.me  { align-self: flex-end;   background: var(--info-bg); border-color: var(--info-bd); }
.wf-chat-msg.them{ align-self: flex-start; background: var(--bg-3); border-color: var(--line); }

/* ===== KV info list ===== */
.wf-kv{ background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.wf-kv-row{ display: flex; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.wf-kv-row:last-child{ border-bottom: none; }
.wf-kv-row .k{ flex: 0 0 180px; color: var(--text-dim); font-size: 13px; font-weight: 700; }
.wf-kv-row .v{ flex: 1; color: var(--text); word-break: break-word; }

/* ===== Block tile ===== */
.wf-block{ background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 8px; }
.wf-block .label{ font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; letter-spacing: .04em; }
.wf-block .value{ color: var(--text); font-size: 14px; }

/* ===== Big touch buttons ===== */
.wf-touchgrid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.wf-touchgrid .wf-btn{
  min-height: 64px; padding: 14px 18px; font-size: 15px;
  flex-direction: column; gap: 6px;
}
.wf-touchgrid .wf-btn i{ font-size: 22px; }

/* ===== Map preview ===== */
.wf-map{ background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.wf-map img{ display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; background: #eaeded; }

/* ===== Floating chat button (FAB) ===== */
.wf-fab-chat{
    position: fixed; right: 22px; bottom: 22px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow: 0 8px 24px rgba(236,114,17,.40);
    z-index: 70;
    text-decoration: none;
    transition: transform .12s ease, background .12s ease;
}
.wf-fab-chat:hover{ transform: translateY(-2px); background: var(--accent-3); color: #fff; text-decoration: none; }
.wf-fab-badge{
    position: absolute; top: -3px; right: -3px;
    background: var(--bad); color: #fff;
    font-weight: 700;
    font-size: 11px;
    min-width: 22px; height: 22px;
    border-radius: 99px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 6px;
    border: 2px solid #fff;
}
@media print { .wf-fab-chat { display: none; } }

/* ===== Quote widget ===== */
.wf-quote-box{
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  padding: 14px 16px;
}
.wf-quote-box .row{ display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line-2); }
.wf-quote-box .row:last-child{ border-bottom: none; }
.wf-quote-box .total{ display: flex; justify-content: space-between; padding: 12px 0 0; margin-top: 4px; border-top: 2px solid var(--line-3); font-weight: 800; font-size: 16px; }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .wf-sidebar{ transform: translateX(-105%); transition: transform .18s ease; box-shadow: 18px 0 50px rgba(0,0,0,.35); }
  .wf-sidebar.open{ transform: translateX(0); }
  .wf-main{ margin-left: 0; }
  .wf-burger{ display: inline-flex; align-items: center; justify-content: center; }
  .wf-content{ padding: 16px; }
  .wf-page-h h1{ font-size: 20px; line-height: 26px; }
  .wf-kv-row{ flex-direction: column; gap: 4px; }
  .wf-kv-row .k{ flex: 1; }
  .wf-topbar{ padding: 0 12px; }
  .wf-topbar-right .wf-pill:not(.wf-pill-keep){ display: none; }
  .wf-topbar-right .wf-pill-keep{ display: inline-flex; }
}
@media (max-width: 640px){
  .wf-card-b{ padding: 14px; }
  .wf-btn{ padding: 6px 16px; }
  .wf-btn.sm{ padding: 4px 12px; }
  .wf-btn.lg{ padding: 8px 20px; }
  .wf-touchgrid .wf-btn{ min-height: 72px; }
  .wf-table thead th, .wf-table tbody td, .wf-table > tbody > tr > th{ padding: 10px 12px; font-size: 13px; }
  .wf-page-h{ flex-direction: column; align-items: flex-start; }
  .wf-page-h .actions{ width: 100%; }
  .wf-page-h .actions .wf-btn{ flex: 1; min-width: 0; }
  .wf-kpi-row{ grid-template-columns: repeat(2, 1fr); }
  .wf-kpi .val{ font-size: 22px; line-height: 26px; }
}

/* ============================================================
 * Customer Portal (TWT-style) — sidebar sezionata, credit widget,
 * greyed-out services, news banner, header tabs counter
 * ============================================================ */

/* Customer sidebar layout */
.wf-sidebar-cust{
  background: #ffffff;
  color: #2a3340;
  border-right: 1px solid #e5e9ee;
  padding: 0;
}
.wf-sidebar-cust::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); }
.wf-sidebar-cust .wf-brand{
  background: #232f3e;
  border-bottom: 1px solid #1c2735;
  padding: 14px 16px 12px;
}
.wf-sidebar-cust .wf-brand img{ filter: brightness(0) invert(1); }
.wf-sidebar-cust .wf-brand .nm{ color:#fff; }
.wf-sidebar-cust .wf-brand .sb{ color:#aab7c4; }

/* Credit widget */
.wf-credit-widget{
  display: flex; flex-direction: column; gap: 1px;
  background: #f4f6f9;
  border-bottom: 1px solid #e5e9ee;
}
.wf-credit-box{
  padding: 12px 16px 10px;
  background: #fff;
}
.wf-credit-box .lbl{
  font-size: 10.5px; letter-spacing: .06em; font-weight: 700;
  color: #6c7a89; text-transform: uppercase;
}
.wf-credit-box .val{
  font-size: 18px; font-weight: 800; color: #232f3e;
  margin-top: 4px; display: flex; align-items: center; gap: 8px;
}
.wf-credit-box .refresh{
  margin-left: auto; color: #5f6b7a; font-size: 12px; text-decoration: none;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.wf-credit-box .refresh:hover{ background: #eef1f5; color: #232f3e; }

/* Customer dashboard quick link */
.wf-cust-home{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  color: #232f3e; text-decoration: none; font-weight: 700; font-size: 14px;
  background: #ffffff;
  border-bottom: 1px solid #eef1f5;
}
.wf-cust-home i{ color: var(--accent, #ec7211); width: 18px; text-align: center; }
.wf-cust-home:hover{ background: #f8f9fb; color: #ec7211; }
.wf-cust-home.active{ background: #fff5e6; color: #ec7211; border-left: 3px solid #ec7211; padding-left: 13px; }

/* Section labels */
.wf-cust-section{
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #6c7a89;
  text-transform: uppercase;
  border-top: 1px solid #eef1f5;
  background: #fafbfc;
}
.wf-cust-section i{ color: #adb6c1; font-size: 12px; width: 14px; }
.wf-cust-section:first-of-type{ border-top: none; }

/* Items inside a section */
.wf-cust-nav{
  display: flex; flex-direction: column;
  background: #ffffff;
  padding: 4px 0;
}
.wf-cust-link{
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 32px;
  color: #2a3340; text-decoration: none;
  font-size: 13px; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.wf-cust-link i{
  color: #5f6b7a; font-size: 12px; width: 14px; text-align: center;
}
.wf-cust-link:hover{
  background: #f4f6f9; color: #ec7211;
}
.wf-cust-link:hover i{ color: #ec7211; }
.wf-cust-link.active{
  background: #fff5e6; color: #ec7211; font-weight: 700;
  border-left-color: #ec7211;
}
.wf-cust-link.active i{ color: #ec7211; }
/* Disabled (service not enabled for this customer) */
.wf-cust-link.disabled{
  color: #b8c1cb !important; cursor: not-allowed;
  pointer-events: auto; /* allow tooltip */
}
.wf-cust-link.disabled i{ color: #d3d8de; }
.wf-cust-link.disabled:hover{ background: transparent; color: #b8c1cb !important; }

.wf-cust-build{
  margin-top: auto; padding: 12px 16px; font-size: 10.5px; color: #adb6c1;
  border-top: 1px solid #eef1f5; background: #fafbfc;
}

/* News banner under topbar */
.wf-news-banner{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  background: #fff8d6;
  border-bottom: 1px solid #f0d97a;
  color: #6b5400;
  font-size: 13px;
}
.wf-news-banner > i{ color: #b48700; font-size: 14px; }
.wf-news-banner .wf-news-date{ font-weight: 700; color: #6b5400; white-space: nowrap; }
.wf-news-banner .wf-news-sep{ color: #c2a82a; }
.wf-news-banner .wf-news-title{ flex: 1; line-height: 1.4; }
.wf-news-banner .wf-news-cta{
  background: #232f3e; color: #fff; padding: 4px 12px; border-radius: 4px;
  text-decoration: none; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.wf-news-banner .wf-news-cta:hover{ background: #ec7211; }
.wf-news-banner .wf-news-dismiss{
  background: transparent; border: none; color: #6b5400; cursor: pointer;
  padding: 2px 6px; opacity: .7; transition: opacity .12s;
}
.wf-news-banner .wf-news-dismiss:hover{ opacity: 1; }
.wf-news-warn{ background: #ffe6d3; border-bottom-color: #ed8c4a; color: #7a3d00; }
.wf-news-warn > i{ color: #c14600; }
.wf-news-warn .wf-news-date,
.wf-news-warn .wf-news-dismiss{ color: #7a3d00; }
.wf-news-maint{ background: #e8f0ff; border-bottom-color: #5b9bff; color: #1a3a73; }
.wf-news-maint > i{ color: #0972d3; }
.wf-news-promo{ background: #e9f9ef; border-bottom-color: #2db84a; color: #145d27; }
.wf-news-promo > i{ color: #2db84a; }

/* Top header counter tabs (TWT-style) */
.wf-tab-counter{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
  position: relative;
  transition: background .12s;
}
.wf-tab-counter:hover{ background: rgba(255,255,255,.14); color: #fff; }
.wf-tab-counter i{ color: #ff9900; font-size: 13px; }
.wf-tab-badge{
  background: #ff9900; color: #232f3e;
  font-size: 11px; font-weight: 800; line-height: 1;
  padding: 2px 6px; border-radius: 999px;
  min-width: 18px; text-align: center;
}
.wf-tab-badge.bad{ background: #d13212; color: #fff; }
.wf-cust-chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 4px;
  background: rgba(255,255,255,.10);
  color: #fff; font-size: 12.5px; font-weight: 700;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-cust-chip i{ color: #ff9900; }
.wf-cust-chip small{ opacity: .7; font-weight: 500; }

/* Hide the sidebar default white-on-dark scrollbar styling on customer side */
.wf-sidebar-cust{
  -webkit-overflow-scrolling: touch;
}

/* Make sure customer sidebar scrolls cleanly */
.wf-sidebar-cust { overflow-y: auto; }

@media (max-width: 980px){
  .wf-tab-counter span,
  .wf-cust-chip small { display: none; }
}

/* ============================================================
 * Impersonation banner — always-visible warning that the admin
 * is acting on behalf of another user. High-contrast red bar at
 * the very top of the page.
 * ============================================================ */
body.wf-impersonating{ padding-top: 0; }
body.wf-impersonating .wf-sidebar{ top: 38px; }
body.wf-impersonating .wf-main{ padding-top: 0; }
body.wf-impersonating .wf-topbar{ top: 38px; }

.wf-imp-banner{
  position: fixed; top: 0; left: 0; right: 0;
  height: 38px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: linear-gradient(90deg, #d13212 0%, #b22a0c 100%);
  color: #fff;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .03em;
  border-bottom: 2px solid #8b1f08;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  z-index: 9999;
  animation: wf-imp-pulse 2.4s ease-in-out infinite;
}
@keyframes wf-imp-pulse{
  0%, 100%{ box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 0 0 0 rgba(209,50,18,.6); }
  50%    { box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 0 0 4px rgba(209,50,18,0); }
}
.wf-imp-banner .wf-imp-left{
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.wf-imp-banner .wf-imp-left i{ font-size: 14px; color: #ffcf80; }
.wf-imp-banner .wf-imp-left span{ text-transform: uppercase; }
.wf-imp-banner .wf-imp-left strong{ font-size: 13px; }
.wf-imp-banner .wf-imp-role{ opacity: .85; font-weight: 500; text-transform: none; }
.wf-imp-banner .wf-imp-right{ display: flex; align-items: center; gap: 14px; }
.wf-imp-banner .wf-imp-as{ opacity: .85; font-weight: 500; text-transform: none; font-size: 12px; }
.wf-imp-banner .wf-imp-stop{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  background: #fff;
  color: #b22a0c;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background .12s, color .12s;
}
.wf-imp-banner .wf-imp-stop:hover{
  background: #232f3e;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 720px){
  .wf-imp-banner{ font-size: 11px; height: 34px; padding: 0 10px; }
  body.wf-impersonating .wf-sidebar,
  body.wf-impersonating .wf-topbar{ top: 34px; }
  .wf-imp-banner .wf-imp-as,
  .wf-imp-banner .wf-imp-role{ display: none; }
}