:root {
            --bg-main: #f8fafc;
            --bg-card: #ffffff;
            --bg-muted: #f1f5f9;

            --text-main: #0f172a;
            --text-muted: #64748b;

            --border-color: #e2e8f0;

            --primary: #2563eb;
            --success: #16a34a;
            --danger: #dc2626;

            --radius-lg: 16px;
            --radius-md: 12px;

            --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        body.dark-mode {
            --bg-main: #0b1220;
            --bg-card: #111827;
            --bg-muted: #1f2933;

            --text-main: #e5e7eb;
            --text-muted: #9ca3af;

            --border-color: #1f2937;

            --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.6);
        }


        /* =====================================================
   Modal Container
===================================================== */
        .modal-content {
            background-color: var(--bg-card);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-soft);
            border: 1px solid var(--border-color);
        }

        .modal-header {
            background-color: transparent;
        }

        .modal-title {
            color: var(--text-main);
        }

        .modal-footer {
            background-color: transparent;
        }

        .modal-content > form {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            min-height: 0;
        }

        .modal-content > form > .modal-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

        .modal-content > form > .modal-footer {
            flex: 0 0 auto;
        }

        @media (max-width: 576px), (max-height: 640px) {
            .modal-dialog {
                margin: .5rem;
            }

            .modal-content {
                max-height: calc(100vh - 1rem);
                max-height: calc(100dvh - 1rem);
                overflow: hidden;
            }

            .modal-dialog-scrollable .modal-content,
            .modal-dialog-scrollable .modal-content > form {
                max-height: calc(100vh - 1rem);
                max-height: calc(100dvh - 1rem);
            }

            .modal-footer {
                align-items: stretch;
                gap: .5rem;
            }

            .modal-footer .btn {
                flex: 1 1 0;
                min-width: 0;
                white-space: nowrap;
            }
        }

        /* =====================================================
   Cards (Sections)
===================================================== */
        .card {
            background-color: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
        }

        .bg-light-subtle {
            background-color: var(--bg-muted) !important;
        }

        /* =====================================================
   Typography
===================================================== */
        .text-muted,
        .small {
            color: var(--text-muted) !important;
        }


        /* =====================================================
   Form Controls
===================================================== */
        .form-control {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            color: var(--text-main);
            border-radius: 10px;
        }

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

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
            background-color: var(--bg-card);
            color: var(--text-main);
        }

        /* Disabled select */
        .form-select:disabled {
            background-color: var(--bg-muted);
            color: var(--text-muted);
        }

        .btn {
            border-radius: 10px;
            font-weight: 500;
        }

        .btn-success {
            background-color: var(--success);
            border-color: var(--success);
        }

        .btn-outline-danger {
            border-color: var(--danger);
            color: var(--danger);
        }

        .btn-outline-danger:hover {
            background-color: var(--danger);
            color: #fff;
        }

        .btn-light {
            background-color: var(--bg-muted);
            border: 1px solid var(--border-color);
            color: var(--text-main);
        }

        body.dark-mode .btn-light {
            background-color: var(--bg-card);
        }

        .select2-only {
            visibility: hidden;
            position: absolute;
            height: 0;
            padding: 0;
            margin: 0;
        }

        .modal-body::-webkit-scrollbar {
            width: 8px;
        }

        .modal-body::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border-radius: 4px;
        }

        body.dark-mode .modal-body::-webkit-scrollbar-thumb {
            background-color: #374151;
        }