/* =========================================================
   E-KÜTÜPHANE OTOMASYON SİSTEMİ
   APP.CSS - PREMIUM PRODUCT UI SYSTEM
   Path: public/assets/css/app.css

   Amaç:
   - AdminLTE 3 çekirdeğini bozmadan modern ürün arayüzü.
   - Mevcut index sayfalarındaki card-outline / card-tools / filter-card / DataTables yapısını güzelleştirir.
   - Yeni yazılacak sayfalar için app-page-shell, app-page-card, app-stat-card gibi standart sınıflar sağlar.

   Önemli:
   - Bu dosya AdminLTE, Select2 ve DataTables CSS dosyalarından SONRA yüklenmelidir.
   - Layout içinde app.css öncesinde Manrope fontu önerilir:
     https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&display=swap
   ========================================================= */


/* =========================================================
   00 - DESIGN TOKENS
   ========================================================= */

:root {
    --app-font: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;

    --app-bg: #f3f6fb;
    --app-bg-2: #eef3fa;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fafc;
    --app-surface-muted: #f1f5f9;

    --app-text: #0f172a;
    --app-text-2: #1e293b;
    --app-muted: #64748b;
    --app-muted-2: #94a3b8;

    --app-primary: #2563eb;
    --app-primary-2: #1d4ed8;
    --app-primary-3: #1e40af;
    --app-primary-soft: #eaf2ff;
    --app-primary-soft-2: #dbeafe;

    --app-success: #16a34a;
    --app-success-2: #15803d;
    --app-success-soft: #ecfdf5;

    --app-warning: #f59e0b;
    --app-warning-2: #d97706;
    --app-warning-soft: #fffbeb;

    --app-danger: #dc2626;
    --app-danger-2: #b91c1c;
    --app-danger-soft: #fef2f2;

    --app-info: #0891b2;
    --app-info-2: #0e7490;
    --app-info-soft: #ecfeff;

    --app-purple: #7c3aed;
    --app-purple-2: #6d28d9;
    --app-purple-soft: #f5f3ff;

    --app-slate: #334155;
    --app-slate-2: #0f172a;

    --app-border: #e2e8f0;
    --app-border-2: #cbd5e1;
    --app-border-soft: rgba(226, 232, 240, .72);

    --app-sidebar-0: #050b16;
    --app-sidebar-1: #07111f;
    --app-sidebar-2: #0f172a;
    --app-sidebar-3: #111827;

    --app-radius-xs: 8px;
    --app-radius-sm: 12px;
    --app-radius-md: 16px;
    --app-radius-lg: 22px;
    --app-radius-xl: 28px;
    --app-radius-2xl: 34px;

    --app-shadow-xs: 0 4px 12px rgba(15, 23, 42, .045);
    --app-shadow-sm: 0 10px 26px rgba(15, 23, 42, .065);
    --app-shadow-md: 0 18px 44px rgba(15, 23, 42, .09);
    --app-shadow-lg: 0 28px 78px rgba(15, 23, 42, .145);
    --app-shadow-primary: 0 18px 36px rgba(37, 99, 235, .25);
    --app-shadow-success: 0 16px 32px rgba(22, 163, 74, .20);
    --app-shadow-danger: 0 16px 32px rgba(220, 38, 38, .20);
    --app-shadow-warning: 0 16px 32px rgba(245, 158, 11, .20);

    --app-ease: cubic-bezier(.2, .8, .2, 1);
    --app-transition: all .18s cubic-bezier(.2, .8, .2, 1);
}


/* =========================================================
   01 - GLOBAL BASE
   ========================================================= */

html,
body,
.wrapper,
.main-header,
.main-sidebar,
.content-wrapper,
.card,
.table,
.btn,
.form-control,
.custom-select,
.dropdown-menu,
.modal-content,
.select2-container,
.dataTables_wrapper,
.swal2-popup {
    font-family: var(--app-font) !important;
}

html,
body {
    min-height: 100%;
}

body:not(.login-page):not(.register-page) {
    background: var(--app-bg);
    color: var(--app-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.58;
    letter-spacing: -0.012em;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.wrapper {
    background: var(--app-bg);
}

.content-wrapper {
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .105), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(124, 58, 237, .075), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #f3f6fb 46%, #f3f6fb 100%) !important;
}

.content {
    padding-bottom: 32px;
}

.content .container-fluid {
    padding-left: 24px;
    padding-right: 24px;
}

a {
    transition: var(--app-transition);
}

a:hover {
    text-decoration: none;
}

strong,
b {
    font-weight: 850;
}

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

hr {
    border-top-color: var(--app-border);
}

::selection {
    color: #ffffff;
    background: var(--app-primary);
}


/* =========================================================
   02 - CONTENT HEADER
   ========================================================= */

.content-header {
    padding: 24px 0 16px !important;
}

.content-header h1 {
    margin: 0;
    color: var(--app-text);
    font-size: 1.58rem;
    font-weight: 900;
    letter-spacing: -0.052em;
    line-height: 1.12;
}

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--app-muted) !important;
    font-size: .83rem;
    font-weight: 750;
}

.breadcrumb-item.active {
    color: var(--app-text-2) !important;
}


/* =========================================================
   03 - NEW PAGE DESIGN SYSTEM
   Yeni index sayfalarında kullanılacak standartlar.
   Mevcut sayfalar kırılmaz; yeni sayfalara sınıf verildiğinde daha premium görünür.
   ========================================================= */

.app-page-shell {
    display: block;
}

.app-page-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: 1.35rem 1.45rem;
    border-radius: var(--app-radius-xl);
    border: 1px solid rgba(226, 232, 240, .94);
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(124, 58, 237, .13), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 52%, #eef4ff 100%);
    box-shadow: var(--app-shadow-sm);
}

.app-page-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -80px;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .075);
    pointer-events: none;
}

.app-page-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.app-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .42rem;
    color: var(--app-primary);
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .058em;
}

.app-page-title {
    margin: 0;
    color: var(--app-text);
    font-size: 1.45rem;
    font-weight: 950;
    letter-spacing: -0.055em;
    line-height: 1.12;
}

.app-page-subtitle {
    max-width: 780px;
    margin: .4rem 0 0;
    color: var(--app-muted);
    font-size: .92rem;
    font-weight: 620;
    line-height: 1.55;
}

.app-page-actions,
.app-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .45rem;
}

.app-page-card,
.app-table-card,
.app-filter-card {
    border: 1px solid rgba(226, 232, 240, .96) !important;
    border-radius: var(--app-radius-xl) !important;
    background: rgba(255, 255, 255, .985) !important;
    box-shadow: var(--app-shadow-sm) !important;
    overflow: hidden;
}

.app-page-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 18px 20px;
    border-bottom: 1px solid var(--app-border);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .035), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.app-page-card-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--app-text);
    font-size: .99rem;
    font-weight: 950;
    letter-spacing: -0.028em;
}

.app-page-card-title i {
    color: var(--app-primary);
}

.app-page-card-body {
    padding: 20px;
}

.app-filter-card {
    margin-bottom: 1rem;
}

.app-filter-card .card-header,
.app-filter-header {
    padding: 14px 18px !important;
}

.app-filter-card .card-title,
.app-filter-title {
    color: var(--app-text) !important;
    font-size: .92rem !important;
    font-weight: 950 !important;
    letter-spacing: -0.022em;
}

.app-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}

.app-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.app-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 108px;
    padding: 1rem;
    border-radius: var(--app-radius-lg);
    border: 1px solid rgba(226, 232, 240, .94);
    background: rgba(255, 255, 255, .985);
    box-shadow: var(--app-shadow-sm);
}

.app-stat-card::after {
    content: "";
    position: absolute;
    right: -42px;
    top: -42px;
    width: 112px;
    height: 112px;
    border-radius: 999px;
    background: currentColor;
    opacity: .095;
}

.app-stat-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .85rem;
}

.app-stat-label {
    color: var(--app-muted);
    font-size: .75rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.app-stat-value {
    margin-top: .38rem;
    color: var(--app-text);
    font-size: 1.55rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.055em;
}

.app-stat-note {
    margin-top: .5rem;
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 650;
}

.app-stat-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6, var(--app-primary-2));
    box-shadow: 0 14px 24px rgba(37, 99, 235, .24);
}

.app-stat-primary { color: var(--app-primary); }
.app-stat-success { color: var(--app-success); }
.app-stat-warning { color: var(--app-warning); }
.app-stat-danger { color: var(--app-danger); }
.app-stat-info { color: var(--app-info); }
.app-stat-purple { color: var(--app-purple); }

.app-stat-success .app-stat-icon { background: linear-gradient(135deg, #22c55e, var(--app-success-2)); box-shadow: var(--app-shadow-success); }
.app-stat-warning .app-stat-icon { background: linear-gradient(135deg, #fbbf24, var(--app-warning-2)); box-shadow: var(--app-shadow-warning); }
.app-stat-danger .app-stat-icon { background: linear-gradient(135deg, #f87171, var(--app-danger-2)); box-shadow: var(--app-shadow-danger); }
.app-stat-info .app-stat-icon { background: linear-gradient(135deg, #22d3ee, var(--app-info-2)); }
.app-stat-purple .app-stat-icon { background: linear-gradient(135deg, #a78bfa, var(--app-purple-2)); }


/* =========================================================
   04 - PREMIUM NAVBAR
   ========================================================= */

.main-header.navbar,
.main-header.navbar.app-navbar {
    min-height: 70px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .92) !important;
    background: rgba(255, 255, 255, .82) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .060);
}

.app-navbar .nav-link {
    color: #334155 !important;
    font-weight: 760;
}

.app-navbar-toggle,
.app-navbar-home,
.app-user-menu-toggle,
.app-notification-toggle {
    border-radius: 17px !important;
    transition: var(--app-transition);
}

.app-navbar-toggle {
    width: 46px !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.app-navbar-toggle:hover,
.app-navbar-home:hover,
.app-user-menu-toggle:hover,
.app-notification-toggle:hover {
    color: var(--app-primary-2) !important;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 40%),
        var(--app-primary-soft) !important;
}

.app-navbar-home {
    padding-left: 15px !important;
    padding-right: 15px !important;
    color: var(--app-text-2) !important;
    font-weight: 850 !important;
}

.app-navbar-context,
.app-navbar-meta {
    color: var(--app-muted) !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
}

.app-user-menu-toggle {
    gap: .62rem;
    padding: .38rem .55rem !important;
}

.app-user-name {
    color: var(--app-text) !important;
    font-weight: 900 !important;
    letter-spacing: -0.028em;
}

.app-user-role {
    color: var(--app-muted) !important;
    font-size: .74rem;
    font-weight: 720 !important;
}

.app-user-summary {
    flex-direction: column;
    line-height: 1.12;
    max-width: 198px;
}

.app-user-avatar,
.app-dropdown-avatar,
.app-user-avatar-image,
.app-dropdown-avatar-image {
    border-radius: 16px !important;
}

.app-user-avatar,
.app-dropdown-avatar {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 34%),
        linear-gradient(135deg, #60a5fa 0%, #2563eb 48%, #1d4ed8 100%) !important;
    color: #ffffff;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .24);
    font-weight: 950;
    letter-spacing: .02em;
}

.app-dropdown-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}

.app-user-avatar-image,
.app-dropdown-avatar-image {
    object-fit: cover;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .085);
}

.app-user-avatar-image {
    width: 38px;
    height: 38px;
}

.app-dropdown-avatar-image {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}

.app-user-dropdown,
.app-notification-dropdown {
    border: 1px solid rgba(226, 232, 240, .92) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .985) !important;
    box-shadow: var(--app-shadow-lg) !important;
    overflow: hidden;
}

.app-user-dropdown {
    min-width: 300px;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

.app-dropdown-user {
    display: flex;
    align-items: center;
    gap: .82rem;
}

.app-dropdown-name {
    color: var(--app-text);
    font-weight: 950;
    letter-spacing: -0.028em;
}

.app-dropdown-sub {
    color: var(--app-muted);
    font-size: .80rem;
    font-weight: 650;
    margin-top: .1rem;
}

.app-user-dropdown .dropdown-item {
    padding: .66rem 1rem;
    color: var(--app-text-2);
    font-size: .91rem;
    font-weight: 730;
    transition: var(--app-transition);
}

.app-user-dropdown .dropdown-item:hover {
    color: var(--app-primary-2);
    background: var(--app-primary-soft);
}

.app-user-dropdown .dropdown-item i {
    width: 18px;
    text-align: center;
}


/* =========================================================
   05 - PREMIUM SIDEBAR
   ========================================================= */

.main-sidebar {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .26), transparent 32%),
        radial-gradient(circle at bottom right, rgba(124, 58, 237, .17), transparent 34%),
        linear-gradient(180deg, var(--app-sidebar-0) 0%, var(--app-sidebar-1) 35%, var(--app-sidebar-2) 70%, var(--app-sidebar-3) 100%) !important;
    box-shadow: 20px 0 56px rgba(15, 23, 42, .28) !important;
}

.app-sidebar-brand {
    min-height: 72px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .085) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .020));
}

.app-sidebar-brand i {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #ffffff;
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .38), transparent 32%),
        linear-gradient(135deg, #60a5fa 0%, #2563eb 48%, #1d4ed8 100%);
    box-shadow:
        0 18px 38px rgba(37, 99, 235, .44),
        inset 0 1px 0 rgba(255, 255, 255, .20);
}

.app-sidebar-brand .brand-text {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 950 !important;
    letter-spacing: -0.040em;
}

.sidebar {
    padding: 16px 10px 24px !important;
}

.app-sidebar-user-panel {
    display: flex;
    align-items: center;
    gap: .82rem;
    margin: .88rem .35rem 1.05rem !important;
    padding: 1.05rem .94rem !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, .23), transparent 38%),
        linear-gradient(135deg, rgba(255, 255, 255, .118), rgba(255, 255, 255, .052));
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow:
        0 22px 46px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .11);
}

.app-sidebar-avatar-wrap {
    position: relative;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
}

.app-sidebar-avatar,
.app-sidebar-avatar-placeholder {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .36), transparent 32%),
        linear-gradient(135deg, #60a5fa 0%, #2563eb 100%) !important;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .30) !important;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .34);
    font-weight: 950;
    letter-spacing: .03em;
}

.app-sidebar-online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #22c55e;
    border: 2px solid #0f172a;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
}

.app-sidebar-user-info {
    min-width: 0;
    flex: 1;
}

.app-sidebar-user-name {
    color: #ffffff !important;
    font-size: .93rem !important;
    font-weight: 950 !important;
    letter-spacing: -0.030em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar-user-role {
    color: #bfdbfe !important;
    font-size: .76rem !important;
    font-weight: 760 !important;
    margin-top: .18rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar-online-text {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .40rem;
    color: #bbf7d0 !important;
    font-size: .74rem;
    font-weight: 850 !important;
}

.app-sidebar-online-indicator {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
}

.app-sidebar-library {
    margin-top: .30rem;
    color: rgba(226, 232, 240, .74) !important;
    font-size: .72rem;
    font-weight: 670;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-sidebar .nav-sidebar > .nav-header {
    margin: 18px 12px 8px !important;
    padding: 0 !important;
    color: #94a3b8 !important;
    font-size: .64rem !important;
    font-weight: 950 !important;
    letter-spacing: .145em !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link {
    position: relative;
    min-height: 45px;
    margin: 3px 7px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    color: #cbd5e1 !important;
    transition: var(--app-transition);
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link .nav-icon {
    width: 24px;
    color: #93c5fd !important;
    opacity: .99;
    transition: var(--app-transition);
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link p {
    font-size: .865rem;
    font-weight: 820;
    letter-spacing: -0.020em;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
    color: #ffffff !important;
    background:
        radial-gradient(circle at right, rgba(96, 165, 250, .12), transparent 44%),
        rgba(255, 255, 255, .085) !important;
    transform: translateX(2px);
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover .nav-icon {
    color: #ffffff !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.app-sidebar-active {
    color: #ffffff !important;
    background:
        radial-gradient(circle at top right, rgba(147, 197, 253, .28), transparent 42%),
        linear-gradient(135deg, rgba(37, 99, 235, .98), rgba(29, 78, 216, .92)) !important;
    box-shadow:
        0 18px 36px rgba(37, 99, 235, .32),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active::before,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.app-sidebar-active::before {
    display: none !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.app-sidebar-active .nav-icon {
    color: #ffffff !important;
}

.sidebar-collapse .app-sidebar-user-panel {
    justify-content: center;
    padding: .78rem .25rem !important;
}

.sidebar-collapse .app-sidebar-user-info {
    display: none;
}

.sidebar-collapse .app-sidebar-avatar-wrap,
.sidebar-collapse .app-sidebar-avatar,
.sidebar-collapse .app-sidebar-avatar-placeholder {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
}

.sidebar-collapse .app-sidebar-avatar,
.sidebar-collapse .app-sidebar-avatar-placeholder {
    font-size: .85rem;
}


/* =========================================================
   06 - CARDS / EXISTING ADMINLTE STRUCTURE
   Mevcut index dosyalarının card-outline/card-tools düzenini premium yapar.
   ========================================================= */

.card,
.info-box,
.small-box {
    border: 1px solid rgba(226, 232, 240, .96) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .985) !important;
    box-shadow: var(--app-shadow-sm) !important;
    overflow: hidden;
}

.card {
    transition: var(--app-transition);
}

.card:hover {
    box-shadow: var(--app-shadow-md) !important;
}

.card-header {
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--app-border) !important;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .035), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

.card-title {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: var(--app-text) !important;
    font-size: .99rem !important;
    font-weight: 950 !important;
    letter-spacing: -0.028em;
}

.card-title i {
    color: var(--app-primary);
}

.card-tools {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .42rem;
}

.card-body {
    padding: 20px !important;
}

.card-footer {
    border-top: 1px solid var(--app-border) !important;
    background: #fbfdff !important;
}

.card-outline {
    border-top: 0 !important;
}

.card-outline.card-primary,
.card-outline.card-secondary,
.card-outline.card-success,
.card-outline.card-info,
.card-outline.card-warning,
.card-outline.card-danger,
.card-outline.card-light {
    border-top: 0 !important;
}

.card-outline.card-primary > .card-header,
.card-outline.card-secondary > .card-header,
.card-outline.card-success > .card-header,
.card-outline.card-info > .card-header,
.card-outline.card-warning > .card-header,
.card-outline.card-danger > .card-header,
.card-outline.card-light > .card-header {
    position: relative;
}

.card-outline.card-primary > .card-header::before,
.card-outline.card-secondary > .card-header::before,
.card-outline.card-success > .card-header::before,
.card-outline.card-info > .card-header::before,
.card-outline.card-warning > .card-header::before,
.card-outline.card-danger > .card-header::before,
.card-outline.card-light > .card-header::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--app-primary), var(--app-purple));
}

.card-outline.card-secondary > .card-header::before,
.card-outline.card-light > .card-header::before {
    background: linear-gradient(90deg, #64748b, #94a3b8);
}

.card-outline.card-success > .card-header::before {
    background: linear-gradient(90deg, var(--app-success), #4ade80);
}

.card-outline.card-info > .card-header::before {
    background: linear-gradient(90deg, var(--app-info), #22d3ee);
}

.card-outline.card-warning > .card-header::before {
    background: linear-gradient(90deg, var(--app-warning), #fbbf24);
}

.card-outline.card-danger > .card-header::before {
    background: linear-gradient(90deg, var(--app-danger), #f87171);
}

.collapsed-card > .card-header {
    cursor: pointer;
}

.btn-tool {
    border-radius: 999px !important;
    color: var(--app-muted) !important;
}

.btn-tool:hover {
    color: var(--app-primary) !important;
    background: var(--app-primary-soft) !important;
}


/* =========================================================
   07 - INFO BOX / SMALL BOX
   ========================================================= */

.info-box {
    min-height: 98px;
}

.info-box-icon {
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 20px !important;
    box-shadow:
        0 14px 24px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

.info-box-content {
    padding: 14px 12px;
}

.info-box-text {
    color: var(--app-muted);
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.info-box-number {
    margin-top: .2rem;
    color: var(--app-text);
    font-size: 1.2rem;
    font-weight: 950;
    letter-spacing: -0.045em;
}

.small-box {
    position: relative;
    min-height: 124px;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: var(--app-shadow-sm) !important;
    transition: var(--app-transition);
}

.small-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--app-shadow-md) !important;
}

.small-box > .inner {
    position: relative;
    z-index: 1;
    padding: 18px;
}

.small-box h3 {
    font-size: 1.9rem;
    font-weight: 950;
    letter-spacing: -0.06em;
}

.small-box p {
    font-size: .84rem;
    font-weight: 800;
    opacity: .92;
}

.small-box .icon {
    color: rgba(255, 255, 255, .24);
    top: 16px;
}

.small-box .icon > i {
    font-size: 64px !important;
}

.small-box.bg-primary,
.bg-primary {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .25), transparent 30%),
        linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}

.small-box.bg-success,
.bg-success {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .22), transparent 30%),
        linear-gradient(135deg, #22c55e, #15803d) !important;
}

.small-box.bg-warning,
.bg-warning {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .22), transparent 30%),
        linear-gradient(135deg, #fbbf24, #d97706) !important;
    color: #ffffff !important;
}

.small-box.bg-danger,
.bg-danger {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .22), transparent 30%),
        linear-gradient(135deg, #f87171, #b91c1c) !important;
}

.small-box.bg-info,
.bg-info {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .22), transparent 30%),
        linear-gradient(135deg, #22d3ee, #0e7490) !important;
}

.small-box.bg-secondary,
.bg-secondary {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .18), transparent 30%),
        linear-gradient(135deg, #64748b, #334155) !important;
}

.small-box.bg-dark,
.bg-dark {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .15), transparent 30%),
        linear-gradient(135deg, #334155, #020617) !important;
}

.small-box.bg-light {
    color: var(--app-text) !important;
    background:
        linear-gradient(180deg, #ffffff, #f8fafc) !important;
}


/* =========================================================
   08 - FORMS / SELECT2
   ========================================================= */

.form-group label {
    color: var(--app-text);
    font-size: .82rem;
    font-weight: 880;
    letter-spacing: -0.012em;
    margin-bottom: .45rem;
}

.form-control,
.custom-select {
    min-height: 43px;
    border: 1px solid var(--app-border-2) !important;
    border-radius: 16px !important;
    background-color: #ffffff !important;
    color: var(--app-text);
    font-size: .91rem;
    font-weight: 620;
    transition: var(--app-transition);
}

.form-control::placeholder {
    color: #9aa8ba;
}

.form-control:focus,
.custom-select:focus {
    border-color: rgba(37, 99, 235, .72) !important;
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, .105),
        0 10px 22px rgba(15, 23, 42, .045) !important;
}

textarea.form-control {
    min-height: auto;
    line-height: 1.55;
}

.form-control[readonly],
.form-control:disabled,
.custom-select:disabled {
    background-color: #f8fafc !important;
    color: var(--app-muted);
    cursor: not-allowed;
    opacity: 1;
}

.input-group-text {
    min-height: 43px;
    border-color: var(--app-border-2) !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    color: var(--app-muted);
    font-weight: 850;
}

.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.invalid-feedback {
    font-size: .78rem;
    font-weight: 750;
}

.form-text {
    color: var(--app-muted) !important;
    font-size: .78rem;
    font-weight: 620;
}

.custom-control-label {
    color: var(--app-text-2);
    font-weight: 760;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--app-primary) !important;
    background-color: var(--app-primary) !important;
}

.form-control.is-invalid,
.custom-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .custom-select:invalid {
    border-color: var(--app-danger) !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .095) !important;
}

.form-control.is-valid,
.custom-select.is-valid,
.was-validated .form-control:valid,
.was-validated .custom-select:valid {
    border-color: var(--app-success) !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .095) !important;
}


/* =========================================================
   08.1 - SELECT2 PREMIUM OVERRIDES
   ========================================================= */

.select2-container {
    width: 100% !important;
    font-family: var(--app-font) !important;
}

.form-group .select2-container--bootstrap4 {
    display: block;
}

.select2-container--bootstrap4 .select2-selection {
    min-height: 43px;
    border: 1px solid var(--app-border-2) !important;
    border-radius: 16px !important;
    background-color: #ffffff !important;
    color: var(--app-text);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
    transition: var(--app-transition);
}

.select2-container--bootstrap4 .select2-selection:hover {
    border-color: rgba(37, 99, 235, .42) !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: rgba(37, 99, 235, .72) !important;
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, .105),
        0 10px 22px rgba(15, 23, 42, .045) !important;
}

.select2-container--bootstrap4 .select2-selection--single {
    height: 43px !important;
    padding: 0;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    min-height: 43px;
    line-height: 41px;
    padding-left: 14px;
    padding-right: 42px;
    color: var(--app-text);
    font-size: .91rem;
    font-weight: 700;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: #9aa8ba;
    font-weight: 600;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    height: 41px;
    right: 11px;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: var(--app-muted) transparent transparent transparent;
    border-width: 5px 4px 0 4px;
}

.select2-container--bootstrap4.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--app-primary) transparent;
    border-width: 0 4px 5px 4px;
}

.select2-container--bootstrap4 .select2-selection__clear {
    width: 22px;
    height: 22px;
    margin-right: 24px;
    color: var(--app-muted);
    font-size: 1.1rem;
    font-weight: 950;
    line-height: 20px;
    text-align: center;
    border-radius: 999px;
    transition: var(--app-transition);
}

.select2-container--bootstrap4 .select2-selection__clear:hover {
    color: #ffffff;
    background: var(--app-danger);
}

.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: 43px;
    padding: 4px 8px;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 31px;
    padding: 0;
    margin: 0;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline {
    margin-top: 2px;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field {
    min-width: 180px;
    min-height: 28px;
    margin-top: 0;
    color: var(--app-text);
    font-family: var(--app-font) !important;
    font-size: .91rem;
    font-weight: 650;
}

.select2-container--bootstrap4 .select2-search--inline .select2-search__field::placeholder {
    color: #9aa8ba;
    font-weight: 600;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 3px 5px 3px 0;
    padding: 5px 10px;
    border: 1px solid rgba(37, 99, 235, .20) !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .36), transparent 34%),
        linear-gradient(135deg, var(--app-primary), var(--app-primary-2)) !important;
    color: #ffffff !important;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.15;
    box-shadow: 0 8px 16px rgba(37, 99, 235, .16);
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 6px;
    color: rgba(255, 255, 255, .88) !important;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff !important;
}

.select2-container--bootstrap4.select2-container--disabled .select2-selection {
    background-color: #f8fafc !important;
    color: var(--app-muted);
    cursor: not-allowed;
    opacity: 1;
}

.select2-container--bootstrap4.select2-container--disabled .select2-selection__rendered {
    color: var(--app-muted) !important;
}

.select2-container--bootstrap4 .select2-dropdown {
    overflow: hidden;
    border: 1px solid var(--app-border) !important;
    border-radius: 18px !important;
    background: #ffffff;
    box-shadow: 0 22px 52px rgba(15, 23, 42, .18);
}

.select2-container--bootstrap4.select2-container--open.select2-container--above .select2-selection {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.select2-container--bootstrap4.select2-container--open.select2-container--below .select2-selection {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

.select2-container--bootstrap4 .select2-search--dropdown {
    padding: 10px;
    background-color: #f8fafc;
    border-bottom: 1px solid var(--app-border);
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    min-height: 38px;
    border: 1px solid var(--app-border-2) !important;
    border-radius: 13px;
    padding: 8px 12px;
    color: var(--app-text);
    font-family: var(--app-font) !important;
    font-size: .91rem;
    font-weight: 650;
    outline: none;
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
    border-color: rgba(37, 99, 235, .72) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.select2-container--bootstrap4 .select2-results {
    background: #ffffff;
}

.select2-container--bootstrap4 .select2-results__options {
    padding: 6px;
    max-height: 280px;
}

.select2-container--bootstrap4 .select2-results__option {
    margin-bottom: 3px;
    padding: 9px 11px;
    border-radius: 12px;
    color: var(--app-text-2);
    font-size: .91rem;
    font-weight: 700;
    transition: var(--app-transition);
}

.select2-container--bootstrap4 .select2-results__option:last-child {
    margin-bottom: 0;
}

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected] {
    background:
        linear-gradient(135deg, var(--app-primary), var(--app-primary-2)) !important;
    color: #ffffff !important;
}

.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
    background-color: var(--app-primary-soft) !important;
    color: var(--app-primary-2) !important;
}

.select2-container--bootstrap4 .select2-results__group {
    padding: 9px 11px 5px;
    color: var(--app-muted);
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.select2-container--bootstrap4 .select2-results__message {
    color: var(--app-muted);
    font-weight: 650;
}

/* Bootstrap validasyon uyumu */
.was-validated select.form-control:invalid + .select2-container--bootstrap4 .select2-selection,
.was-validated select.custom-select:invalid + .select2-container--bootstrap4 .select2-selection,
select.form-control.is-invalid + .select2-container--bootstrap4 .select2-selection,
select.custom-select.is-invalid + .select2-container--bootstrap4 .select2-selection {
    border-color: var(--app-danger) !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .095) !important;
}

.was-validated select.form-control:valid + .select2-container--bootstrap4 .select2-selection,
.was-validated select.custom-select:valid + .select2-container--bootstrap4 .select2-selection,
select.form-control.is-valid + .select2-container--bootstrap4 .select2-selection,
select.custom-select.is-valid + .select2-container--bootstrap4 .select2-selection {
    border-color: var(--app-success) !important;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .095) !important;
}


/* =========================================================
   09 - 10/10 PREMIUM BUTTON SYSTEM
   ========================================================= */

.btn,
.dt-button,
.dash-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 16px !important;
    font-size: .88rem;
    font-weight: 900 !important;
    letter-spacing: -0.014em;
    transition:
        transform .16s var(--app-ease),
        box-shadow .16s var(--app-ease),
        border-color .16s var(--app-ease),
        background .16s var(--app-ease),
        color .16s var(--app-ease),
        filter .16s var(--app-ease);
}

.btn:not(.btn-link)::before,
.dt-button::before,
.dash-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at top left, rgba(255, 255, 255, .26), transparent 34%);
    transition: opacity .16s var(--app-ease);
}

.btn:not(.btn-link):hover::before,
.dt-button:hover::before,
.dash-btn:hover::before {
    opacity: 1;
}

.btn:hover,
.dt-button:hover,
.dash-btn:hover {
    transform: translateY(-2px);
}

.btn:active,
.dt-button:active,
.dash-btn:active {
    transform: translateY(0);
}

.btn-primary {
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
    background:
        radial-gradient(circle at 25% 12%, rgba(255, 255, 255, .32), transparent 28%),
        linear-gradient(135deg, #3b82f6 0%, #2563eb 42%, #1d4ed8 100%) !important;
    box-shadow:
        0 16px 30px rgba(37, 99, 235, .28),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-primary:hover {
    box-shadow:
        0 20px 42px rgba(37, 99, 235, .34),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}

.btn-success {
    color: #ffffff !important;
    border-color: #15803d !important;
    background:
        radial-gradient(circle at 25% 12%, rgba(255, 255, 255, .30), transparent 28%),
        linear-gradient(135deg, #22c55e 0%, #16a34a 46%, #15803d 100%) !important;
    box-shadow:
        0 16px 30px rgba(22, 163, 74, .24),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-danger {
    color: #ffffff !important;
    border-color: #b91c1c !important;
    background:
        radial-gradient(circle at 25% 12%, rgba(255, 255, 255, .30), transparent 28%),
        linear-gradient(135deg, #f87171 0%, #dc2626 48%, #b91c1c 100%) !important;
    box-shadow:
        0 16px 30px rgba(220, 38, 38, .24),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-warning {
    color: #ffffff !important;
    border-color: #d97706 !important;
    background:
        radial-gradient(circle at 25% 12%, rgba(255, 255, 255, .28), transparent 28%),
        linear-gradient(135deg, #fbbf24 0%, #f59e0b 48%, #d97706 100%) !important;
    box-shadow:
        0 16px 30px rgba(245, 158, 11, .24),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-info {
    color: #ffffff !important;
    border-color: #0e7490 !important;
    background:
        radial-gradient(circle at 25% 12%, rgba(255, 255, 255, .30), transparent 28%),
        linear-gradient(135deg, #22d3ee 0%, #0891b2 48%, #0e7490 100%) !important;
    box-shadow:
        0 16px 30px rgba(8, 145, 178, .23),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn-secondary {
    color: #ffffff !important;
    border-color: #475569 !important;
    background:
        radial-gradient(circle at 25% 12%, rgba(255, 255, 255, .22), transparent 28%),
        linear-gradient(135deg, #64748b 0%, #475569 48%, #334155 100%) !important;
    box-shadow:
        0 16px 30px rgba(51, 65, 85, .20),
        inset 0 1px 0 rgba(255, 255, 255, .14);
}

.btn-dark {
    color: #ffffff !important;
    border-color: #020617 !important;
    background:
        radial-gradient(circle at 25% 12%, rgba(255, 255, 255, .18), transparent 28%),
        linear-gradient(135deg, #334155 0%, #111827 52%, #020617 100%) !important;
    box-shadow:
        0 16px 30px rgba(15, 23, 42, .26),
        inset 0 1px 0 rgba(255, 255, 255, .10);
}

.btn-light {
    color: var(--app-text-2) !important;
    border-color: var(--app-border) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, .07),
        inset 0 1px 0 rgba(255, 255, 255, .90);
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-secondary,
.btn-outline-dark {
    background: rgba(255, 255, 255, .86) !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .055);
}

.btn-outline-primary {
    color: var(--app-primary) !important;
    border-color: rgba(37, 99, 235, .36) !important;
}

.btn-outline-primary:hover {
    color: #ffffff !important;
    border-color: var(--app-primary-2) !important;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2)) !important;
}

.btn-outline-success {
    color: var(--app-success) !important;
    border-color: rgba(22, 163, 74, .36) !important;
}

.btn-outline-success:hover {
    color: #ffffff !important;
    border-color: var(--app-success-2) !important;
    background: linear-gradient(135deg, var(--app-success), var(--app-success-2)) !important;
}

.btn-outline-danger {
    color: var(--app-danger) !important;
    border-color: rgba(220, 38, 38, .36) !important;
}

.btn-outline-danger:hover {
    color: #ffffff !important;
    border-color: var(--app-danger-2) !important;
    background: linear-gradient(135deg, var(--app-danger), var(--app-danger-2)) !important;
}

.btn-outline-warning {
    color: var(--app-warning-2) !important;
    border-color: rgba(245, 158, 11, .42) !important;
}

.btn-outline-warning:hover {
    color: #ffffff !important;
    border-color: var(--app-warning-2) !important;
    background: linear-gradient(135deg, var(--app-warning), var(--app-warning-2)) !important;
}

.btn-outline-info {
    color: var(--app-info) !important;
    border-color: rgba(8, 145, 178, .36) !important;
}

.btn-outline-info:hover {
    color: #ffffff !important;
    border-color: var(--app-info-2) !important;
    background: linear-gradient(135deg, var(--app-info), var(--app-info-2)) !important;
}

.btn-outline-secondary {
    color: #475569 !important;
    border-color: rgba(71, 85, 105, .36) !important;
}

.btn-outline-secondary:hover {
    color: #ffffff !important;
    border-color: #475569 !important;
    background: linear-gradient(135deg, #64748b, #334155) !important;
}

.btn-sm {
    border-radius: 13px !important;
    font-size: .80rem;
    padding: .31rem .66rem;
}

.btn-xs {
    border-radius: 11px !important;
    font-size: .74rem;
    padding: .22rem .48rem;
}

.btn-group .btn {
    box-shadow: none !important;
}

.btn-group .btn:hover {
    transform: none;
}


/* =========================================================
   10 - TABLES & DATATABLES
   ========================================================= */

.table {
    color: var(--app-text-2);
}

.table thead th {
    border-top: 0 !important;
    border-bottom: 1px solid var(--app-border) !important;
    background:
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    color: #334155 !important;
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .050em;
}

.table td,
.table th {
    vertical-align: middle !important;
}

.table td {
    font-size: .88rem;
    font-weight: 620;
}

.table-hover tbody tr {
    transition: var(--app-transition);
}

.table-hover tbody tr:hover {
    background: rgba(37, 99, 235, .042) !important;
}

.table-main-text {
    display: block;
    color: var(--app-text);
    font-weight: 880;
    line-height: 1.25;
}

.table-sub-text {
    display: block;
    color: var(--app-muted);
    font-size: .76rem;
    font-weight: 670;
    line-height: 1.35;
    margin-top: .15rem;
}

.table-responsive {
    border-radius: 18px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: .8rem;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--app-border-2);
    border-radius: 15px;
    padding: 7px 12px;
    outline: none;
    font-weight: 670;
    background: #ffffff;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: .5rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: rgba(37, 99, 235, .72);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.dataTables_wrapper .dataTables_info {
    color: var(--app-muted) !important;
    font-size: .82rem;
    font-weight: 760;
    padding-top: .85rem;
}

.dataTables_wrapper .pagination {
    margin-bottom: 0;
}

.page-item .page-link {
    margin: 0 3px;
    border-radius: 13px !important;
    border-color: var(--app-border) !important;
    color: var(--app-primary);
    font-weight: 880;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .045);
}

.page-item.active .page-link {
    border-color: var(--app-primary) !important;
    background:
        linear-gradient(135deg, var(--app-primary), var(--app-primary-2)) !important;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .22);
}

.datatable-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.datatable-actions .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
}

.datatable-actions .dt-button,
.dataTables_wrapper .dt-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    min-height: 34px;
    padding: .32rem .72rem;
    border: 1px solid transparent;
    border-radius: 15px !important;
    background-image: none !important;
    box-shadow:
        0 12px 24px rgba(15, 23, 42, .13),
        inset 0 1px 0 rgba(255, 255, 255, .16) !important;
    color: #ffffff !important;
    font-size: .82rem;
    font-weight: 900 !important;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    transition: var(--app-transition);
}

.datatable-actions .dt-button:hover,
.dataTables_wrapper .dt-button:hover {
    transform: translateY(-2px);
    filter: brightness(102%) !important;
}

.datatable-actions .buttons-copy,
.dataTables_wrapper .buttons-copy {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .24), transparent 32%),
        linear-gradient(135deg, #64748b, #475569) !important;
    border-color: #475569 !important;
}

.datatable-actions .buttons-excel,
.dataTables_wrapper .buttons-excel {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .24), transparent 32%),
        linear-gradient(135deg, #22c55e, #15803d) !important;
    border-color: #15803d !important;
}

.datatable-actions .buttons-csv,
.dataTables_wrapper .buttons-csv {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .24), transparent 32%),
        linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    border-color: #1d4ed8 !important;
}

.datatable-actions .buttons-print,
.dataTables_wrapper .buttons-print {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .24), transparent 32%),
        linear-gradient(135deg, #22d3ee, #0e7490) !important;
    border-color: #0e7490 !important;
}

.datatable-actions .buttons-colvis,
.dataTables_wrapper .buttons-colvis {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, .18), transparent 32%),
        linear-gradient(135deg, #334155, #020617) !important;
    border-color: #020617 !important;
}


/* =========================================================
   11 - BADGES / ALERTS / STATUS
   ========================================================= */

.badge {
    border-radius: 999px !important;
    font-weight: 950 !important;
    letter-spacing: -0.01em;
    padding: .38em .66em;
}

.status-pill,
.app-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .36rem .60rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 880;
    line-height: 1;
    white-space: nowrap;
}

.status-pill.danger,
.app-status-pill.danger {
    color: #991b1b;
    background: #fee2e2;
}

.status-pill.success,
.app-status-pill.success {
    color: #166534;
    background: #dcfce7;
}

.status-pill.info,
.app-status-pill.info {
    color: #075985;
    background: #e0f2fe;
}

.status-pill.warning,
.app-status-pill.warning {
    color: #92400e;
    background: #fef3c7;
}

.status-pill.dark,
.app-status-pill.dark {
    color: #111827;
    background: #e5e7eb;
}

.alert {
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow: var(--app-shadow-xs);
    font-weight: 780;
}

.alert-success {
    color: #166534 !important;
    background: #ecfdf5 !important;
}

.alert-danger {
    color: #991b1b !important;
    background: #fef2f2 !important;
}

.alert-warning {
    color: #92400e !important;
    background: #fffbeb !important;
}

.alert-info {
    color: #075985 !important;
    background: #eff6ff !important;
}


/* =========================================================
   12 - MODALS
   ========================================================= */

.modal-content {
    border: 0 !important;
    border-radius: 28px !important;
    box-shadow: var(--app-shadow-lg) !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--app-border) !important;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .040), transparent 30%),
        #ffffff !important;
}

.modal-title {
    color: var(--app-text);
    font-weight: 950;
    letter-spacing: -0.040em;
}

.modal-footer {
    border-top: 1px solid var(--app-border) !important;
    background: #fbfdff !important;
}

.js-quick-create-feedback {
    border-radius: 15px;
}

#quick-create-lookup-modal .modal-content {
    border: 0 !important;
    border-radius: 28px !important;
    box-shadow: var(--app-shadow-lg) !important;
}

#quick-create-lookup-modal .modal-header {
    border-bottom-color: var(--app-border) !important;
}

#quick-create-lookup-modal .modal-title {
    font-weight: 950;
}

#quick-create-lookup-modal .modal-footer {
    border-top-color: var(--app-border) !important;
}


/* =========================================================
   13 - DASHBOARD PREMIUM
   ========================================================= */

.pro-dashboard {
    --dash-border: #e2e8f0;
    --dash-muted: #64748b;
    --dash-dark: #0f172a;
    --dash-soft: #f8fafc;
    --dash-primary: #2563eb;
    --dash-primary-dark: #1d4ed8;
    --dash-success: #16a34a;
    --dash-success-dark: #15803d;
    --dash-warning: #f59e0b;
    --dash-warning-dark: #d97706;
    --dash-danger: #dc2626;
    --dash-danger-dark: #b91c1c;
    --dash-info: #0891b2;
    --dash-info-dark: #0e7490;
    --dash-purple: #7c3aed;
    --dash-purple-dark: #6d28d9;
    --dash-slate: #334155;
    --dash-slate-dark: #0f172a;
    font-family: var(--app-font) !important;
}

.pro-dashboard a {
    color: inherit;
}

.pro-dashboard .text-decoration-none:hover {
    text-decoration: none;
}

.dashboard-hero {
    min-height: 126px;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1.55rem 1.65rem;
    border-radius: 30px !important;
    border: 1px solid rgba(226, 232, 240, .94) !important;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .19), transparent 34%),
        radial-gradient(circle at bottom right, rgba(124, 58, 237, .14), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 52%, #eef4ff 100%) !important;
    box-shadow: var(--app-shadow-sm) !important;
}

.dashboard-hero-inner {
    width: 100%;
}

.dashboard-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--app-primary) !important;
    font-size: .76rem;
    font-weight: 950 !important;
    text-transform: uppercase;
    letter-spacing: .058em;
    margin-bottom: .45rem;
}

.dashboard-title {
    margin: 0;
    color: var(--app-text) !important;
    font-size: 1.75rem !important;
    font-weight: 950 !important;
    letter-spacing: -0.060em !important;
}

.dashboard-subtitle {
    margin: .45rem 0 0;
    max-width: 720px;
    color: var(--app-muted) !important;
    font-size: .94rem;
    font-weight: 620;
    line-height: 1.55;
}

.dashboard-update-card {
    min-height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 1rem;
    padding: 1.34rem;
    text-align: right;
    border: 1px solid rgba(226, 232, 240, .94) !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .985) !important;
    box-shadow: var(--app-shadow-sm) !important;
}

.dashboard-update-card span {
    color: var(--app-muted);
    font-size: .77rem;
    font-weight: 880;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.dashboard-update-card strong {
    display: block;
    color: var(--app-text);
    font-size: 1.14rem;
    font-weight: 950;
    margin-top: .25rem;
}

.dashboard-update-card small {
    color: var(--app-muted);
    margin-top: .2rem;
    font-weight: 670;
}

.kpi-card,
.metric-strip,
.dashboard-card,
.quick-action-card,
.dashboard-mini-item {
    border-radius: 24px !important;
    border: 1px solid rgba(226, 232, 240, .94) !important;
    background: rgba(255, 255, 255, .985) !important;
    box-shadow: var(--app-shadow-sm) !important;
}

.kpi-card {
    position: relative;
    min-height: 136px;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: 1.16rem;
    transition: var(--app-transition);
}

.kpi-card:hover,
.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--app-shadow-md) !important;
}

.kpi-card::after {
    content: "";
    position: absolute;
    width: 144px;
    height: 144px;
    right: -60px;
    top: -60px;
    border-radius: 999px;
    opacity: .12;
    background: currentColor;
}

.kpi-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .85rem;
}

.kpi-label,
.metric-title,
.dashboard-mini-item span {
    color: var(--app-muted);
    font-size: .76rem;
    font-weight: 950 !important;
    text-transform: uppercase;
    letter-spacing: .048em;
}

.kpi-value {
    margin-top: .45rem;
    color: var(--app-text);
    font-size: 1.9rem;
    font-weight: 950 !important;
    line-height: 1;
    letter-spacing: -0.060em !important;
}

.kpi-value.kpi-money {
    font-size: 1.44rem;
    letter-spacing: -0.030em !important;
}

.kpi-note {
    margin-top: .66rem;
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 670;
    line-height: 1.35;
}

.kpi-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px !important;
    color: #ffffff;
    font-size: 1rem;
    box-shadow: 0 14px 24px rgba(15, 23, 42, .14);
}

.kpi-primary { color: var(--app-primary); }
.kpi-success { color: var(--app-success); }
.kpi-warning { color: var(--app-warning); }
.kpi-danger { color: var(--app-danger); }
.kpi-info { color: var(--app-info); }
.kpi-purple { color: var(--app-purple); }

.kpi-primary .kpi-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.kpi-success .kpi-icon { background: linear-gradient(135deg, #22c55e, #15803d); }
.kpi-warning .kpi-icon { background: linear-gradient(135deg, #fbbf24, #d97706); }
.kpi-danger .kpi-icon { background: linear-gradient(135deg, #f87171, #b91c1c); }
.kpi-info .kpi-icon { background: linear-gradient(135deg, #22d3ee, #0e7490); }
.kpi-purple .kpi-icon { background: linear-gradient(135deg, #a78bfa, #6d28d9); }

.metric-strip {
    margin-bottom: 1rem;
    padding: 1rem 1.05rem;
}

.metric-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--app-text);
    margin-bottom: .48rem;
}

.metric-title span:last-child {
    color: var(--app-muted);
}

.metric-strip progress {
    width: 100%;
    height: .62rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #eef2f7;
    appearance: none;
}

.metric-strip progress::-webkit-progress-bar {
    background: #eef2f7;
    border-radius: 999px;
}

.metric-strip progress::-webkit-progress-value {
    border-radius: 999px;
}

.metric-strip progress::-moz-progress-bar {
    border-radius: 999px;
}

.metric-strip.metric-primary progress::-webkit-progress-value { background: linear-gradient(90deg, #60a5fa, var(--app-primary)); }
.metric-strip.metric-success progress::-webkit-progress-value { background: linear-gradient(90deg, #4ade80, var(--app-success)); }
.metric-strip.metric-info progress::-webkit-progress-value { background: linear-gradient(90deg, #22d3ee, var(--app-info)); }
.metric-strip.metric-warning progress::-webkit-progress-value { background: linear-gradient(90deg, #fbbf24, var(--app-warning)); }

.metric-strip.metric-primary progress::-moz-progress-bar { background: var(--app-primary); }
.metric-strip.metric-success progress::-moz-progress-bar { background: var(--app-success); }
.metric-strip.metric-info progress::-moz-progress-bar { background: var(--app-info); }
.metric-strip.metric-warning progress::-moz-progress-bar { background: var(--app-warning); }

.metric-strip small {
    display: block;
    margin-top: .48rem;
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 670;
}

.dashboard-card {
    overflow: hidden;
    margin-bottom: 1rem;
}

.dashboard-card.card {
    border: 1px solid rgba(226, 232, 240, .94) !important;
}

.dashboard-card .card-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--app-border) !important;
    padding: 1rem 1.08rem !important;
}

.dashboard-card .card-title {
    color: var(--app-text) !important;
    font-size: .96rem !important;
    font-weight: 950 !important;
    letter-spacing: -0.020em;
}

.dashboard-card .card-body {
    background: #ffffff;
}

.dashboard-card .card-footer {
    background: #ffffff;
    border-top: 1px solid var(--app-border);
    padding: .88rem 1rem;
}

.dashboard-main-grid {
    align-items: stretch;
}

.dashboard-chart-card {
    min-height: 390px;
}

.dashboard-chart-card .card-body {
    min-height: 330px;
}

.chart-box {
    position: relative;
    min-height: 300px;
    padding: .75rem;
}

.chart-box canvas {
    width: 100% !important;
    min-height: 280px;
    max-height: 280px;
}

.chart-fallback {
    display: none;
    color: var(--app-muted);
    font-size: .86rem;
    padding: 1rem;
    border: 1px dashed var(--app-border);
    border-radius: 16px;
    background: var(--app-surface-soft);
}

.dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 38px;
    min-width: 116px;
    padding: .56rem 1rem;
    border: 0;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-size: .78rem;
    font-weight: 950 !important;
    line-height: 1;
    letter-spacing: .01em;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow:
        0 .75rem 1.35rem rgba(15, 23, 42, .15),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: var(--app-transition);
}

.dash-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
    filter: brightness(1.03);
    box-shadow:
        0 1rem 1.75rem rgba(15, 23, 42, .19),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}

.dash-btn-sm {
    min-width: 76px;
    min-height: 35px;
    padding: .50rem .86rem;
    font-size: .76rem;
}

.dash-btn-primary { background: linear-gradient(135deg, #3b82f6 0%, var(--app-primary-2) 100%) !important; }
.dash-btn-success { background: linear-gradient(135deg, #22c55e 0%, var(--app-success-2) 100%) !important; }
.dash-btn-info { background: linear-gradient(135deg, #22d3ee 0%, var(--app-info-2) 100%) !important; }
.dash-btn-danger { background: linear-gradient(135deg, #f87171 0%, var(--app-danger-2) 100%) !important; }
.dash-btn-warning { background: linear-gradient(135deg, #fbbf24 0%, var(--app-warning-2) 100%) !important; color: #ffffff !important; }
.dash-btn-purple { background: linear-gradient(135deg, #a78bfa 0%, var(--app-purple-2) 100%) !important; }
.dash-btn-slate { background: linear-gradient(135deg, #334155 0%, #0f172a 100%) !important; }

.quick-actions-card .card-body {
    padding: 1rem;
}

.quick-action-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 70px;
    padding: .92rem 1rem;
    margin-bottom: .88rem;
    transition: var(--app-transition);
}

.quick-action-card:last-child {
    margin-bottom: 0;
}

.quick-action-card strong {
    display: block;
    color: var(--app-text);
    font-size: .90rem;
    font-weight: 950;
    letter-spacing: -0.022em;
}

.quick-action-card small {
    display: block;
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 670;
    margin-top: .15rem;
}

.dashboard-mini-row {
    margin-bottom: 1rem;
}

.dashboard-mini-summary-horizontal {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.dashboard-mini-item {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: .88rem;
}

.dashboard-mini-item strong {
    display: block;
    margin-top: .35rem;
    color: var(--app-text);
    font-size: 1.16rem;
    font-weight: 950;
}

.dashboard-split-row {
    align-items: stretch;
}

.dashboard-split-row > [class*="col-"] {
    display: flex;
}

.dashboard-split-row .dashboard-card {
    width: 100%;
}

.dashboard-table-card {
    min-height: 360px;
}

.dashboard-table-card .card-body {
    min-height: 230px;
}

.pro-table {
    margin-bottom: 0;
}

.pro-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid var(--app-border);
    color: #374151;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .045em;
    white-space: nowrap;
}

.pro-table td {
    vertical-align: middle !important;
    color: #1f2937;
}

.dashboard-table-card .pro-table tbody tr td {
    padding-top: .78rem;
    padding-bottom: .78rem;
}

.dashboard-empty-state {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-muted);
    font-size: .9rem;
    font-weight: 720;
}


/* =========================================================
   14 - NOTIFICATIONS
   ========================================================= */

.app-notification-nav-item {
    position: relative;
}

.app-notification-toggle {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #475569 !important;
    transition: var(--app-transition);
}

.app-notification-badge {
    top: 4px !important;
    right: 4px !important;
    font-size: 10px;
    border-radius: 999px;
    padding: 3px 5px;
    font-weight: 950 !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, .30);
}

.app-notification-dropdown {
    width: 420px;
    max-width: calc(100vw - 24px);
}

.app-notification-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 17px 12px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .10), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.app-notification-header strong {
    display: block;
    color: var(--app-text);
    font-size: 15px;
    font-weight: 950 !important;
    letter-spacing: -0.028em;
}

.app-notification-header span {
    display: block;
    margin-top: 3px;
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 760;
}

.app-notification-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.app-notification-mark-all,
.app-notification-sound-toggle {
    white-space: nowrap;
    font-size: 12px;
    font-weight: 880;
    text-decoration: none !important;
}

.app-notification-sound-toggle {
    color: var(--app-muted);
}

.app-notification-sound-toggle.is-enabled {
    color: var(--app-success);
}

.app-notification-sound-toggle.is-blocked {
    color: var(--app-danger);
}

.app-notification-list {
    max-height: 318px;
    overflow-y: auto;
}

.app-notification-item {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px !important;
    white-space: normal !important;
    border-left: 3px solid transparent;
    transition: var(--app-transition);
}

.app-notification-item:hover {
    background: #f8fafc !important;
}

.app-notification-item.is-unread {
    background: #f0f7ff !important;
    border-left-color: var(--app-primary) !important;
}

.app-notification-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 17px !important;
    color: var(--app-primary) !important;
    background: var(--app-primary-soft) !important;
}

.app-notification-content {
    min-width: 0;
    display: block;
}

.app-notification-title {
    display: block;
    color: var(--app-text);
    font-size: 13px;
    font-weight: 950 !important;
    line-height: 1.35;
    letter-spacing: -0.028em;
}

.app-notification-message {
    display: -webkit-box;
    margin-top: 4px;
    color: #475569;
    font-size: 12px;
    font-weight: 660;
    line-height: 1.45;
    overflow: hidden;
    max-height: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.app-notification-time {
    display: block;
    margin-top: 6px;
    color: var(--app-muted-2);
    font-size: 11px;
    font-weight: 880;
}

.app-notification-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 36px 20px;
    color: var(--app-muted-2);
    text-align: center;
    font-size: 13px;
    font-weight: 880;
}

.app-notification-empty i {
    font-size: 28px;
}

.app-notification-footer {
    color: var(--app-primary-2) !important;
    font-weight: 950;
}

.app-notification-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    width: 420px;
    max-width: calc(100vw - 32px);
    display: none;
    overflow: hidden;
    border-radius: 26px;
    color: #ffffff;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, .20), transparent 34%),
        linear-gradient(135deg, #0f172a 0%, #172554 58%, #1e1b4b 100%);
    border: 1px solid rgba(147, 197, 253, .34);
    box-shadow:
        0 30px 80px rgba(15, 23, 42, .42),
        0 0 0 1px rgba(255, 255, 255, .06) inset;
}

.app-notification-toast.show {
    display: block;
    animation: appNotificationToastIn .28s var(--app-ease);
}

.app-notification-toast::before {
    content: "";
    position: absolute;
    left: -70px;
    bottom: -90px;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: rgba(59, 130, 246, .18);
    pointer-events: none;
}

.app-notification-toast-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 46px 19px 18px;
}

.app-notification-toast-icon {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 19px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    box-shadow: 0 16px 30px rgba(37, 99, 235, .42);
}

.app-notification-toast-icon i {
    font-size: 19px;
}

.app-notification-toast-content {
    min-width: 0;
    flex: 1;
}

.app-notification-toast-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 21px;
    margin-bottom: 6px;
    padding: 0 9px;
    border-radius: 999px;
    color: #dbeafe;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 11px;
    font-weight: 950;
}

.app-notification-toast-eyebrow i {
    font-size: 6px;
    color: #22c55e;
}

.app-notification-toast-title {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 950;
    line-height: 1.35;
    margin-bottom: 5px;
    letter-spacing: -.01em;
}

.app-notification-toast-message {
    display: -webkit-box;
    color: rgba(248, 250, 252, .94);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.55;
    overflow: hidden;
    text-shadow: 0 1px 1px rgba(15, 23, 42, .28);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.app-notification-toast-close {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: rgba(226, 232, 240, .78);
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: var(--app-transition);
}

.app-notification-toast-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .16);
}

.app-notification-toast-progress {
    position: relative;
    z-index: 2;
    height: 4px;
    width: 100%;
    background: rgba(255, 255, 255, .10);
}

.app-notification-toast-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
    transform-origin: left center;
}

.app-notification-toast.show .app-notification-toast-progress span {
    animation: appNotificationToastProgress 6.5s linear forwards;
}

@keyframes appNotificationToastIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes appNotificationToastProgress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}


/* =========================================================
   15 - PROFILE INLINE STYLE REPLACEMENTS
   profile/index.php içindeki avatar stilleri merkeziye taşınabilir.
   ========================================================= */

.profile-avatar-main {
    width: 112px;
    height: 112px;
    border-radius: 28px;
    object-fit: cover;
    border: 1px solid rgba(219, 234, 254, .95);
    background: #f8f9fa;
    box-shadow: var(--app-shadow-sm);
}

.profile-avatar-placeholder {
    width: 112px;
    height: 112px;
    border-radius: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 34%),
        linear-gradient(135deg, #60a5fa, #1d4ed8);
    color: #fff;
    font-size: 36px;
    font-weight: 950;
    border: 1px solid rgba(219, 234, 254, .95);
    box-shadow: var(--app-shadow-sm);
}

.profile-avatar-small-preview {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    object-fit: cover;
    border: 1px solid rgba(219, 234, 254, .95);
    box-shadow: var(--app-shadow-xs);
    display: none;
}


/* =========================================================
   16 - LOGIN SCREEN
   ========================================================= */

.login-page,
.register-page {
    min-height: 100vh;
    background: #f4f6f9;
    font-family: var(--app-font) !important;
}

.login-page .login-box,
.register-page .login-box {
    margin: 0;
}

.app-login-shell {
    width: 100%;
    min-height: 100vh;
    display: flex;
    background:
        radial-gradient(circle at 85% 15%, rgba(37, 99, 235, .13), transparent 30%),
        linear-gradient(135deg, #eef2f7 0%, #f8fafc 48%, #e9f2ff 100%);
}

.app-login-hero {
    width: 55%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(6, 24, 44, .96), rgba(10, 48, 86, .94)),
        url("../img/logo.png") center center / 710px no-repeat;
}

.app-login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 35%, rgba(255, 255, 255, .10), transparent 24%),
        rgba(6, 24, 44, .76);
}

.app-login-hero::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -180px;
    bottom: -180px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .13);
}

.app-login-hero-bg-orb {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.app-login-hero-bg-orb-one {
    width: 260px;
    height: 260px;
    left: -90px;
    top: 12%;
    background: rgba(37, 99, 235, .13);
    filter: blur(2px);
}

.app-login-hero-bg-orb-two {
    width: 180px;
    height: 180px;
    right: 10%;
    top: 18%;
    background: rgba(255, 255, 255, .06);
}

.app-login-hero-content {
    position: relative;
    z-index: 1;
    max-width: 650px;
    color: #ffffff;
    transform: translateY(-8px);
}

.app-login-hero-logo-area {
    width: 188px;
    height: 188px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.65rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.app-login-hero-logo {
    width: 172px;
    height: 172px;
    object-fit: contain;
    filter:
        drop-shadow(0 1rem 1.45rem rgba(0, 0, 0, .30))
        drop-shadow(0 0 1.6rem rgba(255, 255, 255, .05));
}

.app-login-hero-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: .75rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .17);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.app-login-hero h1 {
    max-width: 620px;
    font-size: 2.75rem;
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: -0.060em;
    margin-bottom: 1rem;
    text-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .22);
}

.app-login-hero p {
    max-width: 540px;
    color: rgba(255, 255, 255, .80);
    font-size: 1.02rem;
    font-weight: 560;
    line-height: 1.75;
    margin-bottom: 1.75rem;
}

.app-login-hero-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    max-width: 650px;
}

.app-login-hero-feature {
    min-height: 88px;
    display: flex;
    align-items: flex-start;
    gap: .72rem;
    padding: .90rem;
    border-radius: 20px;
    color: #ffffff;
    background: rgba(255, 255, 255, .105);
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(8px);
    transition: var(--app-transition);
}

.app-login-hero-feature:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .135);
    border-color: rgba(255, 255, 255, .22);
}

.app-login-hero-feature > span {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #ffffff;
    background: rgba(37, 99, 235, .28);
    border: 1px solid rgba(255, 255, 255, .12);
}

.app-login-hero-feature strong {
    display: block;
    font-size: .86rem;
    font-weight: 950;
    line-height: 1.2;
}

.app-login-hero-feature small {
    display: block;
    margin-top: .2rem;
    color: rgba(255, 255, 255, .70);
    font-size: .74rem;
    font-weight: 620;
    line-height: 1.35;
}

.app-login-panel {
    width: 45%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.75rem;
    position: relative;
}

.app-login-panel::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: 12%;
    right: 8%;
    border-radius: 999px;
    background: rgba(37, 99, 235, .075);
    filter: blur(8px);
    pointer-events: none;
}

.app-login-card-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 455px;
    transform: translateY(-10px);
}

.app-login-mobile-brand {
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    color: #263238;
}

.app-login-mobile-brand-logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
}

.app-login-mobile-brand strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 950;
}

.app-login-mobile-brand span {
    display: block;
    color: var(--app-muted);
    font-size: .82rem;
    font-weight: 650;
}

.app-login-title {
    margin-bottom: 1.35rem;
    text-align: center;
}

.app-login-title-kicker {
    display: inline-flex;
    margin-bottom: .45rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    color: var(--app-primary);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(37, 99, 235, .08);
    border: 1px solid rgba(37, 99, 235, .12);
    box-shadow: 0 .45rem 1.1rem rgba(37, 99, 235, .08);
}

.app-login-title h2 {
    margin: 0;
    color: #172033;
    font-size: 1.95rem;
    font-weight: 950;
    letter-spacing: -0.050em;
}

.app-login-title p {
    margin: .35rem 0 0;
    color: var(--app-muted);
    font-size: .92rem;
    font-weight: 620;
}

.app-login-card {
    border: 1px solid rgba(219, 229, 240, .75);
    border-radius: 26px;
    overflow: hidden;
    background: rgba(255, 255, 255, .94);
    box-shadow:
        0 1.65rem 4rem rgba(15, 23, 42, .16),
        0 .2rem .65rem rgba(15, 23, 42, .05),
        inset 0 1px 0 rgba(255, 255, 255, .85);
}

.app-login-card .login-card-body {
    padding: 2.15rem;
}

.app-login-card-header {
    display: flex;
    align-items: center;
    gap: 1.05rem;
    margin-bottom: 1.55rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid #edf1f5;
}

.app-login-card-logo {
    width: 120px;
    height: 120px;
    flex: 0 0 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background:
        radial-gradient(circle at 35% 25%, #ffffff 0%, #f3f7fc 48%, #eaf1f9 100%);
    border: 1px solid #dbe5f0;
    box-shadow:
        0 .9rem 1.85rem rgba(15, 23, 42, .10),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.app-login-card-logo img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.app-login-card-header h5 {
    margin: 0;
    color: #172033;
    font-size: 1.28rem;
    font-weight: 950;
    letter-spacing: -0.040em;
}

.app-login-card-header span {
    display: block;
    margin-top: .25rem;
    color: var(--app-muted);
    font-size: .86rem;
    font-weight: 620;
}

.app-login-alert {
    border-radius: 17px;
    border: 0;
    font-size: .9rem;
}

.app-login-form-group {
    margin-bottom: 1.08rem;
}

.app-login-form-group label {
    margin-bottom: .45rem;
    color: #2f3a4a;
    font-size: .86rem;
    font-weight: 950;
    letter-spacing: -0.01em;
}

.app-login-input-group {
    border-radius: 17px;
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .04);
}

.app-login-input-group .form-control {
    height: 49px;
    color: #172033;
    border-color: #d7e0ea;
    background: #ffffff;
    font-size: .92rem;
    font-weight: 660;
}

.app-login-input-group .form-control::placeholder {
    color: #9aa6b2;
}

.app-login-input-group .input-group-text,
.app-login-password-toggle {
    min-width: 50px;
    justify-content: center;
    border-color: #d7e0ea;
    background: #f8fafc;
    color: var(--app-muted);
}

.app-login-input-group .form-control:first-child {
    border-top-left-radius: 17px;
    border-bottom-left-radius: 17px;
}

.app-login-input-group .input-group-append .input-group-text,
.app-login-input-group .input-group-append .btn {
    border-top-right-radius: 17px;
    border-bottom-right-radius: 17px;
}

.app-login-input-group .form-control:focus {
    border-color: #6da8ff;
    box-shadow: none;
}

.app-login-input-group:focus-within {
    box-shadow:
        0 0 0 .2rem rgba(37, 99, 235, .13),
        0 .5rem 1.25rem rgba(15, 23, 42, .06);
}

.app-login-password-toggle:hover {
    background: #eef4fb;
    color: #172033;
}

.app-login-submit {
    position: relative;
    overflow: hidden;
    margin-top: .45rem;
    border: 0;
    border-radius: 18px;
    font-weight: 950;
    padding-top: .84rem;
    padding-bottom: .84rem;
    letter-spacing: .01em;
    background:
        radial-gradient(circle at 25% 12%, rgba(255, 255, 255, .25), transparent 30%),
        linear-gradient(135deg, #0b2545 0%, #1d4ed8 100%);
    box-shadow:
        0 .9rem 1.65rem rgba(13, 71, 161, .30),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.app-login-submit:hover {
    filter: brightness(.99);
    box-shadow:
        0 1rem 1.85rem rgba(13, 71, 161, .34),
        inset 0 1px 0 rgba(255, 255, 255, .20);
}

.app-login-submit span {
    position: relative;
    z-index: 1;
}

.app-login-security-note {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.35rem;
    padding: .88rem;
    border-radius: 18px;
    color: #47606f;
    background: linear-gradient(135deg, #f6f9fc 0%, #edf4fb 100%);
    border: 1px solid #e3edf6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.app-login-security-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--app-primary);
    background: rgba(37, 99, 235, .10);
}

.app-login-security-note strong {
    display: block;
    color: #2f3a4a;
    font-size: .84rem;
    font-weight: 950;
    line-height: 1.2;
}

.app-login-security-note span {
    display: block;
    margin-top: .12rem;
    color: var(--app-muted);
    font-size: .78rem;
    font-weight: 620;
    line-height: 1.3;
}

.app-login-footer-text {
    margin-top: 1.25rem;
    color: var(--app-muted);
    text-align: center;
    line-height: 1.45;
    font-size: .82rem;
    font-weight: 620;
}

.app-login-footer-text strong {
    display: block;
    color: #45515f;
    font-weight: 950;
}

.app-login-footer-text span {
    display: block;
}


/* =========================================================
   17 - FOOTER
   ========================================================= */

.app-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgba(226, 232, 240, .92) !important;
    background: rgba(255, 255, 255, .82);
    color: var(--app-muted) !important;
    font-size: .875rem;
    font-weight: 670;
    backdrop-filter: blur(14px);
}

.app-footer-left,
.app-footer-right {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.app-footer strong {
    color: var(--app-text) !important;
    font-weight: 950;
}

.app-footer-divider {
    color: var(--app-muted-2);
}


/* =========================================================
   18 - RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {
    .app-login-hero {
        width: 52%;
        padding: 3rem;
    }

    .app-login-panel {
        width: 48%;
        padding: 2rem;
    }

    .app-login-hero-features {
        grid-template-columns: 1fr;
        max-width: 440px;
    }

    .app-login-card-shell {
        transform: translateY(-4px);
    }

    .app-login-card-logo {
        width: 112px;
        height: 112px;
        flex-basis: 112px;
    }

    .app-login-card-logo img {
        width: 94px;
        height: 94px;
    }

    .dashboard-mini-summary-horizontal,
    .app-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .content .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .content-header h1 {
        font-size: 1.32rem;
    }

    .main-header.navbar,
    .main-header.navbar.app-navbar {
        min-height: 60px !important;
    }

    .dashboard-update-card {
        align-items: flex-start;
        text-align: left;
    }

    .dashboard-title {
        font-size: 1.38rem !important;
    }

    .app-page-hero-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-page-actions,
    .app-action-group {
        justify-content: flex-start;
    }

    .app-login-shell {
        display: block;
        min-height: 100vh;
        padding: 2rem 1rem;
    }

    .app-login-hero {
        display: none !important;
    }

    .app-login-panel {
        width: 100%;
        min-height: auto;
        padding: 0;
    }

    .app-login-panel::before {
        display: none;
    }

    .app-login-card-shell {
        max-width: 455px;
        margin: 0 auto;
        transform: none;
    }

    .app-login-mobile-brand {
        display: flex !important;
    }
}

@media (max-width: 767.98px) {
    .card,
    .info-box,
    .small-box,
    .kpi-card,
    .metric-strip,
    .dashboard-card,
    .quick-action-card,
    .app-page-card,
    .app-table-card,
    .app-filter-card,
    .app-stat-card {
        border-radius: 20px !important;
    }

    .card-body,
    .app-page-card-body {
        padding: 16px !important;
    }

    .content-header {
        padding-top: 16px !important;
    }

    .dashboard-title {
        font-size: 1.32rem !important;
    }

    .dashboard-hero,
    .dashboard-update-card {
        min-height: auto;
    }

    .kpi-value {
        font-size: 1.58rem;
    }

    .kpi-value.kpi-money {
        font-size: 1.24rem;
    }

    .dashboard-mini-summary-horizontal,
    .app-stat-grid,
    .app-filter-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-chart-card,
    .dashboard-table-card {
        min-height: auto;
    }

    .dashboard-chart-card .card-body,
    .dashboard-table-card .card-body {
        min-height: auto;
    }

    .dashboard-split-row > [class*="col-"] {
        display: block;
    }

    .app-footer {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .app-notification-header {
        flex-direction: column;
        align-items: stretch;
    }

    .app-notification-header-actions {
        justify-content: flex-start;
    }

    .app-notification-toast {
        right: 14px;
        bottom: 14px;
        width: calc(100vw - 28px);
    }

    .app-notification-dropdown {
        width: calc(100vw - 24px);
    }

    .app-login-shell {
        padding: 1.25rem .75rem;
    }

    .app-login-title {
        margin-bottom: 1rem;
    }

    .app-login-title h2 {
        font-size: 1.55rem;
    }

    .app-login-card .login-card-body {
        padding: 1.35rem;
    }

    .app-login-card-header {
        flex-direction: column;
        text-align: center;
        gap: .75rem;
        margin-bottom: 1.25rem;
        padding-bottom: 1.1rem;
    }

    .app-login-card-logo {
        width: 108px;
        height: 108px;
        flex-basis: 108px;
        border-radius: 22px;
    }

    .app-login-card-logo img {
        width: 90px;
        height: 90px;
    }

    .app-login-mobile-brand-logo {
        width: 72px;
        height: 72px;
    }
}


/* =========================================================
   19 - PRINT SAFETY
   ========================================================= */

@media print {
    body {
        background: #ffffff !important;
    }

    .main-header,
    .main-sidebar,
    .app-footer,
    .content-header,
    .no-print {
        display: none !important;
    }

    .content-wrapper {
        margin-left: 0 !important;
        background: #ffffff !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #d1d5db !important;
    }
}
/* =========================================================
   BUTTON OUTLINE HOVER VISIBILITY FIX
   Outline butonlarda hover sırasında yazının kaybolmasını engeller.
   ========================================================= */

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #334155, #020617) !important;
    border-color: #020617 !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    border-color: #15803d !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    border-color: #b91c1c !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #22d3ee, #0e7490) !important;
    border-color: #0e7490 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    border-color: #1d4ed8 !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
    border-color: #d97706 !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #64748b, #334155) !important;
    border-color: #334155 !important;
}
/* =========================================================
   20 - FINAL PREMIUM POLISH / CENTRALIZED PAGE COMPONENTS
   Bu bölüm create/edit/detail/inactive ekranlarında kullandığımız
   ortak sınıfları merkezi hale getirir.
   ========================================================= */


/* ------------------------------
   Form Page Layout Refinements
   ------------------------------ */

.app-user-form-page .app-page-card,
.app-role-form-page .app-page-card,
.app-permission-form-page .app-page-card,
.app-library-form-page .app-page-card,
.app-member-form-page .app-page-card,
.app-book-copy-form-page .app-page-card,
.app-borrowing-form-page .app-page-card,
.app-reservation-form-page .app-page-card,
.app-penalty-form-page .app-page-card,
.app-author-form-page .app-page-card,
.app-publisher-form-page .app-page-card,
.app-book-category-form-page .app-page-card {
    margin-bottom: 1rem;
}

.app-page-shell .row > [class*="col-"] > .app-page-card:last-child {
    margin-bottom: 1rem;
}

.app-page-shell .form-group:last-child {
    margin-bottom: 0;
}

.app-page-shell textarea.form-control {
    min-height: 118px;
    resize: vertical;
}

.app-page-shell input[readonly],
.app-page-shell input[disabled],
.app-page-shell select[disabled],
.app-page-shell textarea[disabled] {
    color: #475569 !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    box-shadow: none !important;
}

.app-page-shell .custom-control-label {
    color: var(--app-text-2);
    font-weight: 820;
}

.app-page-shell .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--app-primary) !important;
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2)) !important;
}

.app-page-shell .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12) !important;
}

.app-page-shell dl dt {
    color: var(--app-muted);
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .045em;
    margin-bottom: .12rem;
}

.app-page-shell dl dd {
    color: var(--app-text-2);
    font-size: .91rem;
    font-weight: 720;
    margin-bottom: .85rem;
}

.app-page-shell dl dd:last-child {
    margin-bottom: 0;
}


/* ------------------------------
   Avatar Upload / User Tables
   users/create.php, users/edit.php, users/inactive.php
   ------------------------------ */

.avatar-upload-preview,
.avatar-upload-placeholder {
    width: 104px;
    height: 104px;
    border-radius: 32px !important;
    border: 1px solid rgba(226, 232, 240, .98);
    box-shadow:
        0 18px 36px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.avatar-upload-preview {
    object-fit: cover;
    background: #f8fafc;
}

.avatar-upload-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .35), transparent 32%),
        linear-gradient(135deg, #60a5fa 0%, #2563eb 48%, #1d4ed8 100%);
    font-size: 2rem;
    font-weight: 950;
    letter-spacing: -.04em;
}

.avatar-table-img,
.avatar-table-placeholder {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 16px !important;
    border: 1px solid rgba(226, 232, 240, .98);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .09);
}

.avatar-table-img {
    object-fit: cover;
    background: #f8fafc;
}

.avatar-table-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .28), transparent 32%),
        linear-gradient(135deg, #64748b 0%, #334155 100%);
    font-size: .82rem;
    font-weight: 950;
    letter-spacing: .01em;
}


/* ------------------------------
   Book / Material Detail Page
   books/show.php
   ------------------------------ */

.app-material-summary-card {
    overflow: hidden;
}

.app-material-cover,
.app-book-cover-detail {
    width: 132px;
    max-height: 184px;
    object-fit: cover;
    border-radius: 22px !important;
    border: 1px solid rgba(226, 232, 240, .98) !important;
    background: #f8fafc;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .13);
}

.app-material-cover-placeholder,
.app-book-cover-empty {
    width: 132px;
    height: 184px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    border: 1px dashed #cbd5e1;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .08), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .07);
}

.app-material-side-summary {
    display: grid;
    gap: .65rem;
}

.app-material-side-item,
.app-detail-mini-card,
.app-detail-metric {
    padding: .82rem .9rem;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .045), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
}

.app-material-side-item span,
.app-detail-mini-label,
.app-detail-metric-label {
    display: block;
    color: var(--app-muted);
    font-size: .70rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .052em;
    margin-bottom: .18rem;
}

.app-material-side-item strong,
.app-detail-mini-value,
.app-detail-metric strong {
    display: block;
    color: var(--app-text);
    font-size: .93rem;
    font-weight: 950;
    line-height: 1.22;
    letter-spacing: -0.02em;
}

.app-readable-text {
    color: var(--app-text-2);
    font-size: .94rem;
    font-weight: 620;
    line-height: 1.78;
    white-space: normal;
}

.app-detail-table th {
    color: #334155;
    font-weight: 950;
}

.app-detail-table td {
    color: var(--app-text-2);
    font-weight: 650;
}


/* ------------------------------
   Role Permission Matrix
   roles/permissions.php
   ------------------------------ */

.app-permission-tabs {
    gap: .35rem;
    border-bottom-color: var(--app-border) !important;
}

.app-permission-tabs .nav-link,
#permission-tabs .nav-link {
    border: 1px solid transparent !important;
    border-radius: 16px 16px 0 0 !important;
    color: var(--app-muted) !important;
    font-weight: 900 !important;
    transition: var(--app-transition);
}

.app-permission-tabs .nav-link:hover,
#permission-tabs .nav-link:hover {
    color: var(--app-primary-2) !important;
    background: var(--app-primary-soft) !important;
    border-color: var(--app-primary-soft-2) !important;
}

.app-permission-tabs .nav-link.active,
#permission-tabs .nav-link.active {
    color: var(--app-primary-2) !important;
    background: #ffffff !important;
    border-color: var(--app-border) var(--app-border) #ffffff !important;
    box-shadow: 0 -8px 20px rgba(15, 23, 42, .045);
}

.permission-matrix-table th,
.permission-matrix-table td {
    vertical-align: middle !important;
}

.permission-matrix-table thead th {
    white-space: nowrap;
}

.permission-matrix-table tbody td:first-child {
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .035), transparent 34%),
        #f8fafc;
}

.permission-matrix-table .custom-control {
    min-height: 1.25rem;
    padding-left: 1.25rem;
}

.permission-matrix-table .custom-control-label::before,
.permission-matrix-table .custom-control-label::after {
    left: -1.25rem;
}

.permission-matrix-table .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--app-success) !important;
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
}


/* ------------------------------
   Permissions Create Page
   ------------------------------ */

.app-permission-form-page #permission-preview {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--app-primary-3) !important;
    font-size: .94rem;
    font-weight: 950 !important;
    letter-spacing: -.015em;
}

.app-permission-form-page .js-permission-preset {
    justify-content: flex-start;
    text-align: left;
}

.app-permission-form-page .btn-block.js-permission-preset {
    min-height: 38px;
}


/* ------------------------------
   Better Compact Tables In Archive Pages
   ------------------------------ */

.app-users-inactive-page .table td,
.app-members-inactive-page .table td,
.app-book-copies-inactive-page .table td {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.app-users-inactive-page .table .btn,
.app-members-inactive-page .table .btn,
.app-book-copies-inactive-page .table .btn {
    margin: .1rem .08rem;
}


/* ------------------------------
   DataTables / Dropdown Last Polish
   ------------------------------ */

.dataTables_wrapper .dt-buttons {
    gap: .42rem;
}

div.dt-button-collection,
.dropdown-menu {
    border: 1px solid rgba(226, 232, 240, .96) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .99) !important;
    box-shadow: var(--app-shadow-lg) !important;
    overflow: hidden;
}

div.dt-button-collection .dt-button,
.dropdown-menu .dropdown-item {
    border-radius: 12px !important;
}

.dropdown-menu .dropdown-item {
    color: var(--app-text-2);
    font-weight: 760;
}

.dropdown-menu .dropdown-item:hover {
    color: var(--app-primary-2);
    background: var(--app-primary-soft);
}


/* ------------------------------
   Accessibility / Motion Safety
   ------------------------------ */

.btn:focus,
.dt-button:focus,
.page-link:focus,
.nav-link:focus,
.dropdown-item:focus {
    outline: none !important;
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, .14),
        0 12px 24px rgba(15, 23, 42, .08) !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }

    .btn:hover,
    .dt-button:hover,
    .dash-btn:hover,
    .card:hover,
    .small-box:hover,
    .kpi-card:hover,
    .quick-action-card:hover {
        transform: none !important;
    }
}


/* ------------------------------
   Responsive Final Pass
   ------------------------------ */

@media (max-width: 991.98px) {
    .app-page-hero-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .app-page-title {
        font-size: 1.30rem;
    }

    .app-page-subtitle {
        font-size: .88rem;
    }

    .app-material-cover,
    .app-book-cover-detail,
    .app-material-cover-placeholder,
    .app-book-cover-empty {
        width: 118px;
        max-height: 166px;
    }

    .app-material-cover-placeholder,
    .app-book-cover-empty {
        height: 166px;
    }
}

@media (max-width: 767.98px) {
    .content .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }

    .app-page-hero {
        padding: 1.05rem;
        border-radius: 22px;
    }

    .app-page-card,
    .app-table-card,
    .app-filter-card,
    .card,
    .info-box,
    .small-box {
        border-radius: 20px !important;
    }

    .app-page-card-header,
    .card-header {
        padding: 15px 16px !important;
    }

    .app-page-card-body,
    .card-body {
        padding: 16px !important;
    }

    .card-body.p-0,
    .app-page-card-body.p-0 {
        padding: 0 !important;
    }

    .btn,
    .dt-button {
        max-width: 100%;
        white-space: normal;
    }

    .avatar-upload-preview,
    .avatar-upload-placeholder {
        width: 92px;
        height: 92px;
        border-radius: 28px !important;
    }

    .permission-matrix-table {
        min-width: 760px;
    }
}


/* ------------------------------
   Print Final Pass
   ------------------------------ */

@media print {
    .app-page-hero,
    .app-page-actions,
    .card-tools,
    .btn,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .dt-buttons,
    .main-header,
    .main-sidebar,
    .main-footer {
        display: none !important;
    }

    .content-wrapper,
    .wrapper,
    body {
        background: #ffffff !important;
    }

    .card,
    .app-page-card,
    .app-table-card {
        border: 1px solid #d1d5db !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .table {
        font-size: 11px !important;
    }
}
/* =========================================================
   MIDNIGHT PREMIUM LOGIN - FINAL MANROPE VERSION
   ========================================================= */

body.login-page,
body.register-page {
    min-height: 100vh;
    background: #07111f !important;
}

/* FontAwesome ikonların kare çıkmaması için kritik düzeltme */
.midnight-login-page .fas,
.midnight-login-page .far,
.midnight-login-page .fa {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.midnight-login-page .fab {
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}

/* Login genel font */
.midnight-login-page,
.midnight-login-page input,
.midnight-login-page button,
.midnight-login-page label,
.midnight-login-page span,
.midnight-login-page strong,
.midnight-login-page h1,
.midnight-login-page p,
.midnight-login-page div {
    font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif !important;
}

.midnight-login-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 18px;
    color: #0f172a;
    background:
        radial-gradient(circle at 50% 35%, rgba(37, 99, 235, .22), transparent 32%),
        radial-gradient(circle at 18% 18%, rgba(59, 130, 246, .14), transparent 28%),
        radial-gradient(circle at 82% 82%, rgba(14, 165, 233, .10), transparent 30%),
        linear-gradient(135deg, #020617 0%, #07111f 42%, #0f172a 100%);
}

.midnight-login-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.midnight-login-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(148, 163, 184, .20) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .20) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at 50% 48%, black 0%, black 38%, transparent 76%);
}

.midnight-login-bg::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 780px;
    height: 780px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(37, 99, 235, .16) 0%, rgba(37, 99, 235, .05) 36%, transparent 68%);
}

.midnight-login-orb {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(18px);
}

.midnight-login-orb-one {
    width: 460px;
    height: 460px;
    left: -210px;
    top: -230px;
    background:
        radial-gradient(circle, rgba(37, 99, 235, .34), rgba(37, 99, 235, 0) 70%);
}

.midnight-login-orb-two {
    width: 520px;
    height: 520px;
    right: -250px;
    bottom: -270px;
    background:
        radial-gradient(circle, rgba(14, 165, 233, .20), rgba(14, 165, 233, 0) 70%);
}

.midnight-login-grid {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 900px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .055), transparent 62%);
}

.midnight-login-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
}

.midnight-login-panel {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-radius: 32px;
    border: 1px solid rgba(148, 163, 184, .24);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .985) 0%, rgba(248, 250, 252, .965) 100%);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .42),
        0 14px 36px rgba(15, 23, 42, .32),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    backdrop-filter: blur(22px);
}

.midnight-login-panel::before {
    content: "";
    position: absolute;
    left: 32px;
    right: 32px;
    top: 0;
    height: 5px;
    z-index: 4;
    border-radius: 0 0 999px 999px;
    background:
        linear-gradient(90deg, #1d4ed8 0%, #3b82f6 48%, #7dd3fc 100%);
}

/* Header */
.midnight-login-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 34px 24px;
    border-bottom: 1px solid rgba(226, 232, 240, .94);
    background:
        radial-gradient(circle at 94% 0%, rgba(37, 99, 235, .09), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.midnight-login-logo-group {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px;
    border-radius: 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, .07),
        inset 0 1px 0 rgba(255, 255, 255, .94);
}

.midnight-login-logo-box {
    position: relative;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow:
        0 10px 22px rgba(15, 23, 42, .08),
        inset 0 1px 0 rgba(255, 255, 255, .90);
}

.midnight-login-logo-box img {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
}

.midnight-login-logo-box > i {
    position: absolute;
    z-index: 1;
    color: #2563eb;
    font-size: 1.35rem;
    opacity: 0;
}

.midnight-login-logo-box.midnight-login-logo-fallback > i {
    opacity: 1;
}

.midnight-login-logo-divider {
    width: 1px;
    height: 40px;
    background: #dbe3ef;
}

.midnight-login-institution {
    min-width: 0;
}

.midnight-login-institution span,
.midnight-login-institution strong {
    display: block;
}

.midnight-login-institution span {
    color: #1d4ed8;
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.25;
}

.midnight-login-institution strong {
    max-width: 410px;
    margin-top: 7px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 760;
    line-height: 1.32;
    letter-spacing: -0.026em;
}

/* Content */
.midnight-login-content {
    padding: 38px 42px 38px;
}

/* Title area */
.midnight-login-title-area {
    text-align: center;
    margin-bottom: 30px;
}

.midnight-login-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 14px;
    margin-bottom: 24px;
    border-radius: 999px;
    color: #1d4ed8;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    border: 1px solid #dbeafe;
    box-shadow:
        0 8px 18px rgba(37, 99, 235, .08),
        inset 0 1px 0 rgba(255, 255, 255, .92);
    font-size: .78rem;
    font-weight: 760;
    letter-spacing: -0.01em;
}

.midnight-login-pill i {
    color: #2563eb;
    font-size: .82rem;
}

.midnight-login-product-title {
    position: relative;
    padding: 0;
    margin: 0 auto;
    max-width: 470px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.midnight-login-product-title::before,
.midnight-login-product-title::after {
    display: none !important;
}

.midnight-login-product-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #2563eb;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.midnight-login-product-kicker::before,
.midnight-login-product-kicker::after {
    content: "";
    width: 34px;
    height: 1px;
    margin: 0 11px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .48));
}

.midnight-login-product-kicker::after {
    background: linear-gradient(90deg, rgba(37, 99, 235, .48), transparent);
}

.midnight-login-product-title h1 {
    margin: 0;
    color: #0f172a;
    font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif !important;
    font-size: 2.02rem;
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -0.065em;
    text-align: center;
    text-shadow: none !important;
}

.midnight-login-product-subtitle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    color: #2563eb;
    font-size: 1.34rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.048em;
}

.midnight-login-title-area p {
    max-width: 420px;
    margin: 20px auto 0;
    color: #64748b;
    font-size: .94rem;
    font-weight: 560;
    line-height: 1.68;
    letter-spacing: -0.012em;
}

/* Alert */
.midnight-login-alert {
    margin-bottom: 21px;
    padding: 13px 15px;
    border-radius: 17px !important;
    font-size: .86rem;
    font-weight: 650;
}

/* Form */
.midnight-login-form {
    margin-top: 2px;
}

.midnight-login-field-group {
    margin-bottom: 18px;
}

.midnight-login-field-group label {
    display: block;
    margin-bottom: 8px;
    color: #1e293b;
    font-size: .82rem;
    font-weight: 760;
    letter-spacing: -0.01em;
}

.midnight-login-field {
    position: relative;
}

.midnight-login-field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: #64748b;
    font-size: .92rem;
    transition: color .18s cubic-bezier(.2, .8, .2, 1);
}

.midnight-login-field .form-control {
    width: 100%;
    height: 54px;
    min-height: 54px;
    padding-left: 47px;
    padding-right: 50px;
    border: 1px solid #cbd5e1 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #0f172a;
    font-size: .94rem;
    font-weight: 560;
    letter-spacing: -0.006em;
    transition:
        border-color .18s cubic-bezier(.2, .8, .2, 1),
        box-shadow .18s cubic-bezier(.2, .8, .2, 1),
        background .18s cubic-bezier(.2, .8, .2, 1);
}

.midnight-login-field .form-control::placeholder {
    color: #94a3b8;
    font-weight: 560;
}

.midnight-login-field .form-control:focus {
    border-color: rgba(37, 99, 235, .78) !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, .10),
        0 12px 26px rgba(15, 23, 42, .06) !important;
}

.midnight-login-field:focus-within .midnight-login-field-icon {
    color: #2563eb;
}

.midnight-login-password-toggle {
    position: absolute;
    right: 7px;
    top: 7px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0 !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
    color: #64748b !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        color .18s cubic-bezier(.2, .8, .2, 1),
        background .18s cubic-bezier(.2, .8, .2, 1);
}

.midnight-login-password-toggle:hover,
.midnight-login-password-toggle:focus {
    transform: none !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    box-shadow: none !important;
}

/* Submit */
.midnight-login-submit {
    width: 100%;
    height: 55px;
    margin-top: 9px;
    border: 0 !important;
    border-radius: 18px !important;
    color: #ffffff !important;
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .32), transparent 28%),
        linear-gradient(135deg, #3b82f6 0%, #2563eb 44%, #1d4ed8 100%) !important;
    box-shadow:
        0 18px 34px rgba(37, 99, 235, .27),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;
    font-size: .95rem;
    font-weight: 800 !important;
    letter-spacing: -0.012em;
    transition:
        transform .18s cubic-bezier(.2, .8, .2, 1),
        box-shadow .18s cubic-bezier(.2, .8, .2, 1),
        filter .18s cubic-bezier(.2, .8, .2, 1);
}

.midnight-login-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.015);
    box-shadow:
        0 24px 48px rgba(37, 99, 235, .33),
        inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.midnight-login-submit:active {
    transform: translateY(0);
}

.midnight-login-submit span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Security box */
.midnight-login-security {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 25px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #e2e8f0;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:
        0 10px 24px rgba(15, 23, 42, .04),
        inset 0 1px 0 rgba(255, 255, 255, .88);
}

.midnight-login-security-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #2563eb;
    background: #eff6ff;
}

.midnight-login-security strong,
.midnight-login-security span {
    display: block;
}

.midnight-login-security strong {
    color: #0f172a;
    font-size: .85rem;
    font-weight: 800;
}

.midnight-login-security span {
    margin-top: 3px;
    color: #64748b;
    font-size: .79rem;
    font-weight: 560;
    line-height: 1.42;
}

/* Footer */
.midnight-login-footer {
    margin-top: 20px;
    text-align: center;
    color: #cbd5e1;
    font-size: .80rem;
    font-weight: 560;
}

.midnight-login-footer span,
.midnight-login-footer strong {
    display: block;
}

.midnight-login-footer strong {
    margin-top: 5px;
    color: #ffffff;
    font-weight: 800;
}

/* Responsive */
@media (max-width: 575.98px) {
    .midnight-login-page {
        align-items: flex-start;
        padding: 16px 12px;
    }

    .midnight-login-wrap {
        max-width: 100%;
    }

    .midnight-login-panel {
        border-radius: 27px;
    }

    .midnight-login-panel::before {
        left: 24px;
        right: 24px;
    }

    .midnight-login-header {
        align-items: flex-start;
        gap: 13px;
        padding: 24px 22px 20px;
    }

    .midnight-login-logo-group {
        gap: 7px;
        padding: 6px;
        border-radius: 21px;
    }

    .midnight-login-logo-box {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .midnight-login-logo-box img {
        max-width: 36px;
        max-height: 36px;
    }

    .midnight-login-logo-divider {
        height: 32px;
    }

    .midnight-login-institution span {
        font-size: .66rem;
    }

    .midnight-login-institution strong {
        font-size: .86rem;
    }

    .midnight-login-content {
        padding: 30px 22px 27px;
    }

    .midnight-login-title-area {
        margin-bottom: 26px;
    }

    .midnight-login-pill {
        margin-bottom: 20px;
    }

    .midnight-login-product-kicker {
        font-size: .72rem;
    }

    .midnight-login-product-kicker::before,
    .midnight-login-product-kicker::after {
        width: 24px;
        margin: 0 8px;
    }

    .midnight-login-product-title h1 {
        font-size: 1.56rem;
        letter-spacing: -0.052em;
    }

    .midnight-login-product-subtitle {
        font-size: 1.12rem;
    }

    .midnight-login-title-area p {
        margin-top: 16px;
        font-size: .88rem;
    }

    .midnight-login-security {
        align-items: flex-start;
    }
}