/* ==========================================================================
   AutoSolz Design System Core Engine
   Primary: #824dee
   Radius: 13px (All views except Dashboard)
   Canvas: #faf9f6 (Warm Creamy White)
   Surfaces: #ffffff (Crisp Pure White)
   Dark Anchors: #0f172a (Deep Charcoal Black)
   ========================================================================== */

:root {
    /* Brand Accent */
    --as-primary: #824dee;
    --as-primary-hover: #7038db;
    --as-primary-active: #5f2bc9;
    --as-primary-light: #f5f0ff;
    --as-primary-border: #d8c2ff;
    --as-primary-ring: rgba(130, 77, 238, 0.20);

    /* Canvas & Surfaces */
    --as-bg: #faf9f6;
    --as-surface: #ffffff;
    --as-surface-subtle: #f8fafc;
    --as-border: #e2e8f0;
    --as-border-dark: #cbd5e1;

    /* Dark Neutral Anchors */
    --as-dark: #0f172a;
    --as-dark-surface: #1e293b;
    --as-dark-border: #334155;

    /* Text Colors */
    --as-text: #0f172a;
    --as-text-muted: #64748b;
    --as-text-light: #94a3b8;

    /* Functional Accents */
    --as-danger: #ef4444;
    --as-danger-hover: #dc2626;
    --as-danger-bg: #fef2f2;
    --as-danger-border: #fecaca;

    --as-success: #10b981;
    --as-success-bg: #ecfdf5;

    /* Global Border Radius (13px for all views except dashboard) */
    --as-radius: 13px;

    /* Shadows & Depths */
    --as-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --as-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06);
    --as-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Global Background */
body {
    background-color: var(--as-bg) !important;
    color: var(--as-text);
}

/* Cards & Containers */
.as-card,
.section-card {
    background: var(--as-surface) !important;
    border: 1px solid var(--as-border) !important;
    border-radius: var(--as-radius) !important;
    box-shadow: var(--as-shadow-sm) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.as-card:hover,
.section-card:hover {
    border-color: #cbd5e1 !important;
}

/* Inputs & Form Controls */
.as-input,
.pro-input,
input[type="text"].pro-input,
input[type="number"].pro-input,
input[type="email"].pro-input,
input[type="password"].pro-input,
input[type="date"].pro-input,
input[type="datetime-local"].pro-input,
input[type="search"].pro-input,
select.pro-input,
textarea.pro-input {
    height: 38px !important;
    border: 1px solid var(--as-border) !important;
    border-radius: var(--as-radius) !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    color: var(--as-text) !important;
    background-color: var(--as-surface) !important;
    transition: all 0.15s ease !important;
    box-shadow: var(--as-shadow-inset) !important;
}

textarea.pro-input {
    height: auto !important;
    min-height: 80px !important;
    padding: 8px 12px !important;
}

.as-input:focus,
.pro-input:focus,
input[type="text"].pro-input:focus,
input[type="number"].pro-input:focus,
input[type="email"].pro-input:focus,
input[type="password"].pro-input:focus,
input[type="date"].pro-input:focus,
input[type="search"].pro-input:focus,
select.pro-input:focus,
textarea.pro-input:focus {
    outline: none !important;
    border-color: var(--as-primary) !important;
    box-shadow: 0 0 0 2px var(--as-primary-ring), var(--as-shadow-inset) !important;
}

.pro-input[readonly] {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

/* Primary Buttons */
.as-btn-primary,
.btn-submit-order,
.btn-add-row {
    background: var(--as-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--as-primary) !important;
    border-radius: var(--as-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 9px 18px !important;
    box-shadow: 0 1px 2px rgba(130, 77, 238, 0.25) !important;
    transition: all 0.15s ease !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

.as-btn-primary:hover,
.btn-submit-order:hover,
.btn-add-row:hover {
    background: var(--as-primary-hover) !important;
    border-color: var(--as-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(130, 77, 238, 0.35) !important;
    transform: translateY(-1px);
}

.as-btn-primary:active,
.btn-submit-order:active,
.btn-add-row:active {
    background: var(--as-primary-active) !important;
    transform: translateY(1px);
}

/* Secondary Button */
.as-btn-secondary {
    background: #ffffff !important;
    color: var(--as-text) !important;
    border: 1px solid var(--as-border) !important;
    border-radius: var(--as-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    transition: all 0.15s ease !important;
}

.as-btn-secondary:hover {
    background: #f8fafc !important;
    border-color: var(--as-border-dark) !important;
}

/* Delete / Danger Button */
.btn-delete-row {
    width: 34px !important;
    height: 34px !important;
    border-radius: var(--as-radius) !important;
    background: var(--as-danger-bg) !important;
    color: var(--as-danger) !important;
    border: 1px solid var(--as-danger-border) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.btn-delete-row:hover {
    background: var(--as-danger) !important;
    color: #ffffff !important;
    border-color: var(--as-danger) !important;
}

/* Select2 Global Standard */
.select2-container .select2-selection--single {
    height: 38px !important;
    border: 1px solid var(--as-border) !important;
    border-radius: var(--as-radius) !important;
    padding: 4px 10px !important;
    font-size: 14px !important;
    background: #ffffff !important;
    transition: all 0.15s ease !important;
}

.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
    border-color: var(--as-primary) !important;
    box-shadow: 0 0 0 2px var(--as-primary-ring) !important;
}

.select2-selection__rendered {
    line-height: 28px !important;
    color: var(--as-text) !important;
}

.select2-dropdown {
    border-radius: var(--as-radius) !important;
    border: 1px solid var(--as-border) !important;
    box-shadow: var(--as-shadow-md) !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--as-primary) !important;
    color: #ffffff !important;
}

/* Clean Badges */
.as-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--as-radius);
    line-height: 1;
}

.as-badge-primary {
    background: var(--as-primary-light);
    color: var(--as-primary);
    border: 1px solid var(--as-primary-border);
}

.as-badge-dark {
    background: var(--as-dark);
    color: #ffffff;
}

/* Modals */
.modal-box {
    border-radius: var(--as-radius) !important;
    border: 1px solid var(--as-border);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
}

/* ==========================================================================
   GLOBAL 13PX RADIUS SYSTEM (Excludes Dashboard)
   All views except the dashboard adopt strict 13px border radius.
   ========================================================================== */

/* Universal Utility Overrides for Non-Dashboard Views */
body:not(.is-dashboard) .rounded-\[3px\],
body:not(.is-dashboard) .rounded-\[2px\],
body:not(.is-dashboard) .rounded-\[4px\],
body:not(.is-dashboard) .rounded-sm,
body:not(.is-dashboard) .rounded,
body:not(.is-dashboard) .rounded-md:not(nav a),
body:not(.is-dashboard) .rounded-lg:not(#fab-container *):not(aside *):not(div[class*="from-primary-800"] *),
body:not(.is-dashboard) .rounded-xl:not(#fab-container *):not(.kpi-card):not(.dash-card):not(aside *):not(div[class*="from-primary-800"] *) {
    border-radius: var(--as-radius, 13px) !important;
}

/* Directional Rounded Utilities */
body:not(.is-dashboard) .rounded-t-\[3px\],
body:not(.is-dashboard) .rounded-t-sm,
body:not(.is-dashboard) .rounded-t,
body:not(.is-dashboard) .rounded-t-md,
body:not(.is-dashboard) .rounded-t-lg {
    border-top-left-radius: var(--as-radius, 13px) !important;
    border-top-right-radius: var(--as-radius, 13px) !important;
}

body:not(.is-dashboard) .rounded-b-\[3px\],
body:not(.is-dashboard) .rounded-b-sm,
body:not(.is-dashboard) .rounded-b,
body:not(.is-dashboard) .rounded-b-md,
body:not(.is-dashboard) .rounded-b-lg {
    border-bottom-left-radius: var(--as-radius, 13px) !important;
    border-bottom-right-radius: var(--as-radius, 13px) !important;
}

body:not(.is-dashboard) .rounded-l-\[3px\],
body:not(.is-dashboard) .rounded-l-sm,
body:not(.is-dashboard) .rounded-l,
body:not(.is-dashboard) .rounded-l-md,
body:not(.is-dashboard) .rounded-l-lg {
    border-top-left-radius: var(--as-radius, 13px) !important;
    border-bottom-left-radius: var(--as-radius, 13px) !important;
}

body:not(.is-dashboard) .rounded-r-\[3px\],
body:not(.is-dashboard) .rounded-r-sm,
body:not(.is-dashboard) .rounded-r,
body:not(.is-dashboard) .rounded-r-md,
body:not(.is-dashboard) .rounded-r-lg {
    border-top-right-radius: var(--as-radius, 13px) !important;
    border-bottom-right-radius: var(--as-radius, 13px) !important;
}

/* Cards & Surface Containers across views */
body:not(.is-dashboard) .as-card,
body:not(.is-dashboard) .section-card,
body:not(.is-dashboard) main .bg-white.border:not(.rounded-full) {
    border-radius: var(--as-radius, 13px) !important;
}

/* Form Inputs, Selects & Textareas */
body:not(.is-dashboard) .pro-input,
body:not(.is-dashboard) input[type="text"].pro-input,
body:not(.is-dashboard) input[type="number"].pro-input,
body:not(.is-dashboard) input[type="email"].pro-input,
body:not(.is-dashboard) input[type="password"].pro-input,
body:not(.is-dashboard) input[type="date"].pro-input,
body:not(.is-dashboard) input[type="datetime-local"].pro-input,
body:not(.is-dashboard) input[type="search"].pro-input,
body:not(.is-dashboard) select.pro-input,
body:not(.is-dashboard) textarea.pro-input,
body:not(.is-dashboard) .select2-container .select2-selection--single,
body:not(.is-dashboard) .select2-dropdown {
    border-radius: var(--as-radius, 13px) !important;
}

/* Primary & Action Buttons */
body:not(.is-dashboard) .as-btn-primary,
body:not(.is-dashboard) .as-btn-secondary,
body:not(.is-dashboard) .btn-submit-order,
body:not(.is-dashboard) .btn-add-row,
body:not(.is-dashboard) .btn-delete-row,
body:not(.is-dashboard) main button:not(.rounded-full):not(#fab-main):not(#fab-menu button),
body:not(.is-dashboard) main a.inline-flex:not(.rounded-full) {
    border-radius: var(--as-radius, 13px) !important;
}

/* Badges & Pills (Non-circular) */
body:not(.is-dashboard) .as-badge:not(.rounded-full) {
    border-radius: var(--as-radius, 13px) !important;
}

/* Modals & Dialog Boxes */
body:not(.is-dashboard) .modal-box,
body:not(.is-dashboard) .modal-content,
body:not(.is-dashboard) .sl-modal .modal-box,
body:not(.is-dashboard) [x-modal] > div {
    border-radius: var(--as-radius, 13px) !important;
}

/* Tables & Overflow Wrappers */
body:not(.is-dashboard) main .overflow-hidden.border {
    border-radius: var(--as-radius, 13px) !important;
}

/* Strict Preservation: Circular Elements (Avatars, FABs, Status Dots) */
body:not(.is-dashboard) .rounded-full,
body:not(.is-dashboard) #fab-main,
body:not(.is-dashboard) #fab-menu button {
    border-radius: 9999px !important;
}

/* Strict Preservation: Sidebar Navigation Items */
body:not(.is-dashboard) nav a.rounded-md {
    border-radius: 0.375rem !important;
}

/* Dashboard Protection: Keep Dashboard completely intact with original 18px radii */
body.is-dashboard .dash-card,
body.is-dashboard .kpi-card {
    border-radius: 18px !important;
}