/* 
 * Stitch Design System - LMS OVNCR (Editorial Intelligence) 
 * Tonal Layering, Glassmorphism & Typography overrides 
 */

 :root {
    /* Colors */
    --stitch-primary: #000e5c;
    --stitch-primary-container: #001d92;
    --stitch-primary-fixed: #dee0ff;
    --stitch-secondary: #4c56af;
    --stitch-secondary-container: #959efd;
    --stitch-background: #f8f9fa;
    --stitch-surface: #f8f9fa;
    --stitch-surface-bright: #f8f9fa;
    --stitch-surface-container-low: #f3f4f5;
    --stitch-surface-container-lowest: #ffffff;
    --stitch-on-surface: #191c1d;
    --stitch-on-surface-variant: #454652;
    --stitch-outline-variant: #c6c5d4;
    --stitch-error: #ba1a1a;
    --stitch-error-container: #ffdad6;
    --stitch-on-error-container: #93000a;
    --stitch-success: #22c55e;
    --stitch-success-container: #dcfce7;
    --stitch-warning: #f59e0b;
    --stitch-info: #3b82f6;

    /* Fonts */
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Metrics: Roundness Round Eight is 8px standard, but use larger for cards (e.g. 16px) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;
}

/* Base resets relying on Bootstrap but enforcing fonts */
body {
    background-color: var(--stitch-background);
    color: var(--stitch-on-surface);
    font-family: var(--font-body);
    /* For ambient styling, can add body::before glow if needed but keep it subtle */
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    color: var(--stitch-primary);
    font-weight: 700;
}

/* ====================================================
 * CARDS (Tonal Layering / Glassmorphism)
 * ==================================================== */
.card {
    border: none !important;
    background-color: var(--stitch-surface-container-lowest) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 10px 30px rgba(0, 14, 92, 0.04) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-header {
    background-color: var(--stitch-surface-container-lowest) !important;
    border-bottom: none !important;
}

.hover-lift {
    transition: transform 0.2s, box-shadow 0.2s;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 14, 92, 0.08) !important;
}

/* ====================================================
 * TABLES (Editorial list without hard lines)
 * ==================================================== */
.table {
    border-collapse: separate;
    border-spacing: 0 6px; /* Space between rows */
    background: transparent !important;
}

.table>thead>tr>th {
    border-bottom: none !important;
    color: var(--stitch-on-surface-variant);
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding-bottom: 0.5rem;
}

.table>tbody>tr {
    background-color: var(--stitch-surface-container-lowest);
    box-shadow: 0 2px 4px rgba(0, 14, 92, 0.02);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.table>tbody>tr>td {
    border-top: none !important;
    border-bottom: none !important;
    color: var(--stitch-on-surface);
    vertical-align: middle;
    padding: 1rem;
    border: 1px solid transparent;
}

/* Simulate border radius on tr */
.table>tbody>tr>td:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}
.table>tbody>tr>td:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.table-hover>tbody>tr:hover {
    background-color: var(--stitch-surface-container-low) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 14, 92, 0.05);
}

/* ====================================================
 * BUTTONS
 * ==================================================== */
.btn-primary, .btn-primary:focus {
    background: linear-gradient(135deg, var(--stitch-primary), var(--stitch-primary-container)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(0, 14, 92, 0.2);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--stitch-primary-container), var(--stitch-primary)) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 14, 92, 0.3);
}

/* Soft buttons for secondary actions */
.btn-soft-primary {
    background-color: var(--stitch-primary-fixed) !important;
    color: var(--stitch-primary-container) !important;
    border: none !important;
}
.btn-soft-primary:hover {
    background-color: #cbd2ff !important; /* Slightly darker dim */
}

.btn-soft-danger {
    background-color: var(--stitch-error-container) !important;
    color: var(--stitch-on-error-container) !important;
    border: none !important;
}
.btn-soft-danger:hover {
    background-color: #ffb4ab !important; /* Slightly darker container */
}

/* ====================================================
 * INPUTS & FORMS (Editorial Input)
 * ==================================================== */
.form-control, .form-select, .input-group-text {
    background-color: var(--stitch-surface-container-lowest) !important;
    border: 1px solid rgba(198, 197, 212, 0.4) !important; /* outline-variant opacity */
    border-radius: var(--radius-md);
    color: var(--stitch-on-surface) !important;
    padding: 0.65rem 1rem;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--stitch-primary) !important;
    box-shadow: 0 0 0 4px rgba(222, 224, 255, 0.5) !important; /* primary_fixed with opacity */
    outline: none 0;
}

.input-group > .form-control {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}
.input-group > .input-group-text {
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    border-right: none !important;
    color: var(--stitch-on-surface-variant);
}

/* ====================================================
 * BADGES (SaaS Style)
 * ==================================================== */
.badge {
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.45em 0.8em;
    border-radius: var(--radius-pill);
}

.badge-soft-success {
    background-color: var(--stitch-success-container);
    color: #166534; /* darker green text */
}

.badge-soft-secondary {
    background-color: var(--stitch-surface-container-low);
    color: var(--stitch-on-surface-variant);
}

/* ====================================================
 * PILL TABS
 * ==================================================== */
.nav-pills {
    background-color: var(--stitch-surface-container-lowest);
    border-radius: var(--radius-xl);
    padding: 0.35rem;
    border: 1px solid rgba(198, 197, 212, 0.2);
}
.nav-pills .nav-item .nav-link {
    color: var(--stitch-on-surface-variant);
    border-radius: var(--radius-pill);
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    transition: all 0.3s ease;
}
.nav-pills .nav-item .nav-link.active {
    background-color: var(--stitch-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 14, 92, 0.2);
}
.nav-pills .nav-item .nav-link:hover:not(.active) {
    background-color: var(--stitch-surface-container-low);
}

/* ====================================================
 * MODALS (Glassmorphism backdrop)
 * ==================================================== */
.modal-backdrop {
    background-color: rgba(20, 26, 49, 0.4); /* tertiary tint */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.modal-content {
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 14, 92, 0.2) !important;
}
.modal-header {
    border-bottom: 1px solid rgba(198, 197, 212, 0.2) !important;
    background: transparent !important; /* Remove solid colored headers */
    color: var(--stitch-primary) !important;
}
.modal-header .modal-title {
    font-family: var(--font-heading);
    font-weight: 700;
}
.modal-footer {
    border-top: 1px solid rgba(198, 197, 212, 0.2) !important;
    background: transparent !important;
}

/* Bootstrap override */
:root {
    --bs-primary: #000e5c;
    --bs-primary-rgb: 0, 14, 92;
    --bs-secondary: #4c56af;
    --bs-secondary-rgb: 76, 86, 175;
    --bs-success: #22c55e;
    --bs-danger: #ba1a1a;
    --bs-body-bg: #f8f9fa;
    --bs-body-color: #191c1d;
    --bs-border-color: rgba(198, 197, 212, 0.2);
}