/* =========================================================================
   PROJECT DOCKET — ADMIN PANEL styles (standalone)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #12181f;
  --bg-elevated: #1a232e;
  --bg-elevated-2: #212c39;
  --line: #313f4f;
  --line-soft: #24303d;

  --paper: #f1e9d2;
  --paper-shadow: #d9cca3;
  --ink: #1b2430;
  --ink-soft: #4a5567;

  --cream: #ede7d9;
  --muted: #8a93a3;

  --stamp-red: #b0454a;
  --stamp-red-dark: #7e2d31;
  --forest: #4c7a6c;
  --forest-dark: #345449;
  --amber: #d69a4c;
  --amber-dark: #a06f2c;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 7px;

  --font-display: 'Zilla Slab', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --shadow-card: 0 18px 40px -18px rgba(0,0,0,0.55), 0 2px 0 rgba(0,0,0,0.15);
  --shadow-pop: 0 26px 60px -20px rgba(0,0,0,0.65);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ color-scheme: dark; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 12% -10%, rgba(214,154,76,0.08), transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(76,122,108,0.10), transparent 40%),
    var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
}

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 39px, rgba(255,255,255,0.018) 39px 40px
  );
  z-index:0;
}

a{ color: inherit; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  margin:0;
  letter-spacing: 0.2px;
}

p{ margin:0; }

button{ font-family: var(--font-body); cursor:pointer; }

::selection{ background: var(--amber); color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.mono{ font-family: var(--font-mono); }

.shell{
  position:relative; z-index:1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px 80px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 44px;
  gap:16px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-mark{
  width:42px; height:42px;
  border-radius: 10px;
  background: linear-gradient(155deg, var(--amber), var(--stamp-red));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  font-weight:700;
  color: var(--ink);
  font-size: 1.1rem;
  box-shadow: 0 8px 18px -8px rgba(214,154,76,0.55);
  flex-shrink:0;
}

.brand-text .eyebrow{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.brand-text h1{
  font-size: 1.28rem;
  font-weight:600;
}

.page-nav{
  display:flex;
  align-items:center;
  gap:8px;
}

.nav-link{
  color:var(--muted);
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:999px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.nav-link:hover,
.nav-link.active{
  color:var(--cream);
  border-color:var(--line);
  background:var(--bg-elevated);
}

.nav-link.active{ color:var(--amber); }

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom: 36px;
}

.page-head .eyebrow{
  font-family: var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color: var(--amber);
  display:block;
  margin-bottom:8px;
}

.page-head h2{
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
}

.page-head .desc{
  color: var(--muted);
  max-width:480px;
  font-size:0.92rem;
  margin-top:6px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  border-radius: 999px;
  padding: 13px 26px;
  font-weight:700;
  font-size:0.92rem;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn-primary{
  background: linear-gradient(135deg, var(--amber), var(--stamp-red));
  color: var(--ink);
  box-shadow: 0 14px 30px -12px rgba(214,154,76,0.5);
}
.btn-primary:hover{ transform: translateY(-2px); }
.btn-primary:disabled{ opacity:0.55; cursor:not-allowed; transform:none; }

.btn-block{ width:100%; margin-top:6px; }

.form-msg{
  font-size:0.85rem;
  font-family: var(--font-mono);
}
.form-msg.error{ color: var(--stamp-red); }
.form-msg.ok{ color: var(--forest); }

/* -------------------------------------------------------------------------
   ADMIN PANEL
   ------------------------------------------------------------------------- */
.admin-toolbar{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:26px;
  align-items:center;
}

.search-box{
  flex:1;
  min-width:220px;
  display:flex;
  align-items:center;
  gap:10px;
  background: var(--bg-elevated);
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
}
.search-box input{
  flex:1;
  background:none;
  border:none;
  color: var(--cream);
  font-size:0.9rem;
}
.search-box input:focus{ outline:none; }
.search-box svg{ flex-shrink:0; color: var(--muted); }

.filter-select{
  background: var(--bg-elevated);
  border:1px solid var(--line);
  color: var(--cream);
  padding: 10px 14px;
  border-radius: 999px;
  font-size:0.85rem;
  font-family: var(--font-mono);
}

.stat-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  margin-bottom:28px;
}
@media (max-width: 760px){ .stat-strip{ grid-template-columns: repeat(2,1fr); } }

.stat-box{
  background: var(--bg-elevated);
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.stat-box .num{
  font-family: var(--font-display);
  font-size:1.8rem;
  font-weight:700;
}
.stat-box .lbl{
  font-family: var(--font-mono);
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color: var(--muted);
  margin-top:2px;
}

.docket-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.docket-row{
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display:grid;
  grid-template-columns: 46px 1.6fr 1fr 0.9fr 100px 120px;
  align-items:center;
  gap:16px;
  cursor:pointer;
  transition: border-color .15s ease, transform .15s ease;
}

.docket-row:hover{
  border-color: var(--amber);
  transform: translateX(2px);
}

@media (max-width: 900px){
  .docket-row{ grid-template-columns: 40px 1fr 90px; }
  .docket-row .col-year, .docket-row .col-marks{ display:none; }
}

.docket-row .col-avatar{
  width:40px; height:40px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--amber), var(--stamp-red));
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  font-family: var(--font-display);
}

.docket-row .col-main .pname{
  font-weight:600;
  font-size:1rem;
}
.docket-row .col-main .pmeta{
  font-family: var(--font-mono);
  font-size:0.76rem;
  color: var(--muted);
  margin-top:2px;
}

.docket-row .col-theme{
  font-size:0.85rem;
  color: var(--cream);
}
.docket-row .col-theme .tlbl{
  display:block;
  font-family:var(--font-mono);
  font-size:0.65rem;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:2px;
}

.docket-row .col-year{
  font-family: var(--font-mono);
  font-size:0.85rem;
  color: var(--muted);
}

.docket-row .col-marks{
  font-family: var(--font-mono);
  font-size:0.95rem;
  font-weight:600;
  text-align:right;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family: var(--font-mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding: 6px 12px;
  border-radius:999px;
  justify-self:end;
}
.status-pill.pending{
  background: rgba(214,154,76,0.14);
  color: var(--amber);
  border:1px solid rgba(214,154,76,0.3);
}
.status-pill.evaluated{
  background: rgba(76,122,108,0.16);
  color: var(--forest);
  border:1px solid rgba(76,122,108,0.35);
}
.status-pill::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background: currentColor;
}

.empty-state{
  text-align:center;
  padding: 70px 20px;
  color: var(--muted);
}
.empty-state h3{ color: var(--cream); margin-bottom:8px; }

/* -------------------------------------------------------------------------
   Evaluation drawer (admin scorecard)
   ------------------------------------------------------------------------- */
.drawer-backdrop{
  position:fixed; inset:0;
  background: rgba(8,11,15,0.65);
  backdrop-filter: blur(2px);
  z-index:50;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
}
.drawer-backdrop.open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width: min(460px, 100%);
  background: var(--bg-elevated);
  border-left: 1px solid var(--line);
  z-index:51;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto;
  box-shadow: -30px 0 60px rgba(0,0,0,0.4);
}
.drawer.open{ transform: translateX(0); }

.drawer-head{
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.drawer-head .eyebrow{
  font-family: var(--font-mono);
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color: var(--amber);
}

.drawer-head h3{
  font-size:1.3rem;
  margin-top:6px;
}

.drawer-close{
  background: var(--bg);
  border:1px solid var(--line);
  color: var(--cream);
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.drawer-close:hover{ border-color: var(--stamp-red); color: var(--stamp-red); }

.drawer-body{ padding: 22px 26px 30px; }

.info-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px 18px;
  margin-bottom:22px;
}
.info-grid .k{
  font-family: var(--font-mono);
  font-size:0.66rem;
  text-transform:uppercase;
  color: var(--muted);
  letter-spacing:0.06em;
}
.info-grid .v{
  font-size:0.92rem;
  margin-top:3px;
  word-break: break-word;
}
.info-grid .full{ grid-column: 1/-1; }

.link-row{
  display:flex;
  gap:10px;
  margin-bottom:22px;
  flex-wrap:wrap;
}

.link-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background: var(--bg);
  border:1px solid var(--line);
  padding: 9px 14px;
  border-radius:999px;
  font-size:0.82rem;
  text-decoration:none;
  color: var(--cream);
}
.link-chip:hover{ border-color: var(--amber); color: var(--amber); }

.eval-section{
  border-top: 1px dashed var(--line);
  padding-top:20px;
  margin-top:6px;
}

.eval-section h4{
  font-size:0.95rem;
  margin-bottom:14px;
}

.marks-input-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.marks-input-row input[type=number]{
  width:100px;
  background: var(--bg);
  border:1px solid var(--line);
  color: var(--cream);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size:1.1rem;
  text-align:center;
}
.marks-input-row input[type=number]:focus{
  border-color: var(--amber);
  outline:none;
}

.marks-input-row .of100{
  color: var(--muted);
  font-family: var(--font-mono);
  font-size:0.85rem;
}

.stamp-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  background: var(--bg);
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.switch{
  position:relative;
  width:44px; height:24px;
  flex-shrink:0;
}
.switch input{ opacity:0; width:0; height:0; }
.switch .track{
  position:absolute; inset:0;
  background: var(--line);
  border-radius:999px;
  transition: background .18s ease;
  cursor:pointer;
}
.switch .track::before{
  content:"";
  position:absolute;
  width:18px; height:18px;
  left:3px; top:3px;
  background: var(--cream);
  border-radius:50%;
  transition: transform .18s ease;
}
.switch input:checked + .track{ background: var(--forest); }
.switch input:checked + .track::before{ transform: translateX(20px); }

.stamp-toggle .stlabel{ font-size:0.88rem; font-weight:600; }
.stamp-toggle .stsub{ font-size:0.76rem; color:var(--muted); }

.drawer-actions{
  display:flex;
  gap:12px;
  margin-top:22px;
}

.toast-stack{
  position:fixed;
  bottom:24px; right:24px;
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.toast{
  background: var(--bg-elevated-2);
  border:1px solid var(--line);
  border-left:3px solid var(--forest);
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  font-size:0.85rem;
  box-shadow: var(--shadow-card);
  min-width:240px;
  animation: toast-in .2s ease;
}
.toast.error{ border-left-color: var(--stamp-red); }

@keyframes toast-in{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.skeleton-row{
  height:78px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-elevated-2) 37%, var(--bg-elevated) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer{
  0%{ background-position: 100% 0; }
  100%{ background-position: -100% 0; }
}

.footnote{
  text-align:center;
  color: var(--muted);
  font-size:0.78rem;
  margin-top: 50px;
  font-family: var(--font-mono);
}

/* -------------------------------------------------------------------------
   Feedback view
   ------------------------------------------------------------------------- */
.feedback-toolbar{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:26px;
  align-items:center;
}

.feedback-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.feedback-card{
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:22px;
  animation:feedback-in .35s ease both;
}

.feedback-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line-soft);
}

.feedback-person{ display:flex; align-items:center; gap:12px; min-width:0; }
.feedback-avatar{
  width:42px; height:42px; flex-shrink:0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--forest), var(--amber));
  color:var(--ink);
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:700;
}
.feedback-name{ font-weight:600; font-size:1rem; }
.feedback-meta{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:0.72rem;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.feedback-date{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:0.68rem;
  text-align:right;
  white-space:nowrap;
}
.rating-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
  margin:18px 0;
}
.rating-item{
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
  padding:10px;
}
.rating-label{
  display:block;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:0.62rem;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.rating-value{
  display:block;
  color:var(--amber);
  font-family:var(--font-display);
  font-size:1.45rem;
  font-weight:700;
  margin-top:2px;
}
.feedback-copy{ margin-top:16px; }
.feedback-copy .copy-label{
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.feedback-copy p{ color:var(--cream); font-size:0.9rem; margin-top:5px; }

@keyframes feedback-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width:760px){
  .feedback-list{ grid-template-columns:1fr; }
  .topbar{ align-items:flex-start; }
  .page-nav{ width:100%; }
  .nav-link{ flex:1; text-align:center; }
}

/* -------------------------------------------------------------------------
   Destructive action button (delete docket)
   ------------------------------------------------------------------------- */
.btn-danger{
  background: transparent;
  color: var(--stamp-red);
  border: 1px solid var(--stamp-red);
  box-shadow: none;
}
.btn-danger:hover{
  background: rgba(176,69,74,0.12);
  transform: translateY(-2px);
}
.btn-danger:disabled{ opacity:0.55; cursor:not-allowed; transform:none; }