/* Centralized application styles */

/* Source: app\Views\v_login.php */
:root {
            --bg: #f4f7f9;
            --surface: #ffffff;
            --border: #d9e2ec;
            --text: #1f2937;
            --muted: #6b7280;
            --primary: #0f766e;
            --primary-hover: #0b5f58;
            --danger-bg: #fef2f2;
            --danger-border: #fecaca;
            --danger-text: #b91c1c;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: "Segoe UI", Tahoma, Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
        }

        .login-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .login-card {
            width: 100%;
            max-width: 420px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 32px 28px;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
        }

        .login-header {
            text-align: center;
            margin-bottom: 28px;
        }

        .login-logo {
            width: 72px;
            height: 72px;
            object-fit: contain;
            display: block;
            margin: 0 auto 16px;
        }

        .login-title {
            margin: 0 0 8px;
            font-size: 28px;
            font-weight: 700;
        }

        .login-subtitle {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.6;
        }

        .alert-error {
            margin-bottom: 18px;
            padding: 12px 14px;
            border: 1px solid var(--danger-border);
            border-radius: 10px;
            background: var(--danger-bg);
            color: var(--danger-text);
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 18px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 600;
        }

        .form-control {
            width: 100%;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 14px;
            font-size: 15px;
            color: var(--text);
            background: #fff;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
        }

        .validation-error {
            display: block;
            margin-top: 6px;
            color: var(--danger-text);
            font-size: 13px;
        }

        .login-button {
            width: 100%;
            border: 0;
            border-radius: 10px;
            padding: 12px 16px;
            font-size: 15px;
            font-weight: 600;
            color: #fff;
            background: var(--primary);
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .login-button:hover {
            background: var(--primary-hover);
        }

        .login-note {
            margin-top: 16px;
            text-align: center;
            color: var(--muted);
            font-size: 13px;
        }

        @media (max-width: 480px) {
            .login-page {
                padding: 16px;
            }

            .login-card {
                padding: 24px 20px;
            }

            .login-title {
                font-size: 24px;
            }
        }

/* Source: app\Views\user\v_admin.php */
.admin-page {
        --admin-surface: #ffffff;
        --admin-border: #e5e7eb;
        --admin-text: #111827;
        --admin-muted: #6b7280;
        --admin-primary: #0f766e;
    }

    .admin-page .hero-card,
    .admin-page .table-card {
        background: var(--admin-surface);
        border: 1px solid var(--admin-border);
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
    }

    .admin-page .hero-card {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 24px;
        margin-bottom: 20px;
    }

    .admin-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 11px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--admin-primary);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .admin-page .hero-title {
        margin: 14px 0 8px;
        color: var(--admin-text);
        font-size: 28px;
        font-weight: 700;
    }

    .admin-page .hero-subtitle {
        margin: 0;
        max-width: 720px;
        color: var(--admin-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .admin-page .btn-primary-clean,
    .admin-page .btn-secondary-clean {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 12px;
        padding: 11px 15px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .admin-page .btn-primary-clean {
        border: 0;
        background: var(--admin-primary);
        color: #ffffff;
    }

    .admin-page .btn-secondary-clean {
        border: 1px solid var(--admin-border);
        background: #ffffff;
        color: var(--admin-text);
    }

    .admin-page .table-card {
        padding: 22px;
    }

    .admin-page .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }

    .admin-page .toolbar-title {
        margin: 0 0 4px;
        color: var(--admin-text);
        font-size: 20px;
        font-weight: 700;
    }

    .admin-page .toolbar-subtitle {
        margin: 0;
        color: var(--admin-muted);
        font-size: 13px;
    }

    .admin-page .search-form {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .admin-page .search-input {
        width: min(100%, 280px);
        border: 1px solid var(--admin-border);
        border-radius: 12px;
        padding: 11px 14px;
        font-size: 14px;
        outline: none;
    }

    .admin-page .alert-clean {
        margin-bottom: 16px;
        padding: 13px 15px;
        border-radius: 12px;
        font-size: 14px;
    }

    .admin-page .alert-success-clean {
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        color: #166534;
    }

    .admin-page .alert-error-clean {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
    }

    .admin-page .table-clean {
        margin-bottom: 0;
        vertical-align: middle;
    }

    .admin-page .table-clean thead th {
        padding: 14px 16px;
        border-bottom: 1px solid var(--admin-border);
        color: var(--admin-muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: #f8fafc;
    }

    .admin-page .table-clean tbody td {
        padding: 15px 16px;
        border-bottom: 1px solid #edf2f7;
        color: var(--admin-text);
        font-size: 14px;
    }

    .admin-page .table-clean tbody tr:last-child td {
        border-bottom: 0;
    }

    .admin-page .admin-user {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .admin-page .admin-avatar {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ecfeff;
        color: var(--admin-primary);
        font-size: 16px;
        font-weight: 700;
        border: 1px solid #ccfbf1;
        flex-shrink: 0;
    }

    .admin-page .admin-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .admin-page .admin-user strong {
        display: block;
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: 600;
    }

    .admin-page .admin-user span,
    .admin-page .text-muted-small {
        color: var(--admin-muted);
        font-size: 13px;
    }

    .admin-page .role-badge {
        display: inline-flex;
        align-items: center;
        padding: 7px 10px;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid var(--admin-border);
        color: #334155;
        font-size: 12px;
        font-weight: 600;
    }

    .admin-page .action-group {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .admin-page .btn-icon-clean {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid var(--admin-border);
        text-decoration: none;
    }

    .admin-page .btn-edit {
        background: #ecfeff;
        border-color: #99f6e4;
        color: var(--admin-primary);
    }

    .admin-page .btn-delete {
        background: #fef2f2;
        border-color: #fecaca;
        color: #b91c1c;
    }

    .admin-page .empty-state {
        padding: 30px 18px;
        text-align: center;
        color: var(--admin-muted);
        background: #f8fafc;
        border: 1px dashed #d1d5db;
        border-radius: 16px;
    }

    @media (max-width: 991.98px) {
        .admin-page .hero-card {
            flex-direction: column;
            align-items: stretch;
        }
    }

    @media (max-width: 767.98px) {
        .admin-page .toolbar {
            align-items: stretch;
        }

        .admin-page .search-form,
        .admin-page .search-input {
            width: 100%;
        }

        .admin-page .action-group {
            justify-content: flex-start;
        }
    }

/* Source: app\Views\user\v_admin_edit.php */
.admin-edit-page {
        --edit-surface: #ffffff;
        --edit-border: #e5e7eb;
        --edit-text: #111827;
        --edit-muted: #6b7280;
        --edit-primary: #0f766e;
    }

    .admin-edit-page .hero-card,
    .admin-edit-page .form-card,
    .admin-edit-page .info-card {
        background: var(--edit-surface);
        border: 1px solid var(--edit-border);
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
    }

    .admin-edit-page .hero-card {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 24px;
        margin-bottom: 20px;
    }

    .admin-edit-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 11px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--edit-primary);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .admin-edit-page .hero-title {
        margin: 14px 0 8px;
        color: var(--edit-text);
        font-size: 28px;
        font-weight: 700;
    }

    .admin-edit-page .hero-subtitle {
        margin: 0;
        max-width: 720px;
        color: var(--edit-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .admin-edit-page .hero-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .admin-edit-page .content-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 20px;
    }

    .admin-edit-page .form-card,
    .admin-edit-page .info-card {
        padding: 22px;
    }

    .admin-edit-page .section-title {
        margin: 0 0 6px;
        color: var(--edit-text);
        font-size: 20px;
        font-weight: 700;
    }

    .admin-edit-page .section-caption {
        margin: 0 0 18px;
        color: var(--edit-muted);
        font-size: 13px;
    }

    .admin-edit-page .form-grid {
        display: grid;
        gap: 16px;
    }

    .admin-edit-page .form-label-clean {
        display: block;
        margin-bottom: 8px;
        color: var(--edit-text);
        font-size: 14px;
        font-weight: 600;
    }

    .admin-edit-page .form-control-clean {
        width: 100%;
        border: 1px solid var(--edit-border);
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        outline: none;
    }

    .admin-edit-page .form-help {
        margin-top: 6px;
        color: var(--edit-muted);
        font-size: 12px;
    }

    .admin-edit-page .form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 22px;
        flex-wrap: wrap;
    }

    .admin-edit-page .btn-primary-clean,
    .admin-edit-page .btn-secondary-clean,
    .admin-edit-page .btn-danger-clean {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 12px;
        padding: 11px 15px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .admin-edit-page .btn-primary-clean {
        border: 0;
        background: var(--edit-primary);
        color: #ffffff;
    }

    .admin-edit-page .btn-secondary-clean {
        border: 1px solid var(--edit-border);
        background: #ffffff;
        color: var(--edit-text);
    }

    .admin-edit-page .btn-danger-clean {
        border: 1px solid #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

    .admin-edit-page .preview-frame {
        width: 100%;
        min-height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        overflow: hidden;
        background: #f8fafc;
        border: 1px solid var(--edit-border);
        margin-bottom: 18px;
    }

    .admin-edit-page .preview-frame img {
        width: 100%;
        height: 100%;
        max-height: 260px;
        object-fit: cover;
    }

    .admin-edit-page .preview-placeholder {
        color: var(--edit-muted);
        text-align: center;
        padding: 20px;
    }

    .admin-edit-page .info-list {
        display: grid;
        gap: 12px;
    }

    .admin-edit-page .info-item {
        padding: 12px 14px;
        border-radius: 14px;
        background: #f8fafc;
        border: 1px solid var(--edit-border);
    }

    .admin-edit-page .info-item span {
        display: block;
        margin-bottom: 6px;
        color: var(--edit-muted);
        font-size: 12px;
    }

    .admin-edit-page .info-item strong {
        color: var(--edit-text);
        font-size: 14px;
        font-weight: 600;
    }

    .admin-edit-page .alert-clean {
        margin-bottom: 16px;
        padding: 13px 15px;
        border-radius: 12px;
        font-size: 14px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
    }

    @media (max-width: 991.98px) {
        .admin-edit-page .hero-card,
        .admin-edit-page .content-grid {
            grid-template-columns: 1fr;
            flex-direction: column;
        }
    }

    @media (max-width: 767.98px) {
        .admin-edit-page .form-actions {
            flex-direction: column;
            align-items: stretch;
        }
    }

/* Source: app\Views\user\v_admin_tambah.php */
.admin-form-page {
        --form-surface: #ffffff;
        --form-border: #e5e7eb;
        --form-text: #111827;
        --form-muted: #6b7280;
        --form-primary: #0f766e;
    }

    .admin-form-page .hero-card,
    .admin-form-page .form-card,
    .admin-form-page .info-card {
        background: var(--form-surface);
        border: 1px solid var(--form-border);
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
    }

    .admin-form-page .hero-card {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 24px;
        margin-bottom: 20px;
    }

    .admin-form-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 11px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--form-primary);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .admin-form-page .hero-title {
        margin: 14px 0 8px;
        color: var(--form-text);
        font-size: 28px;
        font-weight: 700;
    }

    .admin-form-page .hero-subtitle {
        margin: 0;
        max-width: 720px;
        color: var(--form-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .admin-form-page .content-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 20px;
    }

    .admin-form-page .form-card,
    .admin-form-page .info-card {
        padding: 22px;
    }

    .admin-form-page .section-title {
        margin: 0 0 6px;
        color: var(--form-text);
        font-size: 20px;
        font-weight: 700;
    }

    .admin-form-page .section-caption {
        margin: 0 0 18px;
        color: var(--form-muted);
        font-size: 13px;
    }

    .admin-form-page .form-grid {
        display: grid;
        gap: 16px;
    }

    .admin-form-page .form-label-clean {
        display: block;
        margin-bottom: 8px;
        color: var(--form-text);
        font-size: 14px;
        font-weight: 600;
    }

    .admin-form-page .form-control-clean {
        width: 100%;
        border: 1px solid var(--form-border);
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        outline: none;
    }

    .admin-form-page .form-help {
        margin-top: 6px;
        color: var(--form-muted);
        font-size: 12px;
    }

    .admin-form-page .form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 22px;
        flex-wrap: wrap;
    }

    .admin-form-page .btn-primary-clean,
    .admin-form-page .btn-secondary-clean {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 12px;
        padding: 11px 15px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .admin-form-page .btn-primary-clean {
        border: 0;
        background: var(--form-primary);
        color: #ffffff;
    }

    .admin-form-page .btn-secondary-clean {
        border: 1px solid var(--form-border);
        background: #ffffff;
        color: var(--form-text);
    }

    .admin-form-page .info-list {
        display: grid;
        gap: 12px;
    }

    .admin-form-page .info-item {
        padding: 12px 14px;
        border-radius: 14px;
        background: #f8fafc;
        border: 1px solid var(--form-border);
    }

    .admin-form-page .info-item span {
        display: block;
        margin-bottom: 6px;
        color: var(--form-muted);
        font-size: 12px;
    }

    .admin-form-page .info-item strong {
        color: var(--form-text);
        font-size: 14px;
        font-weight: 600;
    }

    .admin-form-page .alert-clean {
        margin-bottom: 16px;
        padding: 13px 15px;
        border-radius: 12px;
        font-size: 14px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
    }

    @media (max-width: 991.98px) {
        .admin-form-page .hero-card,
        .admin-form-page .content-grid {
            grid-template-columns: 1fr;
            flex-direction: column;
        }
    }

    @media (max-width: 767.98px) {
        .admin-form-page .form-actions {
            flex-direction: column;
            align-items: stretch;
        }
    }

/* Source: app\Views\user\v_customer.php */
.customer-page {
        --customer-surface: #ffffff;
        --customer-border: #e5e7eb;
        --customer-text: #111827;
        --customer-muted: #6b7280;
        --customer-primary: #0f766e;
    }

    .customer-page .hero-card,
    .customer-page .table-card {
        background: var(--customer-surface);
        border: 1px solid var(--customer-border);
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
    }

    .customer-page .hero-card {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 24px;
        margin-bottom: 20px;
    }

    .customer-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 11px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--customer-primary);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .customer-page .hero-title {
        margin: 14px 0 8px;
        color: var(--customer-text);
        font-size: 28px;
        font-weight: 700;
    }

    .customer-page .hero-subtitle {
        margin: 0;
        max-width: 720px;
        color: var(--customer-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .customer-page .hero-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .customer-page .btn-primary-clean,
    .customer-page .btn-secondary-clean {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 12px;
        padding: 11px 15px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .customer-page .btn-primary-clean {
        border: 0;
        background: var(--customer-primary);
        color: #ffffff;
    }

    .customer-page .btn-primary-clean:hover {
        background: #0b5f58;
        color: #ffffff;
    }

    .customer-page .btn-secondary-clean {
        border: 1px solid var(--customer-border);
        background: #ffffff;
        color: var(--customer-text);
    }

    .customer-page .table-card {
        padding: 22px;
    }

    .customer-page .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 18px;
        flex-wrap: wrap;
    }

    .customer-page .toolbar-title {
        margin: 0 0 4px;
        color: var(--customer-text);
        font-size: 20px;
        font-weight: 700;
    }

    .customer-page .toolbar-subtitle {
        margin: 0;
        color: var(--customer-muted);
        font-size: 13px;
    }

    .customer-page .search-form {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .customer-page .search-input {
        width: min(100%, 320px);
        border: 1px solid var(--customer-border);
        border-radius: 12px;
        padding: 11px 14px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .customer-page .search-input:focus {
        border-color: var(--customer-primary);
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }

    .customer-page .alert-clean {
        margin-bottom: 16px;
        padding: 13px 15px;
        border-radius: 12px;
        font-size: 14px;
    }

    .customer-page .alert-success-clean {
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        color: #166534;
    }

    .customer-page .alert-error-clean {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
    }

    .customer-page .table-clean {
        margin-bottom: 0;
        vertical-align: middle;
    }

    .customer-page .table-clean thead th {
        padding: 14px 16px;
        border-bottom: 1px solid var(--customer-border);
        color: var(--customer-muted);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: #f8fafc;
    }

    .customer-page .table-clean tbody td {
        padding: 15px 16px;
        border-bottom: 1px solid #edf2f7;
        color: var(--customer-text);
        font-size: 14px;
    }

    .customer-page .table-clean tbody tr:last-child td {
        border-bottom: 0;
    }

    .customer-page .customer-name strong {
        display: block;
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: 600;
    }

    .customer-page .customer-name span,
    .customer-page .text-muted-small {
        color: var(--customer-muted);
        font-size: 13px;
    }

    .customer-page .action-group {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .customer-page .btn-icon-clean {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid var(--customer-border);
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .customer-page .btn-icon-clean.btn-edit {
        background: #ecfeff;
        border-color: #99f6e4;
        color: var(--customer-primary);
    }

    .customer-page .btn-icon-clean.btn-delete {
        background: #fef2f2;
        border-color: #fecaca;
        color: #b91c1c;
    }

    .customer-page .empty-state {
        padding: 30px 18px;
        text-align: center;
        color: var(--customer-muted);
        background: #f8fafc;
        border: 1px dashed #d1d5db;
        border-radius: 16px;
    }

    @media (max-width: 991.98px) {
        .customer-page .hero-card {
            flex-direction: column;
            align-items: stretch;
        }
    }

    @media (max-width: 767.98px) {
        .customer-page .toolbar {
            align-items: stretch;
        }

        .customer-page .search-form {
            width: 100%;
        }

        .customer-page .search-input {
            width: 100%;
        }

        .customer-page .action-group {
            justify-content: flex-start;
        }
    }

/* Source: app\Views\user\v_customer_edit.php */
.customer-edit-page {
        --edit-surface: #ffffff;
        --edit-border: #e5e7eb;
        --edit-text: #111827;
        --edit-muted: #6b7280;
        --edit-primary: #0f766e;
    }

    .customer-edit-page .hero-card,
    .customer-edit-page .form-card,
    .customer-edit-page .info-card {
        background: var(--edit-surface);
        border: 1px solid var(--edit-border);
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
    }

    .customer-edit-page .hero-card {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 24px;
        margin-bottom: 20px;
    }

    .customer-edit-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 11px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--edit-primary);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .customer-edit-page .hero-title {
        margin: 14px 0 8px;
        color: var(--edit-text);
        font-size: 28px;
        font-weight: 700;
    }

    .customer-edit-page .hero-subtitle {
        margin: 0;
        max-width: 720px;
        color: var(--edit-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .customer-edit-page .hero-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .customer-edit-page .content-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 20px;
    }

    .customer-edit-page .form-card,
    .customer-edit-page .info-card {
        padding: 22px;
    }

    .customer-edit-page .section-title {
        margin: 0 0 6px;
        color: var(--edit-text);
        font-size: 20px;
        font-weight: 700;
    }

    .customer-edit-page .section-caption {
        margin: 0 0 18px;
        color: var(--edit-muted);
        font-size: 13px;
    }

    .customer-edit-page .form-grid {
        display: grid;
        gap: 16px;
    }

    .customer-edit-page .form-label-clean {
        display: block;
        margin-bottom: 8px;
        color: var(--edit-text);
        font-size: 14px;
        font-weight: 600;
    }

    .customer-edit-page .form-control-clean {
        width: 100%;
        border: 1px solid var(--edit-border);
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .customer-edit-page textarea.form-control-clean {
        min-height: 110px;
        resize: vertical;
    }

    .customer-edit-page .form-control-clean:focus {
        border-color: var(--edit-primary);
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }

    .customer-edit-page .form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 22px;
        flex-wrap: wrap;
    }

    .customer-edit-page .btn-primary-clean,
    .customer-edit-page .btn-secondary-clean,
    .customer-edit-page .btn-danger-clean {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 12px;
        padding: 11px 15px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .customer-edit-page .btn-primary-clean {
        border: 0;
        background: var(--edit-primary);
        color: #ffffff;
    }

    .customer-edit-page .btn-secondary-clean {
        border: 1px solid var(--edit-border);
        background: #ffffff;
        color: var(--edit-text);
    }

    .customer-edit-page .btn-danger-clean {
        border: 1px solid #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

    .customer-edit-page .info-list {
        display: grid;
        gap: 12px;
    }

    .customer-edit-page .info-item {
        padding: 12px 14px;
        border-radius: 14px;
        background: #f8fafc;
        border: 1px solid var(--edit-border);
    }

    .customer-edit-page .info-item span {
        display: block;
        margin-bottom: 6px;
        color: var(--edit-muted);
        font-size: 12px;
    }

    .customer-edit-page .info-item strong {
        color: var(--edit-text);
        font-size: 14px;
        font-weight: 600;
    }

    .customer-edit-page .alert-clean {
        margin-bottom: 16px;
        padding: 13px 15px;
        border-radius: 12px;
        font-size: 14px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
    }

    @media (max-width: 991.98px) {
        .customer-edit-page .hero-card,
        .customer-edit-page .content-grid {
            grid-template-columns: 1fr;
            flex-direction: column;
        }
    }

    @media (max-width: 767.98px) {
        .customer-edit-page .form-actions {
            flex-direction: column;
            align-items: stretch;
        }
    }

/* Source: app\Views\user\v_customer_tambah.php */
.customer-form-page {
        --form-surface: #ffffff;
        --form-border: #e5e7eb;
        --form-text: #111827;
        --form-muted: #6b7280;
        --form-primary: #0f766e;
    }

    .customer-form-page .hero-card,
    .customer-form-page .form-card,
    .customer-form-page .info-card {
        background: var(--form-surface);
        border: 1px solid var(--form-border);
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
    }

    .customer-form-page .hero-card {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 24px;
        margin-bottom: 20px;
    }

    .customer-form-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 11px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--form-primary);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .customer-form-page .hero-title {
        margin: 14px 0 8px;
        color: var(--form-text);
        font-size: 28px;
        font-weight: 700;
    }

    .customer-form-page .hero-subtitle {
        margin: 0;
        max-width: 720px;
        color: var(--form-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .customer-form-page .content-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 20px;
    }

    .customer-form-page .form-card,
    .customer-form-page .info-card {
        padding: 22px;
    }

    .customer-form-page .section-title {
        margin: 0 0 6px;
        color: var(--form-text);
        font-size: 20px;
        font-weight: 700;
    }

    .customer-form-page .section-caption {
        margin: 0 0 18px;
        color: var(--form-muted);
        font-size: 13px;
    }

    .customer-form-page .form-grid {
        display: grid;
        gap: 16px;
    }

    .customer-form-page .form-label-clean {
        display: block;
        margin-bottom: 8px;
        color: var(--form-text);
        font-size: 14px;
        font-weight: 600;
    }

    .customer-form-page .form-control-clean {
        width: 100%;
        border: 1px solid var(--form-border);
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .customer-form-page textarea.form-control-clean {
        min-height: 110px;
        resize: vertical;
    }

    .customer-form-page .form-control-clean:focus {
        border-color: var(--form-primary);
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }

    .customer-form-page .form-help {
        margin-top: 6px;
        color: var(--form-muted);
        font-size: 12px;
    }

    .customer-form-page .form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 22px;
        flex-wrap: wrap;
    }

    .customer-form-page .btn-primary-clean,
    .customer-form-page .btn-secondary-clean {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 12px;
        padding: 11px 15px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .customer-form-page .btn-primary-clean {
        border: 0;
        background: var(--form-primary);
        color: #ffffff;
    }

    .customer-form-page .btn-secondary-clean {
        border: 1px solid var(--form-border);
        background: #ffffff;
        color: var(--form-text);
    }

    .customer-form-page .info-list {
        display: grid;
        gap: 12px;
    }

    .customer-form-page .info-item {
        padding: 12px 14px;
        border-radius: 14px;
        background: #f8fafc;
        border: 1px solid var(--form-border);
    }

    .customer-form-page .info-item span {
        display: block;
        margin-bottom: 6px;
        color: var(--form-muted);
        font-size: 12px;
    }

    .customer-form-page .info-item strong {
        color: var(--form-text);
        font-size: 14px;
        font-weight: 600;
    }

    .customer-form-page .alert-clean {
        margin-bottom: 16px;
        padding: 13px 15px;
        border-radius: 12px;
        font-size: 14px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
    }

    @media (max-width: 991.98px) {
        .customer-form-page .hero-card,
        .customer-form-page .content-grid {
            grid-template-columns: 1fr;
            flex-direction: column;
        }
    }

    @media (max-width: 767.98px) {
        .customer-form-page .form-actions {
            flex-direction: column;
            align-items: stretch;
        }
    }

/* Source: app\Views\user\v_index.php */
.dashboard-clean {
        --dash-bg: #f5f7fb;
        --dash-surface: #ffffff;
        --dash-border: #e5e7eb;
        --dash-text: #111827;
        --dash-muted: #6b7280;
        --dash-teal: #0f766e;
        --dash-teal-soft: #ccfbf1;
        --dash-slate: #334155;
        --dash-slate-soft: #e2e8f0;
        --dash-amber: #b45309;
        --dash-amber-soft: #fef3c7;
        --dash-emerald: #15803d;
        --dash-emerald-soft: #dcfce7;
    }

    .dashboard-clean .hero-card,
    .dashboard-clean .metric-card,
    .dashboard-clean .insight-card,
    .dashboard-clean .snapshot-card,
    .dashboard-clean .action-card {
        background: var(--dash-surface);
        border: 1px solid var(--dash-border);
        border-radius: 20px;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
    }

    .dashboard-clean .hero-card {
        padding: 28px;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    }

    .dashboard-clean .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--dash-teal);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .dashboard-clean .hero-title {
        margin: 18px 0 10px;
        color: var(--dash-text);
        font-size: 32px;
        font-weight: 700;
    }

    .dashboard-clean .hero-subtitle {
        margin: 0;
        max-width: 680px;
        color: var(--dash-muted);
        font-size: 15px;
        line-height: 1.8;
    }

    .dashboard-clean .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 26px;
    }

    .dashboard-clean .hero-stat {
        padding: 18px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid var(--dash-border);
    }

    .dashboard-clean .hero-stat span {
        display: block;
        margin-bottom: 8px;
        color: var(--dash-muted);
        font-size: 13px;
    }

    .dashboard-clean .hero-stat strong {
        display: block;
        color: var(--dash-text);
        font-size: 24px;
        font-weight: 700;
    }

    .dashboard-clean .metric-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
        margin-bottom: 24px;
    }

    .dashboard-clean .metric-card {
        padding: 22px;
    }

    .dashboard-clean .metric-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
    }

    .dashboard-clean .metric-icon {
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        font-size: 20px;
    }

    .dashboard-clean .metric-icon.teal {
        background: var(--dash-teal-soft);
        color: var(--dash-teal);
    }

    .dashboard-clean .metric-icon.slate {
        background: var(--dash-slate-soft);
        color: var(--dash-slate);
    }

    .dashboard-clean .metric-icon.amber {
        background: var(--dash-amber-soft);
        color: var(--dash-amber);
    }

    .dashboard-clean .metric-icon.emerald {
        background: var(--dash-emerald-soft);
        color: var(--dash-emerald);
    }

    .dashboard-clean .metric-value {
        margin: 0 0 8px;
        color: var(--dash-text);
        font-size: 28px;
        font-weight: 700;
    }

    .dashboard-clean .metric-label {
        margin: 0 0 6px;
        color: var(--dash-text);
        font-size: 15px;
        font-weight: 600;
    }

    .dashboard-clean .metric-note {
        margin: 0;
        color: var(--dash-muted);
        font-size: 13px;
        line-height: 1.7;
    }

    .dashboard-clean .insight-layout {
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: 20px;
        margin-bottom: 24px;
    }

    .dashboard-clean .insight-card,
    .dashboard-clean .action-card {
        padding: 24px;
    }

    .dashboard-clean .section-title {
        margin: 0 0 6px;
        color: var(--dash-text);
        font-size: 20px;
        font-weight: 700;
    }

    .dashboard-clean .section-caption {
        margin: 0 0 22px;
        color: var(--dash-muted);
        font-size: 14px;
    }

    .dashboard-clean .progress-group {
        display: grid;
        gap: 18px;
    }

    .dashboard-clean .progress-item {
        padding: 18px;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid var(--dash-border);
    }

    .dashboard-clean .progress-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .dashboard-clean .progress-head strong {
        color: var(--dash-text);
        font-size: 15px;
    }

    .dashboard-clean .progress-head span {
        color: var(--dash-muted);
        font-size: 13px;
    }

    .dashboard-clean .progress-bar-clean {
        width: 100%;
        height: 10px;
        overflow: hidden;
        border-radius: 999px;
        background: #e5e7eb;
    }

    .dashboard-clean .progress-value-clean {
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
    }

    .dashboard-clean .payment-summary {
        display: grid;
        gap: 14px;
    }

    .dashboard-clean .payment-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-radius: 14px;
        background: #f8fafc;
        border: 1px solid var(--dash-border);
    }

    .dashboard-clean .payment-row small {
        display: block;
        color: var(--dash-muted);
        font-size: 12px;
    }

    .dashboard-clean .payment-row strong {
        color: var(--dash-text);
        font-size: 15px;
    }

    .dashboard-clean .snapshot-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-bottom: 24px;
    }

    .dashboard-clean .snapshot-card {
        padding: 22px;
    }

    .dashboard-clean .snapshot-card h4 {
        margin: 0 0 18px;
        color: var(--dash-text);
        font-size: 17px;
        font-weight: 700;
    }

    .dashboard-clean .snapshot-stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-top: 1px solid var(--dash-border);
    }

    .dashboard-clean .snapshot-stat:first-of-type {
        border-top: 0;
        padding-top: 0;
    }

    .dashboard-clean .snapshot-stat span {
        color: var(--dash-muted);
        font-size: 13px;
    }

    .dashboard-clean .snapshot-stat strong {
        color: var(--dash-text);
        font-size: 15px;
    }

    .dashboard-clean .action-links {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .dashboard-clean .action-link {
        display: block;
        padding: 18px;
        border-radius: 16px;
        border: 1px solid var(--dash-border);
        background: #f8fafc;
        color: var(--dash-text);
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .dashboard-clean .action-link:hover {
        border-color: #cbd5e1;
        background: #ffffff;
        transform: translateY(-1px);
    }

    .dashboard-clean .action-link i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
        border-radius: 12px;
        background: #ecfeff;
        color: var(--dash-teal);
        font-size: 18px;
    }

    .dashboard-clean .action-link strong {
        display: block;
        margin-bottom: 6px;
        font-size: 15px;
    }

    .dashboard-clean .action-link span {
        color: var(--dash-muted);
        font-size: 13px;
        line-height: 1.6;
    }

    @media (max-width: 1199.98px) {
        .dashboard-clean .metric-grid,
        .dashboard-clean .snapshot-grid,
        .dashboard-clean .action-links {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .dashboard-clean .insight-layout {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767.98px) {
        .dashboard-clean .hero-card,
        .dashboard-clean .metric-card,
        .dashboard-clean .insight-card,
        .dashboard-clean .snapshot-card,
        .dashboard-clean .action-card {
            border-radius: 18px;
        }

        .dashboard-clean .hero-title {
            font-size: 26px;
        }

        .dashboard-clean .hero-stats,
        .dashboard-clean .metric-grid,
        .dashboard-clean .snapshot-grid,
        .dashboard-clean .action-links {
            grid-template-columns: 1fr;
        }
    }

/* Source: app\Views\user\v_invoice.php */
.invoice-page {
    color: #152033;
  }

  .invoice-hero,
  .invoice-card {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  }

  .invoice-hero {
    padding: 28px;
    margin-bottom: 24px;
  }

  .invoice-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f3f7fb;
    color: #3f5873;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .invoice-title {
    margin: 14px 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #101828;
  }

  .invoice-subtitle {
    max-width: 720px;
    margin: 0;
    color: #5f6f85;
    font-size: 14px;
    line-height: 1.7;
  }

  .invoice-stat {
    height: 100%;
    padding: 18px 20px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e9eef5;
  }

  .invoice-stat-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7a8799;
  }

  .invoice-stat-value {
    margin-top: 8px;
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
  }

  .invoice-card {
    padding: 24px;
  }

  .invoice-card + .invoice-card {
    margin-top: 24px;
  }

  .invoice-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }

  .invoice-section-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #101828;
  }

  .invoice-section-subtitle {
    margin: 6px 0 0;
    color: #667085;
    font-size: 14px;
  }

  .invoice-filter {
    padding: 18px;
    border: 1px solid #e9eef5;
    border-radius: 18px;
    background: #fbfcfe;
    margin-bottom: 20px;
  }

  .invoice-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #667085;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .invoice-input,
  .invoice-select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    padding: 11px 14px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
    box-shadow: none;
  }

  .invoice-input:focus,
  .invoice-select:focus {
    border-color: #9db7d8;
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
  }

  .invoice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
  }

  .invoice-btn-primary {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
  }

  .invoice-btn-primary:hover {
    background: #1e40af;
    border-color: #1e40af;
    color: #fff;
  }

  .invoice-btn-light {
    background: #fff;
    border-color: #d7dfeb;
    color: #334155;
  }

  .invoice-btn-light:hover {
    border-color: #b8c5d6;
    color: #0f172a;
  }

  .invoice-table-wrap {
    border: 1px solid #e9eef5;
    border-radius: 18px;
    overflow: hidden;
  }

  .invoice-table {
    margin: 0;
  }

  .invoice-table thead th {
    border: 0;
    background: #f8fafc;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
  }

  .invoice-table tbody td {
    border-color: #edf2f7;
    padding: 16px;
    vertical-align: middle;
    font-size: 14px;
    color: #334155;
  }

  .invoice-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .invoice-code {
    font-weight: 700;
    color: #0f172a;
  }

  .invoice-customer {
    font-weight: 600;
    color: #111827;
  }

  .invoice-muted {
    color: #6b7280;
    font-size: 13px;
  }

  .invoice-amount {
    font-weight: 700;
    color: #0f172a;
  }

  .invoice-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
  }

  .invoice-status-success {
    background: #e8f7ee;
    color: #157347;
  }

  .invoice-status-warning {
    background: #fff4e5;
    color: #b45309;
  }

  .invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .invoice-action {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid #dbe4ee;
    background: #fff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .invoice-action:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
  }

  .invoice-action-danger:hover {
    border-color: #fecaca;
    color: #dc2626;
  }

  .invoice-empty {
    padding: 42px 20px;
    text-align: center;
    color: #64748b;
  }

  @media (max-width: 991px) {
    .invoice-hero,
    .invoice-card {
      padding: 20px;
      border-radius: 18px;
    }

    .invoice-title {
      font-size: 24px;
    }

    .invoice-toolbar {
      flex-direction: column;
      align-items: stretch;
    }
  }

/* Source: app\Views\user\v_invoice_detail.php */
.invoice-detail-page {
    color: #152033;
  }

  .invoice-detail-hero,
  .invoice-detail-card {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  }

  .invoice-detail-hero,
  .invoice-detail-card {
    padding: 24px;
  }

  .invoice-detail-hero {
    margin-bottom: 24px;
  }

  .invoice-detail-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
  }

  .invoice-detail-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f3f7fb;
    color: #3f5873;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .invoice-detail-title {
    margin: 14px 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #101828;
  }

  .invoice-detail-subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #5f6f85;
  }

  .invoice-detail-card + .invoice-detail-card {
    margin-top: 24px;
  }

  .invoice-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .invoice-panel {
    padding: 20px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e9eef5;
    height: 100%;
  }

  .invoice-panel-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .invoice-panel-title {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
  }

  .invoice-panel p {
    margin: 0 0 6px;
    color: #475467;
  }

  .invoice-detail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
  }

  .invoice-detail-badge-success {
    background: #e8f7ee;
    color: #157347;
  }

  .invoice-detail-badge-warning {
    background: #fff4e5;
    color: #b45309;
  }

  .invoice-detail-card-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
  }

  .invoice-detail-card-subtitle {
    margin: 0 0 20px;
    font-size: 14px;
    color: #667085;
  }

  .invoice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: all .2s ease;
  }

  .invoice-btn-primary {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
  }

  .invoice-btn-primary:hover {
    background: #1e40af;
    border-color: #1e40af;
    color: #fff;
  }

  .invoice-btn-light {
    background: #fff;
    border-color: #d7dfeb;
    color: #334155;
  }

  .invoice-btn-light:hover {
    border-color: #b8c5d6;
    color: #0f172a;
  }

  .invoice-btn-soft {
    background: #eff6ff;
    border-color: #dbeafe;
    color: #1d4ed8;
  }

  .invoice-btn-soft:hover {
    background: #dbeafe;
    color: #1e3a8a;
  }

  .invoice-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .invoice-table-wrap {
    border: 1px solid #e9eef5;
    border-radius: 18px;
    overflow: hidden;
  }

  .invoice-table {
    margin: 0;
  }

  .invoice-table thead th {
    background: #f8fafc;
    border: 0;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
  }

  .invoice-table tbody td {
    padding: 15px 16px;
    border-color: #edf2f7;
    vertical-align: middle;
    font-size: 14px;
    color: #334155;
  }

  .invoice-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .invoice-summary {
    width: 100%;
    max-width: 360px;
    margin-left: auto;
  }

  .invoice-summary th,
  .invoice-summary td {
    padding: 13px 0;
    border-color: #edf2f7;
    font-size: 14px;
  }

  .invoice-summary th {
    color: #475467;
    font-weight: 600;
  }

  .invoice-summary td {
    text-align: right;
    color: #111827;
    font-weight: 700;
  }

  .invoice-note {
    padding: 18px;
    border-radius: 18px;
    background: #fbfcfe;
    border: 1px solid #e9eef5;
    color: #475467;
    line-height: 1.7;
  }

  @media (max-width: 991px) {
    .invoice-detail-hero,
    .invoice-detail-card {
      padding: 20px;
      border-radius: 18px;
    }

    .invoice-detail-toolbar {
      flex-direction: column;
      align-items: stretch;
    }

    .invoice-detail-title {
      font-size: 24px;
    }

    .invoice-detail-grid {
      grid-template-columns: 1fr;
    }

    .invoice-summary {
      max-width: none;
    }
  }

/* Source: app\Views\user\v_invoice_edit.php */
.invoice-form-page {
    color: #152033;
  }

  .invoice-form-hero,
  .invoice-form-card,
  .invoice-summary-card {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  }

  .invoice-form-hero,
  .invoice-form-card,
  .invoice-summary-card {
    padding: 24px;
  }

  .invoice-form-hero {
    margin-bottom: 24px;
  }

  .invoice-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f3f7fb;
    color: #3f5873;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .invoice-form-title {
    margin: 14px 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #101828;
  }

  .invoice-form-subtitle {
    margin: 0;
    color: #5f6f85;
    font-size: 14px;
    line-height: 1.7;
  }

  .invoice-form-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
  }

  .invoice-form-card + .invoice-form-card {
    margin-top: 24px;
  }

  .invoice-form-section-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
  }

  .invoice-form-section-subtitle {
    margin: 0 0 20px;
    font-size: 14px;
    color: #667085;
  }

  .invoice-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #667085;
  }

  .invoice-input,
  .invoice-select,
  .invoice-textarea {
    width: 100%;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    padding: 11px 14px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
  }

  .invoice-input,
  .invoice-select {
    min-height: 46px;
  }

  .invoice-textarea {
    min-height: 136px;
    resize: vertical;
  }

  .invoice-input:focus,
  .invoice-select:focus,
  .invoice-textarea:focus {
    border-color: #9db7d8;
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
  }

  .invoice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
  }

  .invoice-btn-primary {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
  }

  .invoice-btn-primary:hover {
    background: #1e40af;
    border-color: #1e40af;
    color: #fff;
  }

  .invoice-btn-light {
    background: #fff;
    border-color: #d7dfeb;
    color: #334155;
  }

  .invoice-btn-light:hover {
    border-color: #b8c5d6;
    color: #0f172a;
  }

  .invoice-btn-soft {
    background: #eff6ff;
    border-color: #dbeafe;
    color: #1d4ed8;
  }

  .invoice-btn-soft:hover {
    background: #dbeafe;
    color: #1e3a8a;
  }

  .invoice-btn-danger {
    background: #fff5f5;
    border-color: #fecaca;
    color: #b91c1c;
  }

  .invoice-btn-danger:hover {
    background: #fee2e2;
    color: #991b1b;
  }

  .invoice-table-wrap {
    border: 1px solid #e9eef5;
    border-radius: 18px;
    overflow: hidden;
  }

  .invoice-table {
    margin: 0;
  }

  .invoice-table thead th {
    background: #f8fafc;
    border: 0;
    padding: 14px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    white-space: nowrap;
  }

  .invoice-table tbody td {
    padding: 12px;
    border-color: #edf2f7;
    vertical-align: middle;
  }

  .invoice-table .form-control {
    min-height: 42px;
    border-radius: 12px;
    border-color: #d7dfeb;
    box-shadow: none;
    font-size: 14px;
  }

  .invoice-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }

  .invoice-summary-card {
    height: 100%;
  }

  .invoice-summary-table {
    margin-bottom: 0;
  }

  .invoice-summary-table th,
  .invoice-summary-table td {
    padding: 14px 0;
    border-color: #edf2f7;
    font-size: 14px;
  }

  .invoice-summary-table th {
    color: #475467;
    font-weight: 600;
  }

  .invoice-summary-table td {
    text-align: right;
    color: #111827;
    font-weight: 700;
  }

  .invoice-summary-table input {
    min-height: 42px;
    border-radius: 12px;
  }

  .invoice-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
  }

  @media (max-width: 991px) {
    .invoice-form-hero,
    .invoice-form-card,
    .invoice-summary-card {
      padding: 20px;
      border-radius: 18px;
    }

    .invoice-form-toolbar {
      flex-direction: column;
      align-items: stretch;
    }

    .invoice-form-title {
      font-size: 24px;
    }

    .invoice-footer-actions {
      flex-direction: column-reverse;
    }

    .invoice-footer-actions .invoice-btn {
      width: 100%;
    }
  }

/* Source: app\Views\user\v_invoice_tambah.php */
.invoice-form-page {
    color: #152033;
  }

  .invoice-form-hero,
  .invoice-form-card,
  .invoice-summary-card {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  }

  .invoice-form-hero,
  .invoice-form-card,
  .invoice-summary-card {
    padding: 24px;
  }

  .invoice-form-hero {
    margin-bottom: 24px;
  }

  .invoice-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f3f7fb;
    color: #3f5873;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .invoice-form-title {
    margin: 14px 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #101828;
  }

  .invoice-form-subtitle {
    margin: 0;
    color: #5f6f85;
    font-size: 14px;
    line-height: 1.7;
  }

  .invoice-form-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
  }

  .invoice-form-card + .invoice-form-card {
    margin-top: 24px;
  }

  .invoice-form-section-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
  }

  .invoice-form-section-subtitle {
    margin: 0 0 20px;
    font-size: 14px;
    color: #667085;
  }

  .invoice-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #667085;
  }

  .invoice-input,
  .invoice-select,
  .invoice-textarea {
    width: 100%;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    padding: 11px 14px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
  }

  .invoice-input,
  .invoice-select {
    min-height: 46px;
  }

  .invoice-textarea {
    min-height: 136px;
    resize: vertical;
  }

  .invoice-input:focus,
  .invoice-select:focus,
  .invoice-textarea:focus {
    border-color: #9db7d8;
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
  }

  .invoice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
  }

  .invoice-btn-primary {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
  }

  .invoice-btn-primary:hover {
    background: #1e40af;
    border-color: #1e40af;
    color: #fff;
  }

  .invoice-btn-light {
    background: #fff;
    border-color: #d7dfeb;
    color: #334155;
  }

  .invoice-btn-light:hover {
    border-color: #b8c5d6;
    color: #0f172a;
  }

  .invoice-btn-soft {
    background: #eff6ff;
    border-color: #dbeafe;
    color: #1d4ed8;
  }

  .invoice-btn-soft:hover {
    background: #dbeafe;
    color: #1e3a8a;
  }

  .invoice-table-wrap {
    border: 1px solid #e9eef5;
    border-radius: 18px;
    overflow: hidden;
  }

  .invoice-table {
    margin: 0;
  }

  .invoice-table thead th {
    background: #f8fafc;
    border: 0;
    padding: 14px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    white-space: nowrap;
  }

  .invoice-table tbody td {
    padding: 12px;
    border-color: #edf2f7;
    vertical-align: middle;
  }

  .invoice-table .form-control {
    min-height: 42px;
    border-radius: 12px;
    border-color: #d7dfeb;
    box-shadow: none;
    font-size: 14px;
  }

  .invoice-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }

  .invoice-summary-card {
    height: 100%;
  }

  .invoice-summary-table {
    margin-bottom: 0;
  }

  .invoice-summary-table th,
  .invoice-summary-table td {
    padding: 14px 0;
    border-color: #edf2f7;
    font-size: 14px;
  }

  .invoice-summary-table th {
    color: #475467;
    font-weight: 600;
  }

  .invoice-summary-table td {
    text-align: right;
    color: #111827;
    font-weight: 700;
  }

  .invoice-summary-table input {
    min-height: 42px;
    border-radius: 12px;
  }

  .invoice-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
  }

  @media (max-width: 991px) {
    .invoice-form-hero,
    .invoice-form-card,
    .invoice-summary-card {
      padding: 20px;
      border-radius: 18px;
    }

    .invoice-form-toolbar {
      flex-direction: column;
      align-items: stretch;
    }

    .invoice-form-title {
      font-size: 24px;
    }

    .invoice-footer-actions {
      flex-direction: column-reverse;
    }

    .invoice-footer-actions .invoice-btn {
      width: 100%;
    }
  }

/* Source: app\Views\user\v_kategori.php */
.kategori-page {
        --kategori-surface: #ffffff;
        --kategori-border: #e5e7eb;
        --kategori-text: #111827;
        --kategori-muted: #6b7280;
        --kategori-primary: #0f766e;
        --kategori-primary-soft: #ccfbf1;
        --kategori-danger-soft: #fee2e2;
    }

    .kategori-page .kategori-hero,
    .kategori-page .kategori-table-card {
        background: var(--kategori-surface);
        border: 1px solid var(--kategori-border);
        border-radius: 20px;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
    }

    .kategori-page .kategori-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        padding: 28px;
        margin-bottom: 24px;
    }

    .kategori-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--kategori-primary);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .kategori-page .hero-title {
        margin: 16px 0 10px;
        color: var(--kategori-text);
        font-size: 30px;
        font-weight: 700;
    }

    .kategori-page .hero-subtitle {
        margin: 0;
        max-width: 700px;
        color: var(--kategori-muted);
        font-size: 15px;
        line-height: 1.8;
    }

    .kategori-page .hero-side {
        min-width: 220px;
        padding: 20px;
        border-radius: 18px;
        background: #f8fafc;
        border: 1px solid var(--kategori-border);
    }

    .kategori-page .hero-side span {
        display: block;
        margin-bottom: 8px;
        color: var(--kategori-muted);
        font-size: 13px;
    }

    .kategori-page .hero-side strong {
        display: block;
        color: var(--kategori-text);
        font-size: 30px;
        font-weight: 700;
    }

    .kategori-page .hero-side small {
        color: var(--kategori-muted);
        font-size: 13px;
        line-height: 1.7;
    }

    .kategori-page .kategori-table-card {
        padding: 24px;
    }

    .kategori-page .table-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 20px;
    }

    .kategori-page .table-title {
        margin: 0 0 6px;
        color: var(--kategori-text);
        font-size: 20px;
        font-weight: 700;
    }

    .kategori-page .table-caption {
        margin: 0;
        color: var(--kategori-muted);
        font-size: 14px;
    }

    .kategori-page .btn-clean-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 0;
        border-radius: 12px;
        padding: 12px 16px;
        background: var(--kategori-primary);
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.2s ease;
    }

    .kategori-page .btn-clean-primary:hover {
        background: #0b5f58;
        color: #ffffff;
    }

    .kategori-page .table-clean {
        margin-bottom: 0;
        vertical-align: middle;
    }

    .kategori-page .table-clean thead th {
        padding: 14px 16px;
        border-bottom: 1px solid var(--kategori-border);
        color: var(--kategori-muted);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: #f8fafc;
    }

    .kategori-page .table-clean tbody td {
        padding: 16px;
        border-bottom: 1px solid #edf2f7;
        color: var(--kategori-text);
        font-size: 14px;
    }

    .kategori-page .table-clean tbody tr:last-child td {
        border-bottom: 0;
    }

    .kategori-page .kategori-number {
        width: 48px;
        color: var(--kategori-muted);
        font-weight: 600;
    }

    .kategori-page .kategori-name {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .kategori-page .kategori-name strong {
        font-size: 15px;
        font-weight: 600;
    }

    .kategori-page .kategori-name span {
        color: var(--kategori-muted);
        font-size: 13px;
    }

    .kategori-page .action-group {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .kategori-page .btn-icon-clean {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid var(--kategori-border);
        background: #ffffff;
        color: var(--kategori-text);
        transition: all 0.2s ease;
    }

    .kategori-page .btn-icon-clean:hover {
        background: #f8fafc;
    }

    .kategori-page .btn-icon-clean.btn-edit {
        color: var(--kategori-primary);
        background: var(--kategori-primary-soft);
        border-color: #99f6e4;
    }

    .kategori-page .btn-icon-clean.btn-delete {
        color: #b91c1c;
        background: var(--kategori-danger-soft);
        border-color: #fecaca;
    }

    .kategori-page .empty-state {
        padding: 28px 16px;
        text-align: center;
        color: var(--kategori-muted);
    }

    .kategori-page .modal-content {
        border: 0;
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
    }

    .kategori-page .modal-header,
    .kategori-page .modal-footer {
        border-color: var(--kategori-border);
    }

    .kategori-page .modal-title {
        color: var(--kategori-text);
        font-weight: 700;
    }

    .kategori-page .form-label-clean {
        display: block;
        margin-bottom: 8px;
        color: var(--kategori-text);
        font-size: 14px;
        font-weight: 600;
    }

    .kategori-page .form-control-clean {
        width: 100%;
        border: 1px solid var(--kategori-border);
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .kategori-page .form-control-clean:focus {
        border-color: var(--kategori-primary);
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }

    @media (max-width: 767.98px) {
        .kategori-page .kategori-hero,
        .kategori-page .table-header {
            flex-direction: column;
            align-items: stretch;
        }

        .kategori-page .hero-side {
            min-width: 100%;
        }

        .kategori-page .action-group {
            justify-content: flex-start;
        }
    }

/* Source: app\Views\user\v_laporan.php */
.report-page {
    color: #152033;
  }

  .report-hero,
  .report-card {
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  }

  .report-hero,
  .report-card {
    padding: 24px;
  }

  .report-hero {
    margin-bottom: 24px;
  }

  .report-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f3f7fb;
    color: #3f5873;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .report-title {
    margin: 14px 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #101828;
  }

  .report-subtitle {
    margin: 0;
    max-width: 760px;
    color: #5f6f85;
    font-size: 14px;
    line-height: 1.7;
  }

  .report-card + .report-card {
    margin-top: 24px;
  }

  .report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
  }

  .report-section-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #101828;
  }

  .report-section-subtitle {
    margin: 6px 0 0;
    font-size: 14px;
    color: #667085;
  }

  .report-filter {
    padding: 18px;
    border-radius: 18px;
    background: #fbfcfe;
    border: 1px solid #e9eef5;
  }

  .report-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #667085;
  }

  .report-input,
  .report-select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    padding: 11px 14px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
    box-shadow: none;
  }

  .report-input:focus,
  .report-select:focus {
    border-color: #9db7d8;
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
  }

  .report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
  }

  .report-btn-primary {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
  }

  .report-btn-primary:hover {
    background: #1e40af;
    border-color: #1e40af;
    color: #fff;
  }

  .report-btn-light {
    background: #fff;
    border-color: #d7dfeb;
    color: #334155;
  }

  .report-btn-light:hover {
    border-color: #b8c5d6;
    color: #0f172a;
  }

  .report-btn-soft {
    background: #eff6ff;
    border-color: #dbeafe;
    color: #1d4ed8;
  }

  .report-btn-soft:hover {
    background: #dbeafe;
    color: #1e3a8a;
  }

  .report-stat {
    height: 100%;
    padding: 18px 20px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e9eef5;
  }

  .report-stat-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #667085;
  }

  .report-stat-value {
    margin-top: 8px;
    font-size: 24px;
    font-weight: 700;
    color: #111827;
  }

  .report-summary {
    margin-top: 20px;
    padding: 18px;
    border-radius: 18px;
    background: #fbfcfe;
    border: 1px solid #e9eef5;
  }

  .report-summary-item {
    font-size: 14px;
    color: #475467;
  }

  .report-summary-item strong {
    color: #111827;
  }

  .report-table-wrap {
    border: 1px solid #e9eef5;
    border-radius: 18px;
    overflow: hidden;
  }

  .report-table {
    margin: 0;
  }

  .report-table thead th {
    border: 0;
    background: #f8fafc;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
  }

  .report-table tbody td,
  .report-table tfoot td {
    padding: 15px 16px;
    border-color: #edf2f7;
    vertical-align: middle;
    font-size: 14px;
    color: #334155;
  }

  .report-table tfoot td {
    font-weight: 700;
    color: #111827;
    background: #fbfcfe;
  }

  .report-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
  }

  .report-status-success {
    background: #e8f7ee;
    color: #157347;
  }

  .report-status-warning {
    background: #fff4e5;
    color: #b45309;
  }

  .report-empty {
    padding: 48px 20px;
    text-align: center;
    color: #64748b;
  }

  @media (max-width: 991px) {
    .report-hero,
    .report-card {
      padding: 20px;
      border-radius: 18px;
    }

    .report-title {
      font-size: 24px;
    }

    .report-toolbar {
      flex-direction: column;
      align-items: stretch;
    }
  }

/* Source: app\Views\user\v_layout.php */
:root {
    --app-sidebar-width: 276px;
    --app-shell-gap: 18px;
  }

  body,
  button,
  input,
  select,
  textarea {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  }

  body {
    background:
      radial-gradient(circle at top left, rgba(191, 219, 254, 0.35), transparent 28%),
      linear-gradient(180deg, #f4f7fb 0%, #eef3f8 100%);
    color: #152033;
    overflow-x: hidden;
  }

  .page-wrapper {
    background: transparent;
  }

  .sidebar-wrapper {
    background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
    border-right: 1px solid #e3ebf4;
    box-shadow: 16px 0 48px rgba(15, 23, 42, 0.06);
  }

  .sidebar-brand {
    padding: 20px 18px 18px;
    border-bottom: 1px solid #e7eef6;
  }

  .sidebar-brand .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }

  .sidebar-brand img {
    max-height: 42px;
    width: auto;
  }

  .brand-meta {
    min-width: 0;
  }

  .brand-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7a8799;
  }

  .brand-name {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
  }

  .sidebar-menu {
    padding: 14px 10px 20px;
  }

  .sidebarMenuScroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .sidebar-menu > .sidebarMenuScroll > ul {
    gap: 4px;
  }

  .menu-section {
    margin: 16px 12px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #94a3b8;
  }

  .sidebar-menu ul li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
    padding: 9px 10px;
    border-radius: 16px;
    color: #536277;
    font-weight: 600;
    transition: all .2s ease;
  }

  .sidebar-menu ul li > a:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
  }

  .sidebar-menu ul li > a i {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf3f9;
    color: #4a5d75;
    font-size: 16px;
    transition: all .2s ease;
    flex-shrink: 0;
  }

  .sidebar-menu .menu-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  .sidebar-menu .menu-title {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: inherit;
    line-height: 1.3;
  }

  .sidebar-menu .menu-desc {
    display: none;
  }

  .sidebar-menu ul li.active > a,
  .sidebar-menu ul li.current-page > a {
    background: linear-gradient(135deg, #eff6ff 0%, #f8fbff 100%);
    color: #0f172a;
    box-shadow: inset 0 0 0 1px #d9e7fb;
  }

  .sidebar-menu ul li.active > a i,
  .sidebar-menu ul li.current-page > a i {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.24);
  }

  .sidebar-menu ul li.active > a .menu-desc,
  .sidebar-menu ul li.current-page > a .menu-desc {
    color: #5c6f89;
  }

  .sidebar-menu .sidebar-dropdown > a::after {
    color: #94a3b8;
  }

  .sidebar-menu .sidebar-submenu {
    padding: 4px 0 8px 16px;
  }

  .sidebar-menu .sidebar-submenu ul li a {
    position: relative;
    margin: 3px 0;
    padding: 9px 12px 9px 16px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    color: #627286;
  }

  .sidebar-menu .sidebar-submenu ul li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #c7d2e0;
    transform: translateY(-50%);
  }

  .sidebar-menu .sidebar-submenu ul li.active a,
  .sidebar-menu .sidebar-submenu ul li.current-page a {
    background: #eef4ff;
    color: #1d4ed8;
  }

  .sidebar-menu .sidebar-submenu ul li.active a::before,
  .sidebar-menu .sidebar-submenu ul li.current-page a::before {
    background: #1d4ed8;
  }

  .main-container {
    background: transparent;
  }

  .page-header {
    margin: 18px 0 0;
    padding: 14px 18px;
    border: 1px solid #e7ecf3;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
  }

  .toggle-sidebar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #eff4fa;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .breadcrumb-item,
  .breadcrumb-item a {
    color: #6b7280;
    font-weight: 600;
  }

  .breadcrumb-item.active {
    color: #0f172a;
  }

  .content-wrapper-scroll {
    background: transparent;
    overflow: visible !important;
  }

  .content-wrapper {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 24px 0 18px;
  }

  .header-actions .user-settings {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid #e5ebf3;
    background: #fff;
  }

  .header-actions .user-name {
    color: #0f172a;
    font-weight: 700;
  }

  .header-actions .avatar img {
    object-fit: cover;
  }

  .app-footer {
    margin: 0 0 22px;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e7ecf3;
    color: #64748b;
    font-weight: 600;
  }

  .app-footer > span:not(.footer-dynamic) {
    display: none;
  }

  @media (min-width: 992px) {
    .page-wrapper {
      padding: var(--app-shell-gap);
    }

    .sidebar-wrapper {
      width: var(--app-sidebar-width) !important;
      left: var(--app-shell-gap) !important;
      top: var(--app-shell-gap) !important;
      bottom: var(--app-shell-gap) !important;
      height: calc(100vh - (var(--app-shell-gap) * 2));
      border-radius: 28px;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: thin;
      position: fixed;
    }

    .main-container {
      width: auto !important;
      margin-left: calc(var(--app-sidebar-width) + var(--app-shell-gap)) !important;
      padding-left: 26px;
      min-height: calc(100vh - (var(--app-shell-gap) * 2));
      overflow: visible !important;
    }

    .page-wrapper.toggled .sidebar-wrapper {
      left: calc((var(--app-sidebar-width) * -1) - var(--app-shell-gap)) !important;
    }

    .page-wrapper.toggled .main-container {
      margin-left: 0 !important;
      padding-left: 0;
    }
  }

  .btn-sm{
    padding:5px;
  }

  @media (max-width: 991px) {
    .page-header {
      margin: 14px 14px 0;
      border-radius: 18px;
    }

    .content-wrapper {
      padding: 18px 14px 16px;
    }

    .app-footer {
      margin: 0 14px 18px;
    }

    .brand-name {
      font-size: 15px;
    }
  }

/* Source: app\Views\user\v_pengaturan.php */
.setting-page {
        --setting-surface: #ffffff;
        --setting-border: #e5e7eb;
        --setting-text: #111827;
        --setting-muted: #6b7280;
        --setting-primary: #0f766e;
    }

    .setting-page .hero-card,
    .setting-page .form-card,
    .setting-page .preview-card {
        background: var(--setting-surface);
        border: 1px solid var(--setting-border);
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
    }

    .setting-page .hero-card {
        padding: 24px;
        margin-bottom: 20px;
    }

    .setting-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 11px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--setting-primary);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .setting-page .hero-title {
        margin: 14px 0 8px;
        color: var(--setting-text);
        font-size: 28px;
        font-weight: 700;
    }

    .setting-page .hero-subtitle {
        margin: 0;
        max-width: 760px;
        color: var(--setting-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .setting-page .content-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 20px;
    }

    .setting-page .form-card,
    .setting-page .preview-card {
        padding: 22px;
    }

    .setting-page .section-title {
        margin: 0 0 6px;
        color: var(--setting-text);
        font-size: 20px;
        font-weight: 700;
    }

    .setting-page .section-caption {
        margin: 0 0 18px;
        color: var(--setting-muted);
        font-size: 13px;
    }

    .setting-page .form-grid {
        display: grid;
        gap: 16px;
    }

    .setting-page .form-label-clean {
        display: block;
        margin-bottom: 8px;
        color: var(--setting-text);
        font-size: 14px;
        font-weight: 600;
    }

    .setting-page .form-control-clean {
        width: 100%;
        border: 1px solid var(--setting-border);
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .setting-page textarea.form-control-clean {
        min-height: 110px;
        resize: vertical;
    }

    .setting-page .form-control-clean:focus {
        border-color: var(--setting-primary);
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }

    .setting-page .form-help {
        margin-top: 6px;
        color: var(--setting-muted);
        font-size: 12px;
    }

    .setting-page .form-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }

    .setting-page .btn-primary-clean {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 0;
        border-radius: 12px;
        padding: 11px 15px;
        background: var(--setting-primary);
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .setting-page .preview-frame {
        width: 100%;
        min-height: 260px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        overflow: hidden;
        background: #f8fafc;
        border: 1px solid var(--setting-border);
        margin-bottom: 18px;
        padding: 18px;
    }

    .setting-page .preview-frame img {
        max-width: 100%;
        max-height: 240px;
        object-fit: contain;
    }

    .setting-page .preview-list {
        display: grid;
        gap: 12px;
    }

    .setting-page .preview-item {
        padding: 12px 14px;
        border-radius: 14px;
        background: #f8fafc;
        border: 1px solid var(--setting-border);
    }

    .setting-page .preview-item span {
        display: block;
        margin-bottom: 6px;
        color: var(--setting-muted);
        font-size: 12px;
    }

    .setting-page .preview-item strong {
        color: var(--setting-text);
        font-size: 14px;
        font-weight: 600;
    }

    .setting-page .alert-clean {
        margin-bottom: 16px;
        padding: 13px 15px;
        border-radius: 12px;
        font-size: 14px;
    }

    .setting-page .alert-success-clean {
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        color: #166534;
    }

    .setting-page .alert-error-clean {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
    }

    @media (max-width: 991.98px) {
        .setting-page .content-grid {
            grid-template-columns: 1fr;
        }
    }

/* Source: app\Views\user\v_produk.php */
.produk-page {
        --produk-surface: #ffffff;
        --produk-border: #e5e7eb;
        --produk-text: #111827;
        --produk-muted: #6b7280;
        --produk-primary: #0f766e;
        --produk-primary-soft: #ccfbf1;
        --produk-slate-soft: #e2e8f0;
        --produk-amber-soft: #fef3c7;
    }

    .produk-page .hero-card,
    .produk-page .stat-card,
    .produk-page .table-card {
        background: var(--produk-surface);
        border: 1px solid var(--produk-border);
        border-radius: 20px;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
    }

    .produk-page .hero-card {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        padding: 28px;
        margin-bottom: 24px;
    }

    .produk-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--produk-primary);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .produk-page .hero-title {
        margin: 16px 0 10px;
        color: var(--produk-text);
        font-size: 30px;
        font-weight: 700;
    }

    .produk-page .hero-subtitle {
        margin: 0;
        max-width: 760px;
        color: var(--produk-muted);
        font-size: 15px;
        line-height: 1.8;
    }

    .produk-page .hero-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .produk-page .btn-clean-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 0;
        border-radius: 12px;
        padding: 12px 16px;
        background: var(--produk-primary);
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.2s ease;
    }

    .produk-page .btn-clean-primary:hover {
        background: #0b5f58;
        color: #ffffff;
    }

    .produk-page .btn-clean-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--produk-border);
        border-radius: 12px;
        padding: 12px 16px;
        background: #ffffff;
        color: var(--produk-text);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .produk-page .table-card {
        padding: 24px;
    }

    .produk-page .table-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 20px;
    }

    .produk-page .table-toolbar h2 {
        margin: 0 0 6px;
        color: var(--produk-text);
        font-size: 20px;
        font-weight: 700;
    }

    .produk-page .table-toolbar p {
        margin: 0;
        color: var(--produk-muted);
        font-size: 14px;
    }

    .produk-page .search-box {
        width: min(100%, 340px);
        position: relative;
    }

    .produk-page .search-box i {
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        color: #94a3b8;
    }

    .produk-page .search-box input {
        width: 100%;
        border: 1px solid var(--produk-border);
        border-radius: 12px;
        padding: 12px 14px 12px 40px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .produk-page .search-box input:focus {
        border-color: var(--produk-primary);
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }

    .produk-page .alert-clean {
        margin-bottom: 18px;
        padding: 14px 16px;
        border-radius: 12px;
        font-size: 14px;
    }

    .produk-page .alert-success-clean {
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        color: #166534;
    }

    .produk-page .alert-error-clean {
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
    }

    .produk-page .table-loading {
        display: none;
        margin-bottom: 14px;
        color: var(--produk-muted);
        font-size: 14px;
    }

    .produk-page .table-loading.active {
        display: block;
    }

    @media (max-width: 991.98px) {
        .produk-page .hero-card,
        .produk-page .table-toolbar {
            flex-direction: column;
            align-items: stretch;
        }

        .produk-page .search-box {
            width: 100%;
        }
    }

/* Source: app\Views\user\v_produk_edit.php */
.produk-edit-page {
        --edit-surface: #ffffff;
        --edit-border: #e5e7eb;
        --edit-text: #111827;
        --edit-muted: #6b7280;
        --edit-primary: #0f766e;
    }

    .produk-edit-page .hero-card,
    .produk-edit-page .form-card,
    .produk-edit-page .preview-card {
        background: var(--edit-surface);
        border: 1px solid var(--edit-border);
        border-radius: 20px;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
    }

    .produk-edit-page .hero-card {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 28px;
        margin-bottom: 24px;
    }

    .produk-edit-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--edit-primary);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .produk-edit-page .hero-title {
        margin: 16px 0 10px;
        color: var(--edit-text);
        font-size: 30px;
        font-weight: 700;
    }

    .produk-edit-page .hero-subtitle {
        margin: 0;
        color: var(--edit-muted);
        font-size: 15px;
        line-height: 1.8;
        max-width: 760px;
    }

    .produk-edit-page .hero-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .produk-edit-page .content-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 20px;
    }

    .produk-edit-page .form-card,
    .produk-edit-page .preview-card {
        padding: 24px;
    }

    .produk-edit-page .section-title {
        margin: 0 0 6px;
        color: var(--edit-text);
        font-size: 20px;
        font-weight: 700;
    }

    .produk-edit-page .section-caption {
        margin: 0 0 20px;
        color: var(--edit-muted);
        font-size: 14px;
    }

    .produk-edit-page .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .produk-edit-page .form-group-clean.full {
        grid-column: 1 / -1;
    }

    .produk-edit-page .form-label-clean {
        display: block;
        margin-bottom: 8px;
        color: var(--edit-text);
        font-size: 14px;
        font-weight: 600;
    }

    .produk-edit-page .form-control-clean {
        width: 100%;
        border: 1px solid var(--edit-border);
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .produk-edit-page .form-control-clean:focus {
        border-color: var(--edit-primary);
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }

    .produk-edit-page .form-help {
        margin-top: 6px;
        color: var(--edit-muted);
        font-size: 12px;
    }

    .produk-edit-page .form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 24px;
        flex-wrap: wrap;
    }

    .produk-edit-page .btn-clean-primary,
    .produk-edit-page .btn-clean-secondary,
    .produk-edit-page .btn-clean-danger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .produk-edit-page .btn-clean-primary {
        border: 0;
        background: var(--edit-primary);
        color: #ffffff;
    }

    .produk-edit-page .btn-clean-primary:hover {
        background: #0b5f58;
        color: #ffffff;
    }

    .produk-edit-page .btn-clean-secondary {
        border: 1px solid var(--edit-border);
        background: #ffffff;
        color: var(--edit-text);
    }

    .produk-edit-page .btn-clean-danger {
        border: 1px solid #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

    .produk-edit-page .preview-frame {
        width: 100%;
        min-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        overflow: hidden;
        background: #f8fafc;
        border: 1px solid var(--edit-border);
        margin-bottom: 18px;
    }

    .produk-edit-page .preview-frame img {
        width: 100%;
        height: 100%;
        max-height: 320px;
        object-fit: cover;
    }

    .produk-edit-page .preview-placeholder {
        color: var(--edit-muted);
        text-align: center;
        padding: 20px;
    }

    .produk-edit-page .preview-list {
        display: grid;
        gap: 12px;
    }

    .produk-edit-page .preview-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 14px;
        background: #f8fafc;
        border: 1px solid var(--edit-border);
    }

    .produk-edit-page .preview-item span {
        color: var(--edit-muted);
        font-size: 13px;
    }

    .produk-edit-page .preview-item strong {
        color: var(--edit-text);
        font-size: 14px;
        font-weight: 600;
    }

    .produk-edit-page .alert-clean {
        margin-bottom: 18px;
        padding: 14px 16px;
        border-radius: 12px;
        font-size: 14px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
    }

    @media (max-width: 991.98px) {
        .produk-edit-page .hero-card,
        .produk-edit-page .content-grid {
            grid-template-columns: 1fr;
            flex-direction: column;
        }
    }

    @media (max-width: 767.98px) {
        .produk-edit-page .form-grid {
            grid-template-columns: 1fr;
        }

        .produk-edit-page .form-actions {
            flex-direction: column;
            align-items: stretch;
        }
    }

/* Source: app\Views\user\v_produk_tambah.php */
.produk-create-page {
        --create-surface: #ffffff;
        --create-border: #e5e7eb;
        --create-text: #111827;
        --create-muted: #6b7280;
        --create-primary: #0f766e;
    }

    .produk-create-page .hero-card,
    .produk-create-page .form-card,
    .produk-create-page .preview-card {
        background: var(--create-surface);
        border: 1px solid var(--create-border);
        border-radius: 20px;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.04);
    }

    .produk-create-page .hero-card {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        padding: 28px;
        margin-bottom: 24px;
    }

    .produk-create-page .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        background: #ecfeff;
        color: var(--create-primary);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .produk-create-page .hero-title {
        margin: 16px 0 10px;
        color: var(--create-text);
        font-size: 30px;
        font-weight: 700;
    }

    .produk-create-page .hero-subtitle {
        margin: 0;
        color: var(--create-muted);
        font-size: 15px;
        line-height: 1.8;
        max-width: 760px;
    }

    .produk-create-page .hero-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .produk-create-page .content-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 20px;
    }

    .produk-create-page .form-card,
    .produk-create-page .preview-card {
        padding: 24px;
    }

    .produk-create-page .section-title {
        margin: 0 0 6px;
        color: var(--create-text);
        font-size: 20px;
        font-weight: 700;
    }

    .produk-create-page .section-caption {
        margin: 0 0 20px;
        color: var(--create-muted);
        font-size: 14px;
    }

    .produk-create-page .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .produk-create-page .form-label-clean {
        display: block;
        margin-bottom: 8px;
        color: var(--create-text);
        font-size: 14px;
        font-weight: 600;
    }

    .produk-create-page .form-control-clean {
        width: 100%;
        border: 1px solid var(--create-border);
        border-radius: 12px;
        padding: 12px 14px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .produk-create-page .form-control-clean:focus {
        border-color: var(--create-primary);
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }

    .produk-create-page .form-help {
        margin-top: 6px;
        color: var(--create-muted);
        font-size: 12px;
    }

    .produk-create-page .form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 24px;
        flex-wrap: wrap;
    }

    .produk-create-page .btn-clean-primary,
    .produk-create-page .btn-clean-secondary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .produk-create-page .btn-clean-primary {
        border: 0;
        background: var(--create-primary);
        color: #ffffff;
    }

    .produk-create-page .btn-clean-primary:hover {
        background: #0b5f58;
        color: #ffffff;
    }

    .produk-create-page .btn-clean-secondary {
        border: 1px solid var(--create-border);
        background: #ffffff;
        color: var(--create-text);
    }

    .produk-create-page .preview-frame {
        width: 100%;
        min-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        overflow: hidden;
        background: #f8fafc;
        border: 1px solid var(--create-border);
        margin-bottom: 18px;
    }

    .produk-create-page .preview-placeholder {
        color: var(--create-muted);
        text-align: center;
        padding: 20px;
    }

    .produk-create-page .preview-list {
        display: grid;
        gap: 12px;
    }

    .produk-create-page .preview-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 14px;
        background: #f8fafc;
        border: 1px solid var(--create-border);
    }

    .produk-create-page .preview-item span {
        color: var(--create-muted);
        font-size: 13px;
    }

    .produk-create-page .preview-item strong {
        color: var(--create-text);
        font-size: 14px;
        font-weight: 600;
    }

    .produk-create-page .alert-clean {
        margin-bottom: 18px;
        padding: 14px 16px;
        border-radius: 12px;
        font-size: 14px;
        background: #fef2f2;
        border: 1px solid #fecaca;
        color: #b91c1c;
    }

    @media (max-width: 991.98px) {
        .produk-create-page .hero-card,
        .produk-create-page .content-grid {
            grid-template-columns: 1fr;
            flex-direction: column;
        }
    }

    @media (max-width: 767.98px) {
        .produk-create-page .form-grid {
            grid-template-columns: 1fr;
        }

        .produk-create-page .form-actions {
            flex-direction: column;
            align-items: stretch;
        }
    }

/* Source: app\Views\user\partials\produk_table.php */
.produk-ajax .table-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
        color: #6b7280;
        font-size: 13px;
    }

    .produk-ajax .table-clean {
        margin-bottom: 0;
        vertical-align: middle;
    }

    .produk-ajax .table-clean thead th {
        padding: 14px 16px;
        border-bottom: 1px solid #e5e7eb;
        color: #6b7280;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: #f8fafc;
    }

    .produk-ajax .table-clean tbody td {
        padding: 16px;
        border-bottom: 1px solid #edf2f7;
        color: #111827;
        font-size: 14px;
    }

    .produk-ajax .table-clean tbody tr:last-child td {
        border-bottom: 0;
    }

    .produk-ajax .produk-cell {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .produk-ajax .produk-thumb {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        overflow: hidden;
        background: #f1f5f9;
        border: 1px solid #e5e7eb;
        color: #64748b;
        font-size: 18px;
    }

    .produk-ajax .produk-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .produk-ajax .produk-info strong {
        display: block;
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: 600;
    }

    .produk-ajax .produk-info span {
        display: block;
        color: #6b7280;
        font-size: 13px;
        line-height: 1.6;
    }

    .produk-ajax .produk-kode {
        font-weight: 700;
        color: #0f766e;
    }

    .produk-ajax .produk-badge {
        display: inline-flex;
        align-items: center;
        padding: 7px 10px;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
        color: #334155;
        font-size: 12px;
        font-weight: 600;
    }

    .produk-ajax .harga-text {
        font-weight: 700;
        color: #111827;
    }

    .produk-ajax .action-group {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .produk-ajax .btn-icon-clean {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        background: #ffffff;
        color: #111827;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .produk-ajax .btn-icon-clean:hover {
        background: #f8fafc;
    }

    .produk-ajax .btn-edit {
        color: #0f766e;
        background: #ccfbf1;
        border-color: #99f6e4;
    }

    .produk-ajax .btn-delete {
        color: #b91c1c;
        background: #fee2e2;
        border-color: #fecaca;
    }

    .produk-ajax .empty-state {
        padding: 36px 20px;
        text-align: center;
        color: #6b7280;
        background: #f8fafc;
        border: 1px dashed #d1d5db;
        border-radius: 16px;
    }

    .produk-ajax .pagination-clean {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 18px;
        flex-wrap: wrap;
    }

    .produk-ajax .pagination-status {
        color: #6b7280;
        font-size: 13px;
    }

    .produk-ajax .pagination-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .produk-ajax .page-button {
        min-width: 38px;
        height: 38px;
        padding: 0 12px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #ffffff;
        color: #111827;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.2s ease;
    }

    .produk-ajax .page-button:hover:not(:disabled) {
        background: #f8fafc;
    }

    .produk-ajax .page-button.active {
        background: #0f766e;
        border-color: #0f766e;
        color: #ffffff;
    }

    .produk-ajax .page-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    @media (max-width: 767.98px) {
        .produk-ajax .table-meta,
        .produk-ajax .pagination-clean {
            flex-direction: column;
            align-items: stretch;
        }

        .produk-ajax .action-group {
            justify-content: flex-start;
        }
    }