/* ============================================================
   RAIS Professional UI Theme
   Elegant, modern design system overlay
   ============================================================ */

:root {
    --rais-primary: #182551;
    --rais-primary-light: #5878b3;
    --rais-primary-dark: #0f1938;
    --rais-secondary: #BA9A42;
    --rais-accent: #06b6d4;
    --rais-success: #10b981;
    --rais-warning: #f59e0b;
    --rais-danger: #ef4444;
    --rais-surface: #ffffff;
    --rais-bg: #f8fafc;
    --rais-text: #1e293b;
    --rais-text-secondary: #64748b;
    --rais-text-light: #94a3b8;
    --rais-border: #e2e8f0;
    --rais-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --rais-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    --rais-shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --rais-shadow-xl: 0 20px 40px -4px rgba(0,0,0,0.1);
    --rais-radius: 16px;
    --rais-radius-sm: 10px;
    --rais-radius-lg: 24px;
    --rais-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Global Overrides ---- */
body {
    background: var(--rais-bg) !important;
    color: var(--rais-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Bootstrap's own .modal-backdrop (css/styles.css, compiled/vendor file, not
   hand-edited) sizes itself with `width:100vw;height:100vh` — plain,
   unmodified Bootstrap CSS. In some rendering contexts these vw/vh units
   don't track the true visible viewport 1:1, leaving the backdrop narrower/
   shorter than the screen (visible as un-darkened page content peeking out on
   one side or along the bottom, even though the modal dialog itself is
   correctly centered). Anchor all four edges directly to the containing
   block instead of relying on any width/height unit at all — for a
   `position:fixed` element with no explicit width/height, `top/left/right/
   bottom:0` makes the box's edges exactly match the true viewport regardless
   of how vw/vh happen to resolve in a given browser/rendering surface. */
.modal-backdrop {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Bootstrap only horizontally auto-centers .modal-dialog at >=576px
   (@media(min-width:576px){.modal-dialog{margin:1.75rem auto}}) — below that
   breakpoint it just uses a small FIXED margin on every side with no `auto`.
   Several modals here (#myModal, #myModal_ResetPassword, #myModal_info) add an
   inline `style="max-width:420px"` for a nicer desktop size; on a mobile
   viewport wider than 420px (common on tablets/phablets and some phones in
   landscape) that cap makes the dialog narrower than the available width, and
   without `auto` margins the leftover space collects entirely on the right
   instead of centering — the dialog looks shifted left with page content
   visibly peeking out to its right. Force horizontal centering at every
   screen size so this never depends on the breakpoint or any inline max-width. */
.modal-dialog {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---- Enhanced Header/Navbar ---- */
.colorful-header-theme {
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(24,37,81,0.15) !important;
    border-image: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.navbar.scrolled.colorful-header-theme {
    box-shadow: var(--rais-shadow) !important;
}

.header-text-gradient {
    color: #182551 !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* ---- Hero Section ---- */
header.py-5 {
    background: #ffffff !important;
    position: relative;
    overflow: hidden;
}

.text-gradient, .bg-gradient-primary-to-secondary {
    background: linear-gradient(135deg, var(--rais-primary) 0%, var(--rais-secondary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.bg-gradient-primary-to-secondary {
    -webkit-text-fill-color: white !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
}

/* ---- Badge Refinement ---- */
.badge.bg-gradient-primary-to-secondary,
.badge[style*="background-color: rgba(0,0,0,0.7)"] {
    background: #BA9A42 !important;
    -webkit-text-fill-color: white !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    box-shadow: 0 4px 15px rgba(186,154,66,0.3);
}

/* ---- Section Cards ---- */
section.py-5 {
    background: var(--rais-bg) !important;
}

.card.border-0.shadow-lg.rounded-4 {
    border-radius: var(--rais-radius-lg) !important;
    border: 1px solid var(--rais-border) !important;
    box-shadow: var(--rais-shadow) !important;
    background: var(--rais-surface) !important;
    transition: var(--rais-transition);
    overflow: hidden;
}

.card.border-0.shadow-lg.rounded-4:hover {
    box-shadow: var(--rais-shadow-lg) !important;
}

.card-body.p-5 {
    padding: 40px !important;
}

/* ---- Section Title with Icon ---- */
.feature.rounded-3 {
    border-radius: 14px !important;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- Assessment Cards (3 cards) ---- */
.card.border-0.h-100.shadow-sm {
    border-radius: var(--rais-radius) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    transition: var(--rais-transition);
    overflow: hidden;
}

.card.border-0.h-100.shadow-sm:hover {
    transform: translateY(-6px);
    box-shadow: var(--rais-shadow-lg) !important;
}

/* ---- Progress Overview Bar ---- */
.progress {
    border-radius: 10px !important;
    overflow: hidden;
}

.progress-bar {
    border-radius: 10px !important;
    transition: width 0.8s ease-in-out;
}

/* ---- Modern Addon Cards (Business Tools) ---- */
.modern-addon-card {
    border-radius: var(--rais-radius-lg) !important;
    border: 1px solid var(--rais-border) !important;
    transition: var(--rais-transition);
    position: relative;
    overflow: hidden;
}

.modern-addon-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--rais-primary), var(--rais-secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modern-addon-card.active::after {
    opacity: 1;
}

.modern-addon-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    box-shadow: var(--rais-shadow-xl) !important;
    border-color: rgba(24,37,81,0.2) !important;
}

.addon-icon-bg {
    background: linear-gradient(135deg, var(--rais-primary) 0%, var(--rais-secondary) 100%) !important;
    opacity: 0.12 !important;
}

.addon-icon {
    color: var(--rais-primary) !important;
}

.feature-tag {
    background: linear-gradient(135deg, #eef1f7 0%, #f6f1e4 100%) !important;
    color: var(--rais-primary-dark) !important;
    border: 1px solid #e3e8f0 !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 0.78rem !important;
    padding: 4px 12px !important;
}

/* ---- Modal Upgrades ---- */
.modal-content {
    border-radius: var(--rais-radius-lg) !important;
    border: none !important;
    box-shadow: var(--rais-shadow-xl) !important;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--rais-primary) 0%, var(--rais-secondary) 100%) !important;
    padding: 24px 32px !important;
    border: none !important;
}

/* Company Profile modal — dark navy header, tighter layout */
#myModal_info .modal-header {
    background: linear-gradient(135deg, #0f1938 0%, #182551 100%) !important;
    padding: 18px 28px !important;
}
#myModal_info .modal-body {
    padding: 0 !important;
    background: #f4f6f9 !important;
}
#myModal_info .modal-footer,
#myModal_info .cp-footer {
    padding: 14px 28px !important;
    background: #f4f6f9 !important;
    border-top: 1px solid #e2e8f0 !important;
}

.modal-header h4 {
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    letter-spacing: 0.3px;
}

.modal-body {
    padding: 32px !important;
    background: #fafbfc !important;
}

.modal-footer {
    padding: 20px 32px !important;
    background: #fafbfc !important;
    border-top: 1px solid var(--rais-border) !important;
}

/* ---- Form Controls ---- */
.form-control, .form-select {
    border-radius: var(--rais-radius-sm) !important;
    border: 1.5px solid var(--rais-border) !important;
    padding: 12px 16px !important;
    font-size: 0.92rem !important;
    color: var(--rais-text) !important;
    transition: var(--rais-transition);
    background: white !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--rais-primary) !important;
    box-shadow: 0 0 0 3px rgba(24,37,81,0.12) !important;
}

.form-control::placeholder {
    color: var(--rais-text-light) !important;
}

/* ---- Buttons ---- */
.btn-success {
    background: linear-gradient(135deg, var(--rais-primary) 0%, var(--rais-secondary) 100%) !important;
    border: none !important;
    border-radius: var(--rais-radius-sm) !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.3px;
    transition: var(--rais-transition);
    box-shadow: 0 4px 12px rgba(24,37,81,0.25);
}

.btn-success:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(24,37,81,0.4) !important;
}

.btn.bg-gradient-primary-to-secondary {
    border-radius: var(--rais-radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(24,37,81,0.3);
    transition: var(--rais-transition);
    -webkit-text-fill-color: white !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
}

.btn.bg-gradient-primary-to-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(24,37,81,0.4);
}

.btn-secondary {
    background: #64748b !important;
    border: none !important;
    border-radius: var(--rais-radius-sm) !important;
    font-weight: 600 !important;
}

.btn-secondary:hover {
    background: #475569 !important;
    transform: translateY(-2px);
}

/* Bootstrap's compiled --bs-secondary theme variable is bright pink (#e21e80)
   in this project's styles.css — .btn-secondary above already masks it, but
   .btn-outline-secondary (transparent bg, no matching override) rendered
   pink everywhere it's used. Override here instead of touching the vendor
   stylesheet directly. */
.btn-outline-secondary {
    color: #64748b !important;
    border-color: #64748b !important;
}

.btn-outline-secondary:hover {
    background: #64748b !important;
    border-color: #64748b !important;
    color: #fff !important;
}

/* ---- Toast Notification ---- */
.toast {
    border-radius: var(--rais-radius) !important;
    border: none !important;
    box-shadow: var(--rais-shadow-lg) !important;
    background: var(--rais-surface) !important;
    overflow: hidden;
}

.toast-header {
    background: linear-gradient(135deg, var(--rais-primary), var(--rais-secondary)) !important;
    color: white !important;
    padding: 12px 16px !important;
    border: none !important;
}

.toast-header strong {
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

.toast-body {
    padding: 16px !important;
    font-size: 0.9rem !important;
}

/* ---- Footer ---- */
footer {
    background: var(--rais-surface) !important;
    border-top: 1px solid var(--rais-border) !important;
}

/* ---- Notification Bell (for header) ---- */
.notification-bell {
    position: relative;
    cursor: pointer;
    font-size: 1.3rem;
    color: var(--rais-text-secondary);
    transition: var(--rais-transition);
}

.notification-bell:hover {
    color: var(--rais-primary);
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--rais-danger);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* ---- Admin Link in Header ---- */
.admin-header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--rais-primary) 0%, var(--rais-secondary) 100%);
    color: white !important;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--rais-transition);
}

.admin-header-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24,37,81,0.35);
    color: white !important;
}

/* ---- Guide/Panduan Link in Header ---- */
.guide-header-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    color: var(--rais-primary) !important;
    border: 1.5px solid rgba(24,37,81,0.35);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--rais-transition);
}

.guide-header-link:hover {
    background: rgba(24,37,81,0.08);
    border-color: var(--rais-primary);
    color: var(--rais-primary) !important;
    transform: translateY(-1px);
}

/* ---- Slim breadcrumb-style "back" link — replaces isolated pill buttons
   that floated alone under the fixed header with a big empty gap ---- */
.rais-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 4px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.rais-back-link i {
    font-size: 0.95rem;
    transition: transform 0.2s ease;
}

.rais-back-link:hover {
    color: var(--rais-primary);
}

.rais-back-link:hover i {
    transform: translateX(-3px);
}

/* ---- Responsive Adjustments ---- */
@media (max-width: 768px) {
    .card-body.p-5 {
        padding: 24px !important;
    }

    .modal-body {
        padding: 20px !important;
    }

    .modal-header {
        padding: 16px 20px !important;
    }
}

/* ---- Smooth Animations ---- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ---- Scrollbar Styling ---- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ---- Assessment Checklist Page Enhancements ---- */
.sidebar-navigation .list-group-item {
    border-radius: 12px !important;
    font-weight: 500;
    transition: var(--rais-transition);
    border: 1.5px solid transparent !important;
}

.sidebar-navigation .list-group-item.active {
    background: linear-gradient(135deg, var(--rais-primary) 0%, var(--rais-secondary) 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(24,37,81,0.3);
}

.sidebar-navigation .list-group-item:hover:not(.active) {
    border-color: var(--rais-primary) !important;
    color: var(--rais-primary) !important;
    background: rgba(24,37,81,0.05) !important;
    box-shadow: none !important;
}

/* ---- Version History Cards ---- */
.version-card {
    background: var(--rais-surface);
    border: 1px solid var(--rais-border);
    border-radius: var(--rais-radius);
    padding: 20px;
    transition: var(--rais-transition);
    position: relative;
}

.version-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 4px;
    background: linear-gradient(180deg, var(--rais-primary), var(--rais-secondary));
    border-radius: 2px;
}

.version-card:hover {
    box-shadow: var(--rais-shadow);
    border-color: rgba(24,37,81,0.18);
}

/* ---- Benchmark Comparison ---- */
.benchmark-bar {
    height: 10px;
    border-radius: 5px;
    background: #e2e8f0;
    overflow: hidden;
    margin: 8px 0;
}

.benchmark-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 1s ease-in-out;
}

.benchmark-bar-fill.user-score {
    background: linear-gradient(90deg, var(--rais-primary), var(--rais-secondary));
}

.benchmark-bar-fill.industry-avg {
    background: linear-gradient(90deg, var(--rais-warning), #fbbf24);
}