@font-face{
  font-family:'Crimson Pro';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url('/fonts/CrimsonPro-Variable.woff2') format('woff2');
}
@font-face{
  font-family:'Crimson Pro';
  font-style:italic;
  font-weight:200 900;
  font-display:swap;
  src:url('/fonts/CrimsonPro-Italic-Variable.woff2') format('woff2');
}

/* ---- Pro35 brand tokens — shared across the Pro35 product family. Light values match the
   "Pro35Time Brand Reference" doc exactly; dark values are that doc's dark-mode companion
   palette. Don't hand-roll a new palette per app — extend this block instead (copied verbatim
   from pro35firm/public/css/style.css). ---- */
:root{
  --ink:#10233F;
  --ink-soft:#4B5563;
  --ink-faint:#8b93a0;
  --paper:#F6F4EE;
  --paper-warm:#fcfaf4;
  --panel:#ffffff;
  --ledger-line:#e6ddc8;
  --border-input:#C8BFA6;
  --card-border:#E4E1D6;

  --brand-navy:#10233F;

  --accent:#5C8A47;
  --accent-light:#e1e8c7;
  --accent-deep:#3B6D11;

  --tan-bg:#F0EAD8;
  --tan-text:#6B6A62;

  --red:#9c3b2e;
  --red-bg:#f5e2de;
  --gold:#8c7a4e;
  --gold-bg:#f3eedf;
  --warning-yellow:#D9A404;

  --shadow-sm:0 2px 6px rgba(15,45,74,0.07), 0 1px 2px rgba(15,45,74,0.05);
  --shadow-md:0 10px 22px rgba(15,45,74,0.09), 0 2px 6px rgba(15,45,74,0.06);
  --shadow-lg:0 20px 44px rgba(15,45,74,0.14), 0 4px 12px rgba(15,45,74,0.08);

  --radius-btn:8px;
  --radius-card:12px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;

  --serif:'Crimson Pro',Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Cascadia Code','SF Mono',Consolas,'Courier New',monospace;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#EDEAE0;
    --ink-soft:#B9C2CE;
    --ink-faint:#7C8794;
    --paper:#0B1626;
    --paper-warm:#0F1D30;
    --panel:#13233A;
    --card-border:#26374F;
    --ledger-line:#26374F;
    --accent:#7CB360;
    --accent-light:#1F3322;
    --accent-deep:#9BCB80;
    --tan-bg:#2B2A22;
    --tan-text:#C9C4AE;
  }
}
:root[data-theme="dark"]{
  --ink:#EDEAE0;
  --ink-soft:#B9C2CE;
  --ink-faint:#7C8794;
  --paper:#0B1626;
  --paper-warm:#0F1D30;
  --panel:#13233A;
  --card-border:#26374F;
  --ledger-line:#26374F;
  --accent:#7CB360;
  --accent-light:#1F3322;
  --accent-deep:#9BCB80;
  --tan-bg:#2B2A22;
  --tan-text:#C9C4AE;
}
:root[data-theme="light"]{
  --ink:#10233F;
  --ink-soft:#4B5563;
  --ink-faint:#8b93a0;
  --paper:#F6F4EE;
  --paper-warm:#fcfaf4;
  --panel:#ffffff;
  --card-border:#E4E1D6;
  --ledger-line:#e6ddc8;
  --accent:#5C8A47;
  --accent-light:#e1e8c7;
  --accent-deep:#3B6D11;
  --tan-bg:#F0EAD8;
  --tan-text:#6B6A62;
}

*{box-sizing:border-box;}
::selection{background:var(--accent-light);color:var(--ink);}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1140px; margin:0 auto; padding:32px 24px 60px;}

h1{font-family:var(--serif); font-weight:600; font-size:1.9rem; margin:0 0 20px; letter-spacing:-0.01em;}
h2{font-family:var(--serif); font-weight:600; font-size:1.3rem; margin:28px 0 12px; letter-spacing:-0.01em;}

a{color:var(--accent-deep);}
a:hover{color:var(--accent);}

.topnav{
  display:flex; flex-direction:column;
  background:var(--brand-navy);
  color:#fff; box-shadow:var(--shadow-md);
  border-bottom:3px solid var(--accent);
}
.topnav-brand-row{display:flex; align-items:center; justify-content:center; padding:18px 28px;}
.topnav-brand-link{display:flex; align-items:center; gap:16px; color:#fff; text-decoration:none;}
.topnav-brand-text{display:flex; flex-direction:column;}
.topnav-brand-name{font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:-0.01em;}
.topnav-brand-tagline{font-family:var(--serif); font-style:italic; font-size:12px; color:#A9B7CC; margin-top:2px;}

.topnav-tabs-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 28px; gap:20px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.12);
}
.topnav .nav-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.topnav .nav-user-block{display:flex; flex-direction:column; align-items:flex-end; line-height:1.3;}
.topnav .nav-user-name{color:#fff; font-size:0.88rem; font-weight:600;}

.dashboard-intro{color:var(--ink); margin:-8px 0 4px;}
.dashboard-footnote{margin-top:24px;}

/* ---- Dashboard tiles ---- */
.dashboard-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:18px; margin-top:20px;}
.dashboard-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:var(--panel); border:0.5px solid var(--card-border); border-radius:12px;
  padding:24px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dashboard-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); color:var(--ink);}
.dashboard-card-label{font-weight:600; font-size:1.08rem;}
.dashboard-card-desc{font-size:0.85rem; color:var(--ink-soft); margin:0; line-height:1.4;}

.dashboard-card.coming-soon{cursor:default; opacity:0.65; border-style:dashed;}
.dashboard-card.coming-soon:hover{transform:none; box-shadow:var(--shadow-sm); border-color:var(--card-border);}
.dashboard-card-badge{
  font-family:var(--sans); font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  padding:3px 9px; border-radius:999px; background:var(--tan-bg); color:var(--tan-text);
}

/* ---- List rows: card-based record lists ---- */
.list-rows{display:flex; flex-direction:column; gap:12px; margin-top:20px;}
.list-row{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--ledger-line); border-radius:var(--radius-md);
  padding:16px 22px; box-shadow:var(--shadow-sm);
  transition:box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.list-row:hover{box-shadow:var(--shadow-md); border-color:var(--accent-light); transform:translateY(-1px);}
.list-row[data-href]{cursor:pointer;}
.list-row-main{flex:1 1 200px; min-width:160px;}
.list-row-title{font-weight:600; font-size:1.05rem; color:var(--ink);}
.list-row-meta{font-size:0.85rem; color:var(--ink-soft); margin-top:2px;}
.list-row-badge{
  display:inline-block; padding:4px 12px; border-radius:999px; font-size:0.75rem; font-weight:600;
  letter-spacing:0.02em; flex-shrink:0;
}
.list-row-badge.active{background:var(--accent-light); color:var(--accent-deep);}
.list-row-badge.inactive{background:var(--tan-bg); color:var(--tan-text);}
.list-row-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex-shrink:0;}
.list-row-empty{color:var(--ink-soft); font-style:italic; padding:20px 0;}

/* ---- Flat List: simple-card alternative to .list-row — narrow, tightly-spaced rows. ---- */
.flat-list{display:flex; flex-direction:column; gap:8px; margin-top:16px; max-width:520px;}
.flat-list-row{
  background:var(--panel); border:0.5px solid var(--card-border); border-radius:12px; box-shadow:none;
  padding:10px 16px;
}
.flat-list-row:hover{box-shadow:none; transform:none;}
.flat-list-row[data-href]:hover{border-color:var(--accent-light);}
.flat-list-row[data-href]:hover .list-row-title{color:var(--accent-deep); text-decoration:underline;}
.flat-list-row .list-row-status{
  font-size:0.72rem; font-weight:600; padding:2px 10px; border-radius:999px; flex-shrink:0;
}
.flat-list-row .list-row-status.active{background:var(--accent-light); color:var(--accent-deep);}
.flat-list-row .list-row-status.inactive{background:var(--tan-bg); color:var(--tan-text);}

.permission-chip{
  display:inline-block; padding:7px 16px; border-radius:999px; background:var(--accent); color:#fff;
  font-size:0.85rem; font-weight:600; line-height:1;
}

/* ---- Settings-page layout: fields on the left, actions on the right. ---- */
.settings-page-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; margin-top:12px;}
.settings-page-grid h2{margin-top:0;}
@media (max-width:800px){.settings-page-grid{grid-template-columns:1fr;}}
.section-card{background:var(--panel); border:0.5px solid var(--card-border); border-radius:12px; padding:20px;}
.section-card h2{margin-top:0;}

/* ---- Flash messages ---- */
.flash{padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:18px; box-shadow:var(--shadow-sm);}
.flash-success{background:var(--accent-light); color:var(--accent-deep);}
.flash-error{background:var(--red-bg); color:var(--red);}
.flash p{margin:4px 0;}

/* ---- Forms ---- */
.form{
  display:flex; flex-direction:column; gap:14px; max-width:480px;
  background:var(--panel); padding:24px; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); border:1px solid var(--ledger-line);
}
.form label{display:flex; flex-direction:column; gap:5px; font-size:0.88rem; color:var(--ink-soft); font-weight:600;}
.form input, .form select, .form textarea,
select, input[type=text], input[type=email], input[type=password]{
  padding:9px 12px; border:1px solid var(--border-input); border-radius:var(--radius-sm);
  font:inherit; font-size:0.95rem; background:var(--paper-warm); color:var(--ink);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
select:focus, input:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(85,107,47,0.18);}
select:hover, input:hover, textarea:hover{border-color:var(--ink-faint);}

button, .form button{
  align-self:flex-start; padding:8px 16px; background:var(--accent); color:#fff;
  border:1px solid var(--accent); border-radius:8px; cursor:pointer; font:inherit;
  font-weight:600; font-size:0.92rem; box-shadow:var(--shadow-sm);
  transition:background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
button:hover{background:var(--accent-deep); border-color:var(--accent-deep); box-shadow:var(--shadow-md); transform:translateY(-1px);}
button:active{transform:translateY(0); box-shadow:var(--shadow-sm);}

.inline-form{display:inline; margin-left:10px;}
.link-button{background:none; border:none; color:var(--accent-deep); cursor:pointer; text-decoration:underline; font:inherit; padding:0; font-weight:600; box-shadow:none;}
.link-button:hover{color:var(--accent); background:none; box-shadow:none; transform:none;}

/* Nav-bar variant of .link-button — sits on the dark navy topnav, so it needs light text instead
   of .link-button's accent-deep (which would be near-invisible there). */
.nav-link-button{background:none; border:none; color:#fff; opacity:0.85; cursor:pointer; text-decoration:underline; font:inherit; padding:0; font-weight:600; box-shadow:none;}
.nav-link-button:hover{opacity:1; background:none; box-shadow:none; transform:none;}

.form label.checkbox-label-inline{flex-direction:row; align-items:center; gap:8px; font-weight:500; color:var(--ink);}
.form label.checkbox-label-inline input[type="checkbox"]{width:16px; height:16px; accent-color:var(--accent); flex:none;}

.hint{font-size:0.85em; color:var(--ink-faint); font-style:italic;}

/* ---- Login page split-screen layout ---- */
.login-body{margin:0;}
.login-split{display:flex; min-height:100vh;}
.login-panel{display:flex; align-items:center; justify-content:center; padding:40px 32px;}
.login-panel-brand{
  flex:0 0 45%; background:var(--brand-navy); color:#fff; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.login-brand-name{font-family:var(--serif); font-size:26px; font-weight:600; letter-spacing:-0.01em;}
.login-brand-tagline{font-family:var(--serif); font-style:italic; font-size:13px; color:#A9B7CC; margin-top:6px;}
.login-divider{width:36px; height:3px; background:var(--accent); border-radius:2px; margin:22px 0;}
.login-brand-copy{font-size:13px; color:#A9B7CC; max-width:260px; margin:0; line-height:1.5;}
.login-panel-form{flex:0 0 55%; background:var(--paper);}
.login-form-wrap{width:100%; max-width:360px;}
.login-form-wrap h1{font-family:var(--serif); font-size:22px; color:var(--ink); margin:0 0 6px;}
.login-subtext{font-size:13px; color:var(--ink-soft); margin:0 0 24px;}
.login-form label{font-size:12.5px; color:var(--ink-soft);}
.login-form input{background:#fff; border:1px solid #DAD6C8; border-radius:8px;}
.login-form button{width:100%; justify-content:center; align-self:stretch; text-align:center;}
@media (max-width: 800px){
  .login-split{flex-direction:column;}
  .login-panel-brand, .login-panel-form{flex:1 1 auto;}
}