/* ============================================================
   NISAAB ADMIN — dashboard design system
   Shares brand tokens with the public site, restyled for a
   data-dense, professional back-office UI.
   ============================================================ */

:root{
  --bg:            #EEF0E7;
  --bg-alt:        #E3E7DA;
  --surface:       #FFFFFF;
  --surface-line:  #E1E5D9;
  --ink:           #16211B;
  --ink-soft:      #47524A;
  --muted:         #6C786C;
  --primary:       #0A4A40;
  --primary-dark:  #072D27;
  --primary-tint:  #E1ECE7;
  --gold:          #BC8A2E;
  --gold-light:    #F0D89C;
  --gold-dark:     #8A5F14;
  --coral:         #B04E36;
  --success:       #2E7D5B;
  --danger:        #B04E36;
  --warning:       #BC8A2E;
  --info:          #2C6E8E;
  --line:          #DCE1D3;
  --radius-sm:     6px;
  --radius:        10px;
  --radius-lg:     16px;
  --shadow-card:   0 1px 2px rgba(23,34,28,0.05), 0 10px 24px -14px rgba(23,34,28,0.22);
  --shadow-soft:   0 1px 2px rgba(23,34,28,0.05);
  --sidebar-w:     260px;
  --topbar-h:      68px;
  --font-display:  "Fraunces", "Georgia", serif;
  --font-body:     "IBM Plex Sans", -apple-system, Segoe UI, sans-serif;
  --font-mono:     "IBM Plex Mono", "Courier New", monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5{ font-family: var(--font-display); color: var(--primary-dark); font-weight: 600; margin: 0; }
.figure{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.admin-shell{ display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.admin-sidebar{
  width: var(--sidebar-w);
  background: var(--primary-dark);
  color: #DCE7E1;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: transform .25s ease;
}
.sidebar-brand{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.4rem 1.4rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand .brand-mark{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700;
  flex-shrink: 0;
}
.sidebar-brand .name{ font-family: var(--font-display); font-size: 1.15rem; color: #fff; }
.sidebar-brand .tag{ font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8FA79D; display:block; }

.sidebar-nav{ flex: 1; overflow-y: auto; padding: 1rem 0.8rem; }
.sidebar-section-label{
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #6E8A80; padding: 1rem 0.6rem 0.4rem;
}
.sidebar-link{
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  color: #C9DAD2;
  font-size: 0.9rem; font-weight: 500;
  margin-bottom: 0.15rem;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.sidebar-link i{ font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-link:hover{ background: rgba(255,255,255,0.06); color: #fff; }
.sidebar-link.active{ background: rgba(188,138,46,0.16); color: var(--gold-light); }
.sidebar-link.active::before{
  content: "";
  position: absolute; left: -0.8rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
}
.sidebar-link .badge-count{
  margin-left: auto;
  background: var(--gold);
  color: var(--primary-dark);
  font-size: 0.68rem; font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.sidebar-footer{
  padding: 1rem 1.4rem 1.3rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-user{ display: flex; align-items: center; gap: 0.6rem; }
.sidebar-user .avatar{
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold-light); color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.sidebar-user .name{ font-size: 0.85rem; font-weight: 600; color: #fff; }
.sidebar-user .role{ font-size: 0.72rem; color: #8FA79D; }

/* ---------- Main column ---------- */
.admin-main{
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Topbar ---------- */
.admin-topbar{
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem;
  position: sticky;
  top: 0;
  z-index: 150;
  gap: 1rem;
}
.sidebar-toggle{
  display: none;
  border: none; background: transparent;
  font-size: 1.3rem; color: var(--ink);
}
.topbar-search{
  position: relative;
  flex: 1;
  max-width: 380px;
}
.topbar-search input{
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  border-radius: 999px;
  padding: 0.55rem 1rem 0.55rem 2.4rem;
  font-size: 0.88rem;
  font-family: var(--font-body);
}
.topbar-search input:focus{ outline: none; border-color: var(--primary); background: #fff; }
.topbar-search i{
  position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 0.9rem;
}
.topbar-actions{ display: flex; align-items: center; gap: 1rem; }
.topbar-icon-btn{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.topbar-icon-btn:hover{ background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.topbar-icon-btn .dot{
  position: absolute; top: 4px; right: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral); border: 2px solid var(--surface);
}
.topbar-user{ display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.topbar-user .avatar{
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary); color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
}
.topbar-user .name{ font-size: 0.85rem; font-weight: 600; }
.topbar-user .role{ font-size: 0.72rem; color: var(--muted); }

/* ---------- Page content ---------- */
.admin-content{ padding: 1.8rem 1.8rem 3rem; }
.page-title-row{
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  margin-bottom: 1.6rem;
}
.page-title-row h1{ font-size: 1.55rem; }
.page-title-row .sub{ color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
.breadcrumb-nisaab{
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin-bottom: 0.3rem;
}
.breadcrumb-nisaab a{ color: var(--primary); }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--font-body); font-weight: 600; font-size: 0.88rem;
  border-radius: var(--radius-sm); padding: 0.6rem 1.2rem;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-pine{ background: var(--primary); color: #fff; }
.btn-pine:hover{ background: var(--primary-dark); color: #fff; }
.btn-brass{ background: var(--gold); color: var(--primary-dark); }
.btn-brass:hover{ background: var(--gold-dark); color: #fff; }
.btn-outline-pine{ background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline-pine:hover{ background: var(--primary); color: #fff; }
.btn-ghost{ background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover{ background: var(--bg-alt); }
.btn-danger-soft{ background: rgba(176,78,54,0.1); color: var(--danger); }
.btn-danger-soft:hover{ background: var(--danger); color: #fff; }
.btn-sm{ padding: 0.4rem 0.85rem; font-size: 0.8rem; }
.btn-icon{ width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: var(--radius-sm); }

/* ---------- Stat cards ---------- */
.stat-card{
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 1.4rem;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.stat-card .stat-icon{
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; margin-bottom: 0.9rem;
}
.stat-card .stat-value{ font-family: var(--font-mono); font-size: 1.65rem; font-weight: 700; color: var(--primary-dark); }
.stat-card .stat-label{ color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; }
.stat-card .stat-delta{ font-size: 0.78rem; font-weight: 600; margin-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.stat-delta.up{ color: var(--success); }
.stat-delta.down{ color: var(--danger); }
.stat-card .stat-spark{ position: absolute; right: 0; bottom: 0; opacity: 0.5; }

/* ---------- Cards / panels ---------- */
.panel{
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.panel-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--line);
  gap: 1rem; flex-wrap: wrap;
}
.panel-header h3{ font-size: 1.02rem; }
.panel-body{ padding: 1.4rem; }
.panel-body.no-pad{ padding: 0; }

/* ---------- Tabs ---------- */
.admin-tabs{
  display: inline-flex; gap: 0.3rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px; padding: 0.3rem;
  flex-wrap: wrap;
}
.admin-tab{
  border: none; background: transparent;
  font-weight: 600; font-size: 0.85rem; color: var(--ink-soft);
  padding: 0.5rem 1.1rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: background .18s ease, color .18s ease;
}
.admin-tab.active{ background: var(--primary); color: #fff; }
.admin-tab:not(.active):hover{ color: var(--primary-dark); }

/* ---------- Data table ---------- */
.table-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.8rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.table-search{ position: relative; width: 260px; max-width: 100%; }
.table-search input{
  width: 100%; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.5rem 0.9rem 0.5rem 2.2rem; font-size: 0.85rem; background: var(--bg-alt);
}
.table-search i{ position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.85rem; }
.table-filters{ display: flex; gap: 0.6rem; flex-wrap: wrap; }
.table-filters select{
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.45rem 0.7rem; font-size: 0.82rem; background: var(--surface); color: var(--ink-soft);
}

table.admin-table{ width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.admin-table thead th{
  text-align: left; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); padding: 0.8rem 1.4rem; border-bottom: 1px solid var(--line);
  background: var(--bg-alt); white-space: nowrap;
}
.admin-table tbody td{ padding: 0.85rem 1.4rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tbody tr{ transition: background .12s ease; }
.admin-table tbody tr:hover{ background: var(--primary-tint); }
.admin-table tbody tr:last-child td{ border-bottom: none; }
.row-title{ font-weight: 600; color: var(--ink); }
.row-sub{ color: var(--muted); font-size: 0.78rem; }
.row-thumb{
  width: 42px; height: 42px; border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--gold-light); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.05rem; flex-shrink: 0;
}
.table-actions{ display: flex; gap: 0.4rem; justify-content: flex-end; }

.status-pill{
  font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 0.3rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.status-pill.published{ background: rgba(46,125,91,0.12); color: var(--success); }
.status-pill.draft{ background: rgba(108,120,108,0.12); color: var(--muted); }
.status-pill.scheduled{ background: rgba(44,110,142,0.12); color: var(--info); }
.status-pill.active{ background: rgba(46,125,91,0.12); color: var(--success); }
.status-pill.inactive{ background: rgba(176,78,54,0.1); color: var(--danger); }

.table-pagination{
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; flex-wrap: wrap; gap: 0.8rem;
}
.pagination-info{ font-size: 0.82rem; color: var(--muted); }
.pagination-btns{ display: flex; gap: 0.35rem; }
.pagination-btns button{
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); font-size: 0.82rem; color: var(--ink-soft);
}
.pagination-btns button.active{ background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination-btns button:hover:not(.active){ background: var(--bg-alt); }

/* ---------- Forms ---------- */
.form-label-admin{ font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.35rem; display: block; }
.form-control-admin, .form-select-admin{
  width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem; font-family: var(--font-body); font-size: 0.9rem; background: var(--bg-alt);
}
.form-control-admin:focus, .form-select-admin:focus{
  outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px var(--primary-tint);
}
textarea.form-control-admin{ resize: vertical; min-height: 100px; }
.form-hint{ font-size: 0.76rem; color: var(--muted); margin-top: 0.3rem; }
.form-check-admin{ display: flex; align-items: center; gap: 0.5rem; }
.form-check-admin input{ width: 18px; height: 18px; accent-color: var(--primary); }

.upload-drop{
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  text-align: center;
  color: var(--muted);
  background: var(--bg-alt);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.upload-drop:hover{ border-color: var(--primary); background: var(--primary-tint); }
.upload-drop i{ font-size: 1.6rem; color: var(--gold-dark); }

/* ---------- Modal ---------- */
.modal-content-admin{
  border-radius: var(--radius-lg);
  border: none;
  overflow: hidden;
}
.modal-header-admin{
  background: var(--primary);
  color: #fff;
  padding: 1.1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header-admin h5{ color: #fff; font-size: 1.05rem; }
.modal-header-admin .btn-close{ filter: invert(1) grayscale(1) brightness(2); }

/* ---------- Toast ---------- */
.toast-nisaab{
  position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 2000;
  background: var(--primary-dark); color: #fff;
  padding: 0.9rem 1.3rem; border-radius: var(--radius);
  display: flex; align-items: center; gap: 0.7rem;
  box-shadow: var(--shadow-card);
  transform: translateY(120%); opacity: 0;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.toast-nisaab.show{ transform: translateY(0); opacity: 1; }
.toast-nisaab i{ color: var(--gold-light); font-size: 1.1rem; }

/* ---------- Chart wrap ---------- */
.chart-wrap{ position: relative; width: 100%; }
.chart-legend-dot{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 0.4rem; }

/* ---------- Empty state ---------- */
.empty-state{ text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.empty-state i{ font-size: 2.4rem; color: var(--line); margin-bottom: 0.8rem; display: block; }

/* ---------- Activity feed ---------- */
.activity-item{ display: flex; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px dashed var(--line); }
.activity-item:last-child{ border-bottom: none; }
.activity-icon{
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary-tint); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.activity-text{ font-size: 0.87rem; }
.activity-time{ font-size: 0.75rem; color: var(--muted); }

/* ---------- Settings side nav (within Settings page) ---------- */
.settings-nav{ display: flex; flex-direction: column; gap: 0.2rem; }
.settings-nav button{
  text-align: left; border: none; background: transparent;
  padding: 0.65rem 0.9rem; border-radius: var(--radius-sm);
  font-size: 0.87rem; font-weight: 600; color: var(--ink-soft);
  display: flex; align-items: center; gap: 0.6rem;
}
.settings-nav button.active{ background: var(--primary-tint); color: var(--primary); }
.settings-nav button:hover:not(.active){ background: var(--bg-alt); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-shell{
  min-height: 100vh;
  display: flex;
  background: var(--primary-dark);
}
.login-visual{
  flex: 1.1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem;
  color: #fff;
  overflow: hidden;
}
.login-visual::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(188,138,46,0.18), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,0.06), transparent 40%);
}
.login-visual .brand-row{ display: flex; align-items: center; gap: 0.8rem; margin-bottom: 3rem; position: relative; z-index: 1; }
.login-visual .brand-row .brand-mark{
  width: 44px; height: 44px; border-radius: 50%; background: var(--gold);
  color: var(--primary-dark); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem;
}
.login-visual .brand-row .name{ font-family: var(--font-display); font-size: 1.5rem; }
.login-visual h1{ color: #fff; font-size: 2.1rem; line-height: 1.15; max-width: 18ch; position: relative; z-index: 1; }
.login-visual p{ color: #B9CCC4; max-width: 40ch; margin-top: 1rem; position: relative; z-index: 1; }

.login-stair{ position: relative; z-index: 1; margin-top: 3rem; }
.login-stair svg .lstep{ fill: rgba(255,255,255,0.06); transition: fill 2s ease; }
.login-stair svg .lstep.lit{ fill: var(--gold); }

.login-panel{
  flex: 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}
.login-card{
  width: 100%;
  max-width: 400px;
  animation: loginRise .6s cubic-bezier(.22,1,.36,1);
}
@keyframes loginRise{
  from{ opacity: 0; transform: translateY(24px); }
  to{ opacity: 1; transform: translateY(0); }
}
.login-card h2{ font-size: 1.5rem; }
.login-card .sub{ color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; margin-bottom: 2rem; }
.login-input-group{ position: relative; margin-bottom: 1.1rem; }
.login-input-group i{ position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.login-input-group input{
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem 0.75rem 2.5rem; font-size: 0.92rem; background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input-group input:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.login-input-group .toggle-pass{ position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--muted); cursor: pointer; background: none; border: none; }
.login-remember{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; font-size: 0.85rem; }
.login-remember label{ display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); }
.login-remember a{ color: var(--primary); font-weight: 600; }
.login-error{
  background: rgba(176,78,54,0.1); color: var(--danger);
  border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; font-size: 0.85rem;
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.1rem;
}
.login-divider{ display: flex; align-items: center; gap: 0.8rem; margin: 1.6rem 0; color: var(--muted); font-size: 0.78rem; }
.login-divider::before, .login-divider::after{ content: ""; flex: 1; height: 1px; background: var(--line); }
.demo-hint{
  background: var(--primary-tint); border: 1px dashed var(--primary);
  border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; font-size: 0.8rem; color: var(--primary-dark); margin-top: 1.4rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px){
  .login-visual{ display: none; }
}

@media (max-width: 991.98px){
  .admin-sidebar{ transform: translateX(-100%); box-shadow: var(--shadow-card); }
  .admin-sidebar.open{ transform: translateX(0); }
  .admin-main{ margin-left: 0; }
  .sidebar-toggle{ display: flex; align-items: center; justify-content: center; }
  .sidebar-overlay{
    display: none;
    position: fixed; inset: 0; background: rgba(7,45,39,0.4); z-index: 190;
  }
  .sidebar-overlay.show{ display: block; }
}

@media (max-width: 767.98px){
  .admin-content{ padding: 1.2rem 1rem 2.5rem; }
  .topbar-search{ display: none; }
  .admin-topbar{ padding: 0 1rem; }
  .panel-body{ padding: 1.1rem; }
  .table-toolbar{ padding: 1rem; }
  .admin-table thead th, .admin-table tbody td{ padding: 0.7rem 0.9rem; }
  .stat-card{ padding: 1.1rem; }
}

@media (max-width: 575.98px){
  .login-card h2{ font-size: 1.3rem; }
  .page-title-row h1{ font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ---------- Fade-in for content areas ---------- */
@keyframes fadeUpAdmin{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}
.fade-in{ animation: fadeUpAdmin .45s cubic-bezier(.22,1,.36,1) both; }
.fade-in-1{ animation-delay: .05s; }
.fade-in-2{ animation-delay: .1s; }
.fade-in-3{ animation-delay: .15s; }
.fade-in-4{ animation-delay: .2s; }