@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

/* =========================================================
   OPAMS / Mobirise Bootstrap 5.3 Theme
   Use this AFTER bootstrap.min.css
   Based on your existing OPAMS CSS, simplified into a reusable theme layer.
========================================================= */

:root,
[data-bs-theme="light"] {
    --bs-font-sans-serif: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --opams-primary: #5b3df5;
    --opams-primary-rgb: 91, 61, 245;
    --opams-primary-2: #7c5cff;
    --opams-primary-hover: #4b2ee8;
    --opams-primary-soft: #f0ecff;
    --opams-bg: #f7f5fb;
    --opams-surface: #ffffff;
    --opams-surface-soft: #fbfaff;
    --opams-text: #101828;
    --opams-muted: #667085;
    --opams-muted-2: #98a2b3;
    --opams-border: #e6e8f0;
    --opams-success: #12b76a;
    --opams-info: #1570ef;
    --opams-warning: #f59e0b;
    --opams-danger: #f04438;
    --opams-radius-sm: .75rem;
    --opams-radius: 1rem;
    --opams-radius-lg: 1.25rem;
    --opams-radius-xl: 1.5rem;
    --opams-shadow-xs: 0 2px 8px rgba(15, 23, 42, .04);
    --opams-shadow: 0 10px 30px rgba(15, 23, 42, .07);
    --opams-shadow-lg: 0 22px 55px rgba(15, 23, 42, .10);
    --bs-primary: var(--opams-primary);
    --bs-primary-rgb: var(--opams-primary-rgb);
    --bs-body-bg: var(--opams-bg);
    --bs-body-color: var(--opams-text);
    --bs-heading-color: var(--opams-text);
    --bs-secondary-color: var(--opams-muted);
    --bs-tertiary-color: var(--opams-muted-2);
    --bs-border-color: var(--opams-border);
    --bs-link-color: var(--opams-primary);
    --bs-link-hover-color: var(--opams-primary-hover);
    --bs-success: var(--opams-success);
    --bs-info: var(--opams-info);
    --bs-warning: var(--opams-warning);
    --bs-danger: var(--opams-danger);
    --bs-border-radius: var(--opams-radius);
    --bs-border-radius-sm: var(--opams-radius-sm);
    --bs-border-radius-lg: var(--opams-radius-lg);
    --bs-border-radius-xl: var(--opams-radius-xl);
    --bs-box-shadow-sm: var(--opams-shadow-xs);
    --bs-box-shadow: var(--opams-shadow);
    --bs-box-shadow-lg: var(--opams-shadow-lg);
}

[data-bs-theme="dark"] {
    --opams-primary: #8b7bff;
    --opams-primary-rgb: 139, 123, 255;
    --opams-primary-2: #a99eff;
    --opams-primary-hover: #b9b1ff;
    --opams-primary-soft: rgba(139, 123, 255, .16);
    --opams-bg: #0f1117;
    --opams-surface: #181b24;
    --opams-surface-soft: #11141c;
    --opams-text: #f5f7fb;
    --opams-muted: #a5adba;
    --opams-muted-2: #7b8494;
    --opams-border: #2b3140;
    --opams-success: #32d583;
    --opams-info: #53a6ff;
    --opams-warning: #fbbf24;
    --opams-danger: #ff6b6b;
    --bs-primary: var(--opams-primary);
    --bs-primary-rgb: var(--opams-primary-rgb);
    --bs-body-bg: var(--opams-bg);
    --bs-body-color: var(--opams-text);
    --bs-heading-color: #ffffff;
    --bs-secondary-color: var(--opams-muted);
    --bs-tertiary-color: var(--opams-muted-2);
    --bs-border-color: var(--opams-border);
    --bs-link-color: var(--opams-primary);
    --bs-link-hover-color: var(--opams-primary-hover);
}

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

html {
    scroll-behavior: auto;
    font-size: 15px;
}

body {
    min-height: 100vh;
    font-family: var(--bs-font-sans-serif);
    line-height: 1.38;
    color: var(--opams-text);
    background-color: var(--opams-bg);
    background-image: linear-gradient(135deg, rgba(var(--opams-primary-rgb), .08), transparent 34rem), linear-gradient(315deg, rgba(249, 115, 22, .045), transparent 32rem);
    background-repeat: no-repeat;
    text-rendering: optimizeSpeed;
}

a {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: -.035em;
}

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

.material-symbols-rounded,
.material-symbols-outlined {
    vertical-align: middle;
    font-size: 21px;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* Surfaces */
.card,
.dropdown-menu,
.modal-content,
.toast,
.offcanvas,
.accordion-item,
.list-group,
.opams-surface {
    border: 1px solid var(--opams-border) !important;
    border-radius: var(--opams-radius-lg) !important;
    background-color: var(--opams-surface) !important;
    color: var(--opams-text);
    box-shadow: var(--opams-shadow);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.offcanvas-header,
.accordion-button {
    background-color: transparent;
    border-color: var(--opams-border) !important;
}

.card-header {
    border-top-left-radius: var(--opams-radius-lg) !important;
    border-top-right-radius: var(--opams-radius-lg) !important;
}

.card-subtitle,
.card-text {
    color: var(--opams-muted);
}

/* Buttons */
.btn {
    --bs-btn-border-radius: .85rem;
    min-height: 40px;
    font-weight: 750;
    letter-spacing: -.01em;
    padding: .58rem 1rem;
    border-radius: .85rem !important;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

    .btn:hover {
        transform: translateY(-1px);
    }

.btn-primary {
    --bs-btn-bg: var(--opams-primary);
    --bs-btn-border-color: var(--opams-primary);
    --bs-btn-hover-bg: var(--opams-primary-hover);
    --bs-btn-hover-border-color: var(--opams-primary-hover);
    --bs-btn-color: #fff;
    box-shadow: 0 8px 18px rgba(var(--opams-primary-rgb), .22);
}

.btn-outline-primary {
    --bs-btn-color: var(--opams-primary);
    --bs-btn-border-color: rgba(var(--opams-primary-rgb), .35);
    --bs-btn-hover-bg: var(--opams-primary-soft);
    --bs-btn-hover-color: var(--opams-primary);
    --bs-btn-hover-border-color: var(--opams-primary);
    background: var(--opams-surface);
}

.btn-light,
.btn-soft,
.btn-subtle {
    border-color: var(--opams-border);
    background: var(--opams-primary-soft);
    color: var(--opams-primary);
}

.btn-link {
    color: var(--opams-primary);
    font-weight: 750;
    text-decoration: none;
}

.btn-icon {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: .9rem !important;
    background: transparent;
    color: var(--opams-text);
}

    .btn-icon:hover,
    .btn-icon.active {
        background: var(--opams-primary-soft);
        color: var(--opams-primary);
    }

/* Forms */
.form-label {
    color: var(--opams-muted);
    font-weight: 650;
    margin-bottom: .4rem;
}

.form-control,
.form-select,
.form-check-input {
    border-color: var(--opams-border) !important;
    background-color: var(--opams-surface);
    color: var(--opams-text);
    box-shadow: none !important;
}

.form-control,
.form-select {
    min-height: 44px;
    border-radius: .9rem;
    padding: .62rem .85rem;
}

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

    .form-control:focus,
    .form-select:focus {
        border-color: var(--opams-primary) !important;
        box-shadow: 0 0 0 4px var(--opams-primary-soft) !important;
    }

.input-group-text {
    border-color: var(--opams-border);
    background: var(--opams-surface-soft);
    color: var(--opams-muted);
    border-radius: .9rem;
}

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    border-radius: .35rem !important;
}

    .form-check-input:checked {
        background-color: var(--opams-primary);
        border-color: var(--opams-primary);
    }

.form-switch .form-check-input {
    width: 2.5em;
    border-radius: 999px !important;
}

.form-range::-webkit-slider-thumb {
    background: var(--opams-primary);
}

.form-range::-moz-range-thumb {
    background: var(--opams-primary);
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--opams-success) !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--opams-danger) !important;
}

/* Navbar / Breadcrumb / Tabs */
.navbar,
.opams-navbar {
    margin: .85rem;
    padding: .65rem 1rem;
    border: 1px solid var(--opams-border);
    border-radius: var(--opams-radius-lg);
    background: var(--opams-surface) !important;
    box-shadow: var(--opams-shadow-xs);
}

.navbar-brand {
    color: var(--opams-text) !important;
    font-weight: 850;
    letter-spacing: -.04em;
}

.brand-logo,
.brand-icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: .9rem;
    background: linear-gradient(135deg, var(--opams-primary), var(--opams-primary-2));
    color: #fff;
    box-shadow: 0 8px 18px rgba(var(--opams-primary-rgb), .18);
}

.breadcrumb,
.modern-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    margin: 0;
    padding: .65rem .9rem;
    border: 1px solid var(--opams-border);
    border-radius: var(--opams-radius);
    background: var(--opams-surface);
    box-shadow: var(--opams-shadow-xs);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--opams-muted);
}

.breadcrumb-item a {
    color: var(--opams-primary);
    font-weight: 750;
}

.breadcrumb-item.active {
    color: var(--opams-muted);
}

.nav-tabs {
    border-bottom: 1px solid var(--opams-border);
    gap: .25rem;
}

    .nav-tabs .nav-link {
        border: 0;
        color: var(--opams-muted);
        font-weight: 650;
        padding: .8rem .9rem;
        border-radius: .7rem .7rem 0 0;
    }

        .nav-tabs .nav-link:hover {
            color: var(--opams-primary);
            background: var(--opams-primary-soft);
        }

        .nav-tabs .nav-link.active {
            color: var(--opams-primary);
            background: transparent;
            border-bottom: 3px solid var(--opams-primary);
        }

.nav-pills .nav-link {
    border-radius: .85rem;
    color: var(--opams-muted);
    font-weight: 700;
}

    .nav-pills .nav-link.active {
        color: #fff;
        background: var(--opams-primary);
        box-shadow: 0 6px 14px rgba(var(--opams-primary-rgb), .18);
    }

/* Dropdowns */
.dropdown-menu {
    padding: .45rem;
    min-width: 13rem;
}

.dropdown-item {
    border-radius: .75rem;
    padding: .65rem .75rem;
    color: var(--opams-text);
    font-weight: 650;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background: var(--opams-primary-soft);
        color: var(--opams-primary);
    }

.dropdown-divider {
    border-color: var(--opams-border);
}

.opams-quick-menu {
    min-width: 15rem;
    padding: .65rem;
}

    .opams-quick-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: .7rem;
    }

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--opams-text);
    --bs-table-border-color: var(--opams-border);
    margin-bottom: 0;
}

    .table thead th {
        background: rgba(102, 112, 133, .08);
        color: var(--opams-text);
        border-bottom: 0;
        font-weight: 800;
        padding: .85rem;
    }

    .table tbody td {
        padding: .85rem;
        vertical-align: middle;
        color: var(--opams-text);
    }

.table-hover tbody tr:hover {
    --bs-table-hover-bg: var(--opams-primary-soft);
}

/* Alerts / Toasts / Badges */
.alert {
    border-radius: var(--opams-radius);
    border-width: 1px;
    font-weight: 600;
    box-shadow: none;
}

.alert-success {
    background: rgba(18, 183, 106, .12);
    border-color: rgba(18, 183, 106, .22);
    color: #087443;
}

.alert-info {
    background: rgba(21, 112, 239, .11);
    border-color: rgba(21, 112, 239, .22);
    color: #175cd3;
}

.alert-warning {
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .24);
    color: #b54708;
}

.alert-danger {
    background: rgba(240, 68, 56, .12);
    border-color: rgba(240, 68, 56, .24);
    color: #b42318;
}

.toast {
    border-radius: var(--opams-radius) !important;
    overflow: hidden;
}

.toast-header {
    background: var(--opams-surface);
    color: var(--opams-text);
    border-bottom-color: var(--opams-border);
}

.badge {
    border-radius: 999px !important;
    padding: .35rem .6rem;
    font-weight: 750;
}

    .badge.bg-primary-subtle,
    .badge-primary-soft {
        background: var(--opams-primary-soft) !important;
        color: var(--opams-primary) !important;
    }

/* Accordion / Modal */
.accordion {
    --bs-accordion-border-color: var(--opams-border);
    --bs-accordion-border-radius: var(--opams-radius-lg);
    --bs-accordion-inner-border-radius: var(--opams-radius);
    --bs-accordion-active-bg: var(--opams-primary-soft);
    --bs-accordion-active-color: var(--opams-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 4px var(--opams-primary-soft);
}

.accordion-button {
    color: var(--opams-text);
    font-weight: 750;
}

.modal-content {
    overflow: hidden;
}

.modal-backdrop.show {
    opacity: .35;
}

/* Pagination / Progress */
.pagination {
    gap: .25rem;
}

.page-link {
    min-width: 36px;
    border: 1px solid var(--opams-border);
    border-radius: .7rem !important;
    color: var(--opams-muted);
    background: var(--opams-surface);
    text-align: center;
    box-shadow: none !important;
}

    .page-link:hover {
        color: var(--opams-primary);
        background: var(--opams-primary-soft);
        border-color: rgba(var(--opams-primary-rgb), .25);
    }

    .page-item.active .page-link,
    .page-link.active {
        color: #fff;
        background: var(--opams-primary);
        border-color: var(--opams-primary);
        box-shadow: 0 5px 12px rgba(var(--opams-primary-rgb), .18) !important;
    }

.page-item.disabled .page-link {
    color: var(--opams-muted-2);
    background: var(--opams-surface-soft);
}

.progress {
    height: .55rem;
    border-radius: 999px;
    background: rgba(102, 112, 133, .16);
}

.progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--opams-primary), var(--opams-primary-2));
}

.spinner-border,
.spinner-grow {
    color: var(--opams-primary);
}

/* List groups / OPAMS helpers */
.list-group-item {
    background: transparent;
    border-color: var(--opams-border);
    color: var(--opams-text);
    padding: .9rem 1rem;
}

.list-group-item-action:hover {
    background: var(--opams-primary-soft);
    color: var(--opams-primary);
}

.opams-icon-tile {
    width: 58px;
    height: 58px;
    display: inline-grid;
    place-items: center;
    border-radius: 1rem;
    background: var(--opams-primary-soft);
    color: var(--opams-primary);
    flex: 0 0 auto;
}

.opams-section-title {
    color: var(--opams-primary);
    font-weight: 850;
    letter-spacing: -.04em;
}

.opams-page {
    min-height: 100vh;
    padding: .85rem;
}

.opams-panel {
    border: 1px solid var(--opams-border);
    border-radius: var(--opams-radius-lg);
    background: var(--opams-surface);
    box-shadow: var(--opams-shadow);
}

.opams-panel-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--opams-border);
    border-radius: var(--opams-radius-lg) var(--opams-radius-lg) 0 0;
    background: linear-gradient(135deg, var(--opams-primary-soft), transparent);
}

.opams-grid-actions {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
}

.opams-empty-state {
    min-height: 260px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--opams-muted);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 768px) {
    body {
        background-image: none;
    }

    .navbar,
    .opams-navbar {
        margin: .5rem;
        padding: .6rem .75rem;
        border-radius: 1rem;
    }

    .breadcrumb,
    .modern-breadcrumb {
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

        .breadcrumb::-webkit-scrollbar,
        .modern-breadcrumb::-webkit-scrollbar {
            display: none;
        }

    .card,
    .opams-panel {
        border-radius: 1.1rem !important;
    }

    .table-responsive {
        border-radius: var(--opams-radius);
    }
}

@media (max-width: 576px) {
    .opams-page {
        padding: .5rem;
    }

    .btn {
        min-height: 42px;
    }

    .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

        .nav-tabs::-webkit-scrollbar {
            display: none;
        }

        .nav-tabs .nav-link {
            white-space: nowrap;
        }
}