/* ===== Archive — design system v3 ===== */

/* Tells the browser this page is dark-themed, so native widgets
   (date pickers, etc.) render with dark chrome instead of white. */
html { color-scheme: dark; }

/* Tailwind's forms plugin (?plugins=forms) resets input/select/textarea
   appearance and can win the specificity fight depending on injection
   timing, leaving white-on-white fields. Force our theme to always win. */
input, select, textarea {
  background-color: #131313 !important;
  color: #f8f0dc !important;
  border-color: #353534 !important;
}
input::placeholder, textarea::placeholder { color: #6b6459 !important; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: #FFFF00 !important; }

/* Browser autofill forces a white background + black text via an internal
   UA style that normal CSS can't override directly — this is the standard
   workaround (a huge inset shadow that visually replaces the background). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f8f0dc !important;
  -webkit-box-shadow: 0 0 0px 1000px #131313 inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Native date-picker calendar icon is black-on-black in dark mode by default */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

body::before {
  content: '';
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background-color: #131313;
  background-image:
    linear-gradient(#1c1b1b 1px, transparent 1px),
    linear-gradient(90deg, #1c1b1b 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none; z-index: -1;
}
.noise-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  opacity: 0.05; pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #131313; }
::-webkit-scrollbar-thumb { background: #FFFF00; border-radius: 8px; }

.brutalist-shadow-black { box-shadow: 4px 4px 0px 0px rgba(0,0,0,1); }
@media (min-width:768px){ .brutalist-shadow-black { box-shadow: 6px 6px 0px 0px rgba(0,0,0,1); } }

/* the ONE exception to "everything curved": Library folder tiles keep the sharp folder-tab shape */
.folder-tab { clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%); }

/* ===== Slim curved header ===== */
.archive-header{
  padding: 10px 14px;
  border-radius: 0 0 22px 22px;
}
@media (min-width:768px){ .archive-header{ padding:12px 24px; } }

.logo-btn{
  width: 38px; height: 38px; border-radius: 12px;
  background:#FFFF00; border:3px solid #000;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 3px 3px 0 rgba(0,0,0,1);
  flex-shrink:0;
}
.logo-btn svg{ width:19px; height:19px; }

.icon-btn{
  width: 38px; height:38px; border-radius: 999px;
  background:#1c1b1b; border:3px solid #000;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 3px 3px 0 rgba(0,0,0,1);
  color:#e5e2e1; transition: transform .15s, box-shadow .15s;
  flex-shrink:0;
}
.icon-btn:active{ transform: translate(2px,2px); box-shadow:none; }
.icon-btn.active{ background:#FFFF00; color:#000; }
.icon-btn .material-symbols-outlined{ font-size:19px; }
@media (min-width:768px){ .icon-btn, .logo-btn{ width:44px; height:44px; border-radius:14px; } .icon-btn{ border-radius:999px; } .icon-btn .material-symbols-outlined{ font-size:22px; } }

/* ===== Search overlay ===== */
.search-overlay{
  position: fixed; inset:0; z-index:60; background: rgba(0,0,0,.82); backdrop-filter: blur(4px);
  padding: 16px; display:flex; flex-direction:column;
}
.search-overlay-input{
  width:100%; background:#1c1b1b; border:3px solid #000; border-radius:16px !important;
  padding:14px 18px; color:#fff; font-family:'Fira Sans',sans-serif; font-size:16px;
  box-shadow: 4px 4px 0 rgba(255,255,0,1);
}

/* ===== Curved cards — the default everywhere except Library folders ===== */
.curved-card{
  border-radius: 20px; border: 3px solid #000; background:#1c1b1b;
  box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
  overflow: hidden;
}
@media (min-width:768px){ .curved-card{ border-radius:24px; box-shadow: 6px 6px 0 rgba(0,0,0,1); } }

/* ===== Feed — chronological post cards ===== */
.post-card{ margin-bottom: 20px; animation: riseIn .5s ease both; }
.post-card .post-media{ aspect-ratio: 4/3; }
.post-media img{ width:100%; height:100%; object-fit:cover; }

/* ===== Library grid — grouped folders, 2-per-row on mobile, folder-shaped not tall ===== */
.group-block{ margin-bottom: 30px; }
.group-heading{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.group-dot{ width:10px; height:10px; border-radius:3px; }
.folder-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
@media (min-width:640px){ .folder-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width:1024px){ .folder-grid{ grid-template-columns: repeat(4, 1fr); } }

.folder-card{
  position:relative; border:4px solid #000; aspect-ratio: 5/3.3;
  clip-path: polygon(0 8%, 38% 8%, 46% 0, 100% 0, 100% 100%, 0 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:12px;
  box-shadow: 4px 4px 0 rgba(0,0,0,1);
  transition: transform .2s ease;
  animation: riseIn .4s ease both;
}
.folder-card:active{ transform: translate(2px,2px); }
.folder-card .icon{ position:absolute; top:14px; right:12px; opacity:.85; }
.folder-card .name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:15px; color:#0e0e0e; text-transform:uppercase; line-height:1.05; }
.folder-card .count{ font-family:'Space Mono',monospace; font-size:10px; color:#0e0e0e; opacity:.7; margin-top:2px; }

/* ===== Room detail: poster / horizontal / info grids ===== */
.status-chip-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:18px; }
.status-chip{
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  border:2px solid #353534; color:#c2caad; padding:7px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.status-chip.active{ background:#FFFF00; color:#000; border-color:#000; }

.poster-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
@media (min-width:768px){ .poster-grid{ gap:16px; } }
.poster-card{ animation: riseIn .4s ease both; }
.poster-card .art{ aspect-ratio: 2/3; }
.horizontal-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
.horizontal-card .art{ aspect-ratio: 16/9; }
.info-grid{ display:flex; flex-direction:column; gap:10px; }
.art-fallback{ background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px); display:flex; align-items:center; justify-content:center; }
.art img{ width:100%; height:100%; object-fit:cover; }

.folder-empty{
  text-align:center; padding: 48px 20px; border: 3px dashed #353534; border-radius:20px;
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.08em; color:#8c9479; text-transform:uppercase;
}

/* ===== Add modal / forms ===== */
.field-label{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#8c9479; display:block; margin-bottom:4px; }
.field-input{ width:100%; background:#131313; border:3px solid #353534; border-radius:14px !important; padding:11px 14px; color:#fff; font-family:'Fira Sans',sans-serif; }
.field-input:focus{ outline:none; border-color:#FFFF00; }
.status-pill{ font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.04em; border:2px solid #353534; border-radius:12px; color:#c2caad; padding:9px 12px; cursor:pointer; text-align:center; }
.status-pill.active{ background:#FFFF00; color:#000; border-color:#000; }
.upload-btn{ display:flex; align-items:center; justify-content:center; gap:8px; border:2px dashed #434933; border-radius:14px; padding:14px; color:#8c9479; font-family:'Space Mono',monospace; font-size:11px; text-transform:uppercase; cursor:pointer; }
.upload-btn:hover{ border-color:#FFFF00; color:#FFFF00; }

/* ===== Custom date picker (replaces native <input type="date">) ===== */
.date-trigger{
  width:100%; background:#131313; border:3px solid #353534; border-radius:14px !important;
  padding:11px 14px; color:#fff; font-family:'Fira Sans',sans-serif; text-align:left;
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
}
.date-trigger.empty{ color:#6b6459; }
.date-trigger:focus, .date-trigger.open{ outline:none; border-color:#FFFF00; }
.date-popover{
  position:absolute; z-index:80; margin-top:6px; width:260px; max-width:90vw;
  background:#1c1b1b; border:3px solid #000; border-radius:18px; box-shadow:5px 5px 0 rgba(0,0,0,1);
  padding:14px;
}
.date-popover-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.date-popover-head button{ width:28px; height:28px; border-radius:999px; background:#131313; border:2px solid #353534; color:#fff; display:flex; align-items:center; justify-content:center; }
.date-popover-head .label{ font-family:'Space Mono',monospace; font-size:12px; text-transform:uppercase; color:#e5e2e1; letter-spacing:.04em; }
.date-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:3px; }
.date-grid .dow{ font-family:'Space Mono',monospace; font-size:9px; color:#6b6459; text-align:center; padding:4px 0; }
.date-cell{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px; font-family:'Fira Sans',sans-serif; font-size:12px; color:#e5e2e1; cursor:pointer; }
.date-cell:hover{ background:#353534; }
.date-cell.today{ border:1px solid #FFFF00; }
.date-cell.selected{ background:#FFFF00; color:#000; font-weight:700; }
.date-cell.empty{ visibility:hidden; }

/* ===== Item page: hover-to-edit poster, editable pill, inline candidate dropdown ===== */
.poster-frame{ position:relative; }
.poster-edit-btn{
  position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:999px;
  background:#131313cc; border:2px solid #000; display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:0; transition:opacity .15s; backdrop-filter: blur(2px);
}
.poster-frame:hover .poster-edit-btn, .poster-edit-btn:focus{ opacity:1; }
.poster-edit-btn .material-symbols-outlined{ font-size:15px; }

.candidate-list{ display:flex; flex-direction:column; gap:2px; max-height:180px; overflow-y:auto; }
.candidate-row{
  display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:12px;
  font-family:'Fira Sans',sans-serif; font-size:13px; color:#e5e2e1; cursor:pointer;
}
.candidate-row:hover{ background:#2b2621; }
.candidate-row .yr{ font-family:'Space Mono',monospace; font-size:10px; color:#8c9479; }
.candidate-warning{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px;
  background:#FFC93D18; border:1px solid #FFC93D; font-family:'Fira Sans',sans-serif; font-size:12px; color:#e5e2e1;
}
  width: 40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  border: 3px solid #000; background:#b7f700; color:#141f00; box-shadow: 3px 3px 0 rgba(0,0,0,1);
}
.add-fab-inline:active{ transform: translate(2px,2px); box-shadow:none; }

.log-entry{ border-left:3px solid #FFFF00; padding-left:12px; margin-bottom:14px; }
.log-entry .log-meta{ font-family:'Space Mono',monospace; font-size:10px; color:#8c9479; text-transform:uppercase; }

.modal-backdrop{ background: rgba(0,0,0,.75); backdrop-filter: blur(2px); }

@keyframes riseIn{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform: translateY(0); } }

*:focus-visible{ outline:2px solid #FFFF00; outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }