/* ============================================================
   HARSHCUTZ — Admin Styles
   css/admin.css
   ============================================================ */

/* ── LOGIN ─────────────────────────────────────────────────── */
#admin-login { position: fixed; inset: 0; background: #0d0d0d; z-index: 7000; display: none; align-items: center; justify-content: center; }
#admin-login.open { display: flex; }
.login-box { background: #181818; border: 1px solid #2a2a2a; padding: 3rem 2.5rem; width: min(360px,90vw); text-align: center; }
.login-box h2 { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: .2em; margin-bottom: .4rem; }
.login-sub { font-family: 'Space Mono', monospace; font-size: .52rem; letter-spacing: .2em; color: var(--g3); text-transform: uppercase; margin-bottom: 2rem; }
.login-box input { width: 100%; background: #111; border: none; border-bottom: 1px solid #2a2a2a; color: var(--white); font-family: 'Space Mono', monospace; font-size: .8rem; letter-spacing: .15em; padding: .75rem 0; outline: none; text-align: center; transition: border-color .3s; margin-bottom: 1.5rem; }
.login-box input:focus { border-bottom-color: var(--white); }
.login-box input::placeholder { color: var(--g3); font-size: .65rem; }
.login-btn { width: 100%; font-family: 'Space Mono', monospace; font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; color: var(--black); background: var(--white); border: none; padding: 1rem; cursor: pointer; transition: background .3s; }
.login-btn:hover { background: var(--g4); }
.login-error { font-family: 'Space Mono', monospace; font-size: .52rem; color: var(--red); letter-spacing: .15em; text-transform: uppercase; margin-top: 1rem; display: none; }
.login-error.show { display: block; }
.login-back { background: none; border: none; color: var(--g3); font-family: 'Space Mono', monospace; font-size: .52rem; letter-spacing: .15em; cursor: pointer; text-transform: uppercase; margin-top: 1.5rem; transition: color .3s; }
.login-back:hover { color: var(--white); }

/* ── ADMIN PANEL SHELL ─────────────────────────────────────── */
#admin-panel { position: fixed; inset: 0; background: #111; z-index: 6000; display: none; flex-direction: column; overflow: hidden; }
#admin-panel.open { display: flex; }
.adm-header { background: #181818; border-bottom: 1px solid #2a2a2a; padding: .85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: .75rem; flex-wrap: wrap; }
.adm-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; letter-spacing: .25em; }
.adm-sub { font-family: 'Space Mono', monospace; font-size: .48rem; letter-spacing: .2em; color: var(--g3); text-transform: uppercase; margin-top: .1rem; }
.adm-hdr-right { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* Admin buttons */
.abtn { font-family: 'Space Mono', monospace; font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; background: none; border: 1px solid #2a2a2a; color: var(--g3); padding: .4rem .85rem; cursor: pointer; transition: all .3s; }
.abtn:hover { color: var(--white); border-color: var(--g3); }
.abtn.pri { background: var(--white); color: var(--black); border-color: var(--white); }
.abtn.pri:hover { background: var(--g4); }
.abtn.dng { border-color: #622; color: var(--red); }
.abtn.dng:hover { background: var(--red); color: var(--white); border-color: var(--red); }

/* ── SIDEBAR ───────────────────────────────────────────────── */
.adm-body { display: flex; flex: 1; overflow: hidden; }
.adm-sidebar { width: 200px; flex-shrink: 0; background: #181818; border-right: 1px solid #2a2a2a; display: flex; flex-direction: column; padding: .75rem 0; overflow-y: auto; }
.si { font-family: 'Space Mono', monospace; font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--g3); padding: .75rem 1.3rem; cursor: pointer; transition: all .3s; border-left: 2px solid transparent; display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.si:hover { color: var(--white); background: rgba(255,255,255,.04); }
.si.active { color: var(--white); border-left-color: var(--white); background: rgba(255,255,255,.06); }
.si .sic { margin-left: auto; font-size: .48rem; color: var(--g3); background: var(--g2); padding: .12rem .35rem; }
.si-div { height: 1px; background: #2a2a2a; margin: .6rem .9rem; }
.si-lbl { font-family: 'Space Mono', monospace; font-size: .42rem; letter-spacing: .3em; text-transform: uppercase; color: var(--g3); padding: .35rem 1.3rem; opacity: .6; }

/* ── CONTENT ───────────────────────────────────────────────── */
.adm-content { flex: 1; overflow-y: auto; padding: 1.5rem; }
.adm-sec { display: none; }
.adm-sec.active { display: block; }
.adm-sec-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.2rem; padding-bottom: .9rem; border-bottom: 1px solid #2a2a2a; flex-wrap: wrap; gap: .75rem; }
.adm-sec-head h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: .1em; }
.adm-sec-head p { font-family: 'Space Mono', monospace; font-size: .5rem; letter-spacing: .15em; color: var(--g3); text-transform: uppercase; margin-top: .2rem; }

/* ── UPLOAD ZONE ───────────────────────────────────────────── */
.uz { border: 1px dashed #2a2a2a; padding: 2rem; text-align: center; transition: border-color .3s, background .3s; cursor: pointer; margin-bottom: 1.5rem; position: relative; }
.uz:hover, .uz.drag-over { border-color: var(--g4); background: rgba(255,255,255,.025); }
.uz input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.uz-icon { font-size: 1.8rem; opacity: .2; margin-bottom: .5rem; }
.uz-txt { font-family: 'Space Mono', monospace; font-size: .58rem; letter-spacing: .2em; color: var(--g3); text-transform: uppercase; }
.uz-sub { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .85rem; color: var(--g3); margin-top: .3rem; }
.uprog { height: 2px; background: #2a2a2a; margin-top: .75rem; display: none; }
.uprog-bar { height: 100%; background: var(--white); width: 0; transition: width .2s; }
.uprog.show { display: block; }
.up-info { font-family: 'Space Mono', monospace; font-size: .5rem; color: var(--g3); letter-spacing: .1em; text-transform: uppercase; margin-top: .4rem; min-height: 1rem; }

/* ── ADMIN MEDIA GRID ──────────────────────────────────────── */
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 8px; }
.ami { background: #181818; border: 1px solid #2a2a2a; overflow: hidden; position: relative; transition: border-color .3s; }
.ami.dragging { opacity: .4; border-color: var(--g4); }
.ami.drag-over-card { border-color: var(--white); }
.ami-drag-handle { font-size: 1.2rem; color: var(--g3); padding: .35rem .6rem; cursor: grab; display: flex; align-items: center; background: #141414; border-bottom: 1px solid #2a2a2a; user-select: none; }
.ami-drag-handle:active { cursor: grabbing; }
.ami-img-wrap { position: relative; overflow: hidden; }
.ami-img-wrap img, .ami-vph { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.ami-vph { background: linear-gradient(135deg,#111,#222); display: flex; align-items: center; justify-content: center; opacity: .5; }

/* Focus button overlay */
.ami-focus-btn { position: absolute; top: .4rem; right: .4rem; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.2); color: var(--white); font-size: .75rem; padding: .25rem .4rem; cursor: pointer; transition: all .3s; opacity: 0; }
.ami-img-wrap:hover .ami-focus-btn { opacity: 1; }
.ami-focus-dot { position: absolute; width: 10px; height: 10px; background: rgba(255,200,0,.9); border: 2px solid white; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; box-shadow: 0 0 6px rgba(255,200,0,.6); }

.ami-info { padding: .45rem .55rem; }
.lbl-input { width: 100%; background: #111; border: none; border-bottom: 1px solid #2a2a2a; color: var(--white); font-family: 'Space Mono', monospace; font-size: .5rem; letter-spacing: .08em; padding: .3rem 0; outline: none; transition: border-color .3s; margin-top: .3rem; }
.lbl-input:focus { border-bottom-color: var(--white); }
.ami-toggles { display: flex; gap: .75rem; margin-top: .4rem; flex-wrap: wrap; }
.ami-toggle-label { font-family: 'Space Mono', monospace; font-size: .46rem; letter-spacing: .1em; text-transform: uppercase; color: var(--g3); display: flex; align-items: center; gap: .3rem; cursor: pointer; transition: color .3s; }
.ami-toggle-label:hover { color: var(--white); }
.ami-toggle-label input[type="checkbox"] { accent-color: var(--white); cursor: pointer; }
.ami-lbl { font-family: 'Space Mono', monospace; font-size: .46rem; letter-spacing: .1em; color: var(--g4); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ami-sub { font-family: 'Space Mono', monospace; font-size: .4rem; color: var(--g3); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ami-ctrl { display: flex; align-items: center; justify-content: space-between; padding: .35rem .55rem; border-top: 1px solid #2a2a2a; }
.ami-btn { font-family: 'Space Mono', monospace; font-size: .42rem; letter-spacing: .1em; text-transform: uppercase; background: none; border: none; color: var(--g3); cursor: pointer; padding: .22rem .35rem; transition: color .3s; }
.ami-btn:hover { color: var(--white); }
.ami-btn.del:hover { color: var(--red); }
.ami-pos { font-family: 'Space Mono', monospace; font-size: .42rem; color: var(--g3); letter-spacing: .08em; }
.empty-notice { font-family: 'Space Mono', monospace; font-size: .52rem; color: var(--g3); letter-spacing: .15em; text-transform: uppercase; padding: .75rem 0; }

/* ── FOCUS POINT MODAL ─────────────────────────────────────── */
#focusModal { position: fixed; inset: 0; background: rgba(0,0,0,.96); z-index: 8000; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; padding: 1.5rem; }
#focusModal.open { display: flex; }
.focus-modal-head { display: flex; align-items: center; justify-content: space-between; width: min(700px,95vw); }
.focus-modal-head h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: .15em; }
.focus-modal-head p { font-family: 'Space Mono', monospace; font-size: .52rem; color: var(--g3); letter-spacing: .12em; margin-top: .2rem; text-transform: uppercase; }
#focusImgWrap { position: relative; width: min(700px,95vw); cursor: crosshair; overflow: hidden; }
#focusImg { width: 100%; max-height: 65vh; object-fit: contain; display: block; }
.focus-dot { position: absolute; width: 14px; height: 14px; background: rgba(255,200,0,.95); border: 2px solid white; border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; box-shadow: 0 0 0 3px rgba(255,200,0,.3), 0 0 12px rgba(255,200,0,.5); transition: left .2s, top .2s; }
#focusCoords { font-family: 'Space Mono', monospace; font-size: .55rem; color: var(--g3); letter-spacing: .15em; text-transform: uppercase; }
.focus-presets { display: flex; gap: .5rem; flex-wrap: wrap; }
.focus-preset-btn { font-family: 'Space Mono', monospace; font-size: .48rem; letter-spacing: .12em; text-transform: uppercase; background: #181818; border: 1px solid #2a2a2a; color: var(--g3); padding: .4rem .7rem; cursor: pointer; transition: all .3s; }
.focus-preset-btn:hover { color: var(--white); border-color: var(--g3); }

/* ── VIDEO ADD FORM ────────────────────────────────────────── */
.vaf { background: #181818; border: 1px solid #2a2a2a; padding: 1.2rem; margin-bottom: 1.5rem; }
.vaf h3 { font-family: 'Space Mono', monospace; font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g4); margin-bottom: 1rem; }
.vaf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.vaf-grp { display: flex; flex-direction: column; gap: .35rem; }
.vaf-grp label { font-family: 'Space Mono', monospace; font-size: .48rem; letter-spacing: .18em; text-transform: uppercase; color: var(--g3); }
.vaf-grp input { background: #111; border: none; border-bottom: 1px solid #2a2a2a; color: var(--white); font-family: 'Cormorant Garamond', serif; font-size: .9rem; padding: .45rem 0; outline: none; transition: border-color .3s; }
.vaf-grp input:focus { border-bottom-color: var(--white); }
.vaf-grp input::placeholder { color: var(--g3); font-style: italic; }
.vaf-full { grid-column: 1/-1; }

/* ── SETTINGS ──────────────────────────────────────────────── */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.srow { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 0; border-bottom: 1px solid #2a2a2a; }
.srow.full { grid-column: 1/-1; }
.srow label { font-family: 'Space Mono', monospace; font-size: .52rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g4); }
.srow .srow-desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: .85rem; color: var(--g3); margin-bottom: .2rem; }
.srow input, .srow textarea, .srow select {
  width: 100%; background: #111; border: none; border-bottom: 1px solid #2a2a2a;
  color: var(--white); font-family: 'Space Mono', monospace; font-size: .68rem;
  padding: .5rem 0; outline: none; transition: border-color .3s; letter-spacing: .07em; appearance: none;
}
.srow input:focus, .srow textarea:focus, .srow select:focus { border-bottom-color: var(--white); }
.srow textarea { font-family: 'Cormorant Garamond', serif; font-size: .9rem; resize: none; height: 80px; line-height: 1.5; letter-spacing: 0; }
.srow select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%23888' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .4rem center; padding-right: 1.8rem; }
.srow select option { background: #181818; }
.srow-check { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; cursor: pointer; }
.srow-check input[type="checkbox"] { accent-color: var(--white); width: 14px; height: 14px; cursor: pointer; }
.srow-check span { font-family: 'Space Mono', monospace; font-size: .55rem; letter-spacing: .15em; color: var(--g4); text-transform: uppercase; }
.settings-section-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: .1em; color: var(--g4); margin: 1.5rem 0 .5rem; grid-column: 1/-1; border-top: 1px solid #2a2a2a; padding-top: 1.2rem; }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .adm-sidebar { width: 160px; }
  .vaf-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-section-title { grid-column: 1; }
  .srow.full { grid-column: 1; }
}
@media (max-width: 600px) {
  .adm-body { flex-direction: column; }
  .adm-sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: .5rem .25rem; border-right: none; border-bottom: 1px solid #2a2a2a; flex-shrink: 0; }
  .si { padding: .55rem .9rem; border-left: none; border-bottom: 2px solid transparent; }
  .si.active { border-left-color: transparent; border-bottom-color: var(--white); }
  .si-div, .si-lbl { display: none; }
  .adm-content { padding: .9rem; }
  .adm-grid { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }
}

/* ── RESPONSIVE (PUBLIC) ───────────────────────────────────── */
@media (max-width: 900px) {
  header { padding: 1.1rem 1.5rem; }
  nav { display: none; }
  .hamburger { display: flex; }
  #hero { grid-template-columns: 1fr; }
  .hero-left { padding: 0 1.5rem 3.5rem; }
  #portfolio { padding: 6rem 1.5rem 3rem; }
  .photo-grid { columns: 2 !important; }
  .video-grid { grid-template-columns: repeat(2,1fr) !important; }
  #about { grid-template-columns: 1fr; padding: 5rem 1.5rem; gap: 3rem; }
  .about-portrait { aspect-ratio: 3/2; }
  #contact { grid-template-columns: 1fr; padding: 5rem 1.5rem; gap: 3rem; }
  .form-row { grid-template-columns: 1fr; }
  footer { padding: 1.5rem; flex-direction: column; gap: .75rem; }
}
@media (max-width: 600px) {
  .photo-grid { columns: 1 !important; }
  .video-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 400px) {
  .portfolio-header { flex-direction: column; align-items: flex-start; }
  .tab-bar { width: 100%; overflow-x: auto; }
}

/* ── BULK SELECT ───────────────────────────────────────────── */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  background: #181818;
  border: 1px solid #2a2a2a;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}

.bulk-select-all {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Space Mono', monospace;
  font-size: .52rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--g4);
  cursor: pointer;
}

.bulk-select-all input[type="checkbox"] {
  accent-color: var(--white);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.bulk-count {
  font-family: 'Space Mono', monospace;
  font-size: .5rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--g3);
  margin-left: auto;
}

.ami-top-row {
  display: flex;
  align-items: center;
  background: #141414;
  border-bottom: 1px solid #2a2a2a;
  padding: .25rem .6rem;
  gap: .5rem;
}

.ami-checkbox input[type="checkbox"] {
  accent-color: var(--white);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.cat-mgr {
  background: #181818;
  border: 1px solid #2a2a2a;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
}
.cat-mgr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .75rem;
  font-family: 'Space Mono', monospace;
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--g4);
}
.cat-add-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.cat-add-row input {
  background: #111;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  color: var(--white);
  font-family: 'Space Mono', monospace;
  font-size: .6rem;
  padding: .4rem .5rem;
  outline: none;
  transition: border-color .3s;
  width: 140px;
}
.cat-add-row input:focus { border-bottom-color: var(--white); }
.cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.cat-tag {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: var(--g2);
  border: 1px solid #3a3a3a;
  padding: .3rem .7rem;
  font-family: 'Space Mono', monospace;
  font-size: .5rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g4);
}
.cat-tag button {
  background: none;
  border: none;
  color: var(--g3);
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  transition: color .3s;
}
.cat-tag button:hover { color: var(--red); }

/* ── BULK ACTIONS ──────────────────────────────────────────── */
.bulk-top-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

.bulk-actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  width: 100%;
  padding-top: .75rem;
  border-top: 1px solid #2a2a2a;
  margin-top: .5rem;
}

.bulk-action-group {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.bulk-action-label {
  font-family: 'Space Mono', monospace;
  font-size: .48rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g3);
  white-space: nowrap;
}

.bulk-input {
  background: #111;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  color: var(--white);
  font-family: 'Space Mono', monospace;
  font-size: .58rem;
  padding: .4rem .5rem;
  outline: none;
  transition: border-color .3s;
  width: 130px;
  appearance: none;
}

.bulk-input-sm {
  width: 60px;
}

.bulk-input:focus { border-bottom-color: var(--white); }