// ---------------------------------------------------------------
// Carpet ERP design system
//   1. Sass variables recolour Bootstrap (buttons, alerts, badges…)
//   2. CSS variables (partials/_tokens) drive our own components
//      and swap automatically for dark mode.
// ---------------------------------------------------------------

// ---- 1. Bootstrap theme variables ------------------------------
$primary: #4f46e5;       // indigo
$secondary: #64748b;     // slate
$success: #059669;       // emerald
$info: #0284c7;          // sky
$warning: #f59e0b;       // saffron
$danger: #e11d48;        // rose
$light: #f1f5f9;
$dark: #0f172a;

$font-family-sans-serif: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$font-size-base: 0.875rem;
$line-height-base: 1.5;
$headings-font-weight: 650;
$headings-color: inherit;
$font-weight-semibold: 600;

$body-bg: #f5f6fa;
$body-color: #1e293b;
$body-secondary-color: #64748b;
$body-bg-dark: #0b1120;
$body-color-dark: #e2e8f0;
$body-secondary-color-dark: #94a3b8;
$body-tertiary-bg-dark: #111a2e;
$border-color: #e5e7ef;
$border-color-dark: #1f2a44;

$link-decoration: none;
$link-hover-decoration: underline;
$link-shade-percentage: 15%;

$border-radius: 0.6rem;
$border-radius-sm: 0.45rem;
$border-radius-lg: 0.85rem;
$border-radius-xl: 1.1rem;

$btn-font-weight: 550;
$btn-padding-y: 0.45rem;
$btn-padding-x: 0.95rem;
$btn-padding-y-sm: 0.3rem;
$btn-padding-x-sm: 0.7rem;
$btn-focus-width: 0.2rem;

$input-padding-y: 0.5rem;
$input-padding-x: 0.75rem;
$input-border-color: #d5d9e6;
$input-focus-border-color: #818cf8;
$input-focus-box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.16);
$input-placeholder-color: #94a3b8;
$form-label-font-weight: 550;
$form-label-margin-bottom: 0.3rem;
$form-feedback-font-size: 0.8rem;

$card-border-radius: 0.9rem;
$card-cap-bg: transparent;
$card-cap-padding-y: 0.9rem;
$card-spacer-y: 1.1rem;
$card-spacer-x: 1.25rem;

$table-cell-padding-y: 0.7rem;
$table-cell-padding-x: 0.9rem;
$table-cell-padding-y-sm: 0.4rem;
$table-hover-bg-factor: 0.04;
$table-striped-bg-factor: 0.02;

$badge-font-weight: 600;
$badge-padding-y: 0.35em;
$badge-padding-x: 0.65em;
$badge-border-radius: 0.5rem;

$dropdown-border-radius: 0.75rem;
$dropdown-padding-y: 0.4rem;
$dropdown-item-padding-y: 0.45rem;
$dropdown-item-padding-x: 0.9rem;
$dropdown-box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
$modal-content-border-radius: 1rem;
$modal-backdrop-opacity: 0.55;
$toast-border-radius: 0.8rem;
$alert-border-radius: 0.75rem;
$pagination-border-radius: 0.5rem;
$breadcrumb-divider: quote('›');

$enable-dark-mode: true;
$enable-negative-margins: true;
$enable-shadows: false;
$enable-rfs: false;

@import 'bootstrap/scss/bootstrap';

// ---- 2. App partials -------------------------------------------
@import 'partials/tokens';
@import 'partials/layout';
@import 'partials/components';
@import 'partials/tables';
@import 'partials/forms';
@import 'partials/dashboard';
@import 'partials/motion';
@import 'partials/mobile';
@import 'partials/print';

// --- Loader bar, background saves and live checks ---------------------------------------------------------------
#top-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity .25s;
    span { display: block; height: 100%; width: 100%; background: var(--app-primary, #4f46e5); transform: scaleX(0); transform-origin: left; transition: transform .25s ease-out; box-shadow: 0 0 8px var(--app-primary, #4f46e5); }
    &.is-active { opacity: 1; }
    &.is-done { opacity: 0; }
}
.app-content.is-fetching { opacity: .55; pointer-events: none; transition: opacity .15s; }
.field .live-hint { font-size: .78rem; color: var(--app-muted, #6b7280); margin-top: .25rem; display: flex; align-items: center; gap: .35rem; }
.field .live-hint .spinner-border { width: .8rem; height: .8rem; border-width: .15em; }
.field .live-ok { color: var(--bs-success, #198754); font-size: .78rem; margin-top: .25rem; }
@media (prefers-reduced-motion: reduce) { #top-progress span { transition: none; } }

// --- Show / hide password ---------------------------------------------------------------------------------------
.password-wrap {
    position: relative;
    .form-control, .form-control.is-invalid { padding-right: 2.6rem; }
    .password-toggle {
        position: absolute; top: 0; right: 0; height: 100%; width: 2.6rem; display: flex; align-items: center; justify-content: center;
        background: none; border: 0; color: var(--app-muted, #6b7280); cursor: pointer; border-radius: 0 .5rem .5rem 0;
        &:hover, &:focus-visible { color: var(--app-heading, #111827); }
    }
}