/* ============================================================
   additionalStyle.css
   Extra styles for the admin panel ONLY (sidebar drawer, active
   section state, mobile toggle bar). Loaded AFTER style.css.

   Every class/id below is namespaced with "kirat-adm2026-" /
   "kiratAdm2026" so it cannot collide with anything in the main
   2107-line style.css. Do not reuse this prefix elsewhere.
   ============================================================ */

/* ---------- Mobile top bar (hidden on desktop) ---------- */
.kirat-adm2026-mobilebar{
  display:none;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--accent-dark, #181933);
  color:#fff;
  border:none;
  border-radius:var(--radius-lg, 14px);
  padding:14px 16px;
  margin-bottom:12px;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  box-shadow:var(--shadow-sm, 0 1px 3px rgba(21,22,31,.06));
  -webkit-tap-highlight-color:transparent;
}
.kirat-adm2026-mobilebar-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.kirat-adm2026-mobilebar-icon{ font-size:18px; line-height:1 }
.kirat-adm2026-mobilebar-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.kirat-adm2026-mobilebar-chevron{
  opacity:.7;
  font-size:20px;
  transform:rotate(90deg);
  transition:transform .2s ease;
}
.kirat-adm2026-mobilebar[aria-expanded="true"] .kirat-adm2026-mobilebar-chevron{
  transform:rotate(-90deg);
}

/* ---------- Backdrop for the mobile drawer ---------- */
.kirat-adm2026-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,16,31,.5);
  opacity:0;
  pointer-events:none;
  z-index:60;
  transition:opacity .25s ease;
}
.kirat-adm2026-backdrop-open{
  opacity:1;
  pointer-events:auto;
}
body.kirat-adm2026-noscroll{ overflow:hidden }

/* ---------- Sidebar drawer head (mobile only) ---------- */
.kirat-adm2026-sidebar-head{
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:6px 20px 16px;
  margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.kirat-adm2026-sidebar-title{
  color:#fff;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
}
.kirat-adm2026-sidebar-close{
  background:transparent;
  border:none;
  color:#a9adcf;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:6px;
}
.kirat-adm2026-sidebar-close:hover{ color:#fff }

/* ---------- Nav links (desktop base: works alongside the
   existing .admin-nav a rules, just adds active/badge states) ---------- */
.kirat-adm2026-navlink{
  display:flex !important;
  align-items:center;
  gap:12px;
  position:relative;
}
.kirat-adm2026-navlink-icon{ font-size:16px; width:20px; text-align:center; flex-shrink:0 }
.kirat-adm2026-navlink-text{ flex:1; min-width:0 }

.kirat-adm2026-navlink-badge{
  background:var(--danger, #dc4c3e);
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:1;
  padding:4px 7px;
  border-radius:999px;
  flex-shrink:0;
}

.kirat-adm2026-navlink-active{
  background:rgba(255,255,255,.1) !important;
  color:#fff !important;
  border-left-color:var(--gold, #e8952a) !important;
  font-weight:700;
}
.kirat-adm2026-navlink-active .kirat-adm2026-navlink-badge{
  background:var(--gold, #e8952a);
}

.kirat-adm2026-sidebar-divider{
  height:1px;
  background:rgba(255,255,255,.1);
  margin:10px 20px;
}
.kirat-adm2026-navlink-muted{ opacity:.75 }

/* ============================================================
   MOBILE (<= 768px): turn the sidebar into a slide-in drawer
   instead of the horizontal scroll strip, so every section is
   reachable with one tap and the current section is obvious.
   ============================================================ */
@media (max-width:768px){

  .kirat-adm2026-mobilebar{ display:flex }

  .kirat-adm2026-sidebar-head{ display:flex }

  .kirat-adm2026-sidebar{
    position:fixed !important;
    top:0;
    left:0;
    height:100vh !important;
    width:82vw;
    max-width:320px;
    display:flex !important;
    flex-direction:column;
    overflow-x:hidden !important;
    overflow-y:auto;
    padding:20px 0 24px !important;
    border-radius:0 !important;
    box-shadow:var(--shadow-md, 0 10px 28px rgba(21,22,31,.10));
    z-index:65;
    transform:translateX(-105%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  .kirat-adm2026-sidebar-open{
    transform:translateX(0);
  }

  .kirat-adm2026-sidebar .kirat-adm2026-navlink{
    white-space:normal;
    border-left:3px solid transparent;
    border-bottom:0 !important;
    padding:13px 20px !important;
    min-height:44px;
    box-sizing:border-box;
  }
  .kirat-adm2026-sidebar .kirat-adm2026-navlink:active{
    background:rgba(255,255,255,.08);
  }
}

/* Small phones: tighten the drawer width a touch */
@media (max-width:380px){
  .kirat-adm2026-sidebar{ width:88vw }
}

/* ============================================================
   Reason-capture modal (block / delete "why?" popup)
   ============================================================ */
.kirat-adm2026-reasonmodal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(460px, 92vw);
  background:var(--surface, #fff);
  border-radius:var(--radius-lg, 14px);
  box-shadow:var(--shadow-md, 0 10px 28px rgba(21,22,31,.10));
  padding:22px;
  z-index:70;
}
.kirat-adm2026-reasonmodal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}
.kirat-adm2026-reasonmodal-head h3{
  margin:0;
  font-family:var(--font-display, serif);
  font-size:19px;
}
.kirat-adm2026-reasonmodal-close{
  background:transparent;
  border:none;
  font-size:16px;
  line-height:1;
  color:var(--ink-faint, #8c8fa3);
  cursor:pointer;
  padding:4px;
}
.kirat-adm2026-reasonmodal-close:hover{ color:var(--ink, #15161f) }
.kirat-adm2026-reasonmodal-warning{
  display:block;
  margin-top:12px;
  background:#fdecea;
  border:1.5px solid #f1a9a0;
  color:#8a1f11;
  border-radius:var(--radius, 8px);
  padding:10px 12px;
  font-weight:600;
}
.kirat-adm2026-reasonmodal-warning[hidden]{ display:none }
.kirat-adm2026-reasonmodal-textarea{
  width:100%;
  min-height:100px;
  margin-top:12px;
  padding:11px 13px;
  border:1.5px solid var(--line-strong, #cdd1e3);
  border-radius:var(--radius, 8px);
  font-size:14px;
  font-family:inherit;
  resize:vertical;
  box-sizing:border-box;
}
.kirat-adm2026-reasonmodal-textarea:focus{
  outline:none;
  border-color:var(--accent, #4f46e5);
  box-shadow:0 0 0 3px var(--accent-soft, #ecebfc);
}
.kirat-adm2026-reasonmodal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}
@media (max-width:480px){
  .kirat-adm2026-reasonmodal{
    width:92vw;
    padding:18px;
  }
  .kirat-adm2026-reasonmodal-actions{
    flex-direction:column-reverse;
  }
  .kirat-adm2026-reasonmodal-actions button{
    width:100%;
  }
}

/* ============================================================
   Moderation page (admin/moderation.php): panel header actions
   ("Force delete all" buttons next to each panel title) and
   responsive table handling on small screens.
   ============================================================ */
.kirat-adm2026-modpanel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.kirat-adm2026-modpanel-head h3{
  margin:0;
}
.kirat-adm2026-modpanel-note{
  margin-top:6px;
}

.kirat-adm2026-modtable-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.kirat-adm2026-modtable-wrap table{
  min-width:560px;
}

@media (max-width:768px){
  .kirat-adm2026-modpanel-head{
    align-items:flex-start;
  }
}

@media (max-width:600px){
  .kirat-adm2026-modpanel-head{
    flex-direction:column;
    align-items:stretch;
  }
  .kirat-adm2026-modpanel-head form{
    width:100%;
  }
  .kirat-adm2026-modpanel-head form button{
    width:100%;
  }
}