/* ============================================================================
   DEC Drive — branded portal design system
   Used by the public/portal pages (/performance, /staff, /my-treatment, …).
   Everything is scoped under .decp so it never collides with Frappe's web theme.
   The page root carries `decp theme-<key>` (sb / d4k / fct / dec) which sets the
   company palette via CSS variables. Colours live HERE (single source of truth).
   ========================================================================== */

.decp{
  --bg:#F4F7FB; --surface:#FFFFFF; --line:#E6EBF2;
  --ink:#0E1A2B; --body:#43536B; --muted:#8A98AD;
  --green:#16A34A; --green-bg:#E7F7EE;
  --red:#DC2626;   --red-bg:#FDECEC;
  --amber:#D97706; --amber-bg:#FDF3E3;
  --r-lg:18px; --r-md:13px; --r-sm:9px;
  --sh-sm:0 1px 2px rgba(16,30,55,.06);
  --sh-md:0 6px 20px -8px rgba(16,30,55,.18);
  --sh-lg:0 18px 40px -16px rgba(16,30,55,.28);
  /* neutral DEC fallback (overridden by theme classes below) */
  --brand:#2F4A6B; --brand-2:#1B2D44; --brand-soft:#EAEEF4;
  --grad:linear-gradient(135deg,#1B2D44 0%,#2F4A6B 60%,#476189 100%);
  --company:"DEC Drive";

  max-width:1080px; margin:0 auto; padding:14px 20px 64px;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); line-height:1.45; -webkit-font-smoothing:antialiased;
}
.decp.theme-sb{
  --brand:#E27D2D; --brand-2:#9A4E12; --brand-soft:#FCEFE3;
  --grad:linear-gradient(135deg,#9A4E12 0%,#E27D2D 58%,#F2A765 100%);
  --company:"Smilebetter";
}
.decp.theme-d4k{
  --brand:#7F77DD; --brand-2:#403699; --brand-soft:#EEECFB;
  --grad:linear-gradient(135deg,#403699 0%,#7F77DD 60%,#A59EF0 100%);
  --company:"D4K Orthodontics";
}
.decp.theme-fct{
  --brand:#1F73D1; --brand-2:#123E73; --brand-soft:#E6F0FB;
  --grad:linear-gradient(135deg,#123E73 0%,#1F73D1 58%,#4F9BE8 100%);
  --company:"Facets";
}

.decp *{box-sizing:border-box}
.decp a{color:inherit;text-decoration:none}

/* ---- hero header ---- */
.decp .hero{position:relative;overflow:hidden;background:var(--grad);color:#fff;
  border-radius:var(--r-lg);padding:22px 26px;box-shadow:var(--sh-lg);margin-bottom:18px}
.decp .hero::after{content:"";position:absolute;right:-60px;top:-90px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%);pointer-events:none}
.decp .brandbar{display:flex;align-items:center;gap:11px;padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.18)}
.decp .brandbar .mark{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);flex-shrink:0}
.decp .brandbar .co{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1}
.decp .brandbar .co::before{content:var(--company)}
.decp .brandbar .pwr{font-size:11px;opacity:.8;margin-top:2px;letter-spacing:.03em}
.decp .brandbar .pwr::after{content:"Powered by DEC Drive"}
.decp .hero-main{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px}
.decp .who .nm{font-size:24px;font-weight:700;letter-spacing:-.01em}
.decp .who .mt{opacity:.9;font-size:13.5px;margin-top:5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.decp .chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);border-radius:20px;padding:3px 11px;font-size:12px;font-weight:600;color:#fff}
.decp .seg{display:inline-flex;gap:3px;background:rgba(255,255,255,.14);padding:4px;border-radius:12px}
.decp .seg a{color:#fff;font-size:13px;padding:7px 14px;border-radius:9px;opacity:.8;font-weight:600;transition:.15s}
.decp .seg a:hover{opacity:1;background:rgba(255,255,255,.12)}
.decp .seg a.on{background:#fff;color:var(--brand-2);opacity:1;box-shadow:var(--sh-sm)}

/* ---- section heading ---- */
.decp .sec{display:flex;align-items:center;gap:9px;margin:22px 2px 12px}
.decp .sec h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0;font-weight:700}
.decp .sec .ln{flex:1;height:1px;background:var(--line)}

/* ---- KPI tiles ---- */
.decp .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.decp .tiles{grid-template-columns:repeat(2,1fr)}}
.decp .tile{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px 17px;box-shadow:var(--sh-sm);display:block;
  transition:transform .14s,box-shadow .14s,border-color .14s}
.decp a.tile:hover{transform:translateY(-2px);box-shadow:var(--sh-md);
  border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.decp a.tile::after{content:"↗";position:absolute;top:13px;right:14px;color:#c2cee0;font-size:13px;opacity:0;transition:.14s}
.decp a.tile:hover::after{opacity:1;color:var(--brand)}
.decp .tile .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:11px;font-weight:700}
.decp .i-brand{background:var(--brand-soft);color:var(--brand)}
.decp .i-green{background:var(--green-bg);color:var(--green)}
.decp .i-amber{background:var(--amber-bg);color:var(--amber)}
.decp .tile .v{font-size:27px;font-weight:760;letter-spacing:-.02em;line-height:1}
.decp .tile .l{font-size:12px;color:var(--body);margin-top:6px;font-weight:600}
.decp .tile .s{font-size:11px;color:var(--muted);margin-top:3px}
.decp .delta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
  border-radius:20px;padding:2px 8px;margin-top:7px}
.decp .delta.up{color:var(--green);background:var(--green-bg)}
.decp .delta.down{color:var(--red);background:var(--red-bg)}
.decp .delta .q{opacity:.7;font-weight:600}

/* ---- cards ---- */
.decp .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;box-shadow:var(--sh-sm);margin-bottom:14px}
.decp .card h3{margin:0 0 14px;font-size:13px;font-weight:700;color:var(--ink)}
.decp .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.decp .grid2{grid-template-columns:1fr}}
.decp .empty{color:var(--muted);font-size:13px;padding:6px 0}

/* ---- worklist ---- */
.decp .wl{display:flex;flex-direction:column;gap:9px}
.decp .wl a{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;transition:.14s}
.decp .wl a:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line));background:var(--brand-soft);transform:translateX(2px)}
.decp .wl .badge{min-width:30px;text-align:center;font-weight:800;font-size:15px;border-radius:9px;padding:5px 9px}
.decp .wl .u{background:var(--red-bg);color:var(--red)} .decp .wl .n{background:var(--brand-soft);color:var(--brand)}
.decp .wl .lab{flex:1;font-size:13.5px;color:var(--body);font-weight:500}
.decp .wl .chev{color:#c2cee0;font-size:18px}

/* ---- funnel ---- */
.decp .fnl{display:flex;align-items:stretch;gap:10px}
.decp .fnl a{flex:1;text-align:center;border:1px solid var(--line);border-radius:13px;padding:15px 10px;
  background:linear-gradient(180deg,#fff,var(--brand-soft));transition:.14s}
.decp .fnl a:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));box-shadow:var(--sh-sm)}
.decp .fnl .fv{font-size:26px;font-weight:780;color:var(--brand);letter-spacing:-.02em}
.decp .fnl .fl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:4px;font-weight:700}
.decp .fnl .pc{font-size:11px;color:var(--green);font-weight:700;margin-top:3px}
.decp .arr{display:grid;place-items:center;color:#cdd9ea;font-size:20px}
.decp .fmeta{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.decp .stat{flex:1;min-width:120px;background:#F7FAFE;border:1px solid var(--line);border-radius:11px;padding:10px 13px}
.decp .stat .k{font-size:11px;color:var(--muted);font-weight:600}
.decp .stat .val{font-size:18px;font-weight:740;margin-top:2px}

/* ---- trend bars ---- */
.decp .trend{display:flex;align-items:flex-end;gap:8px;height:140px;padding-top:6px}
.decp .trend .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end}
.decp .trend .bk{width:78%;border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 70%,#fff),var(--brand));
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.15);min-height:3px;transition:.14s}
.decp .trend .col:hover .bk{filter:brightness(1.07)}
.decp .trend .cv{font-size:11px;font-weight:700;color:var(--brand)}
.decp .trend .cl{font-size:10px;color:var(--muted)}

/* ---- distribution bars ---- */
.decp .dist .r{display:flex;align-items:center;gap:11px;font-size:13px;padding:5px 0}
.decp .dist a.r:hover .nm{color:var(--brand)}
.decp .dist .nm{width:140px;color:var(--body);flex-shrink:0;font-weight:500}
.decp .dist .bar{flex:1;height:9px;background:#EEF3F9;border-radius:6px;overflow:hidden}
.decp .dist .bar>span{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 65%,#fff),var(--brand))}
.decp .dist .ct{width:34px;text-align:right;font-weight:700}

/* ---- table / leaderboard ---- */
.decp table.lb{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:13px}
.decp table.lb th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:0 10px 4px;font-weight:700}
.decp table.lb th.n,.decp table.lb td.n{text-align:right}
.decp table.lb td{background:#FAFCFF;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 10px}
.decp table.lb td:first-child{border-left:1px solid var(--line);border-radius:11px 0 0 11px}
.decp table.lb td:last-child{border-right:1px solid var(--line);border-radius:0 11px 11px 0}
.decp .who2{display:flex;align-items:center;gap:10px}
.decp .av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;background:var(--brand)}
.decp .rank{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:11px;font-weight:800;background:#EEF3F9;color:var(--muted)}
.decp .rank.r1{background:#FCEFC7;color:#9A6B00}.decp .rank.r2{background:#E9EDF3;color:#5B6B82}
.decp .pillmini{font-size:11px;font-weight:700;color:var(--green);background:var(--green-bg);border-radius:20px;padding:2px 8px}

/* ---- buttons + forms (shared) ---- */
.decp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand);color:#fff;border:0;border-radius:10px;padding:11px 18px;
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:filter .14s,transform .05s;box-shadow:var(--sh-sm)}
.decp .btn:hover{filter:brightness(1.06)} .decp .btn:active{transform:translateY(1px)}
.decp .btn:disabled{opacity:.55;cursor:default}
.decp .btn.block{width:100%}
.decp .btn-ghost{background:transparent;color:var(--brand);box-shadow:none;border:1px solid color-mix(in srgb,var(--brand) 40%,var(--line))}
.decp .btn-danger{background:transparent;color:var(--red);box-shadow:none;border:1px solid #f3c4c4}
.decp .btn-danger:hover{background:var(--red-bg);filter:none}
.decp label{display:block;font-size:12px;color:var(--body);margin:10px 0 4px;font-weight:600}
.decp input,.decp select{width:100%;padding:10px 11px;border:1px solid #d4dbe6;border-radius:9px;font:inherit;font-size:14px;background:#fff}
.decp input:focus,.decp select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* ---- badges (status) ---- */
.decp .badge-st{display:inline-block;padding:3px 10px;border-radius:14px;font-size:12px;font-weight:700}
.decp .b-green{background:var(--green-bg);color:var(--green)}
.decp .b-blue{background:var(--brand-soft);color:var(--brand)}
.decp .b-amber{background:var(--amber-bg);color:var(--amber)}
.decp .b-gray{background:#EEF1F6;color:#5B6B82}

/* ---- action banner (e.g. sign consent) ---- */
.decp .actbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--amber-bg);
  border:1px solid #f3dca6;border-radius:13px;padding:13px 16px;margin-bottom:14px}
.decp .actbar .txt{flex:1;font-size:13.5px;color:#7a4d05;font-weight:600;min-width:180px}

.decp .foot{color:var(--muted);font-size:11px;text-align:center;margin-top:18px}

/* account / logout chip in the hero (replaces Frappe's default navbar avatar) */
.decp .brandbar .acct{margin-left:auto;color:#fff;font-size:12.5px;font-weight:600;text-decoration:none;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);border-radius:20px;padding:6px 14px}
.decp .brandbar .acct:hover{background:rgba(255,255,255,.28)}

/* ============================================================================
   Portal pages are full-page branded experiences. This stylesheet is loaded
   ONLY on DEC portal pages, so suppressing Frappe's default website navbar +
   footer here affects only those pages — removing the unstyled "Home / My
   Account / Logout" bar and its empty avatar image.
   ========================================================================== */
body{background:#F4F7FB}
.navbar.navbar-expand-lg{display:none !important}
.web-footer,.footer-powered,footer.web-footer{display:none !important}
main.page_content,.page_content{padding-top:0 !important}