/* =============================================================
   TTEC Admin — cPanel Color & Font Restyle
   ONLY changes fonts and colors. Zero layout/spacing changes.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ── Font & base text color ── */
body,
.menu-link,
.menu-inner,
.card,
.card-header,
.card-body,
table,
.dataTables_wrapper,
.btn,
.form-control,
.form-label,
.dropdown-item,
.navbar,
#layout-navbar {
  font-family: Roboto, Tahoma, Verdana, Geneva, sans-serif !important;
}

/* Remove rounded corners from all input fields */
.form-control,
.form-select,
.input-group .form-control,
.input-group-text,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
  border-radius: 0 !important;
}

/* Remove rounded corners from all buttons */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  border-radius: 0 !important;
}


/* ══════════════════════════════════════════════
   SIDEBAR — dark navy background
══════════════════════════════════════════════ */
#layout-menu {
  background-color: #1a1f2e !important;
  border-right-color: #2e3a4e !important;
}

.app-brand.demo {
  background-color: #111520 !important;
  border-bottom: 1px solid #2e3a4e !important;
}

/* Menu item links */
.menu-item > .menu-link {
  color: #c8d8ec !important;
}

.menu-item > .menu-link:hover {
  background-color: rgba(74,144,217,0.18) !important;
  color: #ffffff !important;
}

.menu-item.active > .menu-link,
.menu-item.open > .menu-link {
  background-color: rgba(74,144,217,0.22) !important;
  color: #ffffff !important;
}

/* Icons */
.menu-icon { color: #8ea0b8 !important; }
.menu-item.active > .menu-link .menu-icon,
.menu-item:hover  > .menu-link .menu-icon { color: #4a90d9 !important; }

/* Submenu background */
.menu-sub { background-color: rgba(0,0,0,0.2) !important; }

.menu-sub .menu-item > .menu-link {
  color: #8ea0b8 !important;
}
.menu-sub .menu-item > .menu-link:hover,
.menu-sub .menu-item.active > .menu-link {
  color: #ffffff !important;
  background-color: rgba(74,144,217,0.2) !important;
}

/* Spacing above the Add New button table */
.card > table {
  margin-top: 12px !important;
}

/* Space above first form field when card header is empty */
.card-header:empty + .card-body {
  padding-top: 20px !important;
}

.card-body .mb-6:first-child {
  margin-top: 10px !important;
}
/* ══════════════════════════════════════════════
   NAVBAR — blue gradient
══════════════════════════════════════════════ */
#layout-navbar {
  background: linear-gradient(180deg, #3a5a8c, #2a4570) !important;
  border-bottom: 2px solid #1e3358 !important;
}

#layout-navbar h5,
#layout-navbar .nav-item,
#layout-navbar .nav-item b,
#layout-navbar .navbar-nav .nav-link {
  color: #d8e8f8 !important;
}

/* ══════════════════════════════════════════════
   CARD HEADER — dark blue gradient
══════════════════════════════════════════════ */
.card-header,
h5.card-header,
.card-header h5,
.card-header h4,
.card-header h6,
.card-header small,
.card-header .text-body-secondary {
  background: linear-gradient(180deg, #3d5e8a, #2b4572) !important;
  color: #ffffff !important;
  border-bottom-color: #1e3358 !important;
}

/* ══════════════════════════════════════════════
   TABLE HEADERS — dark blue
══════════════════════════════════════════════ */
table.table thead th,
table.datatables-basic thead th {
  background: linear-gradient(180deg, #3a5a8c, #2a4570) !important;
  color: #ffffff !important;
  border-color: #1e3358 !important;
}

/* Alternating row stripe */
table.table tbody tr:nth-child(even),
table.datatables-basic tbody tr:nth-child(even) {
  background-color: #e8edf5 !important;
}

table.table tbody tr:hover,
table.datatables-basic tbody tr:hover {
  background-color: #cfe0f8 !important;
}

/* ══════════════════════════════════════════════
   BUTTONS — cPanel blue / red
══════════════════════════════════════════════ */
.btn-primary {
  background: linear-gradient(180deg, #4a8fd8, #2d6fb3) !important;
  border-color: #1e5090 !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #5aa0e0, #3a7fc0) !important;
  color: #ffffff !important;
}

.btn-danger {
  background: linear-gradient(180deg, #cc4444, #993333) !important;
  border-color: #771111 !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════
   DROPDOWN — light panel with blue hover
══════════════════════════════════════════════ */
.dropdown-item:hover,
.dropdown-item:focus {
  background: linear-gradient(180deg, #3a5a8c, #2a4570) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════
   LINKS
══════════════════════════════════════════════ */
a { color: #2060a0 !important; }
a:hover { color: #1a3a70 !important; }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.content-footer {
  background: linear-gradient(180deg, #3a5a8c, #2a4570) !important;
  color: #8ea8c8 !important;
  border-top-color: #1e3358 !important;
}

/* ══════════════════════════════════════════════
   DATATABLES PAGINATION active state
══════════════════════════════════════════════ */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(180deg, #3a5a8c, #2a4570) !important;
  color: #ffffff !important;
  border-color: #1e3358 !important;
}

/* Extra fixes */

h5.card-header {
  background: linear-gradient(180deg, #3d5e8a, #2b4572) !important;
  color: #ffffff !important;
  border-bottom-color: #1e3358 !important;
}

/* Fix: All Chapters dropdown inside the dark navbar */
#layout-navbar .form-select,
#layout-navbar select {
  background-color: #2a4570 !important;
  color: #d8e8f8 !important;
  border-color: #4a6a9a !important;
}

#layout-navbar .form-select option,
#layout-navbar select option {
  background-color: #1a2e50 !important;
  color: #d8e8f8 !important;
}

/* Remove border radius from navbar */
#layout-navbar {
  border-radius: 0 !important;
}

/* Menu toggle arrow white color */
.menu-toggle::after {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

.menu-item.active > .menu-link .menu-icon, .menu-item:hover > .menu-link .menu-icon {
    color: #ffffff !important;
}

/* Card - no shadow, simple border */
.card {
  box-shadow: none !important;
  border: 1px solid #4a8fd8 !important;
  border-radius: 0 !important;
}

/* Remove rounded corners from all alerts */
.alert,
.jconfirm .jconfirm-box,
.jconfirm .jconfirm-box * {
  border-radius: 0 !important;
}

.menu-vertical .menu-inner > .menu-item .menu-link {
    border-radius: 0 !important;
}

.card-header:first-child {
    border-radius: 0 !important;
}

/* ══════════════════════════════════════════════
   ADMIN LOGIN (and auth siblings) — elevation & polish
   Scoped so cPanel flat cards elsewhere stay unchanged.
══════════════════════════════════════════════ */
body.admin-login-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 120% 80% at 100% 0%, rgba(74, 143, 216, 0.18), transparent 50%),
    radial-gradient(ellipse 90% 70% at 0% 100%, rgba(232, 120, 48, 0.12), transparent 45%),
    linear-gradient(165deg, #e9eef5 0%, #dce4ee 50%, #d0dae8 100%);
  background-attachment: fixed;
}

body.admin-login-page .authentication-wrapper.authentication-basic {
  min-height: 100vh;
}

body.admin-login-page .authentication-inner {
  max-inline-size: 420px;
}

body.admin-login-page .authentication-inner .admin-login-card.card {
  padding: 0 !important;
}

body.admin-login-page .admin-login-card.card {
  position: relative;
  border: 1px solid rgba(42, 69, 112, 0.14) !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 2px rgba(30, 51, 88, 0.06),
    0 8px 24px rgba(30, 51, 88, 0.1),
    0 24px 48px -12px rgba(26, 47, 80, 0.14) !important;
  overflow: hidden;
}

body.admin-login-page .admin-login-card.card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: linear-gradient(90deg, #e87830 0%, #f0a050 40%, #4a8fd8 100%);
  border-radius: 14px 14px 0 0;
}

body.admin-login-page .admin-login-card .card-body {
  padding: 2.25rem 2rem 2rem !important;
}

body.admin-login-page .admin-login-logo-wrap img {
  max-height: 52px;
  width: auto;
}

body.admin-login-page .admin-login-heading {
  font-weight: 600 !important;
  color: #1a2744 !important;
  letter-spacing: -0.02em;
}

body.admin-login-page .admin-login-sub {
  color: #5a6b82 !important;
  font-size: 0.9375rem;
}

body.admin-login-page .form-control {
  border-radius: 8px !important;
  border-color: #c5d0e0 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.admin-login-page .form-control:focus {
  border-color: #4a8fd8 !important;
  box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.22) !important;
}

body.admin-login-page .input-group-merge .form-control {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
  border-start-start-radius: 8px !important;
  border-end-start-radius: 8px !important;
}

body.admin-login-page .input-group-merge .input-group-text {
  border-start-start-radius: 0 !important;
  border-end-start-radius: 0 !important;
  border-start-end-radius: 8px !important;
  border-end-end-radius: 8px !important;
  border-color: #c5d0e0 !important;
  background-color: #f4f6fa !important;
}

body.admin-login-page .btn-primary {
  border-radius: 8px !important;
  padding-block: 0.65rem !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(45, 111, 179, 0.28) !important;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

body.admin-login-page .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(45, 111, 179, 0.38) !important;
  transform: translateY(-1px);
}

body.admin-login-page .authentication-wrapper.authentication-basic .authentication-inner::before,
body.admin-login-page .authentication-wrapper.authentication-basic .authentication-inner::after {
  opacity: 0.45;
}