/* Extracted from head.php */
    .nav-item.is-active { background: rgba(250,204,21,0.10); color: #FACC15; }
    .nav-item.is-active .nav-icon { color: #FACC15; }
    .nav-item.is-active::before {
      content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
      width: 3px; background: #FACC15; border-radius: 0 3px 3px 0;
    }
    /* Tooltip for collapsed sidebar */
    .nav-tooltip {
      position: absolute; left: 100%; margin-left: 12px; top: 50%; transform: translateY(-50%);
      background: #2A0F1A; color: #FAFAF8; padding: 6px 10px; border-radius: 6px;
      font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none;
      transition: opacity 150ms ease; box-shadow: 0 4px 12px rgba(0,0,0,0.25); z-index: 50;
    }
    .nav-item:hover .nav-tooltip { opacity: 1; }
    /* Smooth width transition on sidebar */
    .sidebar-transition { transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1); }

/* =============================================================
   GLOBAL DataTables pagination — AWT design system
   Applies to all admin pages. Prevents default black-hover bug.
   ============================================================= */
.dt-paging .dt-paging-button,
.dt-paging button.dt-paging-button {
  color: #2A0F1A !important;
  border-radius: 8px !important;
  padding: 5px 11px !important;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid rgba(42,15,26,0.10) !important;
  background: #fff !important;
  margin: 0 2px;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease !important;
}
/* Active / current page */
.dt-paging .dt-paging-button.current,
.dt-paging button.dt-paging-button.current {
  background: #2A0F1A !important;
  color: #FACC15 !important;
  border-color: #2A0F1A !important;
}
/* Hover — regular buttons → teal */
.dt-paging .dt-paging-button:hover,
.dt-paging button.dt-paging-button:hover {
  background: #3D1A27 !important;
  color: #fff !important;
  border-color: #3D1A27 !important;
}
/* Hover on the ACTIVE/current page button — keep it styled, don't go black */
.dt-paging .dt-paging-button.current:hover,
.dt-paging button.dt-paging-button.current:hover {
  background: #2A0F1A !important;
  color: #FACC15 !important;
  border-color: #2A0F1A !important;
}
/* Disabled (prev/next at boundaries) */
.dt-paging .dt-paging-button.disabled,
.dt-paging .dt-paging-button.disabled:hover,
.dt-paging button.dt-paging-button.disabled,
.dt-paging button.dt-paging-button.disabled:hover {
  opacity: 0.38 !important;
  background: #fff !important;
  color: #2A0F1A !important;
  border-color: rgba(42,15,26,0.08) !important;
  cursor: default !important;
}

/* Extracted from audit-log.php */
/* DENSE log table */
  table.dataTable { border-collapse: separate !important; border-spacing: 0 !important; font-size: 12.5px !important; }
  table.dataTable thead th { border-bottom: 1px solid rgba(42,15,26,0.08) !important; padding: 9px 12px !important; font-size: 11px !important; }
  table.dataTable tbody td { border-top: 1px solid rgba(42,15,26,0.04) !important; padding: 8px 12px !important; vertical-align: middle; line-height: 1.4; }
  table.dataTable tbody tr:hover td { background: rgba(242,236,225,0.55) !important; }
  table.dataTable tbody tr.row-danger td { background: rgba(239,68,68,0.025) !important; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .dt-paging button.dt-paging-button { color: #2A0F1A !important; border-radius: 8px !important; padding: 6px 12px !important; font-weight: 600; font-size: 12px; border: 1px solid rgba(42,15,26,0.08) !important; background: #fff !important; margin: 0 2px; }
  .dt-paging button.dt-paging-button.current { background: #2A0F1A !important; color: #FACC15 !important; border-color: #2A0F1A !important; }
  .dt-paging button.dt-paging-button.disabled { opacity: 0.4; }
  .dt-search input { border: 1px solid rgba(42,15,26,0.10) !important; border-radius: 10px !important; padding: 8px 12px 8px 34px !important; font-size: 13px !important; background: #fff url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232A0F1A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.45%22><circle cx=%2211%22 cy=%2211%22 r=%228%22/><line x1=%2221%22 y1=%2221%22 x2=%2216.65%22 y2=%2216.65%22/></svg>') no-repeat 10px center; min-width: 240px; }
  .dt-search input:focus { outline: none !important; border-color: #5C2A3B !important; box-shadow: 0 0 0 3px rgba(92,42,59,0.15) !important; }
  .dt-length select { border: 1px solid rgba(42,15,26,0.10) !important; border-radius: 10px !important; padding: 8px 28px 8px 12px !important; font-size: 13px !important; background-color: #fff !important; }
  .dt-info { font-size: 12px; color: rgba(42,15,26,0.55); }

/* Extracted from cms-edit.php */
/* ===== Custom Quill toolbar — feels designed, not default ============== */
  .ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid rgba(42,15,26,0.08) !important;
    padding: 10px 12px !important;
    background: linear-gradient(180deg, #fff 0%, rgba(242,236,225,0.45) 100%);
    border-radius: 16px 16px 0 0 !important;
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  }
  .ql-toolbar.ql-snow + .ql-toolbar.ql-snow { display: none !important; }
  .ql-toolbar.ql-snow .ql-formats { margin-right: 6px !important; padding-right: 6px; border-right: 1px solid rgba(42,15,26,0.06); }
  .ql-toolbar.ql-snow .ql-formats:last-child { border-right: none; padding-right: 0; }
  .ql-toolbar.ql-snow button {
    width: 30px !important; height: 30px !important; border-radius: 8px !important;
    transition: background 120ms ease, color 120ms ease;
  }
  .ql-toolbar.ql-snow button:hover,
  .ql-toolbar.ql-snow button:focus,
  .ql-toolbar.ql-snow .ql-picker-label:hover {
    background: rgba(250,204,21,0.15) !important; color: #2A0F1A !important;
  }
  .ql-toolbar.ql-snow button.ql-active,
  .ql-toolbar.ql-snow .ql-picker-label.ql-active,
  .ql-toolbar.ql-snow .ql-picker-item.ql-selected {
    background: #2A0F1A !important; color: #FACC15 !important;
  }
  .ql-toolbar.ql-snow button.ql-active .ql-stroke,
  .ql-toolbar.ql-snow button:hover .ql-stroke { stroke: currentColor !important; }
  .ql-toolbar.ql-snow button.ql-active .ql-fill,
  .ql-toolbar.ql-snow button:hover .ql-fill { fill: currentColor !important; }
  .ql-toolbar.ql-snow .ql-picker-label {
    border-radius: 8px !important; padding: 4px 8px !important;
    color: #2A0F1A !important; font-weight: 600 !important;
  }
  .ql-container.ql-snow {
    border: none !important; font-family: 'Outfit', system-ui, sans-serif !important;
    font-size: 15px !important; min-height: 320px;
  }
  .ql-editor { padding: 22px 24px !important; line-height: 1.65 !important; color: #2A0F1A; }
  .ql-editor.ql-blank::before { color: rgba(42,15,26,0.35) !important; font-style: normal !important; left: 24px !important; }
  .ql-editor h1, .ql-editor h2, .ql-editor h3 { font-weight: 800; color: #2A0F1A; }
  .ql-editor a { color: #3D1A27; }

  /* ===== Custom Flatpickr ============================================== */
  .flatpickr-input { cursor: pointer; }
  .flatpickr-calendar { font-family: 'Outfit', sans-serif !important; box-shadow: 0 16px 40px rgba(42,15,26,0.18) !important; border-radius: 14px !important; }
  .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: #2A0F1A !important; border-color: #2A0F1A !important; color: #FACC15 !important; }
  .flatpickr-day.today { border-color: #FACC15 !important; }

  /* ===== Toggle switch ================================================= */
  .awt-toggle { position: relative; display: inline-flex; height: 24px; width: 44px; flex-shrink: 0; cursor: pointer; border-radius: 9999px; border: 2px solid transparent; transition: background 200ms ease; background: rgba(42,15,26,0.15); }
  .awt-toggle.is-on { background: #3D1A27; }
  .awt-toggle .knob { display: inline-block; height: 16px; width: 16px; transform: translateX(2px); border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 200ms ease; }
  .awt-toggle.is-on .knob { transform: translateX(22px); }

  /* ===== Custom select arrow =========================================== */
  .awt-select {
    appearance: none; -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232A0F1A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%226 9 12 15 18 9%22/></svg>');
    background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 36px !important;
  }

  /* Hide native scrollbar inside Quill on hover for cleanliness */
  .ql-editor::-webkit-scrollbar { width: 6px; }
  .ql-editor::-webkit-scrollbar-thumb { background: rgba(42,15,26,0.15); border-radius: 4px; }

  /* Reserve room above sticky mobile bar so content isn't hidden */
  @media (max-width: 1023px) {
    .has-sticky-bar { padding-bottom: 96px; }
  }

/* Colorshade Graphics Admin Dashboard */
/* Font: Inter */

/* ── Outfit local font-face ── */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; src: url('../vendor/fonts/Outfit-300.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; src: url('../vendor/fonts/Outfit-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; src: url('../vendor/fonts/Outfit-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; src: url('../vendor/fonts/Outfit-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; src: url('../vendor/fonts/Outfit-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; src: url('../vendor/fonts/Outfit-800.woff2') format('woff2'); font-display: swap; }

html, body { height: 100%; }
    body, .font-sans { font-family: 'Outfit', system-ui, sans-serif !important; -webkit-font-smoothing: antialiased; }

/* Extracted from cms-list.php */
  .dt-search input { border: 1px solid rgba(42,15,26,0.10) !important; border-radius: 10px !important; padding: 8px 12px 8px 34px !important; font-size: 13px !important; background: #fff url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232A0F1A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.45%22><circle cx=%2211%22 cy=%2211%22 r=%228%22/><line x1=%2221%22 y1=%2221%22 x2=%2216.65%22 y2=%2216.65%22/></svg>') no-repeat 10px center; min-width: 240px; }
  .dt-search input:focus { outline: none !important; border-color: #3D1A27 !important; box-shadow: 0 0 0 3px rgba(61,26,39,0.15) !important; }
  .dt-length select { border: 1px solid rgba(42,15,26,0.10) !important; border-radius: 10px !important; padding: 8px 28px 8px 12px !important; font-size: 13px !important; background-color: #fff !important; }
  .dt-info { font-size: 12px; color: rgba(42,15,26,0.55); }
  .dt-empty { display: none !important; } /* we use our own empty state */
  /* Drag handle visual */
  .drag-handle { cursor: grab; }
  .drag-handle:active { cursor: grabbing; }
  .sortable-ghost { opacity: 0.35; }
  .sortable-chosen { background: rgba(250,204,21,0.08) !important; }

/* Extracted from contacts.php */
table.dataTable { border-collapse: separate !important; border-spacing: 0 !important; }
  table.dataTable thead th { border-bottom: 1px solid rgba(42,15,26,0.08) !important; padding: 12px 14px !important; }
  table.dataTable tbody td { border-top: 1px solid rgba(42,15,26,0.05) !important; padding: 14px !important; vertical-align: middle; }
  table.dataTable tbody tr:hover td { background: rgba(242,236,225,0.55) !important; }
  table.dataTable thead th.sorting:after,
  table.dataTable thead th.sorting_asc:after,
  table.dataTable thead th.sorting_desc:after { color: rgba(42,15,26,0.35) !important; }
  .dt-paging button.dt-paging-button { color: #2A0F1A !important; border-radius: 8px !important; padding: 6px 12px !important; font-weight: 600; font-size: 12px; border: 1px solid rgba(42,15,26,0.08) !important; background: #fff !important; margin: 0 2px; }
  .dt-paging button.dt-paging-button.current { background: #2A0F1A !important; color: #FACC15 !important; border-color: #2A0F1A !important; }
  .dt-paging button.dt-paging-button.disabled { opacity: 0.4; }
  .dt-search input { border: 1px solid rgba(42,15,26,0.10) !important; border-radius: 10px !important; padding: 8px 12px 8px 34px !important; font-size: 13px !important; background: #fff url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232A0F1A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.45%22><circle cx=%2211%22 cy=%2211%22 r=%228%22/><line x1=%2221%22 y1=%2221%22 x2=%2216.65%22 y2=%2216.65%22/></svg>') no-repeat 10px center; min-width: 240px; }
  .dt-search input:focus { outline: none !important; border-color: #3D1A27 !important; box-shadow: 0 0 0 3px rgba(61,26,39,0.15) !important; }
  .dt-length select { border: 1px solid rgba(42,15,26,0.10) !important; border-radius: 10px !important; padding: 8px 28px 8px 12px !important; font-size: 13px !important; background-color: #fff !important; }
  .dt-info { font-size: 12px; color: rgba(42,15,26,0.55); }

/* Extracted from login.php */
.login-bg {
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(241,90,46,0.18), transparent 60%),
      radial-gradient(900px 500px at -10% 110%, rgba(55,178,74,0.15), transparent 60%),
      linear-gradient(180deg, #151313 0%, #231F20 100%);
  }
  .grid-pattern {
    background-image:
      linear-gradient(rgba(242,236,225,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(242,236,225,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
  }

/* Extracted from my-account.php */
/* Soft "secure card" gradient & inner glow */
  .secure-card {
    background:
      radial-gradient(900px 320px at 100% -40%, rgba(241,90,46,0.10), transparent 60%),
      radial-gradient(700px 320px at 0% 130%, rgba(55,178,74,0.10), transparent 60%),
      #ffffff;
  }
  .secure-stripe {
    background:
      linear-gradient(135deg, rgba(241,90,46,0.18) 0%, rgba(241,90,46,0) 35%, rgba(55,178,74,0) 65%, rgba(55,178,74,0.18) 100%),
      linear-gradient(180deg, #151313 0%, #231F20 100%);
  }
  .grid-pattern {
    background-image:
      linear-gradient(rgba(242,236,225,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(242,236,225,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .strength-seg { transition: background 200ms ease; }

/* Extracted from submissions.php */
/* DataTables — match AWT design language */
  table.dataTable { border-collapse: separate !important; border-spacing: 0 !important; }
  table.dataTable thead th { border-bottom: 1px solid rgba(42,15,26,0.08) !important; padding: 12px 14px !important; }
  table.dataTable tbody td { border-top: 1px solid rgba(42,15,26,0.05) !important; padding: 13px 14px !important; vertical-align: middle; }
  table.dataTable tbody tr:hover td { background: rgba(242,236,225,0.55) !important; }
  table.dataTable tbody tr.is-unread td { background: linear-gradient(90deg, rgba(250,204,21,0.06) 0%, rgba(250,204,21,0) 60%) !important; }
  table.dataTable tbody tr.is-unread td:first-child { box-shadow: inset 3px 0 0 #FACC15; }
  table.dataTable tbody tr { cursor: pointer; }
  .dt-paging button.dt-paging-button { color: #2A0F1A !important; border-radius: 8px !important; padding: 6px 12px !important; font-weight: 600; font-size: 12px; border: 1px solid rgba(42,15,26,0.08) !important; background: #fff !important; margin: 0 2px; }
  .dt-paging button.dt-paging-button.current { background: #2A0F1A !important; color: #FACC15 !important; border-color: #2A0F1A !important; }
  .dt-paging button.dt-paging-button.disabled { opacity: 0.4; }
  .dt-search input { border: 1px solid rgba(42,15,26,0.10) !important; border-radius: 10px !important; padding: 8px 12px 8px 34px !important; font-size: 13px !important; background: #fff url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232A0F1A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.45%22><circle cx=%2211%22 cy=%2211%22 r=%228%22/><line x1=%2221%22 y1=%2221%22 x2=%2216.65%22 y2=%2216.65%22/></svg>') no-repeat 10px center; min-width: 240px; }
  .dt-search input:focus { outline: none !important; border-color: #3D1A27 !important; box-shadow: 0 0 0 3px rgba(61,26,39,0.15) !important; }
  .dt-length select { border: 1px solid rgba(42,15,26,0.10) !important; border-radius: 10px !important; padding: 8px 28px 8px 12px !important; font-size: 13px !important; background-color: #fff !important; }
  .dt-info { font-size: 12px; color: rgba(42,15,26,0.55); }

  /* Custom select arrow (drawer status select) */
  .awt-select {
    appearance: none; -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232A0F1A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><polyline points=%226 9 12 15 18 9%22/></svg>');
    background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 36px !important;
  }

  /* Tabs */
  .sub-tab { position: relative; }
  .sub-tab.is-active { color: #F15A2E; }
  .sub-tab.is-active::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
    background: #F15A2E; border-radius: 2px;
  }

/* =============================================================
   Colorshade Graphics Rebranding Overrides
   ============================================================= */

/* Main layout overrides */
body.bg-awt-cream {
  background-color: #FAF8F5 !important; /* Premium light cream background */
}

/* Sidebar background color to Charcoal #231F20 */
aside {
  background-color: #231F20 !important;
}

/* Sidebar active states to Colorshade Orange #F15A2E */
.nav-item.is-active {
  background-color: rgba(241, 90, 46, 0.10) !important;
  color: #F15A2E !important;
}
.nav-item.is-active .nav-icon {
  color: #F15A2E !important;
}
.nav-item.is-active::before {
  background-color: #F15A2E !important;
}

/* Sidebar hover states */
.nav-item:hover {
  color: #F15A2E !important;
}
.nav-item:hover .nav-icon {
  color: #F15A2E !important;
}
.nav-tooltip {
  background: #231F20 !important;
}

/* Rebrand awt-teal classes to Colorshade Green #37B24A */
.bg-awt-teal {
  background-color: #37B24A !important;
}
.bg-awt-teal\/10 {
  background-color: rgba(55, 178, 74, 0.10) !important;
}
.text-awt-teal {
  color: #37B24A !important;
}
.border-awt-teal {
  border-color: #37B24A !important;
}
.focus\:border-awt-teal:focus {
  border-color: #37B24A !important;
}
.focus\:ring-awt-teal\/15:focus {
  --tw-ring-color: rgba(55, 178, 74, 0.15) !important;
}
.focus\:ring-awt-teal\/20:focus {
  --tw-ring-color: rgba(55, 178, 74, 0.20) !important;
}
.hover\:text-awt-teal:hover {
  color: #37B24A !important;
}
.hover\:bg-awt-teal\/10:hover {
  background-color: rgba(55, 178, 74, 0.10) !important;
}
.hover\:border-awt-teal:hover {
  border-color: #37B24A !important;
}
.hover\:bg-awt-teal\/5:hover {
  background-color: rgba(55, 178, 74, 0.05) !important;
}
.accent-awt-teal {
  accent-color: #37B24A !important;
}

/* Rebrand awt-amber classes to Colorshade Orange #F15A2E */
.bg-awt-amber {
  background-color: #F15A2E !important;
}
.bg-awt-amber\/10 {
  background-color: rgba(241, 90, 46, 0.10) !important;
}
.text-awt-amber {
  color: #F15A2E !important;
}
.border-awt-amber {
  border-color: #F15A2E !important;
}
.hover\:text-awt-amber:hover {
  color: #F15A2E !important;
}
.hover\:bg-awt-amber\/10:hover {
  background-color: rgba(241, 90, 46, 0.10) !important;
}
.hover\:border-awt-amber:hover {
  border-color: #F15A2E !important;
}
.accent-awt-amber {
  accent-color: #F15A2E !important;
}

/* Audit log prefix and badge overrides */
.action-badge-payment {
  background-color: rgba(241, 90, 46, 0.1) !important;
  color: #F15A2E !important;
}
.action-badge-gateway {
  background-color: rgba(55, 178, 74, 0.1) !important;
  color: #37B24A !important;
}
.action-badge-settings {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: #F59E0B !important;
}