/* Vikki Dixon Enterprises premium UI layer — clean white / navy / blue direction */
:root{
  --vd-blue:#123b72;
  --vd-blue-2:#1f5fae;
  --vd-blue-3:#eef5ff;
  --vd-ink:#132238;
  --vd-muted:#6d7a8b;
  --vd-line:#e6ebf1;
  --vd-surface:#ffffff;
  --vd-bg:#fbfcfe;
  --vd-success:#147a55;
  --vd-shadow:0 18px 44px rgba(20,55,95,.07);
  --vd-shadow-soft:0 6px 18px rgba(20,55,95,.045);
}

body.customer-view,body.internal-view{
  --bg:var(--vd-bg);--ink:var(--vd-ink);--muted:var(--vd-muted);--card:var(--vd-surface);--line:var(--vd-line);--gold:var(--vd-blue-2);--nav:#fff;--ok:var(--vd-success);
  background:linear-gradient(180deg,#fff 0%,#f9fbfe 100%);color:var(--vd-ink);
}

.customer-view header,.internal-view header{height:76px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--vd-line);box-shadow:0 4px 18px rgba(20,55,95,.035);backdrop-filter:blur(12px)}
.customer-view .brand strong,.internal-view .brand strong{color:var(--vd-ink);font-size:14px;font-weight:600;letter-spacing:.005em}
.customer-view .brand small,.internal-view .brand small{color:var(--vd-muted);margin-top:3px;font-weight:400}

.mobile-nav-toggle{display:inline-flex!important;align-items:center;justify-content:center;min-width:38px;width:38px;height:38px;padding:0!important;border:1px solid var(--vd-line)!important;background:#fff!important;color:var(--vd-blue)!important;box-shadow:none!important;border-radius:10px!important;font-size:19px!important;font-weight:500!important}
.mobile-nav-toggle:hover{background:var(--vd-blue-3)!important;transform:none!important;box-shadow:none!important}

.customer-view nav,.internal-view nav{background:#fff;color:var(--vd-ink);border-right:1px solid var(--vd-line);padding:24px 12px;box-shadow:none}
.customer-view nav b,.internal-view nav b{color:var(--vd-ink);font-weight:600}
.customer-view nav a,.internal-view nav a{color:#59697d;border-radius:10px;padding:10px 11px;font-weight:500;transition:all .16s ease}
.customer-view nav a:hover,.internal-view nav a:hover,.customer-view nav a.active,.internal-view nav a.active{background:var(--vd-blue-3);color:var(--vd-blue);transform:none}
.customer-view .nav-submenu-toggle,.internal-view .nav-submenu-toggle{color:#61738b;background:transparent!important;box-shadow:none!important}
.customer-view .nav-submenu-toggle:hover,.internal-view .nav-submenu-toggle:hover{background:var(--vd-blue-3)!important;color:var(--vd-blue)}
.shell{transition:grid-template-columns .2s ease}
.shell.nav-collapsed{grid-template-columns:0 minmax(0,1fr)}
.shell.nav-collapsed>nav{overflow:hidden;padding-left:0;padding-right:0;border-right:0;opacity:0;pointer-events:none}

.customer-view main,.internal-view main{padding-top:34px}
.customer-view .page-head,.internal-view .page-head{margin-bottom:27px}
.customer-view .page-head h1,.internal-view .page-head h1{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:35px;font-weight:600;letter-spacing:-.03em;color:var(--vd-ink)}
.customer-view .eyebrow,.internal-view .eyebrow{color:var(--vd-blue-2)!important;font-weight:600!important}

.customer-view .panel,.customer-view .cards article,.customer-view .auth-card,.internal-view .panel,.internal-view .cards article,.internal-view .auth-card{background:#fff;border:1px solid var(--vd-line);border-radius:16px;box-shadow:var(--vd-shadow-soft)}
.customer-view .panel,.internal-view .panel{padding:24px}
.customer-view .cards article,.internal-view .cards article{padding:21px}
.customer-view .cards article strong,.internal-view .cards article strong{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--vd-ink);font-weight:600;letter-spacing:-.02em}
.customer-view .panel h2,.internal-view .panel h2{font-weight:600}

.customer-view .health,.internal-view .health{background:#ecf8f3;color:var(--vd-success);border:1px solid #d4eee2;font-weight:600}
.customer-view .pill,.internal-view .pill{background:#f8fafc;border-color:var(--vd-line);color:#61738b}
.customer-view .pill.on,.internal-view .pill.on{background:#ecf8f3;border-color:#d4eee2;color:var(--vd-success)}

.customer-view input,.customer-view textarea,.customer-view select,.internal-view input,.internal-view textarea,.internal-view select{border:1px solid #dce3eb;background:#fff;border-radius:10px;padding:12px 13px;color:var(--vd-ink);transition:border-color .15s ease,box-shadow .15s ease}
.customer-view input:focus,.customer-view textarea:focus,.customer-view select:focus,.internal-view input:focus,.internal-view textarea:focus,.internal-view select:focus{outline:none;border-color:#9cbee5;box-shadow:0 0 0 3px rgba(31,95,174,.07)}

.customer-view button,.customer-view .button-link,.internal-view button,.internal-view .button-link{background:var(--vd-blue);color:#fff;border-radius:10px;box-shadow:none;font-weight:600;transition:background .15s ease,transform .15s ease}
.customer-view button:hover,.customer-view .button-link:hover,.internal-view button:hover,.internal-view .button-link:hover{transform:translateY(-1px);background:#174a87;box-shadow:none;filter:none}
.customer-view button.secondary,.internal-view button.secondary{background:#fff;color:var(--vd-blue);border:1px solid #cfdbea;box-shadow:none}

/* Back control stays visible at rest — never a solid blue blob. */
.customer-view .page-back,.internal-view .page-back{appearance:none!important;background:transparent!important;color:var(--vd-blue)!important;border:0!important;box-shadow:none!important;border-radius:8px!important;padding:3px 7px!important;font-size:27px!important;font-weight:400!important;line-height:1!important}
.customer-view .page-back:hover,.internal-view .page-back:hover{background:var(--vd-blue-3)!important;color:#0d315f!important;transform:translateX(-2px)!important;box-shadow:none!important}
.customer-view .page-home,.internal-view .page-home{color:var(--vd-blue);font-weight:500}

.customer-view .summary,.customer-view .workflow-example,.customer-view .notice,.internal-view .summary,.internal-view .workflow-example,.internal-view .notice{background:#fafcff;border:1px solid var(--vd-line);border-radius:12px}
.customer-view .avatar,.internal-view .avatar{background:var(--vd-blue);box-shadow:none}
.customer-view .row,.internal-view .row{border-color:#edf1f6}
.customer-view table,.internal-view table{background:#fff}
.customer-view th,.internal-view th{color:#6e7d90;background:#fafcff;font-weight:600}
.customer-view td,.internal-view td{border-color:#edf1f6}
.customer-view .auth-card,.internal-view .auth-card{box-shadow:var(--vd-shadow);border-color:#e3e9f0}
.customer-view .auth-card h1,.internal-view .auth-card h1{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;letter-spacing:-.03em}

.customer-view .welcome-frame-panel{background:#fff}.customer-view .welcome-frame-head{background:#fff;border-color:var(--vd-line)}.customer-view .welcome-frame-wrap{background:#f7f9fc}.customer-view .welcome-frame{box-shadow:0 12px 28px rgba(20,55,95,.08)}
.customer-view .brand-logo-img{filter:none}
.internal-view .mark{border:0;border-radius:11px;background:var(--vd-blue);color:#fff;box-shadow:none}

.idle-warning{position:fixed;right:24px;bottom:24px;z-index:9999;width:min(420px,calc(100vw - 32px));display:flex;gap:18px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--vd-line);box-shadow:0 18px 50px rgba(20,55,95,.14);border-radius:16px;padding:16px 18px;color:var(--vd-ink)}
.idle-warning div{display:flex;flex-direction:column;gap:3px}.idle-warning strong{font-size:14px;font-weight:600}.idle-warning span{font-size:12px;color:var(--vd-muted);line-height:1.4}.idle-warning button{white-space:nowrap;padding:9px 12px!important;font-size:12px!important}

@media(max-width:900px){.shell.nav-collapsed{grid-template-columns:1fr}.shell.nav-collapsed>nav{opacity:1;pointer-events:auto}.customer-view .shell>nav,.internal-view .shell>nav{top:76px;box-shadow:18px 0 38px rgba(20,55,95,.12)}}
@media(max-width:560px){.customer-view header,.internal-view header{height:72px}.customer-view .page-head h1,.internal-view .page-head h1{font-size:30px}.customer-view .panel,.internal-view .panel{padding:19px}.customer-view .cards article,.internal-view .cards article{padding:18px}.idle-warning{right:16px;bottom:16px;flex-direction:column;align-items:flex-start}.idle-warning button{width:100%}}