/* ============================
   🌍 Global Theme Variables
   ============================ */
:root {
  /* Primary Theme Colors (based on logo) */
  --theme-color: #1b90f6;             /* main primary blue */
  --theme-color-hover: #1680d9;       /* darker blue for hover */
  --theme-color-active: #0f66b0;      /* pressed state */
  --theme-color-disabled: #99c9f9;    /* light bluish for disabled */

  /* Secondary Accent (cyan) */
  --theme-accent: #43d0f6;            /* secondary cyan */
  --theme-accent-hover: #26bde5;      /* darker cyan for hover */
  --theme-accent-active: #1a9fc4;     /* pressed state */

  /* Light Backgrounds */
  --theme-bg-light: #f5fbfe;          /* very light blue */
  --theme-bg-alt: #e9f7fd;            /* slightly darker background */

  /* Text & Links */
  --theme-text-link: #1b90f6;         /* link blue */
  --theme-text-link-hover: #1680d9;   /* darker on hover */
  --theme-text-link-active: #0f66b0;  /* pressed */

  /* Optional Gold/Highlight Accent if needed */
  --theme-highlight: #f4c542;         /* warm highlight (optional) */
}

/* ============================
   📌 Buttons
   ============================ */
.btn {
    border-radius: 12px !important;
}

/* Base button */
.theme-btn {
    background-color: var(--theme-color);
    border: 1px solid var(--theme-color);
    color: #fff;
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Hover & focus */
.theme-btn:hover,
.theme-btn:focus {
    background-color: var(--theme-color-hover);
    border-color: var(--theme-color-hover);
    color: #fff;
}

/* Active / pressed */
.theme-btn:active {
    background-color: var(--theme-color-active) !important;
    border-color: var(--theme-color-active) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Disabled */
.theme-btn:disabled,
.theme-btn.disabled {
    background-color: var(--theme-color-disabled);
    border-color: var(--theme-color-disabled);
    color: #fff;
    opacity: 0.65;
    cursor: not-allowed;
}

/* Outline Button */
.theme-btn-outline {
    background-color: transparent;
    border: 1px solid var(--theme-color);
    color: var(--theme-color);
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Hover & focus */
.theme-btn-outline:hover,
.theme-btn-outline:focus {
    background-color: var(--theme-color-hover);
    border-color: var(--theme-color-hover);
    color: #fff;
}

/* Active */
.theme-btn-outline.active,
.theme-btn-outline:active {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color-active) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Disabled */
.theme-btn-outline:disabled,
.theme-btn-outline.disabled {
    background-color: var(--theme-color-disabled);
    border-color: var(--theme-color-disabled);
    color: #fff;
    opacity: 0.65;
    cursor: not-allowed;
}

/* ============================
   📌 Links
   ============================ */
a.theme-text-link {
    color: var(--theme-text-link);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

a.theme-text-link:hover,
a.theme-text-link:focus {
    color: var(--theme-text-link-hover);
    text-decoration: underline;
}

a.theme-text-link:active {
    color: var(--theme-text-link-active);
}

a.theme-text-link:visited {
    color: var(--theme-text-link);
}

/* ============================
   📌 Form Inputs & Radios
   ============================ */
input,
select,
textarea {
    border-radius: 12px !important;
    box-shadow: none;
}

/* Focused form fields */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 3px rgba(27,144,246,0.25) !important;
    outline: none !important;
}

/* Custom radio buttons */
.form-check-input[type="radio"] {
    background-color: #fff;
    border: 2px solid var(--theme-color);
    cursor: pointer;
}

.form-check-input[type="radio"]:checked {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

/* Force size for primary styled radios */
.form-check-input.primary {
    accent-color: var(--theme-color) !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    cursor: pointer;
    border: 2px solid var(--theme-color) !important;
}

.form-check-input.primary:checked {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

/* ============================
   📌 Badges
   ============================ */
.badge {
    border-radius: 8px !important;
}

/* ============================
   📌 Sidebar
   ============================ */
.sidebar-item.selected > .sidebar-link,
.sidebar-item.selected > .sidebar-link.active,
.sidebar-item > .sidebar-link.active {
    background-color: var(--theme-color) !important;
    color: #fff !important;
    border-radius: 14px !important;
    height: 46px !important;
    transition: all 0.3s ease;
}

.sidebar-item.selected > .sidebar-link i,
.sidebar-item > .sidebar-link.active i {
    color: #fff !important;
    transition: color 0.3s ease;
}

.sidebar-item > .sidebar-link:hover {
    background-color: var(--theme-accent) !important;
    color: #fff !important;
    border-radius: 14px !important;
    height: 46px !important;
    transition: all 0.3s ease;
}

.sidebar-item > .sidebar-link:hover i {
    color: #fff !important;
}

/* ============================
   📌 Layout Helpers
   ============================ */
.theme-bg {
    background-color: var(--theme-color) !important;
}

.bg-header-info-subtle {
    background-color: #f5fbfe !important;
    border-radius: 20px !important;
}

.card {
    border-radius: 20px !important;
}

/* ============================
   📌 Alerts
   ============================ */
.alert {
    border-radius: 12px !important;
    padding: 12px 16px !important;
}

.alert-animate {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.alert-animate.hide {
    opacity: 0;
    transform: translateY(-20px);
}

/* ============================
   📌 Pagination
   ============================ */
.pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 20px 0 !important;
}

.pagination .page-item .page-link {
    display: inline-block !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    border: 1px solid var(--theme-color) !important;
    background: #fff !important;
    color: var(--theme-color) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    text-decoration: none !important;
}

/* Hover */
.pagination .page-item .page-link:hover {
    background-color: var(--theme-color) !important;
    color: #fff !important;
}

/* Active */
.pagination .page-item.active .page-link {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #fff !important;
    font-weight: bold !important;
}

/* Disabled */
.pagination .page-item.disabled .page-link {
    background-color: #f8f9fa !important;
    border-color: #ddd !important;
    color: #aaa !important;
    cursor: not-allowed !important;
}

/* Arrows */
.pagination .page-item .page-link[rel="prev"],
.pagination .page-item .page-link[rel="next"],
.pagination .page-item .page-link[aria-label] {
    color: var(--theme-color) !important;
}

.pagination .page-item .page-link[rel="prev"]:hover,
.pagination .page-item .page-link[rel="next"]:hover,
.pagination .page-item .page-link[aria-label]:hover {
    background-color: var(--theme-color) !important;
    color: #fff !important;
}

/* ============================
   📌 Nav Pills
   ============================ */
.nav-pills .nav-link {
    color: var(--theme-color) !important;
    background-color: var(--theme-bg-light) !important;
    border-radius: 8px;
    margin-right: 6px;
    transition: all 0.2s ease-in-out;
   border-radius: 12px !important;
}

.nav-pills .nav-link:hover {
    background-color: var(--theme-color) !important;
    color: #fff !important;
   border-radius: 12px !important;
}

.nav-pills .nav-link.active {
    background-color: var(--theme-color) !important;
    color: #fff !important;
    font-weight: 600;
   border-radius: 12px !important;
}

/* ============================
   📌 Nav Tabs
   ============================ */
.nav-tabs .nav-link {
  border: none;
  background: var(--theme-bg-light);
  color: var(--theme-color);
  padding: 10px 20px;
  border-radius: 12px !important;
  margin-bottom: 6px;
  margin-right: 6px;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);
  font-weight: 500;
}

/* Hover Effect */
.nav-tabs .nav-link:hover {
  background: var(--theme-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(27,144,246,0.3);
  transform: translateY(-1px);
}

/* Active Tab */
.nav-tabs .nav-link.active {
  background: var(--theme-color);
  color: #fff !important;
  font-weight: 600;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(27,144,246,0.4);
  transform: translateY(-1px);
}

/* Smooth transition */
.nav-tabs .nav-link,
.nav-tabs .nav-link.active {
  transition: all 0.25s ease-in-out;
}

/* ============================
   📌 Cards / Attendance
   ============================ */
.attendance-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
}
.attendance-card:hover {
    transform: translateY(-3px);
}
.gradient-btn {
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 30px;
    transition: 0.3s;
}
.gradient-btn-success {
    background: linear-gradient(45deg, #28a745, #58d68d);
}
.gradient-btn-success:hover {
    background: linear-gradient(45deg, #1e7e34, #28a745);
    transform: scale(1.05);
}
.gradient-btn-danger {
    background: linear-gradient(45deg, #dc3545, #f06273);
}
.gradient-btn-danger:hover {
    background: linear-gradient(45deg, #a71d2a, #dc3545);
    transform: scale(1.05);
}
.stat-badge {
    font-size: 1.2rem;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    background: linear-gradient(45deg, #17a2b8, #5bc0de);
    color: #fff;
    display: inline-block;
    box-shadow: 0 5px 15px rgba(23,162,184,0.3);
}