/* ============================================================
   SHREENANTHAM ERP — GLOBAL DESIGN SYSTEM
   Single source of truth for the entire solution.
   High-density, soft light-mode ERP aesthetic, flat design.
   ------------------------------------------------------------
   Color : warm off-white surfaces, charcoal text,
           deep cobalt blue + soft forest green accents.
   Type  : Inter.
   ============================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
    /* --- Surfaces --- */
    --ds-app-bg: #F5F6F8;          /* warm soft off-white app background */
    --ds-surface: #FFFFFF;         /* cards / pure white rows */
    --ds-surface-alt: #FAFBFC;     /* very soft off-white alternating rows */
    --ds-surface-muted: #F1F3F6;   /* read-only / disabled fills */
    --ds-head-bg: #F4F6F9;         /* section / card head fill */

    /* --- Text --- */
    --ds-text: #1E293B;            /* high-contrast charcoal */
    --ds-text-muted: #64748B;      /* slate */
    --ds-text-subtle: #94A3B8;
    --ds-text-invert: #FFFFFF;

    /* --- Borders & grid lines --- */
    --ds-border: #E2E8F0;          /* light slate border */
    --ds-border-strong: #CBD5E1;
    --ds-grid-line: #EDF0F4;       /* thin light-gray grid lines */

    /* --- Brand: deep cobalt blue --- */
    --ds-primary: #1D4ED8;
    --ds-primary-dark: #1E40AF;
    --ds-primary-hover: #1A43C0;
    --ds-primary-soft: #EFF4FF;    /* soft blue tint / focus fill */
    --ds-primary-softer: #DCE7FF;

    /* --- Royal blue (Save) --- */
    --ds-royal: #2563EB;
    --ds-royal-hover: #1D4ED8;

    /* --- Soft forest green (Confirm / success) --- */
    --ds-forest: #16A34A;
    --ds-forest-dark: #15803D;
    --ds-forest-hover: #15803D;
    --ds-forest-soft: #ECFDF5;

    /* --- Crimson (Delete / danger) --- */
    --ds-crimson: #DC2626;
    --ds-crimson-hover: #B91C1C;
    --ds-crimson-soft: #FEF2F2;

    /* --- Amber (Warning) --- */
    --ds-amber: #D97706;
    --ds-amber-soft: #FFFBEB;

    /* --- Slate (Print) & matte-gray (Cancel) --- */
    --ds-slate: #475569;
    --ds-slate-hover: #334155;
    --ds-cancel-bg: #E9ECF1;       /* matte light gray */
    --ds-cancel-bg-hover: #DCE0E7;
    --ds-cancel-text: #1E293B;     /* charcoal */

    /* --- Focus --- */
    --ds-focus-border: #2563EB;    /* soft blue focus border */
    --ds-focus-ring: rgba(37, 99, 235, 0.16);

    /* --- Table interaction --- */
    --ds-row-hover: #F3F6FA;
    --ds-row-selected: #D7F0EC;    /* soft pastel teal */
    --ds-row-selected-bar: #2BB7A3;

    /* --- Action icons --- */
    --ds-icon: #475569;            /* deep slate blue */
    --ds-icon-hover: #1E293B;
    --ds-icon-hover-bg: #EEF2F7;

    /* --- Radii --- */
    --ds-radius-sm: 4px;
    --ds-radius: 6px;              /* buttons: 6px slightly rounded */
    --ds-radius-md: 8px;
    --ds-radius-lg: 12px;
    --ds-radius-pill: 999px;

    /* --- Typography --- */
    --ds-font-sans: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --ds-font-num: 'Inter', 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

    /* --- Controls --- */
    --ds-control-height: 38px;
    --ds-control-height-sm: 32px;
}

/* ===== BASE / RESET ===== */
html, body {
    font-family: var(--ds-font-sans);
    color: var(--ds-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss01', 'cv05', 'cv11';
    letter-spacing: -0.011em;
}

body {
    background-color: var(--ds-app-bg);
}

/* Elegant, modern headings — slightly tighter tracking */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ds-font-sans);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tabular figures for all numeric/money cells (Inter aligns money columns cleanly) */
.ds-num,
.text-end,
td.text-end,
.po-cell-total,
.po-cell-readonly {
    font-family: var(--ds-font-num);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* ===== INPUTS & DROPDOWNS ===== */
.form-control,
.form-select {
    font-family: var(--ds-font-sans);
    color: var(--ds-text);
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-control::placeholder {
    color: var(--ds-text-subtle);
    opacity: 1;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--ds-border-strong);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ds-focus-border);
    box-shadow: 0 0 0 3px var(--ds-focus-ring);
    outline: none;
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: var(--ds-surface-muted);
    color: var(--ds-text-muted);
}

/* ===== STANDARD CONTROL HEIGHTS (uniform across the app) ===== */
.form-control,
.form-select,
.input-group > .form-control,
.input-group > .form-select,
.input-group-text {
    min-height: var(--ds-control-height);
    height: var(--ds-control-height);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    line-height: 1.4;
}

/* Multi-line controls keep auto height */
textarea.form-control {
    height: auto;
    min-height: calc(var(--ds-control-height) * 2);
}
.form-control[multiple],
select[multiple].form-select {
    height: auto;
}

/* Compact size variant */
.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select {
    min-height: var(--ds-control-height-sm);
    height: var(--ds-control-height-sm);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
textarea.form-control-sm { height: auto; }

/* Buttons share the same control height for aligned rows */
.btn {
    min-height: var(--ds-control-height);
}
.btn-sm {
    min-height: var(--ds-control-height-sm);
}

/* Custom dropdown chevron — clear gray downward arrow */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 14px 14px;
    padding-right: 2.1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-label {
    font-weight: 600;
    color: var(--ds-text-muted);
    margin-bottom: 0.3rem;
}

.form-label.required::after,
.form-label:has(+ .required)::after {
    content: " *";
    color: var(--ds-crimson);
    font-weight: 700;
}

/* ===== BUTTONS (flat, 6px radius, no shadow / no 3D) ===== */
.btn {
    --bs-btn-box-shadow: none;
    font-family: var(--ds-font-sans);
    font-weight: 600;
    border-radius: var(--ds-radius);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
    transform: none;
    box-shadow: none;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ds-focus-ring);
}

/* Save — solid royal blue */
.btn-primary,
.btn-save {
    background-color: var(--ds-royal);
    border-color: var(--ds-royal);
    color: var(--ds-text-invert);
}
.btn-primary:hover,
.btn-save:hover,
.btn-primary:focus,
.btn-save:focus,
.btn-primary:active,
.btn-save:active {
    background-color: var(--ds-royal-hover) !important;
    border-color: var(--ds-royal-hover) !important;
    color: var(--ds-text-invert) !important;
}

/* Confirm — solid forest green */
.btn-success,
.btn-confirm {
    background-color: var(--ds-forest);
    border-color: var(--ds-forest);
    color: var(--ds-text-invert);
}
.btn-success:hover,
.btn-confirm:hover,
.btn-success:focus,
.btn-confirm:focus,
.btn-success:active,
.btn-confirm:active {
    background-color: var(--ds-forest-hover) !important;
    border-color: var(--ds-forest-hover) !important;
    color: var(--ds-text-invert) !important;
}

/* Delete — solid crimson red */
.btn-danger,
.btn-delete {
    background-color: var(--ds-crimson);
    border-color: var(--ds-crimson);
    color: var(--ds-text-invert);
}
.btn-danger:hover,
.btn-delete:hover,
.btn-danger:focus,
.btn-delete:focus,
.btn-danger:active,
.btn-delete:active {
    background-color: var(--ds-crimson-hover) !important;
    border-color: var(--ds-crimson-hover) !important;
    color: var(--ds-text-invert) !important;
}

/* Cancel — matte light gray, charcoal text */
.btn-secondary,
.btn-cancel {
    background-color: var(--ds-cancel-bg);
    border-color: var(--ds-cancel-bg);
    color: var(--ds-cancel-text);
}
.btn-secondary:hover,
.btn-cancel:hover,
.btn-secondary:focus,
.btn-cancel:focus,
.btn-secondary:active,
.btn-cancel:active {
    background-color: var(--ds-cancel-bg-hover) !important;
    border-color: var(--ds-cancel-bg-hover) !important;
    color: var(--ds-cancel-text) !important;
}

/* Print — slate gray with white text */
.btn-print {
    background-color: var(--ds-slate);
    border-color: var(--ds-slate);
    color: var(--ds-text-invert);
}
.btn-print:hover,
.btn-print:focus,
.btn-print:active {
    background-color: var(--ds-slate-hover) !important;
    border-color: var(--ds-slate-hover) !important;
    color: var(--ds-text-invert) !important;
}

/* Outline variants aligned to cobalt */
.btn-outline-primary {
    border-color: var(--ds-primary);
    color: var(--ds-primary);
    background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
    color: var(--ds-text-invert) !important;
}

.btn-outline-secondary {
    border-color: var(--ds-border-strong);
    color: var(--ds-text-muted);
    background-color: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active {
    background-color: var(--ds-surface-muted) !important;
    border-color: var(--ds-border-strong) !important;
    color: var(--ds-text) !important;
}

/* ===== ACTION ICON BUTTONS (Edit / View / Delete) ===== */
/* Minimalist flat, 2px-stroke slate blue, subtle gray hover */
.icon-btn,
.btn-icon,
.action-icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: var(--ds-radius);
    background: transparent;
    color: var(--ds-icon);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.icon-btn:hover,
.btn-icon:hover,
.action-icon:hover {
    background-color: var(--ds-icon-hover-bg);
    color: var(--ds-icon-hover);
}

.icon-btn.icon-danger:hover,
.action-icon.icon-danger:hover {
    color: var(--ds-crimson);
    background-color: var(--ds-crimson-soft);
}

.icon-btn.icon-primary:hover,
.action-icon.icon-primary:hover {
    color: var(--ds-primary);
    background-color: var(--ds-primary-soft);
}

/* ===== GRID ROW ACTIONS — unify Edit / View / Delete across ALL grids ===== */
/* Pages historically mixed btn-warning (edit), btn-info (view), btn-danger
   (delete), some icon-only, some with text. Normalize them all into one
   minimalist flat-icon style with semantic hover for a consistent look. */
.table tbody td .btn-group {
    gap: 4px;
}

.table tbody td .btn.btn-sm,
.table tbody td .btn-group > .btn {
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-padding-y: 0.2rem;
    min-height: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius);
}

/* Edit / View / neutral actions ? flat slate icon */
.table tbody td .btn-sm.btn-warning,
.table tbody td .btn-sm.btn-info,
.table tbody td .btn-sm.btn-light,
.table tbody td .btn-sm.btn-secondary,
.table tbody td .btn-sm.btn-outline-secondary,
.table tbody td .btn-group > .btn-warning,
.table tbody td .btn-group > .btn-info,
.table tbody td .btn-group > .btn-secondary {
    background: transparent;
    border-color: transparent;
    color: var(--ds-icon);
}

.table tbody td .btn-sm.btn-warning:hover,
.table tbody td .btn-sm.btn-info:hover,
.table tbody td .btn-sm.btn-light:hover,
.table tbody td .btn-sm.btn-secondary:hover,
.table tbody td .btn-sm.btn-outline-secondary:hover,
.table tbody td .btn-group > .btn-warning:hover,
.table tbody td .btn-group > .btn-info:hover,
.table tbody td .btn-group > .btn-secondary:hover {
    background: var(--ds-primary-soft) !important;
    border-color: transparent !important;
    color: var(--ds-primary) !important;
}

/* Delete ? flat, turns crimson on hover */
.table tbody td .btn-sm.btn-danger,
.table tbody td .btn-sm.btn-outline-danger,
.table tbody td .btn-group > .btn-danger {
    background: transparent;
    border-color: transparent;
    color: var(--ds-icon);
}

.table tbody td .btn-sm.btn-danger:hover,
.table tbody td .btn-sm.btn-outline-danger:hover,
.table tbody td .btn-group > .btn-danger:hover {
    background: var(--ds-crimson-soft) !important;
    border-color: transparent !important;
    color: var(--ds-crimson) !important;
}

/* Primary row action (e.g. open / pay) stays solid but compact */
.table tbody td .btn-sm.btn-primary,
.table tbody td .btn-sm.btn-success {
    color: var(--ds-text-invert);
}

/* ===== TABLES — high-density spreadsheet grid ===== */
.table {
    --bs-table-cell-padding-y: 0.35rem;
    --bs-table-cell-padding-x: 0.6rem;
    color: var(--ds-text);
    border-color: var(--ds-grid-line);
}

.table thead th {
    background: var(--ds-primary-dark);
    color: var(--ds-text-invert);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-color: var(--ds-primary);
    vertical-align: middle;
    padding: 0.45rem 0.6rem;
}

.table tbody td {
    border-color: var(--ds-grid-line);
    vertical-align: middle;
    padding: 0.35rem 0.6rem;
}

/* Even denser variant */
.table-sm > :not(caption) > * > * {
    padding: 0.22rem 0.5rem;
}

/* Alternating rows: pure white + very soft off-white */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--ds-surface-alt);
    --bs-table-bg-type: var(--ds-surface-alt);
}
.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--ds-surface);
    --bs-table-bg-type: var(--ds-surface);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--ds-row-hover);
    --bs-table-bg-state: var(--ds-row-hover);
}

/* Selected row — soft pastel teal with accent bar */
.table tbody tr.selected > *,
.table tbody tr.row-selected > *,
.table tbody tr.is-selected > * {
    background-color: var(--ds-row-selected) !important;
    --bs-table-bg-state: var(--ds-row-selected);
}
.table tbody tr.selected > td:first-child,
.table tbody tr.row-selected > td:first-child,
.table tbody tr.is-selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--ds-row-selected-bar);
}

/* ===== BADGES ===== */
.badge.bg-primary { background-color: var(--ds-primary) !important; }
.badge.bg-success { background-color: var(--ds-forest) !important; }
.badge.bg-danger  { background-color: var(--ds-crimson) !important; }
.badge.bg-secondary { background-color: var(--ds-slate) !important; }

/* ===== LINKS ===== */
a, .btn-link {
    color: var(--ds-primary);
}
.sidebar-container a {
    color: inherit !important;
}

/* ===== UTILITY ===== */
.text-primary { color: var(--ds-primary) !important; }
.bg-app { background-color: var(--ds-app-bg) !important; }
.surface { background-color: var(--ds-surface); }