/* resources/css/custom-theme.css */

/* -------------------- COMMON STYLES -------------------- */
.auth-left-background {
    position: relative;
    overflow: hidden;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-left-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #121212;
    background: linear-gradient(135deg,
            #121212 25%,
            #1a1a1a 25%,
            #1a1a1a 50%,
            #121212 50%,
            #121212 75%,
            #1a1a1a 75%,
            #1a1a1a);
    background-size: 40px 40px;
    animation: move 4s linear infinite;
    z-index: -1;
}

@keyframes move {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 40px 40px;
    }
}

/* Transition effects for theme elements */
.main-sidebar,
.navbar,
.card,
.card-header,
.card-body,
.card-footer,
.content-wrapper {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* -------------------- DARK THEME -------------------- */
/* Base color definitions for dark theme */
:root {
    --darktheme-bg: #222831;
    /* Deep dark gray as the primary background */
    --darktheme-bg-alt: #393E46;
    /* Slightly lighter gray for alternate sections */
    --darktheme-text: #EEEEEE;
    /* Very light gray for primary text, ensuring good contrast */
    --darktheme-border: rgba(57, 62, 70, 0.6);
    /* Soft borders for elements */
    --darktheme-active: #00ADB5;
    /* Vibrant teal for active and highlight elements */
    --darktheme-btn-bg: #4b515b;
    /* Darker button background to match alt sections */
    --darktheme-btn-hover-bg: #00ADB5;
    /* Teal for button hover for a pop of color */
    --darktheme-input-bg: #4b515b;
    /* Input fields match alternate darker sections */
    --darktheme-input-border: #393E46;
    /* Teal borders for inputs for consistency and pop */
    --darktheme-header-image: url('/img/background/night.webp');
    /* Adjust with your own image */
}

/* Logout Button Styles */
.darktheme .logout-button {
    color: var(--darktheme-text) !important;
}

.darktheme .logout-button:hover {
    color: var(--darktheme-active) !important;
}

/* Applying the background image for dark theme */
.darktheme .header-image {
    background-image: var(--darktheme-header-image);
    height: 200px;
    /* Adjust based on the size of your header */
    width: 100%;
    background-size: cover;
    /* or 'contain' based on your preference */
    background-position: center;
    /* Adjust if you want it aligned differently */
    background-repeat: no-repeat;
    /* Prevents the image from repeating */
}

/* Adjustments for content-wrapper to fill screen without gaps */
.darktheme,
.darktheme body,
.darktheme .content-wrapper {
    min-height: 100vh !important;
    background-color: var(--darktheme-bg) !important;
    display: flex;
    flex-direction: column;
}

/* General styles for dark theme components */
.darktheme .main-sidebar,
.darktheme .navbar,
.darktheme .card,
.darktheme .card-body,
.darktheme .card-footer,
.darktheme .modal-content {
    background-color: var(--darktheme-bg) !important;
}

.darktheme .text,
.darktheme .nav-link,
.darktheme .nav-header,
.darktheme .icon,
.darktheme .content-wrapper {
    color: var(--darktheme-text) !important;
}

.darktheme .main-header.navbar {
    border-bottom: 1px solid var(--darktheme-border) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Nav-link active states */
.darktheme .nav-link.active,
.darktheme .nav-link:active {
    color: var(--darktheme-text) !important;
    background-color: var(--darktheme-active) !important;
}

/* Button Styles */
.darktheme .btn:not(.btn-success):not(.btn-danger),
.darktheme .btn-sidebar {
    background-color: var(--darktheme-btn-bg) !important;
    color: var(--darktheme-text) !important;
    border: 1px solid var(--darktheme-border) !important;
}

.darktheme .btn:not(.btn-success):not(.btn-danger),
.darktheme .btn-sidebar:hover {
    background-color: var(--darktheme-btn-hover-bg) !important;
}

/* Form control styles */
.darktheme .form-control,
.darktheme .form-control-sidebar {
    background-color: var(--darktheme-input-bg) !important;
    color: var(--darktheme-text) !important;
    border: 1px solid var(--darktheme-input-border) !important;
}

/* Table Styling */
.darktheme #karyawanTable {
    color: var(--darktheme-text) !important;
    border-collapse: collapse;
    width: 100%;
}

.darktheme .card-header,
.darktheme #karyawanTable thead {
    background-color: var(--darktheme-bg-alt) !important;
}

.darktheme #karyawanTable thead th {
    color: var(--darktheme-text) !important;
    border-bottom: 1px solid var(--darktheme-border) !important;
    padding: 12px 15px;
    text-align: left;
}

.darktheme #karyawanTable tbody td {
    border-bottom: 1px solid var(--darktheme-border) !important;
    padding: 10px 15px;
    text-align: left;
    background-color: var(--darktheme-bg) !important;
    color: var(--darktheme-text) !important;
}

.darktheme #karyawanTable tbody tr:hover {
    background-color: var(--darktheme-active) !important;
}

.darktheme #karyawanTable tfoot {
    background-color: var(--darktheme-bg-alt) !important;
    color: var(--darktheme-text) !important;
}

.darktheme #karyawanTable tfoot tr th {
    padding: 12px 15px;
    border-top: 1px solid var(--darktheme-border) !important;
}

/* Pagination and Form Elements in DataTables Styling */
.darktheme .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--darktheme-text) !important;
    border: 1px solid transparent !important;
    background-color: var(--darktheme-btn-bg) !important;
    margin-right: 2px;
}

.darktheme .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--darktheme-btn-hover-bg) !important;
    border-color: var(--darktheme-active) !important;
}

.darktheme .dataTables_wrapper .dataTables_length select,
.darktheme .dataTables_wrapper .dataTables_filter input {
    background-color: var(--darktheme-input-bg) !important;
    color: var(--darktheme-text) !important;
    border: 1px solid var(--darktheme-input-border) !important;
    padding: 5px 10px;
}

/* -------------------- LIGHT THEME -------------------- */
/* Light theme base colors */
:root {
    --lighttheme-bg: #f7fafc;
    --lighttheme-bg-alt: #edf2f7;
    --lighttheme-text: #2d3748;
    --lighttheme-border: #cbd5e1;
    --lighttheme-active-bg: #e2e8f0;
    --lighttheme-active-text: #4a5568;
    --lighttheme-btn-bg: #e2e8f0;
    --lighttheme-btn-hover-bg: #cbd5e1;
    --lighttheme-input-bg: #ffffff;
    --lighttheme-input-border: #d2d6da;
    --lighttheme-box-shadow: rgba(0, 0, 0, 0.05);
    --lighttheme-warning: #ff3b3b;
    --lighttheme-header-image: url('/img/background/white.webp');
}

.lighttheme .logout-button {
    color: var(--lighttheme-active-text) !important;
}

.lighttheme .logout-button:hover {
    color: var(--lighttheme-warning) !important;
}

/* Applying the background image for the light theme */
.lighttheme .header-image {
    background-image: var(--lighttheme-header-image);
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Adjustments for content-wrapper to fill screen without gaps */
.lighttheme,
.lighttheme body,
.lighttheme .content-wrapper {
    min-height: 100vh !important;
    /* Ensure it stretches to at least the full height of the viewport */
    background-color: var(--lighttheme-bg) !important;
    /* Apply light theme background color */
    display: flex;
    flex-direction: column;
}

/* Light theme general styles */
.lighttheme .main-sidebar,
.lighttheme .navbar,
.lighttheme .card,
.lighttheme .content-wrapper,
.lighttheme .card-body {
    background-color: var(--lighttheme-bg) !important;
}

.lighttheme .card-header,
.lighttheme .card-footer {
    background-color: var(--lighttheme-bg-alt) !important;
}

.lighttheme .text,
.lighttheme .nav-link,
.lighttheme .nav-header,
.lighttheme .icon,
.lighttheme .content-wrapper {
    color: var(--lighttheme-text) !important;
}

.lighttheme .main-header.navbar {
    border-bottom: 1px solid var(--lighttheme-border) !important;
    box-shadow: 0 2px 4px var(--lighttheme-box-shadow) !important;
}

/* Nav-link active states */
.lighttheme .nav-link.active,
.lighttheme .nav-link:active {
    color: var(--lighttheme-active-text) !important;
    background-color: var(--lighttheme-active-bg) !important;
}

/* Button styles */
.lighttheme .btn:not(.btn-success):not(.btn-danger),
.lighttheme .btn-sidebar {
    background-color: var(--lighttheme-btn-bg) !important;
    color: var(--lighttheme-text) !important;
    border: 1px solid var(--lighttheme-border) !important;
}

.lighttheme .btn:not(.btn-success):not(.btn-danger),
.lighttheme .btn-sidebar:hover {
    background-color: var(--lighttheme-btn-hover-bg) !important;
}

/* Form control styles */
.lighttheme .form-control,
.lighttheme .form-control-sidebar {
    background-color: var(--lighttheme-input-bg) !important;
    color: var(--lighttheme-text) !important;
    border: 1px solid var(--lighttheme-input-border) !important;
}

/* -------------------- ORANGE THEME -------------------- */
/* Orange theme base colors */
:root {
    --orangetheme-bg: #FFA559;
    /* Light vibrant orange for main areas */
    --orangetheme-bg-alt: #FFE6C7;
    /* Lighter orange for headers and footers */
    --orangetheme-text: #454545;
    /* Dark grey for text, ensuring contrast and readability */
    --orangetheme-border: #FF6000;
    /* Vibrant orange for borders */
    --orangetheme-active-bg: #FF6000;
    /* Brighter orange for active elements */
    --orangetheme-active-text: #ffffff;
    /* White text for active elements */
    --orangetheme-btn-bg: #FF6000;
    /* Strong orange for buttons */
    --orangetheme-btn-hover-bg: #FFA559;
    /* Light vibrant orange for button hover state */
    --orangetheme-input-bg: #ffffff;
    /* White background for input fields for maximum contrast */
    --orangetheme-input-border: #FFE6C7;
    /* Lighter orange border for input fields */
    --orangetheme-box-shadow: rgba(255, 96, 0, 0.5);
    /* Soft shadow with an orange hue */
    --orangetheme-header-image: url('/img/background/orange.webp');
    /* Adjust with your own image */
}

.orangetheme .logout-button {
    color: var(--orangetheme-text) !important;
}

.orangetheme .logout-button:hover {
    color: var(--lighttheme-warning) !important;
}

/* Applying the background image for orange theme */
.orangetheme .header-image {
    background-image: var(--orangetheme-header-image);
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Adjustments for content-wrapper to fill screen without gaps */
.orangetheme,
.orangetheme body,
.orangetheme .content-wrapper {
    min-height: 100vh !important;
    background-color: var(--orangetheme-bg) !important;
    display: flex;
    flex-direction: column;
}

/* Orange theme general styles */
.orangetheme .main-sidebar,
.orangetheme .navbar,
.orangetheme .card,
.orangetheme .content-wrapper,
.orangetheme .card-body {
    background-color: var(--orangetheme-bg) !important;
}

.orangetheme .card-header,
.orangetheme .card-footer {
    background-color: var(--orangetheme-bg-alt) !important;
}

.orangetheme .text,
.orangetheme .nav-link,
.orangetheme .nav-header,
.orangetheme .icon,
.orangetheme .content-wrapper {
    color: var(--orangetheme-text) !important;
}

.orangetheme .main-header.navbar {
    border-bottom: 1px solid var(--orangetheme-border) !important;
    box-shadow: 0 2px 4px var(--orangetheme-box-shadow) !important;
}

/* Nav-link active states */
.orangetheme .nav-link.active,
.orangetheme .nav-link:active {
    color: var(--orangetheme-active-text) !important;
    background-color: var(--orangetheme-active-bg) !important;
}

/* Button styles */
.orangetheme .btn:not(.btn-success):not(.btn-danger),
.orangetheme .btn-sidebar {
    background-color: var(--orangetheme-btn-bg) !important;
    color: var(--orangetheme-active-text) !important;
    border: 1px solid var(--orangetheme-border) !important;
}

.orangetheme .btn:not(.btn-success):not(.btn-danger),
.orangetheme .btn-sidebar:hover {
    background-color: var(--orangetheme-btn-hover-bg) !important;
}

/* Form control styles */
.orangetheme .form-control,
.orangetheme .form-control-sidebar {
    background-color: var(--orangetheme-input-bg) !important;
    color: var(--orangetheme-text) !important;
    border: 1px solid var(--orangetheme-input-border) !important;
}

/* -------------------- PINK THEME -------------------- */
/* Pink theme base colors */
:root {
    --pinktheme-bg: #ffebef;
    /* Very light pink for main areas */
    --pinktheme-bg-alt: #ffccd5;
    /* Slightly darker pink for headers and footers */
    --pinktheme-text: #6d4c41;
    /* Darker text for contrast and readability */
    --pinktheme-border: #f48fb1;
    /* Soft pink for borders */
    --pinktheme-active-bg: #f06292;
    /* Medium pink for active elements */
    --pinktheme-active-text: #ffffff;
    /* White text for active elements */
    --pinktheme-btn-bg: #ec407a;
    /* Strong pink for buttons */
    --pinktheme-btn-hover-bg: #ff77a9;
    /* Brighter pink for button hover state */
    --pinktheme-input-bg: #ffffff;
    /* White background for input fields for maximum contrast */
    --pinktheme-input-border: #ffaccf;
    /* Light pink border for input fields */
    --pinktheme-box-shadow: rgba(244, 143, 177, 0.5);
    /* Soft shadow with a pink hue */
    --pinktheme-header-image: url('/img/background/pink.webp');
}

.pinktheme .logout-button {
    color: var(--pinktheme-text) !important;
}

.pinktheme .logout-button:hover {
    color: var(--pinktheme-btn-bg) !important;
}

/* Applying the background image for pink theme */
.pinktheme .header-image {
    background-image: var(--pinktheme-header-image);
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Adjustments for content-wrapper to fill screen without gaps */
.pinktheme,
.pinktheme body,
.pinktheme .content-wrapper {
    min-height: 100vh !important;
    background-color: var(--pinktheme-bg) !important;
    display: flex;
    flex-direction: column;
}

/* Pink theme general styles */
.pinktheme .main-sidebar,
.pinktheme .navbar,
.pinktheme .card,
.pinktheme .content-wrapper,
.pinktheme .card-body {
    background-color: var(--pinktheme-bg) !important;
}

.pinktheme .card-header,
.pinktheme .card-footer {
    background-color: var(--pinktheme-bg-alt) !important;
}

.pinktheme .text,
.pinktheme .nav-link,
.pinktheme .nav-header,
.pinktheme .icon,
.pinktheme .content-wrapper {
    color: var(--pinktheme-text) !important;
}

.pinktheme .main-header.navbar {
    border-bottom: 1px solid var(--pinktheme-border) !important;
    box-shadow: 0 2px 4px var(--pinktheme-box-shadow) !important;
}

/* Nav-link active states */
.pinktheme .nav-link.active,
.pinktheme .nav-link:active {
    color: var(--pinktheme-active-text) !important;
    background-color: var(--pinktheme-active-bg) !important;
}

/* Button styles */
.pinktheme .btn:not(.btn-success):not(.btn-danger),
.pinktheme .btn-sidebar {
    background-color: var(--pinktheme-btn-bg) !important;
    color: var(--pinktheme-active-text) !important;
    border: 1px solid var(--pinktheme-border) !important;
}

.pinktheme .btn:not(.btn-success):not(.btn-danger),
.pinktheme .btn-sidebar:hover {
    background-color: var(--pinktheme-btn-hover-bg) !important;
}

/* Form control styles */
.pinktheme .form-control,
.pinktheme .form-control-sidebar {
    background-color: var(--pinktheme-input-bg) !important;
    color: var(--pinktheme-text) !important;
    border: 1px solid var(--pinktheme-input-border) !important;
}

/* -------------------- END OF THEMES -------------------- */

/* -------------------- PROFESSIONAL THEME SYSTEM -------------------- */
/*
 * Warna aksen dipakai secara hemat untuk navigasi, fokus, dan aksi utama.
 * Area baca menggunakan permukaan netral agar nyaman untuk penggunaan lama.
 */
.lighttheme {
    --theme-canvas: #f4f7fb;
    --theme-surface: #ffffff;
    --theme-surface-muted: #f8fafc;
    --theme-sidebar: #f7f9fd;
    --theme-sidebar-muted: #eaf1fb;
    --theme-sidebar-text: #334155;
    --theme-sidebar-heading: #64748b;
    --theme-sidebar-active: #dbeafe;
    --theme-sidebar-active-text: #1d4ed8;
    --theme-navbar: #ffffff;
    --theme-text: #243147;
    --theme-muted: #64748b;
    --theme-border: #dbe3ee;
    --theme-accent: #2563eb;
    --theme-accent-hover: #1d4ed8;
    --theme-accent-soft: #dbeafe;
    --theme-on-accent: #ffffff;
    --theme-input: #ffffff;
    --theme-focus: rgba(37, 99, 235, 0.22);
    --theme-shadow: 0 8px 24px rgba(30, 50, 80, 0.07);
}

.darktheme {
    --theme-canvas: #0f172a;
    --theme-surface: #172033;
    --theme-surface-muted: #1e293b;
    --theme-sidebar: #0b1220;
    --theme-sidebar-muted: #172033;
    --theme-sidebar-text: #d6e2f0;
    --theme-sidebar-heading: #8fa2ba;
    --theme-sidebar-active: #153f43;
    --theme-sidebar-active-text: #99f6e4;
    --theme-navbar: #111b2e;
    --theme-text: #e5edf7;
    --theme-muted: #9aabc1;
    --theme-border: #31415a;
    --theme-accent: #2dd4bf;
    --theme-accent-hover: #14b8a6;
    --theme-accent-soft: #153f43;
    --theme-on-accent: #062925;
    --theme-input: #111b2e;
    --theme-focus: rgba(45, 212, 191, 0.24);
    --theme-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.orangetheme {
    --theme-canvas: #fff8f1;
    --theme-surface: #fffdfb;
    --theme-surface-muted: #fff1e5;
    --theme-sidebar: #fff8f1;
    --theme-sidebar-muted: #ffead8;
    --theme-sidebar-text: #574036;
    --theme-sidebar-heading: #8a6b5c;
    --theme-sidebar-active: #ffdfc7;
    --theme-sidebar-active-text: #9a3f13;
    --theme-navbar: #fffdfb;
    --theme-text: #3f302a;
    --theme-muted: #80695e;
    --theme-border: #ecd9cc;
    --theme-accent: #c65d21;
    --theme-accent-hover: #a94717;
    --theme-accent-soft: #ffdfc7;
    --theme-on-accent: #ffffff;
    --theme-input: #ffffff;
    --theme-focus: rgba(198, 93, 33, 0.22);
    --theme-shadow: 0 8px 24px rgba(112, 62, 34, 0.09);
}

.pinktheme {
    --theme-canvas: #fff7fa;
    --theme-surface: #ffffff;
    --theme-surface-muted: #fdf0f5;
    --theme-sidebar: #fff8fb;
    --theme-sidebar-muted: #fbe9f1;
    --theme-sidebar-text: #5b3a4a;
    --theme-sidebar-heading: #8a6878;
    --theme-sidebar-active: #f9dce8;
    --theme-sidebar-active-text: #9d345d;
    --theme-navbar: #ffffff;
    --theme-text: #432f39;
    --theme-muted: #806776;
    --theme-border: #ecd9e3;
    --theme-accent: #b94671;
    --theme-accent-hover: #9d345d;
    --theme-accent-soft: #f9dce8;
    --theme-on-accent: #ffffff;
    --theme-input: #ffffff;
    --theme-focus: rgba(185, 70, 113, 0.22);
    --theme-shadow: 0 8px 24px rgba(100, 45, 70, 0.08);
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme),
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) body,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .content-wrapper {
    background-color: var(--theme-canvas) !important;
    color: var(--theme-text) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-sidebar {
    background-color: var(--theme-sidebar) !important;
    border-right: 1px solid var(--theme-border) !important;
    box-shadow: 4px 0 18px rgba(15, 23, 42, 0.045) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-sidebar .brand-link {
    background-color: var(--theme-sidebar) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-sidebar .nav-link,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-sidebar .brand-text {
    color: var(--theme-sidebar-text) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-sidebar .nav-header {
    color: var(--theme-sidebar-heading) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-sidebar .nav-link:hover {
    background-color: var(--theme-sidebar-muted) !important;
    color: var(--theme-sidebar-active-text) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-sidebar .nav-link.active {
    background-color: var(--theme-sidebar-active) !important;
    color: var(--theme-sidebar-active-text) !important;
    box-shadow: none !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-sidebar .nav-link.active .nav-icon,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-sidebar .nav-link:hover .nav-icon {
    color: var(--theme-sidebar-active-text) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-header.navbar {
    background-color: var(--theme-navbar) !important;
    border-bottom: 1px solid var(--theme-border) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-header .nav-link {
    color: var(--theme-text) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .main-header .nav-link:hover {
    color: var(--theme-accent) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .card,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .card-body,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .modal-content,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dropdown-menu {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .card {
    border: 1px solid var(--theme-border) !important;
    box-shadow: var(--theme-shadow) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .card-header,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .card-footer,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .modal-header,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .modal-footer {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .text-muted,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dataTables_info,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) small {
    color: var(--theme-muted) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .form-control,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .custom-select,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .select2-selection,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dataTables_length select,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dataTables_filter input {
    background-color: var(--theme-input) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .form-control:focus,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .custom-select:focus,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .select2-container--focus .select2-selection {
    border-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 0.2rem var(--theme-focus) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-primary,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-sidebar {
    background-color: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    color: var(--theme-on-accent) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-primary:hover,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-sidebar:hover {
    background-color: var(--theme-accent-hover) !important;
    border-color: var(--theme-accent-hover) !important;
}

/*
 * Tailwind Preflight is loaded after AdminLTE and resets buttons with an
 * explicit `type` attribute to a transparent background. Keep Bootstrap's
 * semantic actions visible in every application theme and interaction state.
 */
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-danger {
    background-color: #dc3545 !important;
    background-image: none !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-danger:hover:not(:disabled):not(.disabled),
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-danger:focus-visible {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
    color: #ffffff !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-danger:not(:disabled):not(.disabled):active,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-danger.active {
    background-color: #bd2130 !important;
    border-color: #b21f2d !important;
    color: #ffffff !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-success {
    background-color: #28a745 !important;
    background-image: none !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-success:hover:not(:disabled):not(.disabled),
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-success:focus-visible {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
    color: #ffffff !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-success:not(:disabled):not(.disabled):active,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-success.active {
    background-color: #1e7e34 !important;
    border-color: #1c7430 !important;
    color: #ffffff !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-warning {
    background-color: #ffc107 !important;
    background-image: none !important;
    border-color: #ffc107 !important;
    color: #212529 !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-warning:hover:not(:disabled):not(.disabled),
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-warning:focus-visible {
    background-color: #e0a800 !important;
    border-color: #d39e00 !important;
    color: #212529 !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-warning:not(:disabled):not(.disabled):active,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-warning.active {
    background-color: #d39e00 !important;
    border-color: #c69500 !important;
    color: #212529 !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-info {
    background-color: #17a2b8 !important;
    background-image: none !important;
    border-color: #17a2b8 !important;
    color: #ffffff !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-info:hover:not(:disabled):not(.disabled),
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-info:focus-visible {
    background-color: #138496 !important;
    border-color: #117a8b !important;
    color: #ffffff !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-info:not(:disabled):not(.disabled):active,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .btn-info.active {
    background-color: #117a8b !important;
    border-color: #10707f !important;
    color: #ffffff !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) :is(.btn-danger, .btn-success, .btn-warning, .btn-info):is(:disabled, .disabled) {
    background-image: none !important;
    opacity: 0.65;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .table {
    color: var(--theme-text) !important;
    background-color: var(--theme-surface) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .table thead th,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .table tfoot th {
    background-color: var(--theme-surface-muted) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .table td,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .table th {
    border-color: var(--theme-border) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--theme-surface-muted) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .table-hover tbody tr:hover {
    background-color: var(--theme-accent-soft) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .page-link {
    background-color: var(--theme-surface) !important;
    color: var(--theme-accent) !important;
    border-color: var(--theme-border) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .page-item.active .page-link {
    background-color: var(--theme-accent) !important;
    border-color: var(--theme-accent) !important;
    color: var(--theme-on-accent) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) a:not(.btn):not(.nav-link) {
    color: var(--theme-accent);
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) ::-moz-selection {
    background: var(--theme-accent-soft);
    color: var(--theme-text);
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) ::selection {
    background: var(--theme-accent-soft);
    color: var(--theme-text);
}

/* Plugin controls often ship fixed white surfaces, so they need explicit tokens. */
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dataTables_wrapper,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dataTables_length,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dataTables_filter,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dataTables_paginate {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dataTables_length label,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dataTables_filter label {
    color: var(--theme-text) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .select2-container .select2-selection__rendered,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .select2-container .select2-selection__placeholder {
    color: var(--theme-text) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .select2-dropdown,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .select2-results,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .select2-results__option {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .select2-results__option--highlighted,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .select2-results__option[aria-selected="true"] {
    background-color: var(--theme-accent-soft) !important;
    color: var(--theme-text) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dropdown-item,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .list-group-item {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .dropdown-item:hover,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .list-group-item:hover {
    background-color: var(--theme-accent-soft) !important;
    color: var(--theme-text) !important;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .form-control::-moz-placeholder, :is(.lighttheme, .darktheme, .orangetheme, .pinktheme) input::-moz-placeholder, :is(.lighttheme, .darktheme, .orangetheme, .pinktheme) textarea::-moz-placeholder {
    color: var(--theme-muted) !important;
    opacity: 1;
}

:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) .form-control::placeholder,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) input::placeholder,
:is(.lighttheme, .darktheme, .orangetheme, .pinktheme) textarea::placeholder {
    color: var(--theme-muted) !important;
    opacity: 1;
}

.darktheme input[type="date"],
.darktheme input[type="time"],
.darktheme input[type="datetime-local"],
.darktheme select {
    color-scheme: dark;
}

.darktheme .close {
    color: var(--theme-text) !important;
    text-shadow: none;
}

.darktheme .select2-selection__arrow b {
    border-top-color: var(--theme-text) !important;
}

.darktheme .swal2-popup,
.darktheme .swal2-title,
.darktheme .swal2-html-container {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
}

@media (prefers-reduced-motion: reduce) {
    .main-sidebar,
    .navbar,
    .card,
    .card-header,
    .card-body,
    .card-footer,
    .content-wrapper {
        transition: none;
    }
}

/* -------------------- CUSTOM LOGIN -------------------- */
/* -------------------- LOGIN BUTTON -------------------- */
/* Custom Login Button */
.login-button {
    padding: 1.3em 3em;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #000000;
    background-color: #f06d6d;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
}

.login-button:hover {
    background-color: #23c483;
    box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    color: #fff;
    transform: translateY(-7px);
}

.login-button:active {
    transform: translateY(-1px);
}

/* -------------------- CARD LOGIN -------------------- */
.custom-card-login {
    width: 400px;
    height: 400px;
    background: #07182E;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    padding: 20px;
    /* Add some padding */
    z-index: 10;
}

.custom-card-login form {
    z-index: 20;
    /* Ensure it's above the pseudo-elements */
    position: relative;
    height: 250px;
    width: 300px;
    background: #07182E !important;
    /* border: 1px solid #CCCCCC; Example border style */
    padding: 10px;
    /* Example padding */
    background-color: #FFFFFF;
    /* Example background color */
    border-radius: 5px;
    /* Example border radius */
}

.custom-card-login::before {
    content: '';
    position: absolute;
    width: 100px;
    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
    height: 130%;
    animation: rotBGimg 3s linear infinite;
    z-index: 1;
}

.custom-card-login label {
    color: #FFFFFF;
    /* Change to the color you want */
}

.custom-card-login::after {
    content: '';
    position: absolute;
    background: #07182E;
    inset: 5px;
    border-radius: 15px;
    z-index: 1;
}

@keyframes rotBGimg {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* -------------------- LOGIN CUSTOM -------------------- */

/* -------------------- OTHER CSS CUSTOM -------------------- */
/* Eye password reveal */
.password-toggle-icon {
    position: absolute;
    right: 10px;
    /* Adjust as needed */
    top: 50%;
    /* Center vertically */
    transform: translateY(-50%);
    cursor: pointer;
    /* Consider setting a size for the icon */
    font-size: 18px;
    /* Adjust as needed */
}

.change-password-icon {
    /* Override styles specifically for change password form */
    top: calc(72% - 1px);
    /* Adjust this value to align perfectly */
}

.form-control-password {
    width: 100%;
    /* Adjust width as desired, 100% will fit the parent container's width */
    /* Other styles (padding, border, etc.) */
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
}

/* loading */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.lds-ring {
    color: #44A7AB
}

.lds-ring,
.lds-ring div {
    box-sizing: border-box;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid currentColor;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: currentColor transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* menu landing */
.menu-landing {
    --menu-surface: #ffffff;
    --menu-surface-alt: #f8fafc;
    --menu-panel-bg: rgba(255, 255, 255, 0.78);
    --menu-border: #d9e2ec;
    --menu-text: #243247;
    --menu-muted: #667085;
    --menu-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
    --menu-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.05);
    --menu-accent: #0f766e;
    --menu-accent-dark: #115e59;
    --menu-accent-soft: rgba(15, 118, 110, 0.10);
    --menu-badge-bg: #ecfeff;
    --menu-badge-text: #115e59;
    --menu-button-bg: linear-gradient(135deg, #dff7f4, #c8f0ea);
    --menu-button-bg-hover: linear-gradient(135deg, #c9efe9, #b4e7df);
    --menu-button-border: #73cfc2;
    --menu-button-text: #0f5f59;
    --menu-button-shadow: 0 10px 20px rgba(15, 118, 110, 0.12);
    color: var(--menu-text);
}

.menu-landing--kemahasiswaan {
    --menu-surface-alt: #fff8f3;
    --menu-border: #e7d7ca;
    --menu-text: #2f2a28;
    --menu-muted: #73645b;
    --menu-shadow: 0 18px 42px rgba(124, 45, 18, 0.11);
    --menu-shadow-soft: 0 10px 24px rgba(124, 45, 18, 0.07);
    --menu-accent: #9a3412;
    --menu-accent-dark: #7c2d12;
    --menu-accent-soft: rgba(154, 52, 18, 0.10);
    --menu-badge-bg: #fff1e8;
    --menu-badge-text: #9a3412;
    --menu-button-bg: linear-gradient(135deg, #ffe9dc, #ffd9c2);
    --menu-button-bg-hover: linear-gradient(135deg, #ffdcca, #ffcdb0);
    --menu-button-border: #f2b38a;
    --menu-button-text: #8a3412;
    --menu-button-shadow: 0 10px 20px rgba(154, 52, 18, 0.12);
}

.menu-landing[data-theme="darktheme"],
.darktheme .menu-landing {
    --menu-surface: #232c38;
    --menu-surface-alt: #283241;
    --menu-panel-bg: rgba(35, 44, 56, 0.92);
    --menu-border: rgba(111, 135, 160, 0.28);
    --menu-text: #f4f8fc;
    --menu-muted: rgba(223, 233, 244, 0.88);
    --menu-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
    --menu-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.24);
    --menu-badge-bg: #dff7f4;
    --menu-badge-text: #125f59;
}

.menu-landing--akademik[data-theme="darktheme"],
.darktheme .menu-landing--akademik {
    --menu-accent: #58d6d1;
    --menu-accent-dark: #9ef5ef;
    --menu-accent-soft: rgba(88, 214, 209, 0.12);
    --menu-button-bg: linear-gradient(135deg, #d9fbf8, #bff6f2);
    --menu-button-bg-hover: linear-gradient(135deg, #c7f7f2, #a8efea);
    --menu-button-border: #76dcd5;
    --menu-button-text: #0f5e58;
    --menu-button-shadow: 0 10px 20px rgba(88, 214, 209, 0.14);
}

.menu-landing--kemahasiswaan[data-theme="darktheme"],
.darktheme .menu-landing--kemahasiswaan {
    --menu-accent: #ffb082;
    --menu-accent-dark: #ffd6bf;
    --menu-accent-soft: rgba(255, 176, 130, 0.13);
    --menu-badge-bg: #ffe7d8;
    --menu-badge-text: #8b3b14;
    --menu-button-bg: linear-gradient(135deg, #ffe8d8, #ffd1b8);
    --menu-button-bg-hover: linear-gradient(135deg, #ffdcc5, #ffc2a1);
    --menu-button-border: #f2aa7d;
    --menu-button-text: #7a3210;
    --menu-button-shadow: 0 10px 20px rgba(255, 176, 130, 0.15);
}

.menu-landing[data-theme="orangetheme"],
.orangetheme .menu-landing {
    --menu-surface: #fffdfa;
    --menu-surface-alt: #fff4e8;
    --menu-panel-bg: rgba(255, 251, 245, 0.92);
    --menu-border: #ffd4b4;
    --menu-text: #5f370e;
    --menu-muted: #8a5a29;
    --menu-shadow: 0 18px 42px rgba(255, 96, 0, 0.12);
    --menu-shadow-soft: 0 10px 24px rgba(255, 96, 0, 0.08);
    --menu-accent: #ff6000;
    --menu-accent-dark: #cc4d00;
    --menu-accent-soft: rgba(255, 96, 0, 0.1);
    --menu-badge-bg: #fff0e2;
    --menu-badge-text: #a04400;
    --menu-button-bg: linear-gradient(135deg, #fff0e3, #ffe0c7);
    --menu-button-bg-hover: linear-gradient(135deg, #ffe6d1, #ffd3af);
    --menu-button-border: #f6b37e;
    --menu-button-text: #a64800;
    --menu-button-shadow: 0 10px 20px rgba(232, 93, 4, 0.14);
}

.menu-landing[data-theme="pinktheme"],
.pinktheme .menu-landing {
    --menu-surface: #fffdfd;
    --menu-surface-alt: #fff4f7;
    --menu-panel-bg: rgba(255, 250, 252, 0.94);
    --menu-border: #f7c7d7;
    --menu-text: #6f3d52;
    --menu-muted: #906175;
    --menu-shadow: 0 18px 42px rgba(236, 72, 153, 0.12);
    --menu-shadow-soft: 0 10px 24px rgba(236, 72, 153, 0.08);
    --menu-accent: #db2777;
    --menu-accent-dark: #be185d;
    --menu-accent-soft: rgba(219, 39, 119, 0.1);
    --menu-badge-bg: #ffe4ef;
    --menu-badge-text: #9d174d;
    --menu-button-bg: linear-gradient(135deg, #ffe6f1, #ffd5e8);
    --menu-button-bg-hover: linear-gradient(135deg, #ffd9ea, #ffc4de);
    --menu-button-border: #f3a7c7;
    --menu-button-text: #a51f64;
    --menu-button-shadow: 0 10px 20px rgba(219, 39, 119, 0.14);
}

.menu-intro-card,
.menu-feature-card,
.menu-empty-state {
    background: var(--menu-surface);
    border: 1px solid var(--menu-border);
    box-shadow: var(--menu-shadow-soft);
    border-radius: 22px;
}

.menu-intro-card {
    overflow: hidden;
    background:
        radial-gradient(circle at top right, var(--menu-accent-soft), transparent 30%),
        linear-gradient(135deg, var(--menu-surface) 0%, var(--menu-surface-alt) 100%);
}

.menu-intro-card .card-body {
    padding: 1.75rem;
}

.menu-intro-kicker {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--menu-badge-bg);
    color: var(--menu-badge-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.menu-intro-title {
    margin: 1rem 0 0.65rem;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--menu-text) !important;
}

.menu-intro-text {
    max-width: 720px;
    color: var(--menu-muted) !important;
    font-size: 1rem;
    line-height: 1.75;
}

.menu-search-panel {
    padding: 1.1rem;
    border-radius: 18px;
    background: var(--menu-panel-bg);
    border: 1px solid var(--menu-border);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.menu-search-label {
    display: block;
    margin-bottom: 0.55rem;
    font-weight: 700;
    color: var(--menu-text) !important;
}

.menu-search-panel .form-control,
.menu-search-panel .input-group-text {
    border-color: var(--menu-border);
    background: var(--menu-surface);
    color: var(--menu-text) !important;
    height: 48px;
}

.menu-search-panel .form-control::-moz-placeholder {
    color: var(--menu-muted) !important;
}

.menu-search-panel .form-control::placeholder {
    color: var(--menu-muted) !important;
}

.menu-search-panel .form-control:focus {
    border-color: var(--menu-accent);
    box-shadow: 0 0 0 0.2rem var(--menu-accent-soft);
}

.menu-search-result {
    display: block;
    margin-top: 0.55rem;
    color: var(--menu-muted) !important;
}

.menu-feature-card {
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.menu-feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--menu-accent);
    box-shadow: var(--menu-shadow);
}

.menu-feature-card .card-body {
    padding: 1.45rem;
}

.menu-feature-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.menu-feature-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--menu-badge-bg);
    color: var(--menu-badge-text) !important;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.menu-feature-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--menu-accent-soft);
    color: var(--menu-accent-dark) !important;
    font-size: 1.3rem;
}

.menu-feature-title {
    margin-bottom: 0.85rem;
    color: var(--menu-text) !important;
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 800;
}

.menu-feature-description {
    margin-bottom: 1.4rem;
    color: var(--menu-muted) !important;
    font-size: 1rem;
    line-height: 1.8;
}

.menu-feature-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--menu-button-border);
    border-radius: 14px;
    background: var(--menu-button-bg);
    color: var(--menu-button-text) !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: var(--menu-button-shadow);
    text-decoration: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.menu-feature-button,
.menu-feature-button i,
.menu-feature-button span {
    color: var(--menu-button-text) !important;
}

.menu-feature-button:hover,
.menu-feature-button:focus {
    background: var(--menu-button-bg-hover);
    border-color: var(--menu-accent);
    color: var(--menu-button-text) !important;
    text-decoration: none;
    transform: translateY(-1px);
}

.menu-empty-state {
    margin-top: 0.5rem;
}

.menu-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--menu-accent-soft);
    color: var(--menu-accent-dark);
    font-size: 1.4rem;
}

.menu-empty-title {
    color: var(--menu-text) !important;
    font-weight: 800;
}

.menu-empty-text {
    color: var(--menu-muted) !important;
}

.menu-landing[data-theme="darktheme"] .menu-feature-card,
.menu-landing[data-theme="darktheme"] .menu-intro-card,
.menu-landing[data-theme="darktheme"] .menu-empty-state,
.darktheme .menu-landing .menu-feature-card,
.darktheme .menu-landing .menu-intro-card,
.darktheme .menu-landing .menu-empty-state {
    background: linear-gradient(180deg, rgba(35, 44, 56, 0.98), rgba(31, 40, 52, 0.98)) !important;
}

.menu-landing[data-theme="darktheme"] .menu-intro-kicker,
.menu-landing[data-theme="darktheme"] .menu-feature-badge,
.darktheme .menu-landing .menu-intro-kicker,
.darktheme .menu-landing .menu-feature-badge {
    box-shadow: inset 0 0 0 1px rgba(18, 95, 89, 0.08);
}

.menu-landing[data-theme="darktheme"] .menu-intro-title,
.menu-landing[data-theme="darktheme"] .menu-feature-title,
.darktheme .menu-landing .menu-intro-title,
.darktheme .menu-landing .menu-feature-title {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

@media (max-width: 991px) {
    .menu-intro-title {
        font-size: 1.7rem;
    }
}

@media (max-width: 767px) {
    .menu-intro-card .card-body,
    .menu-feature-card .card-body {
        padding: 1.2rem;
    }

    .menu-intro-title {
        font-size: 1.45rem;
    }

    .menu-feature-title {
        font-size: 1.25rem;
    }
}