/* ==========================================================================
   XectiQ Admin — Base Stylesheet
   File: public/assets/css/admin.css
   Version: 3.6 Structured Edition

   Purpose
   -------
   This file provides the structural and fallback styling for the complete
   XectiQ administration interface. The optional admin-modern.css stylesheet
   loads after this file and may enhance visual scale, spacing and motion.

   Maintenance Rules
   -----------------
   1. Keep selectors class-specific; avoid broad selectors such as
      `.admin-brand > span` because they can style unrelated child elements.
   2. Preserve JavaScript hooks, data attributes and HTML class names.
   3. Keep responsive rules grouped at the end of this file.
   4. Prefer CSS variables for shared colors, borders and shadows.
   5. Do not place application/business logic in CSS.
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  --admin-ink: #14253d;
  --admin-muted: #6c7b8e;
  --admin-blue: #1a63e9;
  --admin-blue-dark: #1049b1;
  --admin-bg: #f3f6fa;
  --admin-line: #dce4ee;
  --admin-white: #fff;
  --admin-nav: #071a33;
  --shadow: 0 14px 42px rgba(11, 37, 72, 0.09);
}

/* ==========================================================================
   02. GLOBAL RESET & ACCESSIBILITY
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--admin-ink);
  background: var(--admin-bg);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(26, 99, 233, 0.3);
  outline-offset: 2px;
}

/* ==========================================================================
   03. APPLICATION SHELL
   ========================================================================== */
.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}

/* ==========================================================================
   04. SIDEBAR
   ========================================================================== */
.admin-sidebar {
  position: sticky;
  z-index: 50;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  background: linear-gradient(180deg, #071a33, #092746);
  color: #aebed1;
}

/* --------------------------------------------------------------------------
   Sidebar brand
   -------------------------------------------------------------------------- */
.admin-brand {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 9px 17px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-brand > .admin-brand-visual {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #337af0, #1a55c0);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: none;
}

.admin-brand strong,
.admin-brand small {
  display: block;
}

.admin-brand strong {
  color: #fff;
  font-size: 13px;
}

.admin-brand small {
  margin-top: 4px;
  color: #8095ad;
  font-size: 9px;
}

/* --------------------------------------------------------------------------
   Sidebar navigation
   -------------------------------------------------------------------------- */
.admin-sidebar nav {
  display: grid;
  gap: 3px;
  margin-top: 19px;
}

.admin-sidebar nav a,
.admin-sidebar-footer a {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border-radius: 10px;
  color: #aabbd0;
  font-size: 11px;
  font-weight: 650;
  transition: 0.18s ease;
}

.admin-sidebar nav a > span,
.admin-sidebar-footer a > span {
  width: 20px;
  color: #7f99b7;
  font-size: 15px;
  text-align: center;
}

.admin-sidebar nav a:hover,
.admin-sidebar nav a.active,
.admin-sidebar-footer a:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.admin-sidebar nav a.active {
  background: linear-gradient(
    135deg,
    rgba(44, 117, 233, 0.4),
    rgba(37, 104, 211, 0.22)
  );
  box-shadow: inset 3px 0 #4b8eff;
}

.admin-sidebar nav a.active > span {
  color: #75a9ff;
}

.admin-sidebar-footer {
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   05. MAIN AREA, TOPBAR & ACCOUNT
   ========================================================================== */
.admin-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.admin-topbar {
  position: sticky;
  z-index: 40;
  top: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  border-bottom: 1px solid rgba(220, 228, 238, 0.9);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.admin-topbar > button {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  background: #fff;
  color: var(--admin-ink);
}

.admin-topbar > div:nth-child(2) {
  flex: 1;
}

.admin-topbar > div:nth-child(2) span,
.admin-topbar > div:nth-child(2) strong {
  display: block;
}

.admin-topbar > div:nth-child(2) span {
  color: #8794a4;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.admin-topbar > div:nth-child(2) strong {
  margin-top: 3px;
  font-size: 13px;
}

.admin-account {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-account > .admin-account-avatar {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eaf2ff;
  color: var(--admin-blue);
  font-size: 12px;
  font-weight: 900;
}

.admin-account strong,
.admin-account small {
  display: block;
}

.admin-account strong {
  font-size: 10px;
}

.admin-account small {
  margin-top: 2px;
  color: #8a96a5;
  font-size: 8px;
}

.admin-content {
  width: min(1400px, 100%);
  flex: 1;
  padding: 30px;
}

.admin-footer {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 30px;
  border-top: 1px solid var(--admin-line);
  color: #8995a4;
  font-size: 8px;
}

/* ==========================================================================
   06. GLOBAL MESSAGES / ALERTS
   ========================================================================== */
.admin-alert {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 12px 15px;
  border: 1px solid;
  border-radius: 12px;
  font-size: 10px;
  line-height: 1.5;
}

.admin-alert button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
}

.admin-alert ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.admin-alert.success {
  border-color: #b9dfcd;
  background: #edf8f3;
  color: #176947;
}

.admin-alert.warning {
  border-color: #ecd891;
  background: #fff8e5;
  color: #7d5c00;
}

.admin-alert.error {
  border-color: #e9bec6;
  background: #fff1f3;
  color: #97384a;
}

/* ==========================================================================
   07. PAGE HEADINGS & BUTTONS
   ========================================================================== */
.admin-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.admin-page-heading > div:first-child > span {
  color: var(--admin-blue);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-page-heading h1 {
  margin: 5px 0 5px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.admin-page-heading p {
  margin: 0;
  color: var(--admin-muted);
  font-size: 10px;
}

.admin-page-heading > div:last-child {
  display: flex;
  gap: 8px;
}

.admin-back {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--admin-blue);
  font-size: 9px;
  font-weight: 750;
}

.admin-button {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.17s ease;
}

.admin-button:hover {
  transform: translateY(-1px);
}

.admin-button.primary {
  background: var(--admin-blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(26, 99, 233, 0.18);
}

.admin-button.primary:hover {
  background: var(--admin-blue-dark);
}

.admin-button.secondary {
  border-color: #cbd7e5;
  background: #fff;
  color: #29415e;
}

.admin-button.ghost {
  border-color: #dce5ef;
  background: #f5f8fc;
  color: #52657d;
}

.admin-button.danger {
  border-color: #e7c2c8;
  background: #fff3f4;
  color: #aa3c4d;
}

/* ==========================================================================
   08. DASHBOARD STATISTICS
   ========================================================================== */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 18px;
}

.admin-stat-grid article {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--admin-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(15, 43, 80, 0.035);
}

.admin-stat-grid article > span {
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #eaf2ff;
  color: #2366cf;
  font-size: 16px;
  font-weight: 900;
}

.admin-stat-grid small,
.admin-stat-grid strong {
  display: block;
}

.admin-stat-grid small {
  color: #7d8a9b;
  font-size: 8px;
}

.admin-stat-grid strong {
  margin-top: 4px;
  font-size: 25px;
  line-height: 1;
}

.admin-stat-grid .tone-green > span {
  background: #e7f7ef;
  color: #13815a;
}

.admin-stat-grid .tone-purple > span {
  background: #f0eaff;
  color: #7650cb;
}

.admin-stat-grid .tone-orange > span {
  background: #fff0e3;
  color: #c8651d;
}

.admin-stat-grid .tone-cyan > span {
  background: #e4f7f9;
  color: #0e8795;
}

.admin-stat-grid .tone-rose > span {
  background: #ffeaee;
  color: #c3445e;
}

/* ==========================================================================
   09. DASHBOARD PANELS, LISTS & QUICK ACTIONS
   ========================================================================== */
.admin-dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}

.admin-panel,
.admin-table-card,
.admin-form-card,
.admin-edit-card,
.admin-empty-card {
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(14, 40, 76, 0.045);
}

.admin-panel {
  padding: 19px;
}

.admin-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e9eef4;
}

.admin-panel header span,
.admin-form-card header span {
  color: var(--admin-blue);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-panel header h2,
.admin-form-card header h2 {
  margin: 4px 0 0;
  font-size: 14px;
}

.admin-panel header a {
  color: var(--admin-blue);
  font-size: 8px;
  font-weight: 750;
}

.admin-list article {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 9px 0;
  border-bottom: 1px solid #edf1f5;
}

.admin-list article:last-child {
  border-bottom: 0;
}

.admin-list article > div {
  min-width: 0;
  flex: 1;
}

.admin-list strong,
.admin-list small {
  display: block;
}

.admin-list strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-list small {
  margin-top: 4px;
  color: #8793a2;
  font-size: 7px;
}

.activity-mark {
  color: var(--admin-blue);
  font-size: 22px;
}

.admin-empty {
  padding: 25px 0;
  color: #8995a4;
  font-size: 9px;
  text-align: center;
}

.admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-top: 14px;
}

.admin-quick-actions a {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: #fff;
}

.admin-quick-actions a > span {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eaf2ff;
  color: var(--admin-blue);
}

.admin-quick-actions strong,
.admin-quick-actions small {
  display: block;
}

.admin-quick-actions strong {
  font-size: 9px;
}

.admin-quick-actions small {
  margin-top: 3px;
  color: #8794a4;
  font-size: 7px;
}

.admin-quick-actions b {
  color: var(--admin-blue);
}

/* ==========================================================================
   10. TABLES, SEARCH & ROW ACTIONS
   ========================================================================== */
.admin-table-card {
  overflow: hidden;
}

.admin-table-toolbar {
  min-height: 61px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 16px;
  border-bottom: 1px solid #e4eaf1;
}

.admin-table-toolbar > label {
  width: min(330px, 100%);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid #d5dee9;
  border-radius: 9px;
}

.admin-table-toolbar label span {
  color: #8794a4;
}

.admin-table-toolbar input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 9px;
}

.admin-table-toolbar > span {
  color: #8995a4;
  font-size: 8px;
}

.admin-table-scroll {
  overflow-x: auto;
}

.admin-table-scroll table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
}

.admin-table-scroll th {
  padding: 11px 15px;
  background: #f7f9fc;
  color: #7b899a;
  font-size: 7px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.admin-table-scroll td {
  padding: 12px 15px;
  border-top: 1px solid #edf1f5;
  color: #52647a;
  font-size: 9px;
  vertical-align: middle;
}

.admin-table-scroll td strong,
.admin-table-scroll td small {
  display: block;
}

.admin-table-scroll td strong {
  color: var(--admin-ink);
  font-size: 9px;
}

.admin-table-scroll td small {
  max-width: 290px;
  margin-top: 3px;
  overflow: hidden;
  color: #8894a4;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table-scroll th.actions,
.admin-table-scroll td.actions {
  text-align: right;
}

.admin-table-scroll td.actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.admin-table-scroll td.actions form {
  margin: 0;
}

.admin-service-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-service-cell img {
  width: 55px;
  height: 36px;
  object-fit: cover;
  border-radius: 8px;
  background: #eef3f8;
}

.icon-button {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #fff;
  color: #36516f;
  cursor: pointer;
}

.icon-button.danger {
  border-color: #efcbd1;
  color: #ac3e50;
  background: #fff6f7;
}

.admin-table-empty {
  padding: 40px;
  color: #8995a4;
  font-size: 10px;
  text-align: center;
}

/* ==========================================================================
   11. STATUS / SEVERITY BADGES
   ========================================================================== */
.admin-status,
.severity,
.request-status {
  display: inline-flex;
  width: max-content;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 850;
  text-transform: capitalize;
}

.admin-status.published,
.admin-status.active {
  background: #e7f7ef;
  color: #14734f;
}

.admin-status.draft {
  background: #fff3dc;
  color: #936200;
}

.admin-status.archived,
.admin-status.hidden {
  background: #eef1f5;
  color: #637083;
}

.severity.low {
  background: #e9f5ff;
  color: #2869aa;
}

.severity.medium {
  background: #fff3d9;
  color: #946400;
}

.severity.high {
  background: #ffe9de;
  color: #b04d1d;
}

.severity.critical {
  background: #ffe3e7;
  color: #b42f45;
}

.request-status.new {
  background: #fff3d9;
  color: #916100;
}

.request-status.reviewing {
  background: #e9f2ff;
  color: #245faa;
}

.request-status.planned {
  background: #f2ebff;
  color: #7047bc;
}

.request-status.added {
  background: #e7f7ef;
  color: #13734f;
}

.request-status.closed {
  background: #eef1f5;
  color: #657181;
}

/* ==========================================================================
   12. FORMS, MEDIA & UPLOADS
   ========================================================================== */
.admin-form-card {
  overflow: hidden;
}

.admin-form-card > section {
  padding: 24px;
}

.admin-form-card > section + section {
  border-top: 1px solid #e5ebf2;
}

.admin-form-card header {
  margin-bottom: 18px;
}

.admin-form-card > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid #e1e8f0;
  background: #f8fafc;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.admin-form-grid.single {
  grid-template-columns: 1fr;
}

.admin-form-grid .wide {
  grid-column: 1 / -1;
}

.admin-form-grid label,
.admin-media-grid label {
  display: block;
}

.admin-form-grid label > span,
.admin-media-grid label > span,
.admin-form-card label > span {
  display: block;
  margin-bottom: 6px;
  color: #52647a;
  font-size: 8px;
  font-weight: 750;
}

.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea,
.admin-media-grid input,
.admin-media-grid select,
.admin-form-card input,
.admin-form-card select,
.admin-form-card textarea {
  width: 100%;
  border: 1px solid #d3dde9;
  border-radius: 9px;
  background: #fff;
  color: var(--admin-ink);
  font-size: 9px;
  transition: 0.15s ease;
}

.admin-form-grid input,
.admin-form-grid select,
.admin-media-grid input,
.admin-form-card input,
.admin-form-card select {
  height: 40px;
  padding: 0 10px;
}

.admin-form-grid textarea,
.admin-form-card textarea {
  padding: 10px;
  line-height: 1.55;
  resize: vertical;
}

.admin-form-grid input:focus,
.admin-form-grid select:focus,
.admin-form-grid textarea:focus,
.admin-form-card input:focus,
.admin-form-card textarea:focus {
  outline: 0;
  border-color: #82a9e1;
  box-shadow: 0 0 0 3px rgba(26, 99, 233, 0.09);
}

.admin-form-grid small,
.admin-media-grid small,
.admin-form-card label small {
  display: block;
  margin-top: 5px;
  color: #8b96a4;
  font-size: 7px;
  line-height: 1.45;
}

.checkbox-field {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.checkbox-field input {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto;
}

.checkbox-field span {
  margin: 0 !important;
}

.admin-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}

.admin-image-preview {
  min-height: 180px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed #b9cadd;
  border-radius: 13px;
  background: #f3f6fa;
  color: #8592a2;
  font-size: 9px;
}

.admin-image-preview img {
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: contain;
}

.admin-image-preview b {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--admin-blue);
  color: #fff;
  font-size: 24px;
}

.upload-drop {
  padding: 17px;
  border: 1px dashed #b8cadf;
  border-radius: 12px;
  background: #f7f9fc;
}

.upload-drop b {
  display: block;
  margin-top: 9px;
  color: #405674;
  font-size: 8px;
}

.narrow-form {
  max-width: 720px;
}

.color-field {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 7px;
}

.color-field input[type="color"] {
  padding: 3px;
}

.branding-grid {
  margin-top: 20px;
}

.setting-preview-title {
  display: block;
  margin-bottom: 7px;
  color: #66778c;
  font-size: 8px;
  font-weight: 800;
}

.logo-preview,
.favicon-preview {
  min-height: 140px;
  margin-bottom: 11px;
}

.favicon-preview img {
  max-width: 72px;
  max-height: 72px;
}

/* ==========================================================================
   13. SPLIT LAYOUTS & COLLAPSIBLE EDITORS
   ========================================================================== */
.admin-split {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
}

.sticky-form {
  position: sticky;
  top: 92px;
}

.admin-stack {
  display: grid;
  gap: 10px;
}

.admin-edit-card {
  overflow: hidden;
}

.admin-edit-card > summary {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
}

.admin-edit-card > summary::-webkit-details-marker {
  display: none;
}

.admin-edit-card summary > div {
  min-width: 0;
}

.admin-edit-card summary strong,
.admin-edit-card summary small {
  display: block;
}

.admin-edit-card summary strong {
  font-size: 10px;
}

.admin-edit-card summary small {
  margin-top: 4px;
  overflow: hidden;
  color: #8794a4;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-edit-card summary > b {
  color: #8391a2;
}

.admin-edit-card[open] summary {
  border-bottom: 1px solid #e4eaf1;
  background: #f8fafc;
}

.admin-edit-card > form:not(.delete-inline) {
  padding: 18px;
}

.category-dot,
.quick-admin-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #eaf2ff;
  color: var(--admin-blue);
  font-size: 8px;
  font-weight: 900;
}

.category-dot.tone-green {
  background: #e7f7ef;
  color: #137d57;
}

.category-dot.tone-purple {
  background: #f0eaff;
  color: #724ec3;
}

.category-dot.tone-orange {
  background: #fff0e3;
  color: #c7651f;
}

.category-dot.tone-cyan {
  background: #e4f7f9;
  color: #108693;
}

.category-dot.tone-rose {
  background: #ffeaee;
  color: #bf425a;
}

.inline-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.delete-inline {
  padding: 0 18px 18px;
  text-align: right;
}

.delete-inline button {
  border: 0;
  background: transparent;
  color: #ad3e50;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.admin-empty-card {
  padding: 44px 22px;
  text-align: center;
}

.admin-empty-card > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: auto;
  border-radius: 15px;
  background: #eaf2ff;
  color: var(--admin-blue);
  font-size: 20px;
}

.admin-empty-card h2 {
  margin: 14px 0 6px;
  font-size: 15px;
}

.admin-empty-card p {
  margin: 0;
  color: #7e8b9b;
  font-size: 9px;
}

/* ==========================================================================
   14. CONTENT CARDS & PROMOTIONS
   ========================================================================== */
.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.admin-content-card {
  overflow: hidden;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(15, 43, 80, 0.045);
}

.admin-content-card > img {
  width: 100%;
  height: 175px;
  display: block;
  object-fit: cover;
  background: #eef3f8;
}

.admin-content-card > div {
  padding: 17px;
}

.admin-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-content-card h2 {
  min-height: 42px;
  margin: 11px 0 7px;
  font-size: 14px;
  line-height: 1.4;
}

.admin-content-card p {
  min-height: 52px;
  margin: 0;
  color: #6d7d91;
  font-size: 8px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-content-card small {
  display: block;
  margin-top: 10px;
  color: #8995a4;
  font-size: 7px;
}

.admin-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid #e9eef4;
}

.admin-card-actions form {
  margin-left: auto;
}

/* ==========================================================================
   15. RICH CONTENT EDITOR
   ========================================================================== */
.rich-editor-wrap {
  overflow: hidden;
  border: 1px solid #d2dce8;
  border-radius: 12px;
}

.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px;
  border-bottom: 1px solid #dce4ed;
  background: #f5f8fc;
}

.rich-toolbar button {
  min-width: 34px;
  height: 31px;
  padding: 0 8px;
  border: 1px solid #d5dee9;
  border-radius: 7px;
  background: #fff;
  color: #405672;
  font-size: 8px;
  font-weight: 750;
  cursor: pointer;
}

.rich-toolbar button:hover {
  border-color: #98b6dc;
  color: var(--admin-blue);
}

.rich-editor {
  min-height: 380px;
  padding: 20px;
  outline: 0;
  background: #fff;
  color: #263c58;
  font-size: 11px;
  line-height: 1.75;
}

.rich-editor h2 {
  margin: 25px 0 8px;
  font-size: 19px;
}

.rich-editor p {
  margin: 10px 0;
}

.rich-editor a {
  color: var(--admin-blue);
  text-decoration: underline;
}

.promotion-edit summary > img {
  width: 76px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  background: #eef3f8;
}

/* ==========================================================================
   16. REQUEST MANAGEMENT
   ========================================================================== */
.request-admin-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.request-admin-summary a {
  padding: 15px;
  border: 1px solid var(--admin-line);
  border-radius: 13px;
  background: #fff;
}

.request-admin-summary span,
.request-admin-summary strong {
  display: block;
}

.request-admin-summary span {
  color: #7d8999;
  font-size: 8px;
}

.request-admin-summary strong {
  margin-top: 5px;
  font-size: 23px;
}

.request-filter select {
  height: 36px;
  border: 1px solid #d6e0eb;
  border-radius: 8px;
  background: #fff;
  font-size: 8px;
}

.request-update-form {
  min-width: 280px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 5px;
}

.request-update-form select,
.request-update-form input,
.request-update-form button {
  height: 31px;
  border: 1px solid #d6dfe9;
  border-radius: 7px;
  font-size: 7px;
}

.request-update-form input {
  min-width: 0;
  padding: 0 7px;
}

.request-update-form button {
  padding: 0 8px;
  background: var(--admin-blue);
  color: #fff;
  border-color: var(--admin-blue);
  font-weight: 800;
  cursor: pointer;
}

/* ==========================================================================
   17. PASSWORD CONTROLS
   ========================================================================== */
.password-field {
  display: flex;
}

.password-field input {
  border-radius: 9px 0 0 9px !important;
}

.password-field button {
  width: 60px;
  border: 1px solid #d3dde9;
  border-left: 0;
  border-radius: 0 9px 9px 0;
  background: #f4f7fb;
  color: #52647a;
  font-size: 8px;
  font-weight: 750;
  cursor: pointer;
}

/* ==========================================================================
   18. ADMIN LOGIN
   ========================================================================== */
.login-body {
  min-height: 100vh;
  background: linear-gradient(135deg, #f2f7ff, #e6f0ff);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 600px) minmax(0, 1fr);
}

.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(35px, 7vw, 90px);
  background: #fff;
  box-shadow: 18px 0 55px rgba(24, 60, 108, 0.08);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 52px;
}

.login-brand > span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--admin-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.login-brand strong,
.login-brand small {
  display: block;
}

.login-brand strong {
  font-size: 12px;
}

.login-brand small {
  margin-top: 3px;
  color: #8794a4;
  font-size: 8px;
}

.login-copy > span {
  color: var(--admin-blue);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.login-copy h1 {
  margin: 8px 0 10px;
  font-size: 37px;
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.login-copy p {
  margin: 0 0 25px;
  color: #697a8f;
  font-size: 10px;
  line-height: 1.7;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-form label > span {
  display: block;
  margin-bottom: 6px;
  color: #52647a;
  font-size: 8px;
  font-weight: 750;
}

.login-form input {
  width: 100%;
  height: 45px;
  padding: 0 12px;
  border: 1px solid #d2dce8;
  border-radius: 9px;
  outline: 0;
}

.login-form input:focus {
  border-color: #82a9df;
  box-shadow: 0 0 0 3px rgba(26, 99, 233, 0.1);
}

.login-form > button {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: var(--admin-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(26, 99, 233, 0.22);
}

.login-help {
  margin: 18px 0 0;
  color: #8491a1;
  font-size: 8px;
  line-height: 1.6;
}

.login-back {
  margin-top: 26px;
  color: var(--admin-blue);
  font-size: 9px;
  font-weight: 750;
}

.login-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 60px;
  background: linear-gradient(145deg, #071a33, #0d3a70);
  color: #fff;
}

.login-art::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border: 90px solid rgba(69, 137, 248, 0.09);
  border-radius: 50%;
  right: -220px;
  top: -200px;
}

.login-art > div {
  position: relative;
  max-width: 520px;
}

.login-art > div > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 23px;
}

.login-art h2 {
  margin: 25px 0 20px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.login-art ul {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
  color: #b8c9dc;
  font-size: 11px;
}

.login-art li::before {
  content: "✓";
  margin-right: 9px;
  color: #62d8bd;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .admin-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .admin-card-grid {
    grid-template-columns: 1fr 1fr;
  }
  .admin-quick-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 248px;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.25);
  }
  .admin-sidebar.open {
    transform: translateX(0);
  }
  .admin-topbar > button {
    display: block;
  }
  .admin-dashboard-grid,
  .admin-split {
    grid-template-columns: 1fr;
  }
  .sticky-form {
    position: static;
  }
  .login-shell {
    grid-template-columns: 1fr;
  }
  .login-art {
    display: none;
  }
  .login-panel {
    min-height: 100vh;
    max-width: 620px;
    width: 100%;
    margin: auto;
  }
  .admin-card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .admin-content {
    padding: 20px 14px;
  }
  .admin-topbar {
    padding: 0 14px;
  }
  .admin-account > div {
    display: none;
  }
  .admin-page-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-page-heading > div:last-child {
    width: 100%;
  }
  .admin-page-heading .admin-button {
    flex: 1;
  }
  .admin-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .admin-dashboard-grid,
  .admin-quick-actions,
  .admin-card-grid,
  .admin-form-grid,
  .admin-media-grid,
  .request-admin-summary {
    grid-template-columns: 1fr;
  }
  .admin-form-grid .wide {
    grid-column: auto;
  }
  .admin-form-card > section {
    padding: 19px 15px;
  }
  .admin-form-card > footer {
    padding: 14px 15px;
  }
  .admin-form-card > footer .admin-button {
    flex: 1;
  }
  .admin-table-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }
  .admin-table-toolbar > label {
    width: 100%;
  }
  .admin-edit-card > summary {
    grid-template-columns: auto 1fr auto;
  }
  .admin-edit-card summary > .admin-status {
    display: none;
  }
  .promotion-edit summary > img {
    width: 58px;
    height: 42px;
  }
  .request-update-form {
    min-width: 250px;
  }
  .admin-footer {
    padding: 0 14px;
  }
  .login-panel {
    padding: 28px 20px;
  }
  .login-brand {
    margin-bottom: 38px;
  }
  .login-copy h1 {
    font-size: 32px;
  }
}

/* ========================================================================== BRANDING + TOPBAR ACCOUNT — FINAL BASE SAFEGUARDS ========================================================================== */
/* Sidebar brand container */
.admin-sidebar .admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo wrapper: neutral, flat, and never applied to the text copy. */
.admin-sidebar .admin-brand > .admin-brand-visual {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

/* Uploaded logo */
.admin-sidebar .admin-brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: #ffffff;
  object-fit: contain;
  object-position: center;
  box-shadow: none;
}

/* XQ fallback */
.admin-sidebar .admin-brand-mark {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #2f7bf6, #1769e8);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  box-shadow: none;
}

/* Brand text: supports either <span> or <div> markup. */
.admin-sidebar .admin-brand > .admin-brand-copy {
  width: auto;
  height: auto;
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.admin-sidebar .admin-brand-copy strong {
  display: block;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: none;
}

.admin-sidebar .admin-brand-copy small {
  display: block;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #8fa5be;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: none;
}

/* Navigation icons must remain neutral and never inherit brand-box styling. */
.admin-sidebar nav a > span,
.admin-sidebar-footer a > span {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Active item keeps only the left accent, without floating shadow. */
.admin-sidebar nav a.active {
  box-shadow: inset 3px 0 0 #65a1ff;
}

/* Topbar account / logo */
.admin-account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.admin-account > .admin-account-avatar {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid #dbe7fa;
  border-radius: 12px;
  background: #eaf2ff;
  color: var(--admin-blue);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
}

.admin-account > .admin-account-avatar.has-logo {
  padding: 4px;
  border-color: #dce5f0;
  background: #ffffff;
}

.admin-account-logo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: #ffffff;
  object-fit: contain;
  object-position: center;
  box-shadow: none;
}

.admin-account-initial {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--admin-blue);
  font: inherit;
}

.admin-account-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Mobile */
@media (max-width: 640px) {
  .admin-account-copy {
    display: none;
  }
}