/* DilloLex Customer Portal — shared styles
   Inherits brand tokens from the marketing site palette.
   Self-contained so the portal can be deployed independently. */

/* ── Fonts (same self-hosted subset as marketing site) ── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../../fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:500;font-display:swap;
  src:url('../../fonts/sourceserif4-500.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url('../../fonts/sourceserif4-600.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;
  src:url('../../fonts/sourceserif4-700.woff2') format('woff2')}
@font-face{font-family:'Valkyrie OT B';font-style:normal;font-weight:400;font-display:swap;
  src:url('../../fonts/valkyrie-b-regular.woff2') format('woff2')}
@font-face{font-family:'Valkyrie OT B';font-style:italic;font-weight:400;font-display:swap;
  src:url('../../fonts/valkyrie-b-italic.woff2') format('woff2')}
@font-face{font-family:'Valkyrie OT B';font-style:normal;font-weight:700;font-display:swap;
  src:url('../../fonts/valkyrie-b-bold.woff2') format('woff2')}
@font-face{font-family:'Valkyrie OT B';font-style:italic;font-weight:700;font-display:swap;
  src:url('../../fonts/valkyrie-b-bolditalic.woff2') format('woff2')}

/* ── Tokens ── */
:root {
  color-scheme: light;
  --ink:        #0F1B30;
  --navy-2:     #1E2C44;
  --body:       #475569;
  --muted:      #8895A7;
  --bg:         #F6F8FC;
  --bg2:        #E8EEF6;
  --card:       #ffffff;
  --line:       #D5DEEC;
  --teal:       #0A8C86;
  --teal-deep:  #097a74;
  --teal-tint:  #E6F4F3;
  --brass:      #B07D3C;
  --shadow:     0 1px 2px rgba(15,27,48,.06), 0 4px 14px -6px rgba(15,27,48,.14);
  --shadow-md:  0 2px 6px rgba(15,27,48,.08), 0 16px 32px -16px rgba(15,27,48,.22);
  --r:          14px;
  --r-sm:       8px;
  --ring:       0 0 0 3px rgba(10,140,134,.30);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;padding:0;font-family:'Valkyrie OT B',Georgia,serif;
  font-size:16px;line-height:1.6;color:var(--body);background:var(--bg)}
h1,h2,h3{font-family:'Century Supra','Source Serif 4',Georgia,serif;color:var(--ink);margin:0 0 .5em;line-height:1.2}
h1{font-size:clamp(1.5rem,3vw,2rem)}
h2{font-size:clamp(1.1rem,2vw,1.4rem)}
p{margin:0 0 1em}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
input,select,textarea{font-family:'Inter',system-ui,sans-serif;font-size:1rem}
/* UI chrome = Inter (sans); body prose = Valkyrie; headings = Century Supra/Source Serif */
.btn,.badge,.field label,.portal-nav,.portal-nav__user,.portal-nav__logout,.portal-table th,.portal-table td,.pricing-card__label{font-family:'Inter',system-ui,sans-serif}

/* ── Layout ── */
.portal-body{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}

.portal-nav{
  background:var(--ink);
  padding:0 clamp(1rem,4vw,2.5rem);
  display:flex;align-items:center;justify-content:space-between;
  height:56px;position:sticky;top:0;z-index:100;
}
.portal-nav__brand{
  color:#fff;font-weight:700;font-size:1.1rem;letter-spacing:.02em;
  text-decoration:none;display:flex;align-items:center;gap:.4em;
}
.portal-nav__brand span{color:var(--teal)}
.portal-nav__actions{display:flex;align-items:center;gap:1rem}
.portal-nav__user{color:rgba(255,255,255,.7);font-size:.875rem}
.portal-nav__logout{
  color:rgba(255,255,255,.7);font-size:.875rem;background:none;border:none;
  cursor:pointer;padding:.25rem .5rem;border-radius:var(--r-sm);
  transition:color .15s;
}
.portal-nav__logout:hover{color:#fff}

.portal-main{
  max-width:860px;width:100%;margin:0 auto;
  padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,2.5rem);
}

.portal-footer{
  text-align:center;padding:1.5rem;font-size:.8125rem;color:var(--muted);
  border-top:1px solid var(--line);
}

/* ── Cards ── */
.portal-card{
  background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow);padding:clamp(1.25rem,3vw,2rem);
  margin-bottom:1.5rem;
}
.portal-card--center{
  max-width:480px;margin:4rem auto;text-align:center;
}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  padding:.6em 1.3em;border-radius:var(--r-sm);font-weight:600;font-size:.9375rem;
  cursor:pointer;border:none;transition:background .15s,color .15s,box-shadow .15s;
  text-decoration:none;
}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn--primary{background:var(--teal);color:#fff}
.btn--primary:hover{background:var(--teal-deep);color:#fff;text-decoration:none}
.btn--outline{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}
.btn--outline:hover{background:var(--teal-tint);text-decoration:none}
.btn--ghost{background:transparent;color:var(--body);border:1.5px solid var(--line)}
.btn--ghost:hover{background:var(--bg2);text-decoration:none}
.btn--sm{padding:.4em 1em;font-size:.875rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Forms ── */
.field{margin-bottom:1.25rem}
.field label{display:block;font-weight:500;font-size:.875rem;color:var(--ink);margin-bottom:.375rem}
.field input,.field select{
  width:100%;padding:.625em .875em;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:#fff;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--teal);box-shadow:var(--ring);
}
.field-hint{font-size:.8125rem;color:var(--muted);margin-top:.25rem}

/* ── Status badges ── */
.badge{
  display:inline-block;padding:.2em .6em;border-radius:99px;
  font-size:.75rem;font-weight:600;letter-spacing:.03em;
}
.badge--green{background:#DCFCE7;color:#166534}
.badge--yellow{background:#FEF9C3;color:#854D0E}
.badge--red{background:#FEE2E2;color:#991B1B}
.badge--gray{background:var(--bg2);color:var(--body)}
.badge--teal{background:var(--teal-tint);color:var(--teal-deep)}

/* ── Divider ── */
.divider{border:none;border-top:1px solid var(--line);margin:1.5rem 0}

/* ── Section header ── */
.section-head{display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:1rem;gap:1rem;flex-wrap:wrap}
.section-head h2{margin:0}

/* ── Table ── */
.portal-table{width:100%;border-collapse:collapse;font-size:.9375rem}
.portal-table th{text-align:left;font-weight:600;font-size:.8125rem;
  color:var(--muted);padding:.5rem .75rem;border-bottom:1.5px solid var(--line)}
.portal-table td{padding:.75rem .75rem;border-bottom:1px solid var(--line);
  color:var(--body);vertical-align:middle}
.portal-table tbody tr:last-child td{border-bottom:none}
.portal-table a{color:var(--teal);font-size:.875rem}

/* ── Empty state ── */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)}
.empty-state p{margin:0}

/* ── Alert ── */
.alert{border-radius:var(--r-sm);padding:.875rem 1.125rem;margin-bottom:1rem;font-size:.9375rem}
.alert--info{background:var(--teal-tint);color:#066B66;border:1px solid var(--teal-tint)}
.alert--warn{background:#FEF9C3;color:#854D0E;border:1px solid #FDE047}
.alert--error{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}

/* ── Success check ── */
.success-icon{
  font-size:3rem;color:var(--teal);margin-bottom:1rem;line-height:1;
}

/* ── Pricing grid ── */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.pricing-card{
  background:var(--card);border-radius:var(--r);border:1.5px solid var(--line);
  padding:1.75rem;display:flex;flex-direction:column;gap:1rem;
}
.pricing-card--featured{border-color:var(--teal);box-shadow:var(--shadow-md)}
.pricing-card__label{font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal)}
.pricing-card__price{font-family:'Source Serif 4','Georgia',serif;
  font-size:2.25rem;font-weight:700;color:var(--ink);line-height:1}
.pricing-card__price span{font-size:1rem;font-weight:400;color:var(--muted)}
.pricing-card__desc{color:var(--body);font-size:.9375rem;line-height:1.55}
.pricing-card__features{list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
.pricing-card__features li::before{content:'✓ ';color:var(--teal);font-weight:700}
.pricing-card .btn{width:100%;margin-top:auto}

/* ── Login page ── */
.login-wrap{
  display:flex;align-items:center;justify-content:center;
  min-height:100svh;background:var(--bg);padding:2rem 1rem;
}
.login-box{
  background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-md);
  padding:clamp(1.5rem,5vw,2.5rem);width:100%;max-width:420px;
}
.login-box__brand{text-align:center;margin-bottom:1.75rem}
.login-box__brand span{font-size:1.5rem;font-weight:700;color:var(--ink)}
.login-box__brand span em{color:var(--teal);font-style:normal}
.login-box h1{font-size:1.35rem;text-align:center;margin-bottom:.375rem}
.login-box p.sub{text-align:center;color:var(--muted);font-size:.9375rem;margin-bottom:1.5rem}
.login-success{text-align:center;padding:2rem 0}
.login-success__icon{font-size:2.5rem;margin-bottom:.75rem}

/* ── Responsive ── */
@media(max-width:600px){
  .portal-table{font-size:.875rem}
  .portal-table th,.portal-table td{padding:.5rem .375rem}
  .pricing-grid{grid-template-columns:1fr}
}