/* ============================================================================
   HOMMLET MANAGER — golden-hour painterly theme
   Palette & mood drawn from the village hero art: dusk gold, ember windows,
   forest shadow, weathered parchment.
============================================================================ */
:root{
  --bg:#120d07; --bg2:#181109; --ink:#f4ead2; --ink-dim:#cdb88f; --muted:#9c875f;
  --gold:#e3b65a; --gold-deep:#b9842f; --gold-soft:#f2d488;
  --ember:#ff9d44; --green:#8aa86a; --red:#cf6a4f; --blue:#7fa8cc;
  --parch:#efe1c0; --parch-ink:#3a2c17;
  --line:rgba(227,182,90,.22); --line-strong:rgba(227,182,90,.42);
  --panel: rgba(38,28,16,.78); --panel-2: rgba(46,34,19,.82);
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --radius:14px;
  --serif:'EB Garamond', Georgia, 'Iowan Old Style', serif;
  --display:'Cinzel', 'Trajan Pro', Georgia, serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--ink); font-family:var(--serif); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(227,182,90,.10), transparent 60%),
    linear-gradient(180deg, #160f08, var(--bg) 60%) fixed;
}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--gold-soft)}
button{font-family:var(--serif)}
.hidden{display:none !important}

/* paper-grain veil over everything for warmth */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:3px 3px; mix-blend-mode:overlay;
}
#app{position:relative; z-index:2}

/* ---------- top bar ---------- */
header.topbar{
  display:flex; align-items:center; gap:14px; padding:14px 24px;
  background:linear-gradient(180deg, rgba(28,20,11,.96), rgba(20,14,8,.92));
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 2px 24px rgba(0,0,0,.5); position:sticky; top:0; z-index:50;
  backdrop-filter:blur(6px);
}
.brand{font-family:var(--display); font-size:23px; font-weight:700; color:var(--gold);
  letter-spacing:1.5px; line-height:1; text-shadow:0 1px 0 rgba(0,0,0,.6)}
.brand small{display:block; font-family:var(--serif); font-size:10px; color:var(--ink-dim);
  letter-spacing:4px; font-weight:500; margin-top:4px}
.spacer{flex:1}
.whoami{font-size:14px; color:var(--ink-dim); text-align:right; line-height:1.4}
.whoami b{color:var(--ink)}
.role-pill{display:inline-block; font-family:var(--display); font-size:9px; text-transform:uppercase;
  letter-spacing:1.5px; padding:3px 9px; border-radius:20px;
  border:1px solid var(--gold-deep); color:var(--gold); margin-left:6px;
  background:rgba(227,182,90,.08)}

/* ---------- tabs ---------- */
nav.tabs{display:flex; flex-wrap:wrap; gap:5px; padding:10px 20px;
  background:rgba(16,11,6,.7); border-bottom:1px solid var(--line)}
nav.tabs button{
  background:transparent; color:var(--ink-dim); border:1px solid transparent; border-radius:9px;
  padding:8px 15px; cursor:pointer; font-size:15px; letter-spacing:.3px; transition:.15s;
}
nav.tabs button:hover{color:var(--ink); background:rgba(227,182,90,.08)}
nav.tabs button.active{color:#1c1305;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)); border-color:var(--gold-deep);
  font-weight:600; box-shadow:0 2px 12px rgba(227,182,90,.25)}

main{max-width:1120px; margin:0 auto; padding:26px 20px 90px}

/* ---------- HERO (home banner) ---------- */
.hero{
  position:relative; border-radius:18px; overflow:hidden; margin-bottom:26px;
  min-height:300px; display:flex; align-items:flex-end;
  border:1px solid var(--line-strong); box-shadow:var(--shadow);
  background:#0c0a06;
}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05)}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,9,5,.05) 0%, rgba(12,9,5,.15) 40%, rgba(12,9,5,.86) 100%),
             radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(12,9,5,.5))}
.hero .hero-text{position:relative; z-index:2; padding:30px 34px}
.hero h1{font-family:var(--display); font-weight:700; font-size:46px; margin:0;
  color:#fff7e6; letter-spacing:1px; text-shadow:0 3px 20px rgba(0,0,0,.8), 0 1px 0 rgba(0,0,0,.6)}
.hero .hero-sub{margin:6px 0 0; color:var(--gold-soft); font-size:16px; font-style:italic;
  text-shadow:0 2px 12px rgba(0,0,0,.9); letter-spacing:.4px}

/* page headings (non-hero tabs) */
h1.page-title{font-family:var(--display); font-weight:600; font-size:30px; color:var(--gold);
  margin:0 0 4px; letter-spacing:.6px; text-shadow:0 2px 10px rgba(0,0,0,.4)}
h1.page-title::after{content:""; display:block; width:80px; height:2px; margin-top:10px;
  background:linear-gradient(90deg,var(--gold-deep),transparent)}
.page-sub{color:var(--ink-dim); font-size:16px; font-style:italic; margin:0 0 22px}

/* ---------- panels & cards ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; margin-bottom:18px; box-shadow:var(--shadow); backdrop-filter:blur(3px)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px}
.card{background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); border-radius:var(--radius); padding:17px; position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.4); transition:transform .15s, border-color .15s, box-shadow .15s}
.card:hover{transform:translateY(-2px); border-color:var(--line-strong);
  box-shadow:0 16px 40px rgba(0,0,0,.5)}
.card h3{font-family:var(--display); font-weight:600; margin:0 0 5px; color:var(--ink); font-size:19px;
  letter-spacing:.4px}
.card .meta{font-family:var(--serif); font-size:13px; color:var(--gold); letter-spacing:.4px;
  margin-bottom:9px; font-style:italic}
.card p{margin:7px 0; font-size:15.5px; color:var(--ink-dim)}
.card p b{color:var(--ink)}
.card .gmnote{background:rgba(207,106,79,.10); border-left:3px solid var(--red); padding:9px 12px;
  margin-top:11px; font-size:14.5px; color:#f0c9b9; border-radius:0 6px 6px 0}
.card .gmnote::before{content:"GM ONLY"; display:block; color:var(--red); font-family:var(--display);
  font-weight:600; font-size:10px; letter-spacing:1.5px; margin-bottom:3px}
.card-actions{margin-top:13px; display:flex; gap:8px; flex-wrap:wrap}

.tag{display:inline-block; font-size:12px; padding:3px 10px; border-radius:20px;
  background:rgba(227,182,90,.10); color:var(--ink-dim); margin:2px 5px 2px 0;
  border:1px solid var(--line)}
.badge-public{color:var(--green); border-color:var(--green)}
.badge-secret{color:var(--red); border-color:var(--red)}

/* ---------- buttons ---------- */
.btn{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#231806; border:none;
  border-radius:9px; padding:10px 18px; font-size:15px; font-weight:600; cursor:pointer;
  font-family:var(--serif); letter-spacing:.3px; box-shadow:0 3px 12px rgba(227,182,90,.22);
  transition:.15s}
.btn:hover{filter:brightness(1.08); box-shadow:0 5px 18px rgba(227,182,90,.34)}
.btn.ghost{background:transparent; color:var(--ink-dim); border:1px solid var(--line-strong); box-shadow:none}
.btn.ghost:hover{color:var(--ink); border-color:var(--gold); filter:none; background:rgba(227,182,90,.06)}
.btn.sm{padding:6px 12px; font-size:13px}
.btn.danger{background:transparent; color:var(--red); border:1px solid var(--red); box-shadow:none}
.btn.danger:hover{background:var(--red); color:#fff; filter:none}

/* ---------- forms ---------- */
label{display:block; font-family:var(--display); font-size:11px; color:var(--gold);
  text-transform:uppercase; letter-spacing:1.2px; margin:14px 0 5px}
input,select,textarea{
  width:100%; background:rgba(12,9,5,.6); border:1px solid var(--line-strong); color:var(--ink);
  border-radius:9px; padding:10px 13px; font-size:15.5px; font-family:var(--serif);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(227,182,90,.14)}
textarea{min-height:76px; resize:vertical}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.check-row{display:flex; align-items:center; gap:9px; margin-top:14px}
.check-row input{width:auto}
.check-row label{margin:0; text-transform:none; font-family:var(--serif); color:var(--ink-dim);
  letter-spacing:0; font-size:15px}

/* ---------- modal ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(8,5,2,.74); display:flex; align-items:flex-start;
  justify-content:center; padding:44px 16px; z-index:100; overflow:auto; backdrop-filter:blur(4px)}
.modal{background:linear-gradient(180deg,#2b2012,#211810); border:1px solid var(--line-strong);
  border-radius:16px; width:100%; max-width:580px; padding:26px; box-shadow:var(--shadow)}
.modal h2{font-family:var(--display); font-weight:600; margin:0 0 6px; color:var(--gold); letter-spacing:.5px}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:22px}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; font-size:15px; margin-top:6px}
th,td{text-align:left; padding:9px 11px; border-bottom:1px solid var(--line)}
th{font-family:var(--display); color:var(--gold); font-size:11px; text-transform:uppercase; letter-spacing:1px}
tr:hover td{background:rgba(227,182,90,.05)}

/* ---------- auth / setup (full-bleed hero) ---------- */
.auth-hero{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  position:relative; overflow:hidden}
.auth-hero::before{content:""; position:absolute; inset:0; z-index:0;
  background:url("assets/village.jpg") center/cover no-repeat;
  transform:scale(1.05); filter:saturate(1.05)}
.auth-hero::after{content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(80% 80% at 50% 40%, rgba(10,7,3,.35), rgba(8,5,2,.82)),
             linear-gradient(180deg, rgba(8,5,2,.5), rgba(8,5,2,.7))}
.auth-card{position:relative; z-index:2;
  background:linear-gradient(180deg, rgba(34,25,14,.92), rgba(24,17,9,.94));
  border:1px solid var(--line-strong); border-radius:18px; padding:36px 34px; max-width:430px; width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.7); backdrop-filter:blur(8px)}
.auth-card h1{font-family:var(--display); font-weight:700; font-size:40px; color:var(--gold-soft);
  margin:0 0 2px; text-align:center; letter-spacing:2px; text-shadow:0 3px 18px rgba(0,0,0,.6)}
.auth-card .tagline{text-align:center; color:var(--ink-dim); margin:0 0 22px; font-size:14px;
  font-style:italic; letter-spacing:1px}
.auth-toggle{text-align:center; margin-top:16px; font-size:14px; color:var(--ink-dim)}
.auth-toggle a{cursor:pointer}
.center-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}

.msg{padding:11px 14px; border-radius:9px; font-size:14px; margin:12px 0}
.msg.err{background:rgba(207,106,79,.14); color:#f3c2b2; border:1px solid var(--red)}
.msg.ok{background:rgba(138,168,106,.14); color:#cfe6b4; border:1px solid var(--green)}
.setup-steps{font-size:15px; color:var(--ink-dim); line-height:1.7}
.setup-steps code{background:rgba(12,9,5,.7); padding:2px 7px; border-radius:5px; color:var(--gold-soft);
  font-family:ui-monospace,Menlo,monospace; font-size:13px}

.empty{color:var(--muted); font-style:italic; padding:26px; text-align:center}
.section-head{display:flex; align-items:center; justify-content:space-between; margin:8px 0 16px; gap:12px}
.section-head h2{font-family:var(--display); font-weight:600; margin:0; color:var(--ink); font-size:22px;
  letter-spacing:.5px}
.toolbar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:16px}

/* ---------- KPIs ---------- */
.kpis{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.kpi{background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  border-radius:13px; padding:16px 22px; min-width:130px; box-shadow:0 10px 26px rgba(0,0,0,.38)}
.kpi .n{font-family:var(--display); font-size:30px; color:var(--gold); font-weight:700; line-height:1.1}
.kpi .l{font-size:12px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:1px; margin-top:4px}

.status-Submitted{color:var(--blue)} .status-In\.progress{color:var(--gold)}
.status-Resolved{color:var(--green)} .status-Complete{color:var(--green)}

/* ---------- reference ---------- */
.ref-block{margin-bottom:24px}
.ref-block h3{font-family:var(--display); font-weight:600; color:var(--gold); margin:0 0 10px;
  font-size:18px; letter-spacing:.5px}
.ref-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px}
.ref-grid .ref-item{background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:14px}
.ref-item b{color:var(--ink); font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.3px}
.ref-item span{color:var(--ink-dim)}

footer.foot{text-align:center; color:var(--muted); font-size:13px; padding:24px; font-style:italic;
  letter-spacing:.4px}

@media (max-width:600px){
  .hero h1{font-size:32px} .hero{min-height:220px}
  main{padding:18px 14px 80px}
  .brand{font-size:19px}
}