/*
 * Vitalum Brand Theme Override
 * Primary brand color: #1ebf95 (VAM green)
 * Applied when accessed via smile.vitalum.io
 */

:root {
    --vam-primary: #1ebf95;
    --vam-primary-deep: #159474;
    --vam-primary-light: #3dd4aa;
    --vam-primary-gradient: linear-gradient(310deg, #159474 0%, #1ebf95 100%);
}

/* Override warning gradient (used as primary action color in this app) */
.bg-gradient-warning {
    background-image: linear-gradient(310deg, #159474 0%, #1ebf95 100%) !important;
}

.btn.bg-gradient-warning,
.btn-warning {
    background-image: linear-gradient(310deg, #159474 0%, #1ebf95 100%) !important;
    border-color: #159474 !important;
}

.btn.bg-gradient-warning:hover,
.btn-warning:hover {
    background-image: linear-gradient(310deg, #128060 0%, #17a87e 100%) !important;
}

.btn.bg-gradient-warning:not(:disabled):not(.disabled).active,
.btn.bg-gradient-warning:not(:disabled):not(.disabled):active,
.show > .btn.bg-gradient-warning.dropdown-toggle {
    background-image: linear-gradient(310deg, #128060 0%, #17a87e 100%) !important;
}

.btn.bg-gradient-warning.focus,
.btn.bg-gradient-warning:focus {
    box-shadow: 0 3px 5px -1px rgba(30, 191, 149, 0.2), 0 6px 10px 0 rgba(30, 191, 149, 0.14), 0 1px 18px 0 rgba(30, 191, 149, 0.12) !important;
}

/* Override btn-outline-warning */
.btn-outline-warning {
    border-color: #1ebf95 !important;
    color: #1ebf95 !important;
}

.btn-outline-warning:hover {
    background-color: #1ebf95 !important;
    color: #fff !important;
}

/* Active nav items */
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-link:hover {
    color: #1ebf95 !important;
}

.navbar-vertical .nav-link.active .icon,
.navbar-vertical .nav-link.active svg .color-background {
    fill: #1ebf95 !important;
}

/* Sidebar active icon background */
.icon.bg-gradient-warning {
    background-image: linear-gradient(310deg, #159474 0%, #1ebf95 100%) !important;
}

/* Card background mask warning */
.card.card-background.card-background-mask-warning:after {
    background-image: linear-gradient(310deg, #159474 0%, #1ebf95 100%) !important;
}

/* Text colors */
.text-warning {
    color: #1ebf95 !important;
}

/* Badge / pill warning */
.badge.bg-gradient-warning,
.badge.bg-warning {
    background-image: linear-gradient(310deg, #159474 0%, #1ebf95 100%) !important;
    background-color: #1ebf95 !important;
}

/* Progress bar */
.progress-bar.bg-gradient-warning {
    background-image: linear-gradient(310deg, #159474 0%, #1ebf95 100%) !important;
}

/* Form focus rings */
.form-control:focus {
    border-color: #1ebf95 !important;
    box-shadow: 0 0 0 2px rgba(30, 191, 149, 0.25) !important;
}

/* Links */
a.text-warning {
    color: #1ebf95 !important;
}

/* Scan panel / left panel button override (student home) */
.scan-left-panel .btn.bg-gradient-warning {
    background-image: linear-gradient(310deg, #159474 0%, #1ebf95 100%) !important;
}

.scan-left-panel .btn.bg-gradient-warning:not([disabled]):hover {
    background-image: linear-gradient(310deg, #128060 0%, #17a87e 100%) !important;
}

/* Auth page button */
.btn-vam-primary {
    background-image: linear-gradient(310deg, #159474 0%, #1ebf95 100%);
    color: #fff;
    border: none;
}

.btn-vam-primary:hover {
    background-image: linear-gradient(310deg, #128060 0%, #17a87e 100%);
    color: #fff;
}

/* ======================================================
   AUTH PAGES (login / register / forgot / otp)
   ====================================================== */

/* Page background radial glow */
.sv-auth-page {
    background:
        radial-gradient(ellipse 70% 50% at 30% 30%, rgba(30,191,149,0.07) 0%, transparent 60%),
        linear-gradient(158deg, #06090e 0%, #0a1220 55%, #0e1a2d 100%) !important;
}

/* Logo drop-shadow */
.sv-logo {
    filter: drop-shadow(0 2px 16px rgba(30,191,149,0.22)) !important;
}

/* Form field focus ring */
.sv-card .form-control:focus {
    border-color: rgba(30,191,149,0.55) !important;
    box-shadow: 0 0 0 3px rgba(30,191,149,0.14) !important;
}

/* Primary button (Sign in / Register / Submit) */
.sv-btn-primary {
    background: linear-gradient(135deg, #159474 0%, #1ebf95 100%) !important;
    box-shadow: 0 4px 22px rgba(30,191,149,0.38) !important;
}
.sv-btn-primary:hover {
    box-shadow: 0 6px 28px rgba(30,191,149,0.55) !important;
}

/* Checkbox checked state */
.form-check-input:checked {
    background-color: #1ebf95 !important;
    border-color: #1ebf95 !important;
}

/* Error / info message banner */
.sv-msg {
    background: rgba(30,191,149,0.10) !important;
    border-color: rgba(30,191,149,0.22) !important;
    color: #5edbb8 !important;
}

/* Link color inside auth card (used in register.html) */
.sv-card a.text-dark {
    color: #1ebf95 !important;
}

/* WhatsApp hover glow on auth pages */
.whatsapp-button:hover {
    border-color: rgba(30,191,149,0.35) !important;
    box-shadow: 0 6px 32px rgba(0,0,0,0.6), 0 0 24px rgba(30,191,149,0.12) !important;
}

/* ======================================================
   STUDENT HOME PAGE — comprehensive orange → green overrides
   Replaces all hardcoded #fb6340 / #f5a623 with VAM green.
   !important needed to beat inline styles and existing
   !important rules in the page's own <style> block.
   ====================================================== */

/* Basic orange text class */
.text-blue { color: #1ebf95 !important; }

/* PDF download button */
#downloadPdfBtn {
    border-color: #1ebf95 !important;
    color: #1ebf95 !important;
}
#downloadPdfBtn:hover {
    border-color: #1ebf95 !important;
    color: #1ebf95 !important;
    box-shadow: 0 4px 6px rgba(30, 191, 149, 0.2) !important;
}

/* Scan type toggle buttons */
.scan-toggle-btn {
    border-color: #1ebf95 !important;
    color: #1ebf95 !important;
}
.scan-toggle-btn:hover {
    background: rgba(30, 191, 149, 0.08) !important;
}
.scan-toggle-btn.active {
    background: linear-gradient(135deg, #159474 0%, #1ebf95 100%) !important;
    border-color: #1ebf95 !important;
    box-shadow: 0 3px 8px rgba(30, 191, 149, 0.35) !important;
}
.scan-toggle-btn:focus,
.scan-toggle-btn:focus-visible,
.scan-toggle-btn:active {
    box-shadow: 0 2px 14px rgba(30, 191, 149, 0.42) !important;
    outline: none !important;
}

/* Left panel scan toggle buttons */
.scan-left-panel .text-blue { color: #1ebf95 !important; }
.scan-right-panel .text-blue { color: #1ebf95 !important; }
.scan-left-panel .scan-toggle-btn {
    border-color: rgba(30, 191, 149, 0.55) !important;
    color: #838c9a !important;
}
.scan-left-panel .scan-toggle-btn:hover {
    background: rgba(30, 191, 149, 0.12) !important;
    border-color: rgba(30, 191, 149, 0.6) !important;
    color: #3dd4aa !important;
}
.scan-left-panel .scan-toggle-btn.active {
    background: linear-gradient(135deg, #159474 0%, #1ebf95 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.02),
        0 2px 14px rgba(30, 191, 149, 0.42) !important;
}
.scan-left-panel .scan-toggle-btn:focus,
.scan-left-panel .scan-toggle-btn:focus-visible,
.scan-left-panel .scan-toggle-btn:active {
    outline: none !important;
    box-shadow: 0 2px 14px rgba(30, 191, 149, 0.42) !important;
}

/* Dropzone orange borders → green */
.scan-left-panel .dropzone,
.scan-right-panel .dropzone {
    border-color: rgba(30, 191, 149, 0.38) !important;
}
.scan-left-panel .dropzone:hover,
.scan-right-panel .dropzone:hover {
    border-color: rgba(30, 191, 149, 0.62) !important;
    background: rgba(30, 191, 149, 0.04) !important;
}

/* START / ANALYSE button glow */
.scan-left-panel .btn.bg-gradient-warning {
    box-shadow: 0 4px 22px rgba(30, 191, 149, 0.36), 0 1px 4px rgba(0,0,0,0.3) !important;
}
.scan-left-panel .btn.bg-gradient-warning:not([disabled]):hover {
    box-shadow: 0 6px 28px rgba(30, 191, 149, 0.55), 0 2px 8px rgba(0,0,0,0.38) !important;
}

/* Facial toggle switch */
#smileFacialToggle:checked {
    background-color: #1ebf95 !important;
    border-color: #1ebf95 !important;
}

/* CBCT spinner ring */
.cbct-spinner-ring {
    border-color: rgba(30, 191, 149, 0.15) !important;
    border-top-color: #1ebf95 !important;
}

/* CBCT progress bar fill */
.cbct-progress-bar-fill {
    background: linear-gradient(90deg, #159474, #1ebf95) !important;
}

/* CBCT fullscreen button hover */
.cbct-fs-btn:hover {
    border-color: #1ebf95 !important;
    color: #1ebf95 !important;
}

/* CBCT fullscreen overlay controls bar border */
#cbct-fs-overlay .fs-controls {
    border-top-color: rgba(30, 191, 149, 0.2) !important;
}

/* CBCT fullscreen range slider accent */
#cbct-fs-overlay input[type=range] {
    accent-color: #1ebf95 !important;
}

/* CBCT fullscreen close button hover */
#cbct-fs-close:hover {
    background: #1ebf95 !important;
    border-color: #1ebf95 !important;
}

/* CBCT measurement toolbar border */
#cbct-measure-toolbar {
    border-bottom-color: rgba(30, 191, 149, 0.3) !important;
}

/* Measure tool buttons */
.measure-tool-btn {
    border-color: #1ebf95 !important;
    color: #1ebf95 !important;
}
.measure-tool-btn:hover {
    background: rgba(30, 191, 149, 0.12) !important;
    box-shadow: 0 0 8px rgba(30, 191, 149, 0.3) !important;
}
.measure-tool-btn.active {
    background: #1ebf95 !important;
    box-shadow: 0 0 12px rgba(30, 191, 149, 0.5) !important;
}
#cbct-measure-toolbar .tb-plane { color: #1ebf95 !important; }

/* CBCT tools button */
.cbct-tools-btn {
    border-color: #1ebf95 !important;
    color: #1ebf95 !important;
}
.cbct-tools-btn:hover {
    background: rgba(30, 191, 149, 0.15) !important;
    box-shadow: 0 0 8px rgba(30, 191, 149, 0.4) !important;
}

/* CBCT plane image hover glow */
.cbct-plane-img:hover {
    box-shadow: 0 0 0 2px #1ebf95, 0 0 14px rgba(30, 191, 149, 0.45) !important;
}

/* Plane mini tools trigger */
.plane-tools-trigger {
    border-color: #1ebf95 !important;
    color: #1ebf95 !important;
}
.plane-tools-trigger:hover,
.plane-tools-trigger.open {
    background: #1ebf95 !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(30, 191, 149, 0.45) !important;
}
.plane-tools-dropdown {
    border-color: rgba(30, 191, 149, 0.45) !important;
}
.plane-dd-item:hover {
    background: rgba(30, 191, 149, 0.18) !important;
    color: #1ebf95 !important;
}

/* Navbar link hover + avatar ring */
.main-content > nav a:hover { color: #1ebf95 !important; }
.main-content > nav .avatar {
    box-shadow: 0 0 0 2px rgba(30, 191, 149, 0.45), 0 0 0 4px rgba(30, 191, 149, 0.12) !important;
}

/* Logo drop-shadow glow */
.scan-page-logo {
    filter: drop-shadow(0 2px 18px rgba(30, 191, 149, 0.18)) !important;
}

/* Panel ambient glow (warm orange → green) */
.scan-left-panel {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 2px 1px rgba(255,255,255,0.06) inset,
        0 32px 80px rgba(0,0,0,0.55),
        0 0 140px rgba(30, 191, 149, 0.06) !important;
}
.scan-right-panel {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03) inset,
        0 2px 1px rgba(255,255,255,0.05) inset,
        0 32px 80px rgba(0,0,0,0.50),
        0 0 100px rgba(30, 191, 149, 0.04) !important;
}

/* Page background radial glow (warm orange → green) */
.page-header.min-vh-100.bg-white {
    background:
        radial-gradient(ellipse 72% 55% at 26% 40%, rgba(30, 191, 149, 0.07) 0%, transparent 58%),
        linear-gradient(158deg, #06090e 0%, #0a1220 55%, #0e1a2d 100%) !important;
}

/* Empty state icon */
.scan-empty-icon {
    background: rgba(30, 191, 149, 0.08) !important;
    border-color: rgba(30, 191, 149, 0.2) !important;
}
.scan-empty-icon i { color: rgba(30, 191, 149, 0.6) !important; }

/* Smile / download action links */
#smileTryWhiteningBtn,
#smileMoreOptionsBtn,
#smileDownloadPortraitBtn,
#smileDownloadStitchedBtn {
    color: #1ebf95 !important;
}
#smileTryWhiteningBtn:hover,
#smileMoreOptionsBtn:hover {
    color: #3dd4aa !important;
    text-shadow: 0 0 12px rgba(30, 191, 149, 0.45) !important;
}
#smileDownloadPortraitBtn:hover,
#smileDownloadStitchedBtn:hover { color: #3dd4aa !important; }

/* Modal form controls focus */
.modal .form-control:focus {
    border-color: rgba(30, 191, 149, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(30, 191, 149, 0.15) !important;
}
.modal .form-check-input:checked {
    background-color: #1ebf95 !important;
    border-color: #1ebf95 !important;
}

/* Aesthetic Studio nav tabs */
#aestheticStudioTabs .nav-link:hover { color: #1ebf95 !important; }
#aestheticStudioTabs .nav-link.active {
    color: #1ebf95 !important;
    border-bottom-color: #1ebf95 !important;
}

/* Skin AI badge */
.skin-ai-badge {
    background: linear-gradient(90deg, #1ebf95, #e91e8c) !important;
}

/* Skin analyser scrollbar */
.analyser-findings-col {
    scrollbar-color: rgba(30, 191, 149, 0.45) transparent !important;
}
.analyser-findings-col::-webkit-scrollbar-thumb {
    background: rgba(30, 191, 149, 0.45) !important;
}
.analyser-findings-col::-webkit-scrollbar-thumb:hover {
    background: rgba(30, 191, 149, 0.75) !important;
}

/* Skin treatment select focus */
#skinTreatmentSelect:focus {
    border-color: #1ebf95 !important;
    box-shadow: 0 0 0 0.2rem rgba(30, 191, 149, 0.25) !important;
}

/* Dropzone image preview border + mark colour */
.dz-preview .dz-image {
    border-color: rgba(30, 191, 149, 0.22) !important;
}
.dz-preview .dz-success-mark svg path,
.dz-preview .dz-error-mark svg path { fill: #1ebf95 !important; }

/* Toast close icon hover */
.toast-container .toast .toast-header i.fa-times:hover { color: #1ebf95 !important; }

/* Footer link hover */
.fixed-footer-bar a:hover { color: #1ebf95 !important; }

/* ── Inline-style overrides (need !important to beat style="" attributes) ── */

/* CBCT resume card */
#cbct-resume-card > div {
    background: linear-gradient(135deg, rgba(30, 191, 149, 0.15), rgba(31, 111, 235, 0.12)) !important;
    border: 1px solid rgba(30, 191, 149, 0.35) !important;
}
#cbct-resume-card .fas.fa-cube { color: #1ebf95 !important; }
#cbct-resume-viewer-btn {
    background: #1ebf95 !important;
    color: #fff !important;
}

/* Aesthetic section spa icon */
#aesthetic-section .fas.fa-spa { color: #1ebf95 !important; }

/* OPG / IOS generate report + download buttons */
#opgGenerateReportBtn,
#iosGenerateReportBtn,
#iosDownloadPdfBtn {
    border-color: #1ebf95 !important;
    color: #1ebf95 !important;
}