/* Custom Klaro Styling to match Extended ERP theme */

/* ═════════════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ═════════════════════════════════════════════════════════════════════════
   1. Brand Palette
   2. Klaro Variable Overrides
   3. Consent Notice (Popup)
   4. Modal Dialog
   5. Buttons
   6. App List & Toggle Switches
   7. Typography & Text
   8. Mobile Responsiveness
   ═════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. BRAND PALETTE
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* Extended ERP Brand Colors */
    --clr-orange-500: #f5901c;
    --clr-orange-600: #e58218;
    --clr-orange-700: #d67516;
    --clr-blue-900: #12141d;
    --clr-blue-700: #1f2232;
    --clr-blue-600: #2a2e43;
    --clr-blue-500: #3a4059;
    --clr-gray-500: #6c757d;
    --clr-gray-200: #e9ecef;
    --clr-gray-100: #f8f9fa;
    --clr-white: #ffffff;
    --text-muted: #b0b8c9; /* Soft slate for helper text */
    
    /* Button colors */
    --btn-secondary-bg: #1667d1;     /* Accessible blue */
    --btn-secondary-bg-hov: #1259c8; /* 10% darker for hover */
    
    /* Gradient endpoints */
    --gradient-blue-start: var(--clr-blue-900);
    --gradient-blue-end: var(--clr-blue-600);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. KLARO VARIABLE OVERRIDES
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* Accept/OK buttons and toggle ON state */
    --green1: var(--clr-orange-500);
    
    /* Required services toggle ON state */
    --green2: var(--clr-orange-600);
    
    /* Backgrounds */
    --dark1: var(--clr-blue-600);  /* Modal body background */
    --dark2: var(--clr-blue-700);  /* Secondary dark color */
    --dark3: var(--clr-blue-900);  /* Tertiary dark color */
    
    /* Light colors */
    --light1: var(--clr-white);    /* Primary light color */
    --light2: var(--clr-gray-100); /* Secondary light color */
    --light3: var(--clr-gray-200); /* Tertiary light color */
    
    /* Toggle states */
    --white2: var(--clr-gray-200); /* Toggle OFF background */
    --white3: var(--clr-white);    /* Toggle knob color */
}

/* Helper text muted inside Klaro for better hierarchy */
.klaro .cm-modal,
.klaro .cn {
    --dark3: var(--text-muted);
    --light3: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   3. CONSENT NOTICE (POPUP)
   ───────────────────────────────────────────────────────────────────────── */
.klaro .cn {
    background: linear-gradient(135deg, var(--gradient-blue-start) 0%, var(--gradient-blue-end) 100%);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(18, 20, 29, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.klaro .cn-body {
    background: transparent;
    padding: 2rem;
}

.klaro .cn-body .cn-title {
    color: var(--clr-white);
    font-weight: 600;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.klaro .cn-body .cn-text {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.klaro .cn-body .cn-learn-more {
    color: var(--clr-orange-500);
    font-weight: 500;
}

.klaro .cn-body .cn-buttons {
    margin-top: 1.5rem;
    gap: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. MODAL DIALOG
   ───────────────────────────────────────────────────────────────────────── */

/* Fix z-index: raise only the outer container above header */
.klaro .cookie-modal {
    z-index: 11000 !important; /* > header 1050. Internal child z-indexes stay relative */
}

.klaro .cm-modal {
    backdrop-filter: blur(4px);
}

.klaro .cm-modal .cm-modal-dialog {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(18, 20, 29, 0.4);
}

.klaro .cm-modal .cm-modal-header {
    background: linear-gradient(135deg, var(--gradient-blue-start) 0%, var(--gradient-blue-end) 100%);
    color: var(--clr-white);
    padding: 2rem;
    border-bottom: none;
}

.klaro .cm-modal .cm-modal-header h1 {
    color: var(--clr-white);
    font-size: 1.75rem;
    font-weight: 600;
}

.klaro .cm-modal .cm-modal-header .cm-modal-close {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.5rem;
}

.klaro .cm-modal .cm-modal-header .cm-modal-close:hover {
    color: var(--clr-white);
}

.klaro .cm-modal .cm-modal-body {
    padding: 2rem;
    background-color: var(--dark1);
    color: var(--clr-white);
}

.klaro .cm-modal .cm-modal-footer {
    background-color: var(--clr-gray-200);
    padding: 1.5rem 2rem;
    border-top: 1px solid #dee2e6;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. BUTTONS
   ───────────────────────────────────────────────────────────────────────── */
.klaro .cm-btn {
    border-radius: 25px;
    padding: 12px 28px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-transform: none;
    font-size: 0.95rem;
}

/* Accept all button */
.klaro .cm-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(245, 144, 28, 0.3);
}

.klaro .cm-btn-success:focus-visible {
    outline: 2px solid var(--green1);
    outline-offset: 2px;
}

/* Decline button */
.klaro .cm-btn-decline {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--light1);
}

.klaro .cm-btn-decline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Secondary button - "Accept selected" */
.klaro .cm-btn-info {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: var(--clr-white);
}

.klaro .cm-btn-info:hover,
.klaro .cm-btn-info:focus {
    background-color: var(--btn-secondary-bg-hov);
    border-color: var(--btn-secondary-bg-hov);
    color: var(--clr-white);
}

.klaro .cm-btn-info:focus-visible {
    outline: 2px solid var(--btn-secondary-bg-hov);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. APP LIST & TOGGLE SWITCHES
   ───────────────────────────────────────────────────────────────────────── */
.klaro .cm-app {
    border-bottom: 1px solid var(--clr-gray-200);
    padding: 1.25rem 0;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.klaro .cm-app:last-child {
    border-bottom: none;
}

/* Keep input accessible - do NOT use display:none */
.klaro .cm-app-input {
    /* Klaro already handles hiding with opacity:0 */
}

.klaro .cm-app-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.klaro .cm-app-info {
    flex-grow: 1;
}

/* Focus state for toggle switches */
.klaro .cm-app-input:focus + .cm-app-label .cm-switch {
    box-shadow: 0 0 0 3px rgba(245, 144, 28, 0.25);
}

/* Future-proof: native accent color */
.klaro :where(input[type=checkbox], input[type=radio]) {
    accent-color: var(--green1);
}

/* ─────────────────────────────────────────────────────────────────────────
   7. TYPOGRAPHY & TEXT
   ───────────────────────────────────────────────────────────────────────── */
.klaro .cm-app-title {
    color: var(--clr-blue-900);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

/* Light app titles in dark modal */
.klaro .cm-modal .cm-app-title {
    color: var(--clr-white);
}

.klaro .cm-app-description {
    color: var(--clr-gray-500);
    margin-top: 0.5rem;
    line-height: 1.5;
}

/* Light descriptions in dark modal */
.klaro .cm-modal .cm-app-description {
    color: var(--clr-white);
}

/* Small text and metadata in modal */
.klaro .cm-modal .cm-app-info small,
.klaro .cm-modal .cm-app-meta,
.klaro .cm-modal .cm-app-vendor {
    color: var(--text-muted);
}

/* "Always required" and similar helper text */
.klaro .cm-modal .cm-app-notice,
.klaro .cm-modal .cm-app-required-notice {
    color: var(--text-muted);
    font-size: 0.85em;
}

/* Required apps styling */
.klaro .cm-app.required .cm-app-title::after {
    content: " (Required)";
    color: var(--clr-orange-500);
    font-size: 0.85em;
    font-weight: 500;
    font-style: italic;
}


/* Purpose badges */
.klaro .cm-purpose {
    background-color: var(--clr-blue-500);
    color: var(--clr-white);
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Links */
.klaro a {
    color: var(--clr-orange-500);
}

.klaro a:hover {
    color: var(--clr-orange-600);
    text-decoration: underline;
}

/* Override all orange links in modal */
.klaro .cm-modal a,
.klaro .cm-modal .cm-app-vendor,
.klaro .cm-modal .cm-toggle-all,
.klaro .cm-modal .cm-app-purposes a {
    color: var(--clr-orange-500) !important;
}

.klaro .cm-modal a:hover,
.klaro .cm-modal .cm-app-vendor:hover,
.klaro .cm-modal .cm-toggle-all:hover,
.klaro .cm-modal .cm-app-purposes a:hover {
    color: var(--clr-orange-600) !important;
    text-decoration: underline;
}

/* "Toggle all" functionality */
.klaro .cm-modal .cm-toggle-all {
    cursor: pointer;
    font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────
   8. MOBILE RESPONSIVENESS
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .klaro .cm-modal .cm-modal-dialog {
        margin: 10px;
        width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
    }
    
    .klaro .cn {
        bottom: 10px;
        left: 10px;
        right: 10px;
        width: auto;
    }
    
    .klaro .cn-body {
        padding: 1.5rem;
    }
    
    .klaro .cm-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   FINAL OVERRIDES - Must be last
   ───────────────────────────────────────────────────────────────────────── */

/* Color for the "(always required)" badges */
.klaro .cm-modal .cm-required,
.klaro .cn .cm-required {
    color: var(--text-muted) !important;
    font-size: 0.85em;
    font-weight: 400;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────
   KEYBOARD FOCUS ACCESSIBILITY
   ───────────────────────────────────────────────────────────────────────── */

/* Restore visible focus rings for keyboard navigation (WCAG 2.4.7) */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--clr-orange-500);
    outline-offset: 2px;
}

/* Special handling for buttons that might have custom styles */
:where(.btn):focus-visible {
    outline: 2px solid var(--clr-orange-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(245, 144, 28, 0.25);
}

/* Ensure no outline:none overrides */
:where(a, button, input, textarea, select):focus {
    outline-color: var(--clr-orange-500);
}