:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #7c7c7c;
    --gray-dark: #383838;
    --primary: #045dbc;
    --secondary: #7c7c7c;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #e03636;
    --light: #f3f3f3;
    --dark: #383838;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1440px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

:root, [data-theme=light] {
    --brand-color: var(--primary);
    --padding-xs: 5px;
    --padding-sm: 7px;
    --padding-md: 15px;
    --padding-lg: 20px;
    --padding-xl: 30px;
    --padding-2xl: 40px;
    --margin-xs: 5px;
    --margin-sm: 10px;
    --margin-md: 15px;
    --margin-lg: 20px;
    --margin-xl: 30px;
    --margin-2xl: 40px;
    --page-max-width: 900px;
    --modal-shadow: var(--shadow-md);
    --card-shadow: var(--shadow-sm);
    --btn-shadow: var(--shadow-xs);
    --navbar-height: 48px;
    --icon-fill: transparent;
    --icon-fill-bg: var(--fg-color);
    --icon-stroke: var(--gray-800);
    --bg-blue: var(--blue-100);
    --bg-light-blue: var(--blue-50);
    --bg-dark-blue: var(--blue-300);
    --bg-green: var(--green-100);
    --bg-yellow: var(--yellow-100);
    --bg-orange: var(--orange-100);
    --bg-red: var(--red-100);
    --bg-gray: var(--gray-100);
    --bg-grey: var(--gray-100);
    --bg-light-gray: var(--gray-100);
    --bg-dark-gray: var(--gray-400);
    --bg-darkgrey: var(--gray-400);
    --bg-purple: var(--purple-100);
    --bg-pink: var(--pink-50);
    --bg-cyan: var(--cyan-50);
    --text-on-blue: var(--blue-700);
    --text-on-light-blue: var(--blue-600);
    --text-on-dark-blue: var(--blue-800);
    --text-on-green: var(--green-800);
    --text-on-yellow: var(--yellow-700);
    --text-on-orange: var(--orange-700);
    --text-on-red: var(--red-700);
    --text-on-gray: var(--gray-700);
    --text-on-grey: var(--gray-700);
    --text-on-darkgrey: var(--gray-800);
    --text-on-dark-gray: var(--gray-800);
    --text-on-light-gray: var(--gray-800);
    --text-on-purple: var(--purple-700);
    --text-on-pink: var(--pink-700);
    --text-on-cyan: var(--cyan-700);
    --alert-text-danger: var(--red-600);
    --alert-text-warning: var(--yellow-700);
    --alert-text-info: var(--blue-700);
    --alert-text-success: var(--green-700);
    --alert-bg-danger: var(--red-50);
    --alert-bg-warning: var(--yellow-50);
    --alert-bg-info: var(--blue-50);
    --alert-bg-success: var(--green-100);
    --bg-color: white;
    --fg-color: white;
    --subtle-accent: var(--gray-50);
    --subtle-fg: var(--gray-100);
    --navbar-bg: var(--neutral);
    --fg-hover-color: var(--gray-100);
    --card-bg: var(--fg-color);
    --disabled-text-color: var(--gray-600);
    --disabled-control-bg: var(--gray-50);
    --control-bg: var(--gray-100);
    --control-bg-on-gray: var(--gray-200);
    --awesomebar-focus-bg: var(--fg-color);
    --modal-bg: white;
    --toast-bg: var(--modal-bg);
    --popover-bg: white;
    --awesomplete-hover-bg: var(--control-bg);
    --btn-primary: var(--primary);
    --btn-default-bg: var(--gray-100);
    --btn-default-hover-bg: var(--gray-300);
    --btn-ghost-hover-bg: var(--gray-200);
    --border-primary: var(--primary);
    --sidebar-select-color: var(--gray-100);
    --scrollbar-thumb-color: var(--gray-400);
    --scrollbar-track-color: var(--gray-200);
    --shadow-inset: inset 0px -1px 0px var(--gray-300);
    --border-color: var(--gray-200);
    --dark-border-color: var(--gray-300);
    --table-border-color: var(--gray-200);
    --highlight-color: var(--gray-50);
    --yellow-highlight-color: var(--yellow-50);
    --btn-group-border-color: var(--gray-300);
    --placeholder-color: var(--gray-50);
    --highlight-shadow: 1px 1px 10px var(--blue-50), 0px 0px 4px var(--blue-600);
    --code-block-bg: var(--gray-900);
    --code-block-text: var(--gray-400);
    --primary-color: var(--primary);
    --btn-height: 28px;
    --input-height: 28px;
    --input-disabled-bg: var(--gray-200);
    --checkbox-right-margin: var(--margin-xs);
    --checkbox-size: 14px;
    --checkbox-color: var(--neutral-black);
    --checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
    --checkbox-gradient: linear-gradient(180deg, var(--primary) -124.51%, var(--primary) 100%);
    --checkbox-disabled-gradient: linear-gradient(180deg, var(--disabled-control-bg) -124.51%, var(--disabled-control-bg) 100%);
    --switch-bg: var(--gray-300);
    --diff-added: var(--green-200);
    --diff-removed: var(--red-200);
    --diff-changed: var(--blue-200);
    --right-arrow-svg: url(data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.25 7.5L4.75 4L1.25 0.5' stroke='%231F272E' stroke-linecap='round' stroke-linejoin='round'/></svg>);
    --left-arrow-svg: url(data: image/svg+xml;utf8, <svg width='6' height='8' viewBox='0 0 6 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M7.5 9.5L4 6l3.5-3.5' stroke='%231F272E' stroke-linecap='round' stroke-linejoin='round'></path></svg>);
    --heading-color: var(--gray-900);
}

[data-theme="dark"] {
    --bg-color: #111827;
    --control-bg: var(--gray-700);
    --text-color: var(--gray-100);
    --subtle-fg: var(--gray-600);
    --fg-color: #1f2937;
    --modal-bg: #1f2937;
    --navbar-bg: #1f2937;
    --white: #1f2937;
    --light: #374151;
    --dark: #f9fafb;
    --gray-dark: #e5e7eb;
    --gray: #9ca3af;
    --secondary: #9ca3af;
    --control-bg: #374151;
    --disabled-control-bg: #111827;
    --border-color: #374151;
    --dark-border-color: #4b5563;
    --heading-color: var(--gray-50);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --btn-default-bg: var(--gray-700);
}

.navbar-light {
    background: #f8f8f8;
}

.web-footer {
    background: none;
    border: none;
}

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

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .title,
.navbar-light .navbar-brand {
    color: var(--heading-color) !important;
}

[data-theme="dark"] body {
    background-color: var(--bg-color) !important;
    color: var(--dark) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--fg-color) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--light) !important;
}

[data-theme="dark"] .navbar-light {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .text-dark {
    color: var(--dark) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--gray) !important;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .badge[style*="background-color: #ffffff"] {
    background-color: var(--light) !important;
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .card {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .btn-link {
    color: var(--gray-50) !important;
}

[data-theme="dark"] .apple-card {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-content {
    background-color: var(--modal-bg) !important;
}

[data-theme="dark"] .btn-default {
    background-color: var(--btn-default-bg) !important;
    color: var(--dark) !important;
    border-color: var(--border-color) !important;
}

.mobile-bottom-nav {
    position: fixed;
    bottom: -1px;
    left: 0;
    width: 100%;
    background-color: #f8f8f8;
    z-index: 1030;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); 
    border-top: 1px solid #e2e2e2;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    color: var(--text-secondary);
    font-size: 0.70rem;
    font-weight: 600;
    gap: 4px;
    transition: color 0.2s ease-in-out;
    flex: 1;
}

.bottom-nav-item i {
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.bottom-nav-item.active,
.bottom-nav-item:hover,
.bottom-nav-item:active {
    color: #0369a1; 
}

[data-theme="dark"] .mobile-bottom-nav {
    background-color: #1f2937;
    border-top: 1px solid #374151;
}

[data-theme="dark"] .bottom-nav-item {
    color: #9ca3af;
}

[data-theme="dark"] .bottom-nav-item.active,
[data-theme="dark"] .bottom-nav-item:hover,
[data-theme="dark"] .bottom-nav-item:active {
    color: #38bdf8;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--text-color) !important;
}

@media (max-width: 991px) {
    {% if frappe.session.user != 'Guest' %}
    .navbar-toggler {
        display: none !important;
    }
    
    #navbarSupportedContent {
        display: none !important;
    }
    
    .navbar > .container {
        justify-content: center !important;
    }
    
    .navbar-brand {
        margin: 0 !important;
    }
    
    .web-footer {
        padding-bottom: 80px !important;
    }
    
    body {
        padding-bottom: 80px !important; 
    }
    {% endif %}
}