/*
 * Admin Portal Theme - Aligned with Student Portal
 * Theme colors and variables are shared for consistency
 */
:root {
    /* Student Portal Theme Colors */
    --dark-primary-color: #000000;
    --primary-color: #13006a;
    --secondary-color: #8B0000;
    --third-color: #bf7955;
    --student-primary: #13006a;
    --student-primary-dark: #1a1050;
    --student-secondary: #8B0000;
    --student-accent: #bf7955;
    --student-success: #10b981;
    --student-warning: #f59e0b;
    --student-danger: #8B0000;
    --student-info: #13006a;
    --sidebar-width: 300px;
    --sidebar-collapsed-width: 70px;
    --header-height: 65px;
    --transition-speed: 0.3s;

    /* Legacy variables mapped to new theme */
    --purple: #2E1C7B;
    --yellow: #f59e0b;
    --deep-yellow: #bf7955;
    --red: #8B0000;
    --accent: #2E1C7B;
    --primary-fg: #fff;

    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-medium-color: #444;
    --body-loud-color: #000;

    --header-color: #ffffff;
    --header-branding-color: var(--primary-color);
    --header-bg: var(--primary-color);
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #c4dce8;
    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: var(--student-primary-dark);

    --link-fg: var(--primary-color);
    --link-hover-color: var(--student-primary-dark);
    --link-selected-fg: var(--primary-color);

    --hairline-color: #e8e8e8;
    --border-color: #ccc;

    --error-fg: var(--student-danger);

    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;

    --darkened-bg: #f8f8f8;
    --selected-bg: #e4e4e4;
    --selected-row: #ffc;

    --button-fg: #fff;
    --button-bg: var(--primary-color);
    --button-hover-bg: var(--student-primary-dark);
    --default-button-bg: var(--primary-color);
    --default-button-hover-bg: var(--student-primary-dark);
    --close-button-bg: #747474;
    --close-button-hover-bg: #333;
    --delete-button-bg: var(--student-danger);
    --delete-button-hover-bg: #6B0000;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--primary-color);
    --object-tools-hover-bg: var(--student-primary-dark);

    --bgColor-danger-emphasis: var(--student-danger);
    --bgColor-danger-muted: rgba(139, 0, 0, 0.1);
    --bgColor-default: var(--primary-color);
    --bgColor-disabled: #212830;
    --bgColor-done-emphasis: var(--student-success);
    --bgColor-done-muted: rgba(16, 185, 129, 0.15);
    --bgColor-emphasis: var(--student-primary-dark);
    --bgColor-muted: #f8f9fa;
    --bgColor-neutral-emphasis: #656c76;

    /* Gradients */
    --primary-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--student-primary-dark) 100%);
    --success-gradient: linear-gradient(135deg, var(--student-success) 0%, #059669 100%);
    --warning-gradient: linear-gradient(135deg, var(--student-warning) 0%, #d97706 100%);
    --danger-gradient: linear-gradient(135deg, var(--student-danger) 0%, #6B0000 100%);
    --info-gradient: linear-gradient(135deg, var(--student-info) 0%, var(--student-primary-dark) 100%);
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    --border-radius: 5px;

    --font-family-primary: "Inter", "Montserrat", sans-serif, "Segoe UI", "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: ui-monospace, Menlo, Monaco, "Cascadia Mono",
        "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
        "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New",
        monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";

    color-scheme: light;
}

/*
--- General Styles ---
*/

/* ============================================
   MODERN DATATABLE REDESIGN
   Clean styling matching teacher portal
   ============================================ */

/* TEMPORARILY DISABLED TO DEBUG TEXT COLOR ISSUE */
@media not all {

/* DataTable Container */
.dataTables_wrapper {
    padding: 0;
    font-family: var(--font-family-primary);
}

/* Table Base Styling */
.table.dataTable,
table.dataTable,
.dataTables_wrapper table.dataTable,
.card-body .table.dataTable {
    border-collapse: collapse !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    border-radius: 8px;
    overflow: visible;
}

/* Table Header - Clean Style */
.table.dataTable thead th,
table.dataTable thead th,
.dataTable thead th,
.dataTables_wrapper .table thead th,
.dataTables_wrapper table.dataTable thead th,
.card-body .table.dataTable thead th,
.table-bordered.dataTable thead th,
.table-bordered.dataTable thead td,
table.table-bordered.dataTable thead th,
.table thead th,
.card .table thead th,
.card-body table thead th {
    background: #f8f9fa !important;
    color: #333333 !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0.875rem 1rem !important;
    border: none !important;
    border-bottom: 2px solid #dee2e6 !important;
    white-space: nowrap;
    vertical-align: middle !important;
}

/* Force dark text color on all header elements */
.table.dataTable thead th *,
table.dataTable thead th *,
.dataTable thead th *,
.table thead th *,
.card .table thead th *,
.table.dataTable tbody tr *,
.table.dataTable tbody tr td *,
.table tbody tr {
    color: #333333 !important;
}

/* Remove AdminLTE/Bootstrap default borders */
.table.dataTable thead th,
.table-bordered.dataTable thead th,
.table-bordered.dataTable thead td,
.table thead th {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* First and Last Header Cell Border Radius */
.table.dataTable thead th:first-child,
table.dataTable thead th:first-child,
.dataTables_wrapper table thead th:first-child {
    border-radius: 8px 0 0 0 !important;
}

.table.dataTable thead th:last-child,
table.dataTable thead th:last-child,
.dataTables_wrapper table thead th:last-child {
    border-radius: 0 8px 0 0 !important;
}

/* Sorting Icons - Clean Style */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
.dataTables_wrapper table.dataTable thead .sorting,
.dataTables_wrapper table.dataTable thead .sorting_asc,
.dataTables_wrapper table.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 26px !important;
}

/* Sorting Icon Positioning */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    position: absolute !important;
    right: 10px !important;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    opacity: 0.4 !important;
    font-size: 0.625rem !important;
    color: #333 !important;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
    content: '\f0de' !important;
    top: 50% !important;
    transform: translateY(-80%) !important;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    content: '\f0dd' !important;
    top: 50% !important;
    transform: translateY(-20%) !important;
}

/* Active Sorting State */
table.dataTable thead .sorting_asc::before,
.dataTables_wrapper table.dataTable thead .sorting_asc::before {
    opacity: 1 !important;
    color: var(--primary-color) !important;
}

table.dataTable thead .sorting_asc::after {
    opacity: 0.3 !important;
}

table.dataTable thead .sorting_desc::after,
.dataTables_wrapper table.dataTable thead .sorting_desc::after {
    opacity: 1 !important;
    color: var(--primary-color) !important;
}

table.dataTable thead .sorting_desc::before {
    opacity: 0.3 !important;
}

/* Sorting Hover Effect */
table.dataTable thead .sorting:hover::before,
table.dataTable thead .sorting:hover::after {
    opacity: 0.8 !important;
}

/* Table Body - Preserve original styling */
.table.dataTable tbody td,
table.dataTable tbody td,
.dataTable tbody td {
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    color: #212529 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
    transition: all 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override Bootstrap 5 + DataTables CSS variable-based table color */
.table,
.dataTable {
    --bs-table-color: #212529;
    --bs-table-color-type: #212529;
    --bs-table-bg: #fff;
}

/* Neutralize DataTables v2 box-shadow overlay that can affect text rendering */
table.table.dataTable > :not(caption) > * > * {
    box-shadow: none !important;
    color: #212529 !important;
}

/* Regular table styling - keep original colors */
.table tbody td,
table tbody td {
    color: #212529 !important;
}

/* Striped Rows */
.table.dataTable tbody tr:nth-child(odd),
table.dataTable tbody tr:nth-child(odd) {
    background-color: #fff;
}

.table.dataTable tbody tr:nth-child(even),
table.dataTable tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Row Hover Effect */
.table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: rgba(var(--primary-color-rgb, 19, 0, 106), 0.05) !important;
}

.table.dataTable tbody tr:hover td,
table.dataTable tbody tr:hover td {
    color: #000 !important;
}

/* Selected Row */
.table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected {
    background-color: rgba(var(--primary-color-rgb, 19, 0, 106), 0.1) !important;
}

/* DataTable Top Controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 0;
    padding: 0 5px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 0.875rem;
    color: #596474;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    gap: 8px;
}

.dataTables_wrapper .dataTables_filter {
    text-align: right;
}

.dataTables_wrapper .dataTables_filter label {
    justify-content: flex-end;
}

/* Length Select Dropdown */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.375rem 2rem 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    color: #444 !important;
    background-color: #fff !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(19, 0, 106, 0.1) !important;
    outline: none;
}

/* Search Input */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(19, 0, 106, 0.1) !important;
    outline: none;
}

/* DataTable Export Buttons Container */
.dt-buttons,
.dataTables_wrapper .dt-buttons {
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0.5rem 0;
}

/* Base Button Styling - All DataTable Export Buttons */
.dt-buttons .dt-button,
.dt-buttons .btn,
.dataTables_wrapper .dt-buttons .btn,
.buttons-html5,
.buttons-print,
.buttons-copy,
.buttons-excel,
.buttons-csv,
.buttons-pdf,
.buttons-colvis {
    background: transparent !important;
    border: none !important;
    color: #334155 !important;
    border-radius: 6px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    cursor: pointer;
}

/* DataTable Info */
.dataTables_wrapper .dataTables_info {
    font-size: 0.875rem;
    color: #64748b;
    padding: 0.75rem 0;
    font-weight: 400;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate {
    padding: 0.75rem 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.375rem 0.75rem !important;
    margin: 0 2px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #334155 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #f8f9fa !important;
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    background: #f8f9fa !important;
    color: #adb5bd !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #f8f9fa !important;
    border-color: #e2e8f0 !important;
    color: #adb5bd !important;
}

/* Previous/Next Buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    font-weight: 600;
}

/* Empty Table Message */
.dataTables_wrapper .dataTables_empty {
    padding: 2rem !important;
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
}

/* Processing Indicator */
.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: var(--primary-color);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    z-index: 100;
}

/* Responsive DataTable */
.dataTables_wrapper .dataTables_scroll {
    overflow-x: auto;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background: var(--primary-color) !important;
    border: none !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
    background: var(--third-color) !important;
}

/* Card Integration */
.card .dataTables_wrapper {
    padding: 0;
}

.card-body > .dataTables_wrapper {
    margin: -1rem;
    padding: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center;
        margin-bottom: 15px;
    }

    .dataTables_wrapper .dataTables_filter input {
        min-width: 100%;
        margin-top: 10px;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
    }

    .dt-buttons {
        justify-content: center;
    }

    .table.dataTable thead th,
    table.dataTable thead th {
        padding: 10px 12px !important;
        font-size: 0.75rem !important;
    }

    .table.dataTable tbody td,
    table.dataTable tbody td {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }

    /* Responsive Export Buttons */
    .dt-buttons .btn,
    .dt-buttons .dt-button,
    .dataTables_wrapper .dt-buttons .btn {
        padding: 8px 12px !important;
        font-size: 0.7rem !important;
    }

    .dt-buttons .btn i,
    .dt-buttons .dt-button i {
        font-size: 0.8rem !important;
    }
}

/* Dark Mode Support (if applicable) */
@media (prefers-color-scheme: dark) {
    .table.dataTable tbody tr:nth-child(odd) {
        background-color: #1e1e1e;
    }

    .table.dataTable tbody tr:nth-child(even) {
        background-color: #252525;
    }

    .table.dataTable tbody td {
        color: #ddd !important;
        border-bottom-color: #333 !important;
    }
}

/* Focus States for Accessibility */
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Smooth Scrolling for Table */
.dataTables_scrollBody {
    scroll-behavior: smooth;
}

/* Action Buttons in Table */
.table.dataTable .btn-group .btn,
table.dataTable .btn-group .btn {
    padding: 5px 10px;
    font-size: 0.8rem;
    border-radius: 6px;
}

.table.dataTable .action-btns,
table.dataTable .action-btns {
    white-space: nowrap;
}

/* Badge Styling in Tables */
.table.dataTable .badge,
table.dataTable .badge {
    padding: 5px 10px;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 20px;
}

} /* END @media not all — TEMPORARILY DISABLED DATATABLE STYLES */

/* --- Base Styles --- */
html {
    font-size: 16px;
    /* Base font size */
}

body {
    font-family: var(--font-family-primary);
    font-weight: 400;
    color: #333;
    line-height: 1.5;
    background-color: #f9f9f9;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-primary);
    font-weight: 700;
    color: #222;
    margin-bottom: 0.5em;
    line-height: 1.2;
}

/* Headings by size */
h1 {
    font-size: 2.5rem;
}

/* Hero / main titles */
h2 {
    font-size: 2rem;
}

/* Section titles */
h3 {
    font-size: 1.75rem;
}

/* Subsections */
h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

/* Paragraphs */
p,
span,
li,
small {
    font-family: var(--font-family-primary);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: #373737;
}

.text-white {
    color: #fff !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

/* Buttons / Call-to-Actions */
button,
.btn,
.vendor-btn {
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

/* Product Titles */
.product-title,
.vendor-name {
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: 1.2rem;
    color: #111;
}

/* Prices / Highlighted Text */
.price,
.discount {
    font-family: var(--font-family-primary);
    font-weight: 700;
    color: var(--primary-color);
}

/* Product Codes / Technical Info */
.code,
.sku {
    font-family: var(--font-family-monospace);
    font-weight: 400;
    font-size: 0.85rem;
    color: #888;
}

/* Small UI Labels / Tags */
.label,
.badge {
    font-family: var(--font-family-primary);
    font-weight: 500;
    font-size: 0.8125rem;
    text-transform: uppercase;
}

/* --- Responsive Typography --- */
@media (max-width: 1200px) {
    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.85rem;
    }

    h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 992px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    body {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    h1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    body {
        font-size: 0.9rem;
    }
}

.table-heading-content .buy-button {
    background: #008673;
    border-color: #008673;
    display: block;
    padding: 8px 0;
    border-radius: 8px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 23px;
    color: #fff;
    font-weight: 700;
    font-family: var(--font-family-primary);
    text-align: center;
    width: 166px;
    cursor: pointer;
}

/* ============================================
   MODERN HEADER/NAVBAR REDESIGN
   Premium Admin Dashboard Header
   ============================================ */

/* Main Header Container */
.main-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    padding: 0 !important;
    min-height: var(--header-height) !important;
    position: relative;
    z-index: 1030;
}

.main-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--third-color) 50%, var(--primary-color) 100%);
}

/* Navbar Container */
.main-header.navbar {
    padding: 0.5rem 1rem !important;
}

.main-header .container-fluid {
    padding: 0 1rem;
}

/* Brand/Logo Area */
.main-header .navbar-brand {
    padding: 0.5rem 0;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.main-header .navbar-brand:hover {
    transform: translateX(2px);
}

.main-header .navbar-brand span,
.main-header .navbar-brand .fw-bold {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a0a5c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700 !important;
    font-size: 1.35rem !important;
    letter-spacing: 1px;
}

/* Sidebar Toggle Button */
.main-header [data-widget="pushmenu"],
.main-header .btn-link {
    color: var(--primary-color) !important;
    background: rgba(19, 0, 106, 0.08) !important;
    border: none !important;
    border-radius: 10px !important;
    width: 42px;
    height: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.main-header [data-widget="pushmenu"]:hover,
.main-header .btn-link:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a0a5c 100%) !important;
    color: #fff !important;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(19, 0, 106, 0.25);
}

.main-header [data-widget="pushmenu"] i,
.main-header .btn-link i {
    font-size: 1.1rem;
}

/* Navbar Toggler (Mobile) */
.main-header .navbar-toggler {
    border: 2px solid rgba(19, 0, 106, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    transition: all 0.3s ease;
}

.main-header .navbar-toggler:hover,
.main-header .navbar-toggler:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(19, 0, 106, 0.1) !important;
}

.main-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2313006a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Branch/Organization Name (Center) */
.main-header .mx-auto .text-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a0a5c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 16px;
    border-radius: 25px;
    border: 2px solid rgba(19, 0, 106, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.main-header .mx-auto .text-primary i {
    color: var(--third-color);
    -webkit-text-fill-color: var(--third-color);
}

/* Search Form */
.main-header .form-control {
    border: 2px solid #e2e8f0 !important;
    border-radius: 25px !important;
    padding: 10px 18px 10px 42px !important;
    font-size: 0.9rem !important;
    background-color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    transition: all 0.3s ease !important;
    min-width: 220px;
}

.main-header .form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(19, 0, 106, 0.1) !important;
    background-color: #fff !important;
    min-width: 280px;
}

.main-header .form-control::placeholder {
    color: #aaa;
}

/* Search Button */
.main-header .btn-outline-primary {
    background: transparent !important;
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    border-radius: 25px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.main-header .btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a0a5c 100%) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(19, 0, 106, 0.25) !important;
}

/* Navbar Nav Items */
.main-header .navbar-nav {
    align-items: center;
}

.main-header .nav-item {
    position: relative;
}

.main-header .nav-link {
    color: #555 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.main-header .nav-link:hover {
    color: var(--primary-color) !important;
    background: rgba(19, 0, 106, 0.08) !important;
}

.main-header .nav-link i {
    font-size: 1.15rem;
    transition: all 0.3s ease;
}

.main-header .nav-link:hover i {
    transform: scale(1.1);
    color: var(--primary-color);
}

/* Notification Badges */
.main-header .navbar-badge,
.main-header .badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 3px 6px !important;
    border-radius: 10px !important;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.main-header .badge.bg-danger {
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%) !important;
}

.main-header .badge.bg-warning {
    background: linear-gradient(135deg, var(--third-color) 0%, #d4956a 100%) !important;
    color: #fff !important;
}

/* User Dropdown */
.main-header #userDropdown {
    background: rgba(19, 0, 106, 0.05);
    border-radius: 25px !important;
    padding: 6px 14px 6px 8px !important;
    transition: all 0.3s ease;
}

.main-header #userDropdown:hover {
    background: rgba(19, 0, 106, 0.1);
}

.main-header #userDropdown img {
    width: 36px !important;
    height: 36px !important;
    border: 2px solid var(--third-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.main-header #userDropdown span {
    font-weight: 600;
    color: var(--primary-color);
}

/* ============================================
   UNIFIED DROPDOWN STYLES
   Professional dropdowns for header
   ============================================ */

/* Base Dropdown Menu - Hidden by default */
.main-header .dropdown-menu {
    display: none;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    padding: 0 !important;
    overflow: hidden;
    min-width: 340px !important;
    max-height: 480px;
    overflow-y: auto;
}

/* Show dropdown when .show class is added */
.main-header .dropdown-menu.show {
    display: block !important;
    animation: dropdownSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dropdown Header - Universal */
.main-header .dropdown-menu > .dropdown-header:first-child,
.main-header .dropdown-menu > div.dropdown-header:first-child {
    color: #000 !important;
    padding: 14px 16px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 3px solid var(--third-color) !important;
    position: relative;
    margin: 0 !important;
}

.main-header .dropdown-menu > .dropdown-header:first-child strong,
.main-header .dropdown-menu > div.dropdown-header:first-child strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #000 !important;
}

/* Header icon - add via CSS */
.main-header .dropdown-menu > .dropdown-header:first-child strong::before,
.main-header .dropdown-menu > div.dropdown-header:first-child strong::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.95rem;
}

/* Messages Dropdown Header Icon */
#messagesDropdown + .dropdown-menu > .dropdown-header:first-child strong::before,
#messagesDropdown + .dropdown-menu > div.dropdown-header:first-child strong::before {
    content: '\f0e0';
}

/* Notifications Dropdown Header Icon */
#notificationsDropdown + .dropdown-menu > .dropdown-header:first-child strong::before,
#notificationsDropdown + .dropdown-menu > div.dropdown-header:first-child strong::before {
    content: '\f0f3';
}

/* Header Variants
.main-header .dropdown-header.bg-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a0a5c 100%) !important;
    color: #000 !important;
}

.main-header .dropdown-header.bg-warning {
    background: linear-gradient(135deg, var(--third-color) 0%, #d4956a 100%) !important;
    color: #fff !important;
}

.main-header .dropdown-header.bg-danger {
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%) !important;
    color: #fff !important;
}

.main-header .dropdown-header.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #1d6f42 100%) !important;
    color: #fff !important;
}

.main-header .dropdown-header.bg-info {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    color: #fff !important;
} */

/* Mark all read link in header */
.main-header .dropdown-header a,
.main-header .dropdown-header .float-end {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
}

.main-header .dropdown-header a:hover,
.main-header .dropdown-header .float-end:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

/* Custom Scrollbar for Dropdowns */
.main-header .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.main-header .dropdown-menu::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.main-header .dropdown-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.main-header .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Dropdown Items - Notification/Message Style */
.main-header .dropdown-menu > .dropdown-item,
.main-header .dropdown-menu > a.dropdown-item {
    display: block !important;
    padding: 14px 16px !important;
    font-size: 0.9rem !important;
    color: #444 !important;
    transition: all 0.2s ease !important;
    border-left: 4px solid transparent !important;
    background: #fff !important;
    position: relative;
    text-decoration: none !important;
}

.main-header .dropdown-menu > .dropdown-item:hover,
.main-header .dropdown-menu > a.dropdown-item:hover {
    background: linear-gradient(90deg, rgba(19, 0, 106, 0.06) 0%, rgba(19, 0, 106, 0.02) 100%) !important;
    color: var(--primary-color) !important;
    border-left-color: var(--primary-color) !important;
}

.main-header .dropdown-menu > .dropdown-item:active,
.main-header .dropdown-menu > a.dropdown-item:active {
    background: linear-gradient(90deg, rgba(19, 0, 106, 0.1) 0%, rgba(19, 0, 106, 0.04) 100%) !important;
}

/* Notification/Message Item Content */
.main-header .dropdown-item .d-flex {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100%;
}

.main-header .dropdown-item .d-flex.align-items-center {
    align-items: center !important;
}

/* Avatar images in dropdown items */
.main-header .dropdown-item .d-flex > img,
.main-header .dropdown-item .d-flex > img.img-circle,
.main-header .dropdown-item .img-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-right: 12px !important;
}

/* Override Bootstrap me-3 margin for images */
.main-header .dropdown-item .d-flex > img.me-3,
.main-header .dropdown-item .img-circle.me-3 {
    margin-right: 12px !important;
}

/* Notification Icon Container - Unified styling */
.main-header .dropdown-item .notification-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 1rem;
    background: rgba(19, 0, 106, 0.1);
    margin-right: 12px !important;
}

/* Override Bootstrap me-3 margin */
.main-header .dropdown-item .notification-icon.me-3 {
    margin-right: 12px !important;
}

/* Notification Icon - ensure icon is centered */
.main-header .dropdown-item .notification-icon i,
.main-header .dropdown-item .notification-icon .fas,
.main-header .dropdown-item .notification-icon .far,
.main-header .dropdown-item .notification-icon .fab {
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Icon Color Variants - Success (green) */
.main-header .dropdown-item .notification-icon i.text-success {
    color: #28a745 !important;
}

.main-header .dropdown-item .notification-icon i.text-success ~ *,
.main-header .dropdown-item .notification-icon:has(.text-success) {
    background: rgba(40, 167, 69, 0.12) !important;
}

/* Icon Color Variants - Warning (orange/accent) */
.main-header .dropdown-item .notification-icon i.text-warning {
    color: var(--third-color) !important;
}

/* Icon Color Variants - Info (blue) */
.main-header .dropdown-item .notification-icon i.text-info {
    color: #17a2b8 !important;
}

/* Icon Color Variants - Primary (purple) */
.main-header .dropdown-item .notification-icon i.text-primary {
    color: var(--primary-color) !important;
}

/* Icon Color Variants - Danger (red) */
.main-header .dropdown-item .notification-icon i.text-danger {
    color: #dc3545 !important;
}

/* Content Area next to icon/avatar - MUST flex grow */
.main-header .dropdown-item .d-flex > div:not(.notification-icon),
.main-header .dropdown-item .d-flex > div:last-child:not(.notification-icon) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 54px) !important;
    overflow: hidden !important;
}

/* Special case: when content div follows img directly */
.main-header .dropdown-item .d-flex > img + div,
.main-header .dropdown-item .d-flex > .img-circle + div,
.main-header .dropdown-item .d-flex > .notification-icon + div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 54px) !important;
}

/* Item Text Styling - Title */
.main-header .dropdown-item .fw-bold,
.main-header .dropdown-item .d-flex > div > .fw-bold {
    color: #222 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 3px !important;
    line-height: 1.35;
    display: block !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Item Text Styling - Description/Message */
.main-header .dropdown-item .small,
.main-header .dropdown-item .d-flex > div > .small,
.main-header .dropdown-item .d-flex > div > div.small {
    color: #555 !important;
    font-size: 0.8rem !important;
    line-height: 1.4;
    display: block !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 2px !important;
}

/* Item Text Styling - Muted text */
.main-header .dropdown-item .text-muted:not(.text-xs),
.main-header .dropdown-item .d-flex > div > .text-muted:not(.text-xs) {
    color: #666 !important;
    font-size: 0.8rem !important;
    line-height: 1.4;
    display: block !important;
}

/* Item Text Styling - Timestamp */
.main-header .dropdown-item .text-xs,
.main-header .dropdown-item .d-flex > div > .text-xs {
    color: #888 !important;
    font-size: 0.72rem !important;
    margin-top: 4px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}

.main-header .dropdown-item .text-xs i {
    font-size: 0.68rem;
    color: #aaa;
}

/* View link inside notification */
.main-header .dropdown-item .d-flex > div > a.text-primary {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    display: inline-block !important;
}

/* Empty State - No messages/notifications */
.main-header .dropdown-menu > .dropdown-item.text-center {
    padding: 32px 20px !important;
    border-left: none !important;
    text-align: center;
}

.main-header .dropdown-menu > .dropdown-item.text-center i.fa-2x,
.main-header .dropdown-menu > .dropdown-item.text-center i.fa-inbox,
.main-header .dropdown-menu > .dropdown-item.text-center i.fa-bell-slash {
    font-size: 2.5rem !important;
    color: #ddd !important;
    margin-bottom: 12px;
    display: block !important;
}

.main-header .dropdown-menu > .dropdown-item.text-center p {
    color: #999 !important;
    font-size: 0.9rem !important;
    margin: 0;
}

.main-header .dropdown-menu > .dropdown-item.text-center:hover {
    background: #fff !important;
    border-left-color: transparent !important;
    cursor: default;
}

/* Dropdown Divider */
.main-header .dropdown-menu > .dropdown-divider {
    margin: 0 !important;
    border-color: #eef2f7 !important;
    opacity: 1 !important;
    border-width: 1px;
}

/* Dropdown Footer */
.main-header .dropdown-menu > .dropdown-footer {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    padding: 12px 16px !important;
    text-align: center;
    border-top: 1px solid #e2e8f0 !important;
    margin: 0 !important;
}

.main-header .dropdown-menu > .dropdown-footer a {
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(19, 0, 106, 0.08);
    transition: all 0.2s ease;
}

.main-header .dropdown-menu > .dropdown-footer a:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a0a5c 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(19, 0, 106, 0.25);
}

/* ============================================
   USER DROPDOWN SPECIFIC STYLES
   ============================================ */

/* User Dropdown Menu */
#userDropdown + .dropdown-menu {
    min-width: 280px !important;
}

/* User Profile Header */
.main-header .dropdown-menu .dropdown-header.bg-light {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%) !important;
    color: #333 !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.main-header .dropdown-menu .dropdown-header.bg-light .d-flex {
    gap: 14px !important;
}

.main-header .dropdown-menu .dropdown-header.bg-light img {
    width: 52px !important;
    height: 52px !important;
    border: 3px solid var(--third-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.main-header .dropdown-menu .dropdown-header.bg-light h6 {
    color: #222 !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    margin-bottom: 4px !important;
}

.main-header .dropdown-menu .dropdown-header.bg-light .badge {
    position: static !important;
    animation: none !important;
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a0a5c 100%) !important;
}

/* Section Headers in User Dropdown */
.main-header .dropdown-menu h6.dropdown-header {
    background: transparent !important;
    color: #888 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 14px 18px 8px !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-bottom: none !important;
}

/* User Dropdown Items */
#userDropdown + .dropdown-menu .dropdown-item {
    padding: 11px 18px !important;
    border-left: 3px solid transparent !important;
}

#userDropdown + .dropdown-menu .dropdown-item i {
    color: var(--third-color) !important;
    width: 22px;
    text-align: center;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

#userDropdown + .dropdown-menu .dropdown-item:hover i {
    color: var(--primary-color) !important;
    transform: scale(1.1);
}

/* Danger Item */
.main-header .dropdown-item.text-danger {
    color: #dc3545 !important;
}

.main-header .dropdown-item.text-danger i {
    color: #dc3545 !important;
}

.main-header .dropdown-item.text-danger:hover {
    background: rgba(220, 53, 69, 0.08) !important;
    border-left-color: #dc3545 !important;
    color: #b02a37 !important;
}

/* Dark Mode Toggle Row */
.main-header .dropdown-item .d-flex.justify-content-between {
    width: 100%;
}

.main-header .dropdown-item .form-check.form-switch {
    margin: 0;
    padding: 0;
}

.main-header .dropdown-item .form-check-input {
    width: 38px;
    height: 20px;
    cursor: pointer;
}

.main-header .dropdown-item .form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* ============================================
   RESPONSIVE DROPDOWN STYLES
   ============================================ */

@media (max-width: 991.98px) {
    .main-header .dropdown-menu {
        min-width: 100% !important;
        max-width: 100% !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        width: calc(100% - 20px) !important;
        border-radius: 12px !important;
        margin-top: 10px !important;
    }
}

@media (max-width: 576px) {
    .main-header .dropdown-menu {
        max-height: 70vh;
    }

    .main-header .dropdown-menu > .dropdown-item,
    .main-header .dropdown-menu > a.dropdown-item {
        padding: 12px 14px !important;
    }

    .main-header .dropdown-item .d-flex > img,
    .main-header .dropdown-item .img-circle,
    .main-header .dropdown-item .notification-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        margin-right: 10px !important;
    }

    .main-header .dropdown-item .fw-bold {
        font-size: 0.82rem !important;
    }

    .main-header .dropdown-item .small,
    .main-header .dropdown-item .text-muted:not(.text-xs) {
        font-size: 0.75rem !important;
    }

    .main-header .dropdown-item .d-flex > div:not(.notification-icon) {
        max-width: calc(100% - 46px) !important;
    }
}

/* Settings Toggle */
.main-header [data-widget="control-sidebar"] {
    background: rgba(19, 0, 106, 0.08) !important;
    border-radius: 10px !important;
    width: 42px;
    height: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease !important;
}

.main-header [data-widget="control-sidebar"]:hover {
    background: linear-gradient(135deg, var(--third-color) 0%, #d4956a 100%) !important;
    color: #fff !important;
    transform: rotate(90deg);
    box-shadow: 0 4px 15px rgba(191, 121, 85, 0.3);
}

/* Dark Mode Toggle in Dropdown */
.main-header .form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Responsive Header */
@media (max-width: 991.98px) {
    .main-header {
        padding: 0.5rem !important;
    }

    .main-header .navbar-collapse {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-top: 10px;
        padding: 15px;
        border: 1px solid #e2e8f0;
    }

    .main-header .navbar-nav {
        gap: 5px;
    }

    .main-header .nav-item {
        width: 100%;
    }

    .main-header .nav-link {
        padding: 12px 15px !important;
        border-radius: 8px !important;
    }

    .main-header .form-control {
        min-width: 100% !important;
        margin-bottom: 10px;
    }

    .main-header .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin-top: 5px !important;
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }
}

@media (max-width: 576px) {
    .main-header .navbar-brand span {
        font-size: 1.1rem !important;
    }

    .main-header [data-widget="pushmenu"],
    .main-header .btn-link {
        width: 38px;
        height: 38px;
    }

    .main-header #userDropdown span {
        display: none;
    }
}

/* ============================================
   MODERN SIDEBAR REDESIGN
   Premium look with gradients and animations
   ============================================ */

/* Main Sidebar Container */
.main-sidebar {
    background: linear-gradient(180deg, #0a0030 0%, #13006a 50%, #1a1050 100%) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    border-right: none !important;
    overflow-x: hidden !important;
    width: var(--sidebar-width);
    transition: width var(--transition-speed) ease, margin-left var(--transition-speed) ease;
}

/* Sidebar collapsed: AdminLTE sidebar-mini collapses to icon-only */
.sidebar-mini.sidebar-collapse .main-sidebar,
.sidebar-mini.sidebar-collapse .main-sidebar::before {
    width: var(--sidebar-collapsed-width);
    margin-left: 0;
}

/* Content wrapper offset for wider sidebar */
.content-wrapper,
.main-footer,
.main-header {
    margin-left: var(--sidebar-width) !important;
    transition: margin-left var(--transition-speed) ease;
}

.sidebar-mini.sidebar-collapse .content-wrapper,
.sidebar-mini.sidebar-collapse .main-footer,
.sidebar-mini.sidebar-collapse .main-header {
    margin-left: var(--sidebar-collapsed-width) !important;
}

/* Mobile: sidebar is an overlay, content takes full width */
@media (max-width: 991.98px) {
    .content-wrapper,
    .main-footer,
    .main-header {
        margin-left: 0 !important;
    }

    .sidebar-collapse .content-wrapper,
    .sidebar-collapse .main-footer,
    .sidebar-collapse .main-header {
        margin-left: 0 !important;
    }
}

.layout-fixed .main-sidebar {
    bottom: 0;
    float: none;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
}

.layout-fixed .main-sidebar p,
.layout-fixed .main-sidebar .brand-text {
    color: #fff !important;
}

/* Scrollbar Styling */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Smooth Scrolling */
.sidebar {
    scroll-behavior: smooth;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Prevent horizontal overflow in sidebar navigation */
.nav-sidebar,
.nav-sidebar .nav-item,
.nav-sidebar .nav-link,
.nav-treeview {
    overflow-x: hidden !important;
}

.nav-sidebar .nav-link p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Brand Link Styling */
.brand-link {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 14px 12px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

.brand-link:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%) !important;
}

.brand-link .brand-image {
    width: 38px !important;
    height: 38px !important;
    margin-right: 12px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.brand-link .brand-text {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: #fff !important;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Navigation Header Styling */
.nav-header {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 20px 18px 8px !important;
    margin-top: 5px;
    position: relative;
}

.nav-header::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 10px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
}

/* Main Navigation Links */
.nav-sidebar > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 12px 16px !important;
    margin: 3px 10px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.nav-sidebar > .nav-item > .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(191, 121, 85, 0.3) 0%, transparent 100%);
    transition: width 0.3s ease;
    border-radius: 10px;
}

.nav-sidebar > .nav-item > .nav-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    transform: translateX(3px);
    box-shadow: 0 0 15px rgba(191, 121, 85, 0.1);
}

.nav-sidebar > .nav-item > .nav-link:hover::before {
    width: 100%;
}

/* Active State for Main Links */
.nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(135deg, var(--third-color) 0%, #d4956a 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(191, 121, 85, 0.4) !important;
    font-weight: 600 !important;
}

.nav-sidebar > .nav-item > .nav-link.active .nav-icon {
    color: #fff !important;
}

/* Navigation Icons */
.nav-sidebar .nav-icon {
    font-size: 1.1rem !important;
    width: 24px !important;
    text-align: center !important;
    margin-right: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.3s ease !important;
}

.nav-sidebar .nav-link:hover .nav-icon {
    color: #fff !important;
    transform: scale(1.1);
}

.nav-sidebar .nav-link.active .nav-icon {
    color: #fff !important;
}

/* Dropdown Arrow */
.nav-sidebar .nav-link > .right,
.nav-sidebar .nav-link > p > .right {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem !important;
}

.nav-item.menu-open > .nav-link > .right,
.nav-item.menu-open > .nav-link > p > .right {
    transform: rotate(-90deg) !important;
    color: var(--third-color) !important;
}

/* Treeview (Dropdown) Styling */
.nav-treeview {
    display: none;
    background: rgba(0, 0, 0, 0.15) !important;
    margin: 5px 10px !important;
    padding: 8px 0 !important;
    border-radius: 10px !important;
    border-left: 3px solid var(--third-color) !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
}

.nav-item.menu-open > .nav-treeview {
    display: block;
    animation: sidebarSlideDown 0.3s ease-out;
}

@keyframes sidebarSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* First Level Treeview Links */
.nav-treeview > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 10px 16px 10px 20px !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    border-radius: 6px !important;
    margin: 2px 8px !important;
    transition: all 0.25s ease !important;
}

.nav-treeview > .nav-item > .nav-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding-left: 24px !important;
}

.nav-treeview > .nav-item > .nav-link.active {
    background: rgba(191, 121, 85, 0.25) !important;
    color: var(--third-color) !important;
    border-left: 2px solid var(--third-color) !important;
    font-weight: 500 !important;
}

/* Treeview Icons */
.nav-treeview .nav-icon {
    font-size: 0.85rem !important;
    width: 18px !important;
    margin-right: 10px !important;
    opacity: 0.7;
}

.nav-treeview .nav-link:hover .nav-icon,
.nav-treeview .nav-link.active .nav-icon {
    opacity: 1;
}

/* Nested Treeview (Second Level) */
.nav-treeview .nav-treeview {
    background: rgba(0, 0, 0, 0.1) !important;
    margin: 5px 5px 5px 15px !important;
    padding: 5px 0 !important;
    border-radius: 8px !important;
    border-left: 2px solid rgba(191, 121, 85, 0.5) !important;
}

.nav-treeview .nav-treeview > .nav-item > .nav-link {
    font-size: 0.9rem !important;
    padding: 8px 12px 8px 16px !important;
}

.nav-treeview .nav-treeview .nav-icon {
    font-size: 0.75rem !important;
    width: 14px !important;
}

/* Third Level Nesting */
.nav-treeview .nav-treeview .nav-treeview {
    margin-left: 10px !important;
    border-left: 2px solid rgba(191, 121, 85, 0.3) !important;
}

.nav-treeview .nav-treeview .nav-treeview > .nav-item > .nav-link {
    font-size: 0.85rem !important;
    padding: 6px 10px 6px 14px !important;
}

/* Menu Open State Enhancement */
.nav-item.menu-open > .nav-link {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Active Parent Indicator */
.nav-item.menu-open > .nav-link::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--third-color);
    border-radius: 3px 0 0 3px;
}

/* User Panel (if enabled) */
.user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
}

.user-panel .image img {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.user-panel .info a {
    color: #fff !important;
    font-weight: 600 !important;
}

.user-panel .info small {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Sidebar Collapsed State */
.sidebar-mini.sidebar-collapse .main-sidebar .nav-link {
    padding: 12px !important;
    justify-content: center !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar .nav-icon {
    margin: 0 !important;
    font-size: 1.2rem !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar .nav-link p {
    display: none !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar .nav-header {
    display: none !important;
}

/* Hover tooltip for collapsed sidebar */
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand) .nav-sidebar .nav-link:hover {
    width: auto !important;
}

/* Badge/Counter Styling in Sidebar */
.nav-link .badge,
.nav-link .right.badge {
    background: var(--third-color) !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    padding: 3px 6px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* Sidebar Responsive Adjustments */
@media (max-width: 991.98px) {
    .main-sidebar {
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3) !important;
    }

    .nav-sidebar > .nav-item > .nav-link {
        padding: 10px 14px !important;
        margin: 2px 8px !important;
    }

    .nav-treeview > .nav-item > .nav-link {
        padding: 8px 14px 8px 18px !important;
    }
}

/* Focus States for Accessibility */
.nav-link:focus {
    outline: 2px solid rgba(191, 121, 85, 0.5) !important;
    outline-offset: 2px;
}

/* Reduced Motion Support for Sidebar */
@media (prefers-reduced-motion: reduce) {
    .nav-sidebar .nav-link,
    .nav-treeview,
    .nav-icon,
    .right {
        transition: none !important;
        animation: none !important;
    }
}

/* Menu Section Divider */
.nav-sidebar > .nav-item:not(:first-child) > .nav-header {
    margin-top: 15px;
}

/* Sidebar Menu Style (Legacy Support) */
.menu-name .nav-treeview {
    color: var(--header-link-color) !important;
    font-weight: 400 !important;
    padding-left: 15px !important;
}

/* Improve jQuery UI Dialog appearance */
.ui-dialog {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    font-family: var(--font-family-primary) !important;
    z-index: 2000 !important;
}

.ui-dialog-titlebar {
    background: var(--breadcrumbs-bg) !important;
    color: white !important;
    padding: 10px 20px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border: none !important;
}

.ui-dialog-titlebar-close {
    background: none !important;
    border: none !important;
    color: white !important;
    font-size: 20px !important;
    margin: 5px !important;
}

.ui-dialog-buttonpane {
    background: #f7f7f7 !important;
    padding: 15px !important;
    text-align: right !important;
    border-top: 1px solid #ddd !important;
}

.ui-dialog-buttonset button {
    background: #007bff !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    margin-left: 8px !important;
    cursor: pointer !important;
}

.ui-dialog-buttonset button:hover {
    background: #0056b3 !important;
}

.ui-widget-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
}

.ui-dialog .ui-dialog-buttonpane button {
    background-color: var(--button-bg) !important;
    color: var(--button-fg) !important;
    border-color: var(--button-bg) !important;
    margin: 0.5em 0.4em 0.5em 0;
    cursor: pointer;
    font-size: 14px;
}

#detailsDialog input[type="text"],
#detailsDialog input[type="email"],
#detailsDialog input[type="number"],
#detailsDialog textarea,
#detailsDialog select {
    width: 100% !important;
    height: 38px !important;
    padding: 10px 12px !important;
    margin-top: 6px !important;
    margin-bottom: 16px !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}

#detailsDialog input[type="text"]:focus,
#detailsDialog input[type="email"]:focus,
#detailsDialog input[type="number"]:focus,
#detailsDialog textarea:focus,
#detailsDialog select:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3) !important;
    outline: none;
}

#detailsDialog label {
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    display: block !important;
    font-size: 14px !important;
    color: #333 !important;
}

#detailsDialog .form-group {
    margin-bottom: 20px !important;
}

/* Sidebar Menu Style */
.menu-name .nav-treeview {
    color: var(--header-link-color) !important;
    font-weight: 400 !important;
    padding-left: 15px !important;
}

/* Forms */

.module-select2 {
    height: 250px !important;
}

/* Table */
table .table-active {
    background: rgb(6, 200, 6) !important;
    color: #fff !important;
    font-weight: 600;
}

table .table-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

/* Ensure dropdown menus have proper positioning and z-index */
.dropdown-menu {
    position: absolute !important;
    z-index: 1050 !important;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
    color: #212529;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* ── Global Dropdown Fixes ──
   Ensure ALL dropdown menus appear above cards, tables, and other content.
   The key issues are:
   1. Parent containers with overflow:hidden clip the dropdown
   2. Parent containers with transform create a stacking context trapping z-index
   3. table-responsive uses overflow:auto which clips dropdowns
*/

.card .dropdown-menu.show,
.modern-card .dropdown-menu.show,
.card-header .dropdown-menu.show,
.card-body .dropdown-menu.show,
.table .dropdown-menu.show,
.dataTables_wrapper .dropdown-menu.show,
.btn-group .dropdown-menu.show {
    z-index: 1060 !important;
    position: absolute !important;
}

/* table-responsive clips dropdowns — allow overflow */
.table-responsive {
    overflow: visible !important;
}

/* When table needs horizontal scroll, use a wrapper approach */
.table-responsive-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

/* Ensure dropdown items are properly styled */
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-decoration: none;
    background-color: transparent;
    border: 0;
    transition: all 0.2s ease-in-out;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #1e2125 !important;
    background-color: #e9ecef;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #ffffff;
    background-color: var(--primary-color);
}

/* Ensure proper spacing for table buttons */
.table-buttons {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

/* Fix dropdown toggle button styling */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* Ensure dropdown menu shows properly */
.dropdown-menu.show {
    display: block !important;
}

/* Override any AdminLTE interference */
.table .dropdown-menu {
    position: absolute !important;
    transform: none !important;
}

.table th {
    font-family: var(--font-family-primary);
    border-top: none;
    font-weight: 600;
    font-size: 14px;
}

.table td {
    font-family: var(--font-family-primary);
    vertical-align: middle;
    font-size: 14px;
}

/* Buttons */
.btn .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    height: 38px !important;
    border-radius: 0.2rem;
}

/* Badge */
.badge {
    font-size: 0.8125rem;
    padding: 6px 10px;
}

.badge .bg-info {
    background-color: var(--bgColor-default);
    color: #fff;
}

/* ============================================
   MODERN CARD STYLES
   Premium styling with gradients and animations
   ============================================ */

/* Base Card */
.card {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible !important;
    position: relative;
}

.card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

/* Card Header - Theme Gradient */
.card .card-header,
.card-header {
    /* background: linear-gradient(135deg, var(--primary-color) 0%, #1a0a5c 100%) !important; */
    background: #fff !important;
    color: var(--dark-primary-color) !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1.25rem 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    position: relative;
    overflow: visible;
}

/* Card Header Decorative Accent */
.card .card-header::after,
.card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--third-color) 0%, #d4956a 50%, rgba(191, 121, 85, 0.3) 100%);
}

/* Card Header Title Positioning */
.card .card-header > h1,
.card .card-header > h2,
.card .card-header > h3,
.card .card-header > h4,
.card .card-header > h5,
.card .card-header > h6,
.card .card-header > .card-title {
    flex: 0 1 auto !important;
}

.card .card-header > *:last-child:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.card-title) {
    margin-left: auto !important;
}

/* Card Header Titles */
.card .card-header h1,
.card .card-header h2,
.card .card-header h3,
.card .card-header h4,
.card .card-header h5,
.card .card-header h6,
.card .card-header .card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header .card-title {
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 1.15rem !important;
    color: var(--dark-primary-color) !important;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Card Header Icons */
.card .card-header i,
.card-header i,
.card .card-header .fas,
.card .card-header .far,
.card .card-header .fab {
    color: var(--third-color) !important;
    font-size: 1.1rem;
}

/* Card Header Buttons */
.card .card-header .btn,
.card-header .btn {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

.card .card-header .btn.btn-sm,
.card-header .btn.btn-sm {
    padding: 5px 10px !important;
    font-size: 0.8rem !important;
}

.card .card-header .btn-primary,
.card-header .btn-primary {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

.card .card-header .btn-primary:hover,
.card-header .btn-primary:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.card .card-header .btn-success,
.card-header .btn-success {
    background: linear-gradient(135deg, var(--third-color) 0%, #d4956a 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(191, 121, 85, 0.3) !important;
}

.card .card-header .btn-success:hover,
.card-header .btn-success:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(191, 121, 85, 0.4) !important;
}

/* Card Body */
.card-body {
    padding: 1.5rem !important;
    background: #ffffff !important;
}

/* Card Body with Light Background Variant */
.card-body.bg-light {
    background: #f8fafc !important;
}

/* Card Footer */
.card-footer {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 1rem 1.5rem !important;
    border-radius: 0 0 16px 16px !important;
}

/* Card Tools (AdminLTE) */
.card-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-tools .btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
}

.card-tools .btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* ===== Card Variants ===== */

/* Card Primary */
.card.card-primary .card-header,
.card-primary > .card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a0a5c 100%) !important;
}

/* Card Success */
.card.card-success .card-header,
.card-success > .card-header {
    background: linear-gradient(135deg, #28a745 0%, #1d6f42 100%) !important;
}

.card.card-success .card-header::after,
.card-success > .card-header::after {
    background: linear-gradient(90deg, #7dcea0 0%, #28a745 100%);
}

/* Card Info */
.card.card-info .card-header,
.card-info > .card-header {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
}

.card.card-info .card-header::after,
.card-info > .card-header::after {
    background: linear-gradient(90deg, #76d7ea 0%, #17a2b8 100%);
}

/* Card Warning */
.card.card-warning .card-header,
.card-warning > .card-header {
    background: linear-gradient(135deg, var(--third-color) 0%, #d4956a 100%) !important;
}

.card.card-warning .card-header::after,
.card-warning > .card-header::after {
    background: linear-gradient(90deg, #f5d6c6 0%, var(--third-color) 100%);
}

/* Card Danger */
.card.card-danger .card-header,
.card-danger > .card-header {
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%) !important;
}

.card.card-danger .card-header::after,
.card-danger > .card-header::after {
    background: linear-gradient(90deg, #f5a3a3 0%, #dc3545 100%);
}

/* Card Secondary */
.card.card-secondary .card-header,
.card-secondary > .card-header {
    background: linear-gradient(135deg, #6c757d 0%, #545b62 100%) !important;
}

.card.card-secondary .card-header::after,
.card-secondary > .card-header::after {
    background: linear-gradient(90deg, #adb5bd 0%, #6c757d 100%);
}

/* Card Dark */
.card.card-dark .card-header,
.card-dark > .card-header {
    background: linear-gradient(135deg, #343a40 0%, #1d2124 100%) !important;
}

/* ===== Cards with Background Color Classes ===== */
/* Only apply white text to card headers and main content areas, NOT to tables or nested elements */
.card.bg-primary,
.card.bg-success,
.card.bg-info,
.card.bg-warning,
.card.bg-danger,
.card.bg-dark,
.card.bg-secondary,
.bg-primary.card-body,
.bg-success.card-body,
.bg-info.card-body,
.bg-warning.card-body,
.bg-danger.card-body,
.bg-dark.card-body,
.bg-secondary.card-body {
    color: #ffffff !important;
}

/* EXCLUDE: Do NOT force white text on these elements */
/* EXPLICIT RULE: Force dark text on tables inside colored cards */
.card.bg-primary .table,
.card.bg-success .table,
.card.bg-info .table,
.card.bg-warning .table,
.card.bg-danger .table,
.card.bg-dark .table,
.card.bg-secondary .table,
.card.bg-primary .dataTables_wrapper,
.card.bg-success .dataTables_wrapper,
.card.bg-info .dataTables_wrapper,
.card.bg-warning .dataTables_wrapper,
.card.bg-danger .dataTables_wrapper,
.card.bg-dark .dataTables_wrapper,
.card.bg-secondary .dataTables_wrapper,
.card.bg-primary .table tbody tr,
.card.bg-success .table tbody tr,
.card.bg-info .table tbody tr,
.card.bg-warning .table tbody tr,
.card.bg-danger .table tbody tr,
.card.bg-dark .table tbody tr,
.card.bg-secondary .table tbody tr,
.card.bg-primary .table td,
.card.bg-success .table td,
.card.bg-info .table td,
.card.bg-warning .table td,
.card.bg-danger .table td,
.card.bg-dark .table td,
.card.bg-secondary .table td,
.card.bg-primary .table th,
.card.bg-success .table th,
.card.bg-info .table th,
.card.bg-warning .table th,
.card.bg-danger .table th,
.card.bg-dark .table th,
.card.bg-secondary .table th {
    color: #333333 !important;
}

/* Also reset for dataTables */
.card.bg-primary .dataTables_wrapper .dataTables_length,
.card.bg-primary .dataTables_wrapper .dataTables_filter,
.card.bg-primary .dataTables_wrapper .dataTables_info,
.card.bg-primary .dataTables_wrapper .dataTables_paginate,
.card.bg-success .dataTables_wrapper .dataTables_length,
.card.bg-success .dataTables_wrapper .dataTables_filter,
.card.bg-success .dataTables_wrapper .dataTables_info,
.card.bg-success .dataTables_wrapper .dataTables_paginate,
.card.bg-info .dataTables_wrapper .dataTables_length,
.card.bg-info .dataTables_wrapper .dataTables_filter,
.card.bg-info .dataTables_wrapper .dataTables_info,
.card.bg-info .dataTables_wrapper .dataTables_paginate,
.card.bg-warning .dataTables_wrapper .dataTables_length,
.card.bg-warning .dataTables_wrapper .dataTables_filter,
.card.bg-warning .dataTables_wrapper .dataTables_info,
.card.bg-warning .dataTables_wrapper .dataTables_paginate,
.card.bg-danger .dataTables_wrapper .dataTables_length,
.card.bg-danger .dataTables_wrapper .dataTables_filter,
.card.bg-danger .dataTables_wrapper .dataTables_info,
.card.bg-danger .dataTables_wrapper .dataTables_paginate {
    color: #333333 !important;
}

.card.bg-primary h1, .card.bg-primary h2, .card.bg-primary h3,
.card.bg-primary h4, .card.bg-primary h5, .card.bg-primary h6,
.card.bg-primary p, .card.bg-primary span, .card.bg-primary a,
.card.bg-success h1, .card.bg-success h2, .card.bg-success h3,
.card.bg-success h4, .card.bg-success h5, .card.bg-success h6,
.card.bg-success p, .card.bg-success span, .card.bg-success a,
.card.bg-info h1, .card.bg-info h2, .card.bg-info h3,
.card.bg-info h4, .card.bg-info h5, .card.bg-info h6,
.card.bg-info p, .card.bg-info span, .card.bg-info a,
.card.bg-warning h1, .card.bg-warning h2, .card.bg-warning h3,
.card.bg-warning h4, .card.bg-warning h5, .card.bg-warning h6,
.card.bg-warning p, .card.bg-warning span, .card.bg-warning a,
.card.bg-danger h1, .card.bg-danger h2, .card.bg-danger h3,
.card.bg-danger h4, .card.bg-danger h5, .card.bg-danger h6,
.card.bg-danger p, .card.bg-danger span, .card.bg-danger a,
.card.bg-dark h1, .card.bg-dark h2, .card.bg-dark h3,
.card.bg-dark h4, .card.bg-dark h5, .card.bg-dark h6,
.card.bg-dark p, .card.bg-dark span, .card.bg-dark a,
.card.bg-secondary h1, .card.bg-secondary h2, .card.bg-secondary h3,
.card.bg-secondary h4, .card.bg-secondary h5, .card.bg-secondary h6,
.card.bg-secondary p, .card.bg-secondary span, .card.bg-secondary a {
    color: #ffffff !important;
}

/* Card body with bg color classes */
.card .card-body.bg-primary,
.card .card-body.bg-success,
.card .card-body.bg-info,
.card .card-body.bg-warning,
.card .card-body.bg-danger,
.card .card-body.bg-dark,
.card .card-body.bg-secondary {
    color: #ffffff !important;
}

.card .card-body.bg-primary *,
.card .card-body.bg-success *,
.card .card-body.bg-info *,
.card .card-body.bg-warning *,
.card .card-body.bg-danger *,
.card .card-body.bg-dark *,
.card .card-body.bg-secondary * {
    color: #ffffff !important;
}

/* Gradient backgrounds - allow inheritance for tables */
.card.bg-gradient-primary,
.card.bg-gradient-success,
.card.bg-gradient-info,
.card.bg-gradient-warning,
.card.bg-gradient-danger,
.card.bg-gradient-dark,
.card.bg-gradient-secondary {
    color: #ffffff !important;
}

/* Preserve table styling in gradient cards - FORCE DARK TEXT */
.card.bg-gradient-primary .table,
.card.bg-gradient-success .table,
.card.bg-gradient-info .table,
.card.bg-gradient-warning .table,
.card.bg-gradient-danger .table,
.card.bg-gradient-dark .table,
.card.bg-gradient-secondary .table,
.card.bg-gradient-primary .table tbody tr,
.card.bg-gradient-success .table tbody tr,
.card.bg-gradient-info .table tbody tr,
.card.bg-gradient-warning .table tbody tr,
.card.bg-gradient-danger .table tbody tr,
.card.bg-gradient-dark .table tbody tr,
.card.bg-gradient-secondary .table tbody tr,
.card.bg-gradient-primary .table td,
.card.bg-gradient-success .table td,
.card.bg-gradient-info .table td,
.card.bg-gradient-warning .table td,
.card.bg-gradient-danger .table td,
.card.bg-gradient-dark .table td,
.card.bg-gradient-secondary .table td,
.card.bg-gradient-primary .table th,
.card.bg-gradient-success .table th,
.card.bg-gradient-info .table th,
.card.bg-gradient-warning .table th,
.card.bg-gradient-danger .table th,
.card.bg-gradient-dark .table th,
.card.bg-gradient-secondary .table th {
    color: #333333 !important;
}

/* Fix for small-boxes and info-boxes - preserve color coding */
.small-box h3,
.small-box p,
.small-box .small-box-footer,
.info-box-content .info-box-text,
.info-box-content .info-box-number {
    color: inherit !important;
}

.small-box.bg-primary,
.small-box.bg-success,
.small-box.bg-info,
.small-box.bg-warning,
.small-box.bg-danger,
.small-box.bg-dark,
.small-box.bg-secondary {
    color: #ffffff !important;
}

/* Keep title, content, and footer text white in colored boxes */
.small-box.bg-primary h3,
.small-box.bg-primary p,
.small-box.bg-success h3,
.small-box.bg-success p,
.small-box.bg-info h3,
.small-box.bg-info p,
.small-box.bg-warning h3,
.small-box.bg-warning p,
.small-box.bg-danger h3,
.small-box.bg-danger p,
.small-box.bg-dark h3,
.small-box.bg-dark p,
.small-box.bg-secondary h3,
.small-box.bg-secondary p {
    color: #ffffff !important;
}

/* Ensure footer text is visible */
.small-box .small-box-footer {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ===== Card Light Variant ===== */
.card.card-light .card-header,
.card-light > .card-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    color: #333 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.card.card-light .card-header h1,
.card.card-light .card-header h2,
.card.card-light .card-header h3,
.card.card-light .card-header h4,
.card.card-light .card-header h5,
.card.card-light .card-header h6,
.card.card-light .card-header .card-title {
    color: var(--primary-color) !important;
    text-shadow: none;
}

.card.card-light .card-header i {
    color: var(--primary-color) !important;
}

.card.card-light .card-header::after {
    background: linear-gradient(90deg, var(--primary-color) 0%, #1a0a5c 100%);
}

/* ===== Card Outline Variants ===== */
.card.card-outline-primary {
    border: 2px solid var(--primary-color) !important;
}

.card.card-outline-primary .card-header {
    background: transparent !important;
    color: var(--primary-color) !important;
    border-bottom: 2px solid var(--primary-color) !important;
}

.card.card-outline-primary .card-header h1,
.card.card-outline-primary .card-header h2,
.card.card-outline-primary .card-header h3,
.card.card-outline-primary .card-header h4,
.card.card-outline-primary .card-header h5,
.card.card-outline-primary .card-header h6,
.card.card-outline-primary .card-header .card-title {
    color: var(--primary-color) !important;
}

.card.card-outline-primary .card-header::after {
    display: none;
}

/* ===== Small Card Variant ===== */
.card.card-sm .card-header {
    padding: 0.75rem 1rem !important;
}

.card.card-sm .card-header h1,
.card.card-sm .card-header h2,
.card.card-sm .card-header h3,
.card.card-sm .card-header h4,
.card.card-sm .card-header h5,
.card.card-sm .card-header h6,
.card.card-sm .card-header .card-title {
    font-size: 0.95rem !important;
}

.card.card-sm .card-body {
    padding: 1rem !important;
}

/* ===== Collapsed Card ===== */
.card.collapsed-card .card-body,
.card.collapsed-card .card-footer {
    display: none;
}

/* ===== Card with Stats ===== */
.card .card-stats {
    display: flex;
    justify-content: space-around;
    padding: 1rem 0;
    border-top: 1px solid #e2e8f0;
    margin-top: 1rem;
}

.card .card-stats .stat-item {
    text-align: center;
}

.card .card-stats .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.card .card-stats .stat-label {
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== Card Responsive ===== */
@media (max-width: 768px) {
    .card {
        border-radius: 12px !important;
    }

    .card .card-header,
    .card-header {
        padding: 1rem !important;
        border-radius: 12px 12px 0 0 !important;
        flex-direction: column;
        align-items: flex-start !important;
    }

    .card .card-header > *:last-child:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.card-title) {
        margin-left: 0 !important;
        margin-top: 0.5rem;
    }

    .card-body {
        padding: 1rem !important;
    }

    .card-footer {
        border-radius: 0 0 12px 12px !important;
    }
}

/* ===== Card Animation ===== */
@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card.animate-in {
    animation: cardFadeIn 0.4s ease-out;
}

/* Table inside Card adjustments */
.table-dark th {
    background-color: #343a40;
    border-color: #454d55;
}

.fw-bold {
    font-weight: 600 !important;
}

/* Action Button Styles - Consistent with Student Portal Theme */
.btn-view {
    background: #0092fa;
    color: #ffffff;
    border: 1px solid #0092fa;
}

.btn-view:hover {
    background: #1565c0;
    color: white;
    border-color: #1565c0;
}

.btn-edit {
    background: #00cf00;
    color: #ffffff;
    border: 1px solid #00cf00;
}

.btn-edit:hover {
    background: #2e7d32;
    color: white;
    border-color: #2e7d32;
}

.btn-delete {
    background: #f72a49;
    color: #ffffff;
    border: 1px solid #f72a49;
}

.btn-delete:hover {
    background: #c62828;
    color: white;
    border-color: #c62828;
}

/* Focus states for accessibility */
.btn-edit:focus, .btn-delete:focus, .btn-view:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ============================================
   MODERN PAGE HEADER & BREADCRUMB REDESIGN
   Premium styling with white background
   ============================================ */

/* Content Header Container */
.content-header {
    padding: 1rem !important;
    margin-bottom: 1.5rem;
}

/* Page Header - White Background with Dark Text */
.page-header {
    background: none;
    padding: 1rem;
    color: var(--primary-color) !important;
    margin-bottom: 0;
    position: relative;
    overflow: visible;
}

/* Title and Description Container */
.page-header .ph-title-and-description {
    position: relative;
    z-index: 1;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: var(--primary-color) !important;
    letter-spacing: -0.5px;
    text-shadow: none;
}

.page-subtitle {
    font-size: 0.95rem;
    opacity: 1;
    color: #666 !important;
    font-weight: 400;
    margin-bottom: 0;
}

.page-header p {
    opacity: 1;
    margin-bottom: 0;
    font-size: 0.95rem;
    color: #666 !important;
}

/* Action Buttons Container */
.page-header .ph-action-buttons {
    position: relative;
    z-index: 1;
    gap: 10px;
}

/* Breadcrumb Styling */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}

.breadcrumb-item {
    color: #666;
}

.breadcrumb-item a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--third-color);
}

.breadcrumb-item.active {
    color: var(--primary-color);
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #aaa;
    content: "›";
    font-size: 1.1rem;
    padding: 0 8px;
}

/* Dark Page Header Variant (for specific pages) */
.page-header.page-header-dark {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a0a5c 50%, #0d0035 100%);
    color: #fff !important;
    box-shadow: 0 8px 30px rgba(19, 0, 106, 0.25);
    border: none;
}

.page-header.page-header-dark::before {
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.page-header.page-header-dark .page-title {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.page-header.page-header-dark .page-subtitle,
.page-header.page-header-dark p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.page-header.page-header-dark .ph-action-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.page-header.page-header-dark .ph-action-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Page Header with Icon Support */
.page-header .page-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a0a5c 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin-right: 1rem;
    box-shadow: 0 4px 12px rgba(19, 0, 106, 0.25);
}

.page-header .page-icon i {
    color: #fff !important;
}

/* Mini Header Variant */
.page-header.page-header-mini {
    padding: 1rem 1.5rem;
    border-radius: 12px;
}

.page-header.page-header-mini .page-title {
    font-size: 1.25rem;
}

.page-header.page-header-mini .page-subtitle {
    font-size: 0.85rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .page-header {
        padding: 1.25rem;
        border-radius: 12px;
    }

    .page-header .d-flex {
        flex-direction: column;
        gap: 1rem;
    }

    .page-header .ph-action-buttons {
        width: 100%;
        justify-content: flex-start !important;
    }

    .page-title {
        font-size: 1.35rem;
    }

    .page-subtitle {
        font-size: 0.85rem;
    }

    .page-header::before {
        display: none;
    }
}

/* Animation on Page Load */
@keyframes headerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-header {
    animation: headerSlideIn 0.4s ease-out;
}

/* Modern Card Design */
.modern-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    border: none;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}

.modern-card:hover {
    box-shadow: var(--hover-shadow);
}

/* Filter Tabs - Complete Redesign */
.employee-tabs {
    background: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    margin-bottom: 2rem;
}

.nav-tabs-modern {
    border: none;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.nav-tabs-modern .nav-item {
    flex: 1;
}

.nav-tabs-modern .nav-link {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    color: #6c757d;
    font-weight: 600;
    padding: 1rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.nav-tabs-modern .nav-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--primary-gradient);
    transition: left 0.3s ease;
    z-index: -1;
}

.nav-tabs-modern .nav-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    color: #495057;
    border-color: #dee2e6;
}

.nav-tabs-modern .nav-link.active {
    background: var(--success-gradient);
    border-color: transparent;
    border: none;
    color: white;
}

.nav-tabs-modern .nav-link.active::before {
    left: 0;
}

.tab-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    padding: 0.25rem 0.5rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.5rem;
    min-width: 25px;
    text-align: center;
}

.nav-tabs-modern .nav-link:not(.active) .tab-badge {
    background: #e9ecef;
    color: #6c757d;
}

.tab-icon {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    display: inline-block;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-modern {
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-modern-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 15px rgba(46, 28, 123, 0.3);
}

.btn-modern-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 28, 123, 0.4);
    color: white;
    background-color: var(--third-color) !important;
}

.btn-modern-info {
    background: var(--info-gradient);
    color: #fff;
    box-shadow: 0 4px 15px rgba(116, 185, 255, 0.3);
}

.btn-modern-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(116, 185, 255, 0.4);
    color: #ffffff;
    background: #0984e3 !important;
}

/* Search Section */
.search-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.search-input-group {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
}

.search-input {
    border-radius: 50px;
    border: 2px solid #e9ecef;
    padding: 0.75rem 3rem 0.75rem 1.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
}

.search-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    outline: none;
}

.search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-gradient);
    border: none;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

.search-btn:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Employee Table Improvements */
.employee-table-container {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

/* Action Buttons */
.action-btn {
    border: none;
    border-radius: 8px;
    padding: 0.5rem;
    margin: 0 0.25rem;
    transition: all 0.3s ease;
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-view-modern {
    background: linear-gradient(135deg, #0b9dce 0%, #2f80ed 100%);
    color: white;
}

.btn-edit-modern {
    background: linear-gradient(135deg, #17c200 0%, #19547b 100%);
    color: white;
}

.btn-delete-modern {
    background: linear-gradient(135deg, #ff4b4b 0%, #ee5a24 100%);
    color: white;
}

.action-btn:hover {
    transform: translateY(-2px) scale(1.1);
}

.btn-view-modern:hover {
    background: linear-gradient(135deg, #0b9dce 0%, #2f80ed 100%) !important;
}

.btn-edit-modern:hover {
    background: linear-gradient(135deg, #17c200 0%, #19547b 100%);
    color: white;
}

.btn-delete-modern:hover {
    background: linear-gradient(135deg, #ff4b4b 0%, #ee5a24 100%);
}


/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

.empty-state-icon {
    font-size: 4rem;
    color: #e9ecef;
    margin-bottom: 1.5rem;
}

.empty-state h3 {
    color: #6c757d;
    margin-bottom: 1rem;
    font-weight: 600;
}

.empty-state p {
    color: #adb5bd;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-tabs-modern {
        flex-direction: column;
    }

    .nav-tabs-modern .nav-link {
        margin-bottom: 0.5rem;
    }

    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input-group {
        max-width: 100%;
    }
}

/* Modal Improvements */
.modal-modern .modal-content {
    border-radius: var(--border-radius);
    border: none;
    box-shadow: var(--hover-shadow);
}

.modal-modern .modal-header {
    background: var(--primary-gradient);
    color: white;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border: none;
}

.modal-modern .modal-header .btn-close {
    filter: invert(1);
}

/* Import type debugging */
#enhanced_info {
    border-left: 4px solid #007bff;
    border-radius: 8px;
}

#standard_info {
    border-left: 4px solid #28a745;
    border-radius: 8px;
}

/* Profile Picture - Student Portal Theme */
.profile-picture {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--hairline-color);
    transition: all 0.3s ease;
}

.profile-picture:hover {
    transform: scale(1.1);
    border-color: var(--primary-color);
}

.profile-initials {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    border: 3px solid var(--hairline-color);
    transition: all 0.3s ease;
}

.profile-initials:hover {
    transform: scale(1.1);
    border-color: var(--primary-color);
}

/* Status Badges */
.status-badge-modern {
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-active {
    background: linear-gradient(135deg, #00e007 0%, #26ae00 100%);
    color: white;
    font-weight: 500;
}

.status-terminated {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    color: white;
}

.status-inactive {
    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
    color: white;
}

.status-on-leave {
    background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
    color: white;
}

.status-suspended {
    background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
    color: white;
}

/* TEMPORARILY DISABLED table-modern styles */
@media not all {
.table-modern {
    margin-bottom: 0;
    --bs-table-color: #212529;
    --bs-table-color-type: #212529;
    --bs-table-color-state: #212529;
    --bs-table-striped-color: #212529;
    --bs-table-hover-color: #212529;
    --bs-table-active-color: #212529;
}

.table-modern thead th {
    border: none;
    font-weight: 700;
    color: #212529 !important;
    padding: 1.25rem 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-modern tbody tr {
    transition: all 0.3s ease;
    border: none;
}

.table-modern tbody tr:hover {
    background: linear-gradient(135deg,
            #f8f9fa 0%,
            rgba(102, 126, 234, 0.05) 100%);
    transform: scale(1.01);
}

.table-modern td,
.table-modern tbody td,
.table-modern > :not(caption) > * > * {
    border: none;
    padding: 1.25rem 1rem;
    vertical-align: middle;
    color: #212529 !important;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}
} /* END @media not all — table-modern */

/* Employee blades styles */
.employee-profile-card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.employee-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 20px auto;
}

.info-label {
    font-weight: 600;
    color: #5a5c69;
    margin-bottom: 0.25rem;
}

.info-value {
    color: #3a3b45;
    margin-bottom: 1rem;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* .section-title {
    color: #151f3f;
    border-bottom: 2px solid #df4e4e;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
} */
.status-badge {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.quick-actions .btn {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.delivery-stats {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.stat-card {
    text-align: center;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.delivery-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

.progress {
    height: 8px;
    border-radius: 10px;
}

.employee-status-badge {
    margin-top: 1rem;
}

.quick-contact-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.contact-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Small Button Styles - Global */
.btn-xs {
    padding: 0.15rem 0.35rem;
    font-size: 0.75rem;
    line-height: 1.35;
    border-radius: 0.25rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    transition: all 0.15s ease-in-out;
}

/* Small button variants maintaining original styling but smaller size */
.btn-xs.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-xs.btn-primary:hover,
.btn-xs.btn-primary:focus {
    background-color: var(--student-primary-dark);
    border-color: var(--student-primary-dark);
    color: white;
    box-shadow: 0 2px 6px rgba(46, 28, 123, 0.3);
    transform: translateY(-1px);
}

.btn-xs.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

.btn-xs.btn-secondary:hover,
.btn-xs.btn-secondary:focus {
    background-color: #6B0000;
    border-color: #6B0000;
    color: white;
    box-shadow: 0 2px 6px rgba(139, 0, 0, 0.3);
    transform: translateY(-1px);
}

.btn-xs.btn-success {
    background-color: var(--student-success);
    border-color: var(--student-success);
    color: white;
}

.btn-xs.btn-success:hover,
.btn-xs.btn-success:focus {
    background-color: #059669;
    border-color: #059669;
    color: white;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.btn-xs.btn-danger {
    background-color: var(--delete-button-bg);
    border-color: var(--delete-button-bg);
    color: white;
}

.btn-xs.btn-danger:hover,
.btn-xs.btn-danger:focus {
    background-color: var(--delete-button-hover-bg);
    border-color: var(--delete-button-hover-bg);
    color: white;
    box-shadow: 0 2px 6px rgba(186, 33, 33, 0.3);
    transform: translateY(-1px);
}

.btn-xs.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.btn-xs.btn-warning:hover,
.btn-xs.btn-warning:focus {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #212529;
    box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3);
    transform: translateY(-1px);
}

.btn-xs.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: white;
}

.btn-xs.btn-info:hover,
.btn-xs.btn-info:focus {
    background-color: #138496;
    border-color: #117a8b;
    color: white;
    box-shadow: 0 2px 6px rgba(23, 162, 184, 0.3);
    transform: translateY(-1px);
}

.btn-xs.btn-light {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: #495057;
}

.btn-xs.btn-light:hover,
.btn-xs.btn-light:focus {
    background-color: #e2e6ea;
    border-color: #dae0e5;
    color: #495057;
    box-shadow: 0 2px 6px rgba(248, 249, 250, 0.3);
    transform: translateY(-1px);
}

.btn-xs.btn-dark {
    background-color: #343a40;
    border-color: #343a40;
    color: white;
}

.btn-xs.btn-dark:hover,
.btn-xs.btn-dark:focus {
    background-color: #23272b;
    border-color: #1d2124;
    color: white;
    box-shadow: 0 2px 6px rgba(52, 58, 64, 0.3);
    transform: translateY(-1px);
}

/* Outline variants for small buttons */
.btn-xs.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: transparent;
}

.btn-xs.btn-outline-primary:hover,
.btn-xs.btn-outline-primary:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 6px rgba(46, 28, 123, 0.3);
    transform: translateY(-1px);
}

.btn-xs.btn-outline-secondary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    background-color: transparent;
}

.btn-xs.btn-outline-secondary:hover,
.btn-xs.btn-outline-secondary:focus {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
    box-shadow: 0 2px 6px rgba(139, 0, 0, 0.3);
    transform: translateY(-1px);
}

/* Small button icon spacing */
.btn-xs i {
    font-size: 0.7rem;
    margin-right: 0.25rem;
}

.btn-xs i:only-child {
    margin-right: 0;
}

/* Small button group styling */
.btn-group-xs>.btn,
.btn-group-vertical-xs>.btn {
    padding: 0.15rem 0.35rem;
    font-size: 0.75rem;
    line-height: 1.35;
    border-radius: 0.25rem;
}

/* Employee Show Styles */
/* Modern Employee Profile Styles - Student Portal Theme */
.employee-header-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--student-primary-dark) 100%);
    position: relative;
    padding: 1rem 0;
    margin: 8px;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
}

.header-content {
    position: relative;
    z-index: 2;
    padding: 0 2rem;
}

.employee-avatar-large {
    position: relative;
    display: inline-block;
}

.avatar-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    border: 4px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.avatar-status {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: #10b981;
    border: 3px solid white;
    border-radius: 50%;
}

.employee-name {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin: 0px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.employee-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    margin: 0.5rem 0;
    font-weight: 500;
}

.employee-department {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
}

.header-actions {
    display: flex;
    align-items: flex-start;
}

.main-header .dropdown-menu {
    background: white;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    margin-top: 0.5rem;
}

.main-header .dropdown-item {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    margin: 0.25rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: #f8fafc;
    color: #1f2937;
}

.employee-content-section {
    padding: 0 1rem 1rem 1rem;
}

.stat-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    height: 100%;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.stat-card .stat-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    width: 60px;
    height: 60px;
    border-radius: 1rem;
    font-size: 1.5rem;
    color: white;
    margin: 1rem auto;
}

.stat-info h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
}

.stat-info p {
    color: #6b7280;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.modern-tabs {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.tab-nav {
    display: flex;
    background: #f8fafc;
    overflow-x: auto;
}

.tab-nav.vertical {
    flex-direction: column;
    border-right: 1px solid #e5e7eb;
    border-bottom: none;
    min-height: 400px;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    color: #6b7280;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    text-align: left;
    width: 100%;
    justify-content: flex-start;
}

.tab-nav.vertical .tab-btn {
    border-bottom: none;
    border-right: 3px solid transparent;
    border-radius: 0;
    margin-bottom: 2px;
}

.tab-btn:hover {
    color: #374151;
    background: rgba(99, 102, 241, 0.05);
}

.tab-btn.active {
    color: #6366f1;
    background: white;
    border-bottom-color: #6366f1;
}

.tab-nav.vertical .tab-btn.active {
    border-bottom-color: transparent;
    border-right-color: #6366f1;
    background: white;
    position: relative;
}

.tab-nav.vertical .tab-btn.active::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: white;
}

.tab-content {
    padding: 2rem;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.info-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.info-card .card-header {
    background: #f8fafc;
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.info-card .card-header h3 {
    margin: 0;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.info-card .card-body {
    padding: 1.5rem;
}

.info-item {
    margin-bottom: 1.5rem;
}

.info-item label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.info-item value {
    display: block;
    color: #1f2937;
    font-size: 1rem;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.team-member-card {
    background: #f8fafc;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.team-member-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.team-member-avatar {
    text-align: center;
    margin-bottom: 1rem;
}

.team-member-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.team-member-avatar .avatar-placeholder {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 1.5rem;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.team-member-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-member-info h4 {
    margin: 0 0 0.5rem 0;
    color: #1f2937;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.team-member-info p {
    margin: 0.25rem 0;
    color: #6b7280;
    font-size: 0.9rem;
    text-align: center;
}

.team-member-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    justify-content: center;
}

.team-member-actions .view-profile-btn,
.team-member-actions .contact-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.view-profile-btn {
    background: #6366f1;
    color: white;
}

.view-profile-btn:hover {
    background: #4f46e5;
    color: white;
    transform: translateY(-1px);
}

.team-member-actions .contact-btn {
    background: #e5e7eb;
    color: #374151;
}

.team-member-actions .contact-btn:hover {
    background: #d1d5db;
    color: #1f2937;
    transform: translateY(-1px);
}

/* View Toggle Buttons */
.view-toggle-buttons {
    display: flex;
    gap: 0.5rem;
    background: #f1f5f9;
    padding: 0.25rem;
    border-radius: 0.5rem;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn:hover {
    color: #334155;
    background: rgba(99, 102, 241, 0.1);
}

.view-toggle-btn.active {
    background: white;
    color: #6366f1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Team View Containers */
.team-view {
    display: none;
}

.team-view.active {
    display: block;
}

/* Org Chart Styles */
.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    min-height: 400px;
}

.org-chart-manager {
    margin-bottom: 3rem;
}

.org-node {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    min-width: 200px;
    transition: all 0.3s ease;
    position: relative;
}

.org-node:hover {
    border-color: #6366f1;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.manager-node {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
}

.manager-node:hover {
    border-color: #059669;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.15);
}

.report-node {
    border-color: #6366f1;
    background: linear-gradient(135deg, #eef2ff 0%, #f1f5f9 100%);
}

.org-node-avatar {
    margin-bottom: 0.75rem;
}

.org-node-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.org-node-avatar .avatar-placeholder {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.org-node-avatar .avatar-placeholder.manager {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.org-node-avatar .avatar-placeholder.report {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.org-node-info h4,
.org-node-info h5 {
    margin: 0 0 0.25rem 0;
    color: #1f2937;
    font-weight: 600;
}

.org-node-info h4 {
    font-size: 1.1rem;
}

.org-node-info h5 {
    font-size: 1rem;
}

.org-node-info p {
    margin: 0.125rem 0;
    color: #6b7280;
    font-size: 0.8125rem;
}

.manager-label {
    color: #10b981 !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.org-node-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.75rem;
}

.org-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.org-action-btn.view-btn {
    background: #6366f1;
    color: white;
}

.org-action-btn.view-btn:hover {
    background: #4f46e5;
    color: white;
    transform: scale(1.1);
}

.org-action-btn.email-btn {
    background: #10b981;
    color: white;
}

.org-action-btn.email-btn:hover {
    background: #059669;
    color: white;
    transform: scale(1.1);
}

/* Connection Lines */
.org-connection {
    position: relative;
    height: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

.connection-line {
    background: #d1d5db;
}

.connection-line.vertical {
    width: 2px;
    height: 2rem;
}

.connection-line.horizontal {
    position: absolute;
    top: 50%;
    height: 2px;
    width: 60%;
    transform: translateY(-50%);
}

.connection-line.vertical-short {
    width: 2px;
    height: 1.5rem;
    background: #d1d5db;
    margin: 0 auto 0.5rem auto;
}

.org-chart-reports {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    max-width: 100%;
}

.org-node-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Responsive Design */
@media (max-width: 991px) {
    .tab-nav.vertical {
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        min-height: auto;
        overflow-x: auto;
    }

    .tab-nav.vertical .tab-btn {
        border-right: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .tab-nav.vertical .tab-btn.active {
        border-right-color: transparent;
        border-bottom-color: #6366f1;
    }

    .tab-nav.vertical .tab-btn.active::after {
        display: none;
    }
}

@media (max-width: 992px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .employee-header-section {
        padding: 2rem 0;
        margin: -1rem -1rem 1.5rem -1rem;
    }

    .header-content {
        padding: 0 1rem;
    }

    .employee-basic-info .employee-name {
        font-size: 2rem;
    }

    .quick-contact-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .action-buttons {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tab-content {
        padding: 1rem;
    }

    .employee-content-section {
        padding: 0 1rem 1rem 1rem;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Org Chart Responsive */
    .view-toggle-buttons {
        flex-direction: column;
        gap: 0.25rem;
    }

    .view-toggle-btn {
        justify-content: center;
        padding: 0.75rem;
    }

    .org-chart {
        padding: 1rem 0.5rem;
    }

    .org-chart-reports {
        gap: 1rem;
    }

    .org-node {
        min-width: 180px;
        padding: 0.75rem;
    }

    .connection-line.horizontal {
        width: 80%;
    }
}

@media (max-width: 576px) {
    .d-flex.justify-content-between.align-items-start {
        flex-direction: column;
        gap: 1.5rem;
    }

    .header-actions {
        width: 100%;
    }

    .action-buttons {
        width: 100%;
        justify-content: center;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile Org Chart */
    .org-chart-reports {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .org-node {
        min-width: 160px;
        padding: 0.5rem;
    }

    .org-node-avatar img,
    .org-node-avatar .avatar-placeholder {
        width: 50px;
        height: 50px;
    }

    .org-node-avatar .avatar-placeholder {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .d-flex.justify-content-between.align-items-start {
        flex-direction: column;
        gap: 1.5rem;
    }

    .header-actions {
        width: 100%;
    }

    .action-buttons {
        width: 100%;
        justify-content: center;
    }
}

/* --- Global Tab Styles - Student Portal Theme --- */
.nav-tabs {
    display: flex;
    border-bottom: 2px solid var(--primary-color);
    background: var(--body-bg);
    margin-bottom: 1rem;
}

.nav-tabs .nav-link {
    color: var(--primary-color);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    margin-right: 0.25rem;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: var(--font-family-primary);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus {
    color: #fff;
    background: var(--primary-color);
    border-bottom: 3px solid var(--student-warning);
    outline: none;
}

.nav-tabs .nav-link:hover {
    color: #fff;
    background: var(--primary-color);
    border-bottom: 3px solid var(--student-warning);
    outline: none;
}

.nav-tabs .nav-link.active {
    background: var(--primary-color) !important;
    color: #fff;
    border-bottom: 3px solid var(--student-warning);
}

.nav-tabs .nav-link.active:hover {
    background: var(--primary-color) !important;
    border-bottom: 3px solid var(--student-warning);
}

.tab-content {
    background: var(--body-bg);
    border: 1px solid var(--hairline-color);
    border-top: none;
    padding: 1.5rem;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 2px 8px rgba(46, 28, 123, 0.04);
}

/* Course Assignment Style */
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -22px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #e9ecef;
}

.timeline-content {
    padding-left: 10px;
}

.timeline-title {
    margin-bottom: 5px;
    font-size: 0.875rem;
    font-weight: 600;
}

.timeline-text {
    margin-bottom: 3px;
    font-size: 0.875rem;
    color: #6c757d;
}

/* ============================================
   FLOATING ACTION BUTTONS & AI SUPPORT
   Premium floating buttons with chat modal
   ============================================ */

/* Floating Action Buttons */
.floating-action-buttons {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1050;
}

.fab-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.fab-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.fab-btn:active {
    transform: scale(0.95);
}

.fab-ai {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.fab-ai:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.fab-intro {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.fab-intro:hover {
    background: linear-gradient(135deg, #38ef7d 0%, #11998e 100%);
}

.fab-tooltip {
    position: absolute;
    right: 70px;
    background: #333;
    color: #fff;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.fab-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #333;
}

.fab-btn:hover .fab-tooltip {
    opacity: 1;
    visibility: visible;
    right: 65px;
}

/* AI Chat Modal */
.ai-chat-modal {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 380px;
    max-height: 550px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1060;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.ai-chat-modal.active {
    display: flex;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-chat-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.ai-chat-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ai-chat-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.ai-chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    max-height: 380px;
    background: #f8f9fa;
}

.ai-message {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.ai-message.user {
    flex-direction: row-reverse;
}

.ai-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user .ai-avatar {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.ai-message-content {
    background: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    max-width: 85%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.user .ai-message-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.ai-message-content p {
    margin: 0;
    line-height: 1.5;
}

.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ai-suggestion-btn {
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-suggestion-btn:hover {
    background: #667eea;
    color: #fff;
    border-color: #667eea;
}

.ai-chat-footer {
    padding: 15px 20px;
    background: #fff;
    border-top: 1px solid #eee;
}

.ai-input-group {
    display: flex;
    gap: 10px;
}

.ai-chat-input {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    padding: 12px 18px;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

.ai-chat-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.ai-send-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ai-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 8px 0;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: #667eea;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.6; }
    40% { transform: scale(1); opacity: 1; }
}

/* Intro.js Custom Styles */
.introjs-tooltip {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    max-width: 350px !important;
}

.introjs-tooltiptext {
    padding: 15px 20px !important;
}

.introjs-button {
    border-radius: 6px !important;
    text-shadow: none !important;
    font-weight: 500 !important;
}

.introjs-button.introjs-nextbutton {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    border: none !important;
    color: #fff !important;
}

.introjs-button.introjs-prevbutton {
    background: #f0f0f0 !important;
    border: none !important;
    color: #333 !important;
}

.introjs-helperLayer {
    border-radius: 8px !important;
}

.introjs-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

.introjs-arrow.top {
    border-bottom-color: #fff !important;
}

.introjs-arrow.bottom {
    border-top-color: #fff !important;
}

.introjs-progress {
    background-color: #e0e0e0 !important;
}

.introjs-progressbar {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
}

/* Floating Buttons Responsive */
@media (max-width: 480px) {
    .floating-action-buttons {
        bottom: 20px;
        right: 20px;
    }

    .fab-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .ai-chat-modal {
        width: calc(100vw - 20px);
        right: 10px;
        bottom: 90px;
        max-height: 70vh;
    }
}
/* Branch Styles */
.branch-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    border: 1px solid #e9ecef;
    margin-bottom: 32px;
}
.branch-header {
    background: #f1f3f5;
    border-radius: 12px 12px 0 0;
    padding: 24px 32px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.branch-header h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
}
.info-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    border: 1px solid #e9ecef;
}
.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    gap: 8px;
}
.info-label {
    min-width: 120px;
    font-weight: 600;
    color: #495057;
    margin-right: 12px;
    font-size: 1.05rem;
}
.info-value {
    flex: 1;
    color: #222;
    font-size: 1.05rem;
    word-break: break-word;
}
.description-text {
    color: #666;
    font-size: 0.97rem;
    background: #f1f3f5;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 4px;
}
.section-title {
    color: #000 !important;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
    font-size: 1.18rem;
    letter-spacing: 0.02em;
}
.usage-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}
.stat-item {
    background: #e9ecef;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.97rem;
    color: #333;
    font-weight: 500;
}
.related-records-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    border: 1px solid #e9ecef;
}
.alert {
    border-radius: 6px;
    font-size: 0.98rem;
    margin-bottom: 12px;
    padding: 10px 18px;
    font-weight: 500;
}
.actions-section {
    border-top: 2px solid #e9ecef;
    padding-top: 18px;
    margin-top: 24px;
}
.branch-logo {
    max-width: 120px;
    max-height: 120px;
    border-radius: 8px;
    border: 1px solid #eee;
    background: #fff;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .info-section {
        padding: 12px;
    }
    .section-title {
        font-size: 1rem;
    }
    .info-label {
        min-width: 80px;
    }
    .card-body {
        padding: 12px;
    }
    .card-header {
        padding: 12px 8px;
    }
}
/* Branch Admin Styles */

/* =============================================================================
   ADMISSION PORTAL - PUBLIC WELCOME PAGE
   Page: public/admission/welcome.blade.php
   Description: Styles for the public-facing admission welcome/landing page
   ============================================================================= */

/* ---------------------------------
   Base & Reset
   --------------------------------- */
.admission-welcome-page {
    font-family: 'Georgia', 'Times New Roman', serif;
    background: linear-gradient(135deg, #f5f1e8 0%, #e8dcc8 100%);
    min-height: 100vh;
    padding: 20px 0;
    margin: 0;
}

.admission-wrapper {
    max-width: 900px;
    margin: 40px auto;
    background: white;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    overflow: hidden;
}

/* ---------------------------------
   Letterhead Section
   --------------------------------- */
.letterhead-section {
    background: linear-gradient(135deg, #2E1C7B 0%, #5B3BA0 100%);
    color: white;
    padding: 35px 30px;
    text-align: center;
    border-bottom: 6px solid #D4A574;
    position: relative;
}

.letterhead-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><defs><pattern id="pattern" x="0" y="0" width="200" height="120" patternUnits="userSpaceOnUse"><circle cx="100" cy="60" r="50" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="1200" height="120" fill="url(%23pattern)"/></svg>');
    opacity: 0.5;
}

.letterhead-content {
    position: relative;
    z-index: 1;
}

.logo-section {
    margin-bottom: 20px;
}

.logo-section img {
    height: 90px;
    width: auto;
    margin-bottom: 15px;
}

.institution-name {
    font-size: 2.2em;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.letterhead-info {
    font-size: 0.95em;
    line-height: 1.8;
    color: #e8dcc8;
}

.letterhead-info strong {
    color: white;
    display: block;
    font-size: 1.05em;
    margin-bottom: 5px;
}

.letterhead-motto {
    font-style: italic;
    font-size: 0.95em;
    margin-top: 15px;
    color: #D4A574;
    letter-spacing: 0.5px;
}

/* ---------------------------------
   Contact Information Bar
   --------------------------------- */
.contact-info-bar {
    background: #f5f1e8;
    padding: 12px 30px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    font-size: 0.85em;
    color: #555;
}

.contact-info-bar span {
    margin: 0 20px;
    display: inline-block;
}

.contact-info-bar a {
    color: #2E1C7B;
    text-decoration: none;
}

.contact-info-bar a:hover {
    text-decoration: underline;
}

/* ---------------------------------
   Main Content Area
   --------------------------------- */
.admission-content {
    padding: 50px 40px;
}

.welcome-heading {
    text-align: center;
    margin-bottom: 45px;
}

.welcome-heading h2 {
    font-size: 2em;
    color: #2E1C7B;
    margin-bottom: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.welcome-heading .tagline {
    font-size: 1.1em;
    color: #666;
    font-style: italic;
    letter-spacing: 0.3px;
}

/* ---------------------------------
   Options Grid (New Application / Check Status)
   --------------------------------- */
.options-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    margin-bottom: 40px;
}

.option-card {
    background: #f9f7f3;
    border: 2px solid #e0d5c7;
    border-radius: 8px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.option-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2E1C7B, #D4A574);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.option-card:hover {
    border-color: #2E1C7B;
    box-shadow: 0 12px 35px rgba(46, 28, 123, 0.15);
    transform: translateY(-8px);
}

.option-card:hover::before {
    transform: scaleX(1);
}

.card-icon {
    font-size: 3.5em;
    margin-bottom: 20px;
    display: block;
}

.option-card h3 {
    font-size: 1.5em;
    color: #2E1C7B;
    margin-bottom: 15px;
    font-weight: bold;
}

.option-card p {
    color: #666;
    font-size: 0.95em;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* ---------------------------------
   Submit / Action Button
   --------------------------------- */
.btn-submit {
    display: inline-block;
    padding: 13px 35px;
    background: linear-gradient(135deg, #2E1C7B 0%, #5B3BA0 100%);
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Georgia', serif;
}

.btn-submit:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(46, 28, 123, 0.3);
    color: white;
    text-decoration: none;
}

.btn-submit:active {
    transform: scale(0.98);
}

/* ---------------------------------
   Section Divider
   --------------------------------- */
.section-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4A574, transparent);
    margin: 35px 0;
}

/* ---------------------------------
   Information Panels
   --------------------------------- */
.info-panel {
    background: #f5f1e8;
    border-left: 4px solid #2E1C7B;
    padding: 25px;
    border-radius: 5px;
    margin: 30px 0;
}

.info-panel h4 {
    color: #2E1C7B;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 1.05em;
}

.info-panel ul {
    list-style: none;
    color: #666;
    font-size: 0.95em;
    line-height: 1.9;
}

.info-panel li::before {
    content: "✓ ";
    color: #D4A574;
    font-weight: bold;
    margin-right: 10px;
}

/* ---------------------------------
   Application Search Card
   --------------------------------- */
.search-card {
    background: white;
    border: 2px solid #e0d5c7;
    border-radius: 8px;
    padding: 30px;
    margin-top: 25px;
}

.search-card h4 {
    color: #2E1C7B;
    margin-bottom: 18px;
    font-weight: bold;
    font-size: 1.1em;
}

.search-form {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.search-form input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #e0d5c7;
    border-radius: 5px;
    font-size: 0.95em;
    font-family: 'Georgia', serif;
    transition: all 0.3s ease;
}

.search-form input:focus {
    outline: none;
    border-color: #2E1C7B;
    box-shadow: 0 0 0 3px rgba(46, 28, 123, 0.1);
    background: #fff;
}

.search-form button {
    padding: 12px 30px;
    background: linear-gradient(135deg, #2E1C7B 0%, #5B3BA0 100%);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    transition: all 0.3s ease;
    font-family: 'Georgia', serif;
}

.search-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(46, 28, 123, 0.25);
}

.search-help {
    background: #f0f8ff;
    border-left: 3px solid #5B3BA0;
    padding: 15px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 0.9em;
    color: #555;
}

.search-help strong {
    color: #2E1C7B;
    display: block;
    margin-bottom: 5px;
}

/* ---------------------------------
   Footer
   --------------------------------- */
.admission-footer {
    background: linear-gradient(135deg, #2E1C7B 0%, #5B3BA0 100%);
    color: white;
    padding: 30px;
    text-align: center;
    border-top: 6px solid #D4A574;
}

.footer-motto {
    font-size: 1.15em;
    font-style: italic;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.footer-text {
    font-size: 0.85em;
    color: #e8dcc8;
    margin: 0;
}

/* ---------------------------------
   Responsive - Tablet (max-width: 768px)
   --------------------------------- */
@media (max-width: 768px) {
    .admission-wrapper {
        margin: 20px;
        border-radius: 8px;
    }

    .letterhead-section {
        padding: 25px 20px;
    }

    .institution-name {
        font-size: 1.6em;
    }

    .logo-section img {
        height: 70px;
    }

    .admission-content {
        padding: 30px 20px;
    }

    .options-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .welcome-heading h2 {
        font-size: 1.6em;
    }

    .contact-info-bar span {
        display: block;
        margin: 5px 0;
    }
}

/* ---------------------------------
   Responsive - Mobile (max-width: 576px)
   --------------------------------- */
@media (max-width: 576px) {
    .admission-wrapper {
        margin: 10px;
        border-radius: 5px;
    }

    .admission-content {
        padding: 20px 15px;
    }

    .letterhead-section {
        padding: 20px 15px;
    }

    .institution-name {
        font-size: 1.3em;
        letter-spacing: 1px;
    }

    .option-card {
        padding: 25px 20px;
    }

    .card-icon {
        font-size: 2.5em;
    }

    .search-form {
        flex-direction: column;
    }

    .search-form button {
        width: 100%;
    }
}

/* ---------------------------------
   Animations
   --------------------------------- */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.admission-wrapper {
    animation: slideDown 0.5s ease;
}

.welcome-heading {
    animation: fadeIn 0.6s ease 0.2s both;
}

.option-card {
    animation: fadeIn 0.6s ease 0.3s both;
}

.option-card:nth-child(2) {
    animation-delay: 0.4s;
}