/**
 * Uedno Theme CSS
 * Unified theme for consistent, readable styling across the application.
 * Loads AFTER Bootstrap to safely override defaults.
 * 
 * Strategy:
 * - App pages (dashboard, etc.): Dark theme with light text
 * - Public pages: Light theme with dark text
 * - All elements explicitly styled for contrast
 */

/* ============================================================================
   CSS VARIABLES
   ============================================================================ */
:root {
    /* Brand Colors */
    --brand-primary: #6366f1;
    --brand-secondary: #06b6d4;
    --brand-gradient: linear-gradient(135deg, #6366f1, #06b6d4);
    
    /* Dark Theme (App) */
    --app-bg: #0f172a;
    --app-bg-secondary: #1e293b;
    --app-text: #f8fafc;
    --app-text-secondary: #cbd5e1;
    --app-text-muted: #64748b;
    --app-border: rgba(255, 255, 255, 0.1);
    --app-card-bg: #1e293b;
    
    /* Light Theme (Public) */
    --public-bg: #f8fafc;
    --public-text: #1e293b;
    --public-text-muted: #64748b;
    
    /* Sidebar */
    --sidebar-width: 280px;
}

/* ============================================================================
   GLOBAL RESETS
   ============================================================================ */

/* Ensure proper box-sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ============================================================================
   PUBLIC PAGES (LIGHT THEME)
   Applied to body.public-theme or pages extending base_public.html
   ============================================================================ */
body.public-theme {
    background-color: var(--public-bg) !important;
    color: var(--public-text) !important;
}

body.public-theme .text-muted {
    color: var(--public-text-muted) !important;
}

/* ============================================================================
   APP PAGES (DARK THEME)
   Applied to body.app-theme or pages extending base.html
   ============================================================================ */
body.app-theme {
    background-color: var(--app-bg);
    color: var(--app-text);
}

/* Ensure all text in app theme is readable */
body.app-theme .text-muted {
    color: var(--app-text-muted) !important;
}

body.app-theme .text-secondary {
    color: var(--app-text-secondary) !important;
}

/* ============================================================================
   BOOTSTRAP OVERRIDES FOR DARK APP THEME
   ============================================================================ */

/* Cards in dark theme */
body.app-theme .card {
    background-color: var(--app-card-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

body.app-theme .card-header {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: var(--app-border);
    color: var(--app-text);
}

body.app-theme .card-body {
    color: var(--app-text-secondary);
}

body.app-theme .card-title {
    color: var(--app-text);
}

/* Tables in dark theme */
body.app-theme .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--app-text-secondary);
    --bs-table-border-color: var(--app-border);
    color: var(--app-text-secondary);
}

body.app-theme .table thead th {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--app-text);
    border-color: var(--app-border);
    font-weight: 600;
}

body.app-theme .table tbody td {
    border-color: var(--app-border);
    color: var(--app-text-secondary);
}

body.app-theme .table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-accent-bg: rgba(255, 255, 255, 0.02);
}

body.app-theme .table-hover > tbody > tr:hover {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    color: var(--app-text);
}

/* Forms in dark theme */
body.app-theme .form-control,
body.app-theme .form-select {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: var(--app-border);
    color: var(--app-text);
}

body.app-theme .form-control::placeholder {
    color: var(--app-text-muted);
}

body.app-theme .form-control:focus,
body.app-theme .form-select:focus {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: var(--brand-primary);
    color: var(--app-text);
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25);
}

body.app-theme .form-label {
    color: var(--app-text);
}

body.app-theme .form-text {
    color: var(--app-text-muted);
}

body.app-theme .form-check-label {
    color: var(--app-text-secondary);
}

/* Input groups in dark theme */
body.app-theme .input-group-text {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: var(--app-border);
    color: var(--app-text-secondary);
}

/* Dropdowns in dark theme */
body.app-theme .dropdown-menu {
    background-color: var(--app-card-bg);
    border-color: var(--app-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.app-theme .dropdown-item {
    color: var(--app-text-secondary);
}

body.app-theme .dropdown-item:hover,
body.app-theme .dropdown-item:focus {
    background-color: rgba(99, 102, 241, 0.15);
    color: var(--app-text);
}

body.app-theme .dropdown-divider {
    border-color: var(--app-border);
}

/* Modals in dark theme */
body.app-theme .modal-content {
    background-color: var(--app-card-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

body.app-theme .modal-header {
    border-color: var(--app-border);
    color: var(--app-text);
}

body.app-theme .modal-footer {
    border-color: var(--app-border);
}

body.app-theme .modal-title {
    color: var(--app-text);
}

body.app-theme .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Alerts in dark theme - keep Bootstrap defaults but ensure readability */
body.app-theme .alert {
    border-width: 1px;
}

body.app-theme .alert-success {
    background-color: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

body.app-theme .alert-danger {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

body.app-theme .alert-warning {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

body.app-theme .alert-info {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

/* List groups in dark theme */
body.app-theme .list-group-item {
    background-color: transparent;
    border-color: var(--app-border);
    color: var(--app-text-secondary);
}

body.app-theme .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.app-theme .list-group-item.active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Pagination in dark theme */
body.app-theme .page-link {
    background-color: var(--app-card-bg);
    border-color: var(--app-border);
    color: var(--app-text-secondary);
}

body.app-theme .page-link:hover {
    background-color: rgba(99, 102, 241, 0.15);
    border-color: var(--app-border);
    color: var(--app-text);
}

body.app-theme .page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

body.app-theme .page-item.disabled .page-link {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--app-text-muted);
}

/* Breadcrumbs in dark theme */
body.app-theme .breadcrumb {
    background-color: transparent;
}

body.app-theme .breadcrumb-item a {
    color: var(--brand-primary);
}

body.app-theme .breadcrumb-item.active {
    color: var(--app-text-muted);
}

body.app-theme .breadcrumb-item + .breadcrumb-item::before {
    color: var(--app-text-muted);
}

/* Nav tabs in dark theme */
body.app-theme .nav-tabs {
    border-color: var(--app-border);
}

body.app-theme .nav-tabs .nav-link {
    color: var(--app-text-secondary);
    border-color: transparent;
}

body.app-theme .nav-tabs .nav-link:hover {
    border-color: var(--app-border);
    color: var(--app-text);
}

body.app-theme .nav-tabs .nav-link.active {
    background-color: var(--app-card-bg);
    border-color: var(--app-border) var(--app-border) transparent;
    color: var(--app-text);
}

/* Badges - ensure readability */
body.app-theme .badge.bg-light {
    color: var(--public-text) !important;
}

body.app-theme .badge.bg-dark {
    color: var(--app-text) !important;
}

/* Progress bars */
body.app-theme .progress {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Tooltips */
body.app-theme .tooltip .tooltip-inner {
    background-color: var(--app-card-bg);
    border: 1px solid var(--app-border);
}

/* Offcanvas */
body.app-theme .offcanvas {
    background-color: var(--app-card-bg);
    color: var(--app-text);
}

body.app-theme .offcanvas-header {
    border-color: var(--app-border);
}

/* Accordion */
body.app-theme .accordion-item {
    background-color: transparent;
    border-color: var(--app-border);
}

body.app-theme .accordion-button {
    background-color: var(--app-card-bg);
    color: var(--app-text);
}

body.app-theme .accordion-button:not(.collapsed) {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--app-text);
}

body.app-theme .accordion-body {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--app-text-secondary);
}

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

/* Primary button with gradient */
.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover {
    background: #4f46e5;
    border-color: #4f46e5;
}

/* Outline buttons in dark theme */
body.app-theme .btn-outline-secondary {
    color: var(--app-text-secondary);
    border-color: var(--app-border);
}

body.app-theme .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--app-text);
}

body.app-theme .btn-outline-light {
    color: var(--app-text);
    border-color: var(--app-border);
}

body.app-theme .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Surface class for panels/cards */
.app-surface {
    background-color: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.public-theme .app-surface {
    background-color: #ffffff;
    border-color: #e2e8f0;
}

/* Readable text utilities */
.text-readable {
    color: inherit;
}

body.app-theme .text-readable {
    color: var(--app-text-secondary);
}

body.public-theme .text-readable {
    color: var(--public-text);
}

/* ============================================================================
   DATATABLES DARK THEME OVERRIDES
   ============================================================================ */

body.app-theme .dataTables_wrapper {
    color: var(--app-text-secondary);
}

body.app-theme .dataTables_wrapper .dataTables_length,
body.app-theme .dataTables_wrapper .dataTables_filter,
body.app-theme .dataTables_wrapper .dataTables_info,
body.app-theme .dataTables_wrapper .dataTables_paginate {
    color: var(--app-text-secondary);
}

body.app-theme .dataTables_wrapper .dataTables_length select,
body.app-theme .dataTables_wrapper .dataTables_filter input {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: var(--app-border);
    color: var(--app-text);
}

body.app-theme table.dataTable thead th,
body.app-theme table.dataTable thead td {
    border-bottom-color: var(--app-border);
}

body.app-theme table.dataTable.no-footer {
    border-bottom-color: var(--app-border);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 991.98px) {
    :root {
        --sidebar-width: 0px;
    }
    
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .sidebar,
    .top-navbar {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
}