/* Ketik.in Modern visual Override - Refined V2 */
/* Overrides with User Provided Palette & Enhanced Visibility */

/* ========================================
   GLOBAL THEME VARIABLES OVERRIDE
   ======================================== */

:root {
    /* --- USER PROVIDED LIGHT PALETTE --- */
    /* --text: #0c151d; */
    /* --background: #edf3f8; */
    /* --primary: #234f70; */
    /* --secondary: #75addb; */
    /* --accent: #297dc2; */

    /* Mapping to Tabler Variables */
    --tblr-primary: #234f70;
    /* User Primary */
    --tblr-primary-rgb: 35, 79, 112;

    /* Custom Brand Colors */
    --ketik-secondary: #75addb;
    --ketik-accent: #297dc2;

    /* Body & Page Background */
    --tblr-body-bg: #edf3f8;
    --tblr-page-bg: #edf3f8;
    --tblr-body-color: #0c151d;
    --tblr-heading-color: #0c151d;

    /* Card & Surface Colors */
    --tblr-card-bg: #FFFFFF;
    --tblr-bg-surface: #FFFFFF;

    /* Border Colors - Increased contrast for visibility */
    --tblr-border-color: #75addb;
    /* Using secondary for borders to be visible */
    --tblr-border-color-light: #cbd5e1;

    /* Shadows - Stronger for better definition */
    --tblr-shadow-sm: 0 1px 2px 0 rgba(35, 79, 112, 0.1);
    --tblr-shadow: 0 4px 6px -1px rgba(35, 79, 112, 0.1), 0 2px 4px -1px rgba(35, 79, 112, 0.06);
    --tblr-shadow-lg: 0 10px 15px -3px rgba(35, 79, 112, 0.15), 0 4px 6px -2px rgba(35, 79, 112, 0.1);

    --tblr-muted: #64748B;
}

[data-theme="dark"] {
    /* --- USER PROVIDED DARK PALETTE --- */
    /* --text: #e2ebf3; */
    /* --background: #070d12; */
    /* --primary: #8fbadc; */
    /* --secondary: #245c8a; */
    /* --accent: #3d91d6; */

    /* Mapping */
    --tblr-primary: #8fbadc;
    /* User Primary (Light Blue for Dark Mode) */
    --tblr-primary-rgb: 143, 186, 220;

    --ketik-secondary: #245c8a;
    --ketik-accent: #3d91d6;

    --tblr-body-bg: #070d12;
    --tblr-page-bg: #070d12;
    --tblr-body-color: #e2ebf3;
    --tblr-heading-color: #e2ebf3;

    --tblr-card-bg: #0C1218;
    /* Slightly lighter than bg #070d12 for contrast */
    --tblr-bg-surface: #0C1218;

    --tblr-border-color: #245c8a;
    /* User Secondary */
    --tblr-border-color-light: #1e293b;

    --tblr-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --tblr-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --tblr-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

    --tblr-muted: #94a3b8;
}

/* ========================================
   BODY & PAGE
   ======================================== */

body {
    background-color: var(--tblr-body-bg) !important;
    color: var(--tblr-body-color) !important;
    font-family: 'Inter', sans-serif;
}

.page {
    background-color: var(--tblr-page-bg) !important;
}

.page-wrapper {
    background-color: transparent !important;
}

/* ========================================
   MODERN SIDEBAR DESIGN (Updated)
   ======================================== */

.navbar-vertical .sidebar-content {
    background-color: #070d12 !important;
    /* Rich Gradient using User Dark Colors */
    background-image:
        linear-gradient(180deg, rgba(7, 13, 18, 0.95) 0%, rgba(36, 92, 138, 0.15) 100%) !important;
    border-right: 1px solid rgba(143, 186, 220, 0.1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2) !important;
}

/* Sidebar Logo Area */
.sidebar-logo {
    border-bottom: 1px solid rgba(143, 186, 220, 0.2) !important;
    padding-bottom: 1.5rem !important;
    /* Push menu down */
    margin-bottom: 1rem !important;
    height: auto !important;
    /* Let it flow naturally */
    display: flex;
    align-items: center;
    justify-content: center !important;
    /* Center logo horizontally */
}

.sidebar-logo img {
    /* Legacy cleanup */
    margin-top: 0;
}

/* Navigation Links */
.nav-link {
    color: #8fbadc !important;
    /* User Dark Primary as text color for sidebar */
    font-weight: 500 !important;
    padding: 12px 16px !important;
    margin-bottom: 4px !important;
    border-radius: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-link:hover {
    background-color: rgba(61, 145, 214, 0.1) !important;
    color: #FFFFFF !important;
    transform: translateX(4px);
}

.nav-link.active {
    /* Using User Accent for Active State Gradient */
    background: linear-gradient(135deg, #297dc2 0%, #234f70 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(41, 125, 194, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-section-title {
    color: #64748B !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    opacity: 0.8;
}

/* ========================================
   MODERN CARDS - ENHANCED VISIBILITY
   ======================================== */

.card {
    background-color: var(--tblr-card-bg) !important;
    /* Clean clear border using User Secondary (Light) / accent (Dark) */
    border: 1px solid rgba(117, 173, 219, 0.3) !important;
    /* Light mode border based on #75addb */
    border-radius: 20px !important;
    box-shadow: var(--tblr-shadow) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

[data-theme="dark"] .card {
    border-color: rgba(36, 92, 138, 0.4) !important;
    /* Dark mode border #245c8a */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tblr-shadow-lg) !important;
    border-color: var(--ketik-accent) !important;
    /* Highlight border on hover */
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(117, 173, 219, 0.15) !important;
    padding: 1.5rem !important;
}

/* ========================================
   MODERN INPUTS & FORMS
   ======================================== */

.form-control,
.form-select {
    background-color: #FFFFFF !important;
    border: 1px solid var(--ketik-secondary) !important;
    /* Visible border */
    border-radius: 12px !important;
    padding: 0.75rem 1rem !important;
    color: var(--tblr-body-color) !important;
}

.input-icon .form-control {
    padding-left: 3rem !important;
    /* Fix overlap with icon */
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #0b1219 !important;
    border-color: #245c8a !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ketik-accent) !important;
    box-shadow: 0 0 0 4px rgba(41, 125, 194, 0.15) !important;
}

/* ========================================
   MODERN BUTTONS
   ======================================== */

.btn {
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.btn-primary {
    /* Gradient using User Primary and Accent */
    background: linear-gradient(135deg, #297dc2 0%, #234f70 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(35, 79, 112, 0.3) !important;
}

[data-theme="dark"] .btn-primary {
    /* Lighter blue gradient for dark mode visibility */
    background: linear-gradient(135deg, #3d91d6 0%, #245c8a 100%) !important;
    box-shadow: 0 4px 10px rgba(61, 145, 214, 0.3) !important;
}

.btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--tblr-heading-color) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

.text-secondary {
    color: #64748B !important;
}

[data-theme="dark"] .text-secondary {
    color: #94a3b8 !important;
}

/* ========================================
   BADGES & UI ELEMENTS
   ======================================== */

.badge-primary,
.bg-primary,
.bg-blue {
    background-color: var(--ketik-accent) !important;
    color: #FFF !important;
}

.badge-primary-lt,
.bg-primary-lt {
    background-color: rgba(41, 125, 194, 0.1) !important;
    color: var(--ketik-accent) !important;
    border: 1px solid rgba(41, 125, 194, 0.2);
}

/* ========================================
   STAT CARDS
   ======================================== */
.card-stat {
    border-left: 4px solid var(--ketik-accent) !important;
    background: linear-gradient(135deg, var(--tblr-card-bg) 0%, rgba(41, 125, 194, 0.05) 100%) !important;
}

/* ========================================
   MOBILE NAVBAR FIX
   ======================================== */
@media (max-width: 991.98px) {
    .navbar {
        min-height: 3.5rem;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .navbar-brand .animated-logo-container {
        margin-left: 24px;
        /* Shift right more */
    }
}