/* ==========================================================================
   Kusava UI Foundation
   Design tokens + global accessibility and interaction polish.
   Loaded LAST in the ~/bundles/css/master-top bundle so it can standardize
   styles introduced by the older Metronic (kt-*) and newer (CommonNew.css)
   design systems without editing either file.
   Presentation-layer only: no rule here may change business behavior.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Existing stylesheets hardcode these values; new/edited styles should use
   the variables so the palette stays consistent.
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --ks-primary: #1212D7;
    --ks-primary-hover: #0F0FB8;
    --ks-primary-soft: #E8F0FF;
    --ks-surface-tint: #EAF1FB;
    --ks-navy: #002e63;

    /* Status */
    --ks-success: #1E8E3E;
    --ks-warning: #B26A00;
    --ks-danger: #C5221F;
    --ks-info: #1867C0;

    /* Neutrals */
    --ks-text: #1F2430;
    --ks-text-muted: #5F6B7A;
    --ks-border: #E1E9F8;
    --ks-border-strong: #C6D2E9;
    --ks-bg: #F7F9FC;
    --ks-white: #FFFFFF;

    /* Elevation */
    --ks-shadow-sm: 0 1px 2px rgba(9, 23, 60, 0.06);
    --ks-shadow-md: 0 4px 12px rgba(9, 23, 60, 0.08);
    --ks-shadow-lg: 0 10px 30px rgba(9, 23, 60, 0.14);

    /* Shape */
    --ks-radius-sm: 4px;
    --ks-radius-md: 8px;
    --ks-radius-lg: 12px;
    --ks-radius-pill: 18px;

    /* Spacing scale */
    --ks-space-1: 4px;
    --ks-space-2: 8px;
    --ks-space-3: 12px;
    --ks-space-4: 16px;
    --ks-space-5: 24px;
    --ks-space-6: 32px;

    /* Motion */
    --ks-transition-fast: 120ms ease;
    --ks-transition: 200ms ease;

    /* Focus ring */
    --ks-focus-ring: 0 0 0 3px rgba(18, 18, 215, 0.25);
}

/* --------------------------------------------------------------------------
   2. Accessibility: visible keyboard focus
   The theme suppresses outlines almost everywhere; restore a clear,
   keyboard-only focus indicator without affecting mouse users.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ks-primary) !important;
    outline-offset: 2px;
    border-radius: var(--ks-radius-sm);
}

/* Inputs already show their own border treatment; a ring reads better */
.form-control:focus-visible {
    outline: none !important;
    border-color: var(--ks-primary) !important;
    box-shadow: var(--ks-focus-ring) !important;
}

/* One focus treatment on every page. Page stylesheets that load after the
   bundle (ClinetInvoice.css, login.css) define their own :focus colors;
   the doubled class out-ranks them so fields focus brand-blue everywhere. */
.form-control.form-control:focus {
    background: var(--ks-white) !important;
    border-color: var(--ks-primary) !important;
    box-shadow: var(--ks-focus-ring) !important;
    outline: 0;
}

/* --------------------------------------------------------------------------
   3. Reusable primitives
   -------------------------------------------------------------------------- */

/* Unstyled button: lets icon-only controls be real <button> elements
   (keyboard + screen-reader accessible) without visual change. */
.btn-reset {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;


}

/* Screen-reader-only text (for icon-only controls and table captions) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   4. Micro-interactions: consistent, subtle transitions
   -------------------------------------------------------------------------- */
.theme-btn,
.theme-btn-secondary,
.theme-outline-btn,
.close-btn,
.btn,
.head-tab,
.note-item,
.kt-menu__link,
.form-control {
    transition: background-color var(--ks-transition-fast),
                color var(--ks-transition-fast),
                border-color var(--ks-transition-fast),
                box-shadow var(--ks-transition-fast);
}

/* ngAnimate opt-out for every element this stylesheet gives a transition to.
   ngAnimate is registered on the app (js_Common.js), so it inspects an element's computed
   transition-duration when running structural ng-if / ng-repeat / ng-class changes. Any
   non-zero value makes it treat the change as a real animation and hold the leaving element
   in the DOM until it closes. On heavy pages that close is starved for seconds, so you see
   the old and new state at once: two buttons on the Vendor/Employee toggle, or the old and
   new invoice rows together after a status search.
   The transitions here are hover/focus polish, which never goes through ngAnimate, so
   zeroing them out only while .ng-animate is present keeps the polish and makes structural
   show/hide immediate. Deliberately scoped to our own selectors rather than a blanket
   .ng-animate rule, since ui.bootstrap drives its modal and backdrop fades through
   ngAnimate and would lose them.
   Keep this list in sync with the transition rules above. */
.theme-btn.ng-animate,
.theme-btn-secondary.ng-animate,
.theme-outline-btn.ng-animate,
.close-btn.ng-animate,
.btn.ng-animate,
.head-tab.ng-animate,
.note-item.ng-animate,
.kt-menu__link.ng-animate,
.form-control.ng-animate,
.dashboard-cards.ng-animate,
.theme-table tr.ng-animate {
    transition: none !important;
    animation: none !important;
}

.dashboard-cards {
    transition: box-shadow var(--ks-transition), transform var(--ks-transition);
}

/* Gentle press feedback on the primary button styles */
.theme-btn:active,
.theme-btn-secondary:active,
.btn-dark:active {
    transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   5. Table polish (applies to the shared .theme-table pattern)
   -------------------------------------------------------------------------- */
.theme-table tbody tr {
    transition: background-color var(--ks-transition-fast);
}

.theme-table tbody tr:hover {
    background-color: var(--ks-surface-tint);
}

/* --------------------------------------------------------------------------
   6. Responsive / touch ergonomics
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* WCAG 2.5.8: keep interactive targets comfortably tappable */
    .btn-reset,
    .head-tab,
    .kt-pagination .kt-pagination__links a {
        min-height: 40px;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Tables scroll inside their wrapper instead of breaking the page */
    .table-responsive,
    .theme-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   7. Visual consistency polish
   Small overrides that harmonize the shared components defined in
   CommonNew.css / common.css. This file loads after both, so equal-specificity
   rules here win; !important is used only where the original rule uses it.
   -------------------------------------------------------------------------- */

/* Buttons: gentle depth on the primary action so it reads as the main CTA */
.theme-btn {
    box-shadow: var(--ks-shadow-sm);
}

/* Buttons: every actionable style gets a visible hover state */
.theme-btn:hover {
    background: var(--ks-primary-hover) !important;
    box-shadow: var(--ks-shadow-md);
}

.theme-btn-secondary:hover {
    background: var(--ks-primary-soft) !important;
    border-color: #C6DBFC !important;
}

.theme-outline-btn:hover {
    background: var(--ks-primary-soft);
}

.close-btn:hover {
    background: #D43B3B;
}

/* Disabled controls should not invite clicks */
button.disable,
a.disable,
.theme-btn.disable,
.theme-btn-secondary.disable {
    cursor: not-allowed !important;
}

/* Cards: uniform corner radius (was 8px 10px) and a gentle lift on hover
   for the clickable dashboard filter cards */
.dashboard-cards {
    border-radius: var(--ks-radius-md);
}

/* Only clickable cards (.c-p = cursor pointer) advertise interactivity */
.dashboard-cards.c-p:hover {
    box-shadow: var(--ks-shadow-md);
    transform: translateY(-2px);
}

/* Tables: tinted header row so column titles stand apart from data,
   borders harmonized to the blue-gray palette and slimmed from 2px to 1px
   for a lighter, more modern grid */
.theme-table th {
    background: var(--ks-bg);
    border-color: var(--ks-border) !important;
    border-width: 1px !important;
}

.theme-table,
.theme-table td {
    border-width: 1px;
}

.theme-table .searchrow td {
    border-width: 1px;
}

/* Filter-row inputs: rounded corners to match the button/input language */
.theme-table .searchrow td div input,
.theme-table .searchrow td div select {
    border-radius: var(--ks-radius-sm);
}

/* Forms: placeholders read as hints, not values */
.form-control::placeholder {
    color: #97A3B8 !important;
    font-weight: 400 !important;
    opacity: 1;
}

/* Page headings: clearer hierarchy and border color consistent with the
   rest of the blue-gray divider palette (was #ddd) */
.heading-section {
    border-bottom-color: var(--ks-border-strong);
}

.heading-section h4 {
    font-weight: 600;
    color: var(--ks-text);
}

/* Filter tabs: clickable affordance plus a subtle hover for inactive tabs */
.head-tab {
    cursor: pointer;
}

.head-tab:not(.active):hover {
    background: var(--ks-bg);
    border-color: var(--ks-border-strong);
}

/* Modals: soften edges and use elevation instead of a hard border.
   padding: 0 guards against stray padding that would show as a white
   frame around full-bleed (colored) modal headers. */
.modal .modal-content {
    border: none;
    border-radius: var(--ks-radius-lg);
    box-shadow: var(--ks-shadow-lg);
    padding: 0;
}

/* Round the header/footer edges to match (overflow:hidden would clip
   dropdowns and datepickers opened inside modals, so round explicitly) */
.modal .modal-content > *:first-child,
.modal .modal-content .modal-header {
    border-top-left-radius: var(--ks-radius-lg);
    border-top-right-radius: var(--ks-radius-lg);
}

.modal .modal-content > *:last-child,
.modal .modal-content .modal-footer {
    border-bottom-left-radius: var(--ks-radius-lg);
    border-bottom-right-radius: var(--ks-radius-lg);
}

/* Header/footer hairlines match the app's blue-gray divider palette */
.modal .modal-content .modal-header {
    border-bottom-color: var(--ks-border);
}

.modal .modal-content .modal-footer {
    border-top-color: var(--ks-border);
}

/* Brand-colored headers (.theme-bg): Bootstrap's light border-bottom shows
   as a white line inside the blue bar; the color contrast already provides
   the separation */
.modal .modal-content .modal-header.theme-bg {
    border-bottom: 0;
}

/* Portlet-headed modals (e.g. the dashboard's Invoice Messages/Details
   popup renders a .kt-portlet as its header inside .modal-content).
   Strip the portlet's own card chrome (margin, border, shadow, 4px radius)
   so the blue bar sits flush with the modal edges, and give the bar the
   same corner radius as the modal so the corners look uniform. */
.modal .modal-content .kt-portlet:first-child,
.modal .modal-content > *:first-child > .kt-portlet:first-child {
    margin: 0;
    border: 0;
    box-shadow: none;
    border-radius: var(--ks-radius-lg) var(--ks-radius-lg) 0 0;
}

.modal .modal-content .kt-portlet:first-child > .kt-portlet__head,
.modal .modal-content > *:first-child > .kt-portlet:first-child > .kt-portlet__head {
    border-top-left-radius: var(--ks-radius-lg);
    border-top-right-radius: var(--ks-radius-lg);
    border-bottom: 0;
}

/* --------------------------------------------------------------------------
   8. Version 2 polish
   Larger, immediately visible refinements. Everything here is still
   presentation-only and preserves layout, navigation, and workflows.
   Load-order note: this file is last in the master-top bundle, so
   equal-specificity rules beat Metronic/common/CommonNew. Only
   KusavaStyleSheet.css loads later; rules that must beat it use !important.
   -------------------------------------------------------------------------- */

/* ---- 8.1 Typography ------------------------------------------------------
   The application's existing font is kept as-is (per request).
   Financial data aligns cleanly when digits share a fixed width: */
.theme-table td {
    font-variant-numeric: tabular-nums;
}

/* ---- 8.2 App shell: header, sidebar, content canvas --------------------- */

/* Header: crisp separation from the page instead of blending into it */
.kt-header {
    border-bottom: 1px solid var(--ks-border-strong);
}

.kt-aside {
    border-right: 1px solid var(--ks-border);
}

/* Sidebar navigation: rounded, inset menu items (Notion/Linear style) */
.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link {
    margin: 0 10px;
    border-radius: var(--ks-radius-md);
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item:hover > .kt-menu__link {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

/* Active item: today it is painted the same color as the sidebar itself,
   so the current page is invisible in the nav. Give it a clear white
   card with brand-colored text and icon. (!important beats the
   KusavaStyleSheet.css rule that loads after this file.) */
.kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--active > .kt-menu__link {
    background-color: var(--ks-white) !important;
    box-shadow: var(--ks-shadow-sm);
}

.kt-aside-menu .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text,
.kt-aside-menu .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-icon {
    color: var(--ks-primary) !important;
    font-weight: 600;
}

.kt-aside-menu .kt-menu__link-text {
    font-weight: 500;
}

/* Content canvas: a faint blue-gray so white tables/cards read as surfaces */
.kt-content {
    background-color: var(--ks-bg);
}

/* Sidebar action buttons keep their 85% width everywhere. Pages that load
   login.css late (Reports, Account, password pages) re-declare a generic
   .theme-btn { width: fit-content } that otherwise beats the .w-85 utility
   in the cascade and collapses these buttons to their content width. */
.kt-aside .theme-btn.sidebar {
    width: 85%;
}

/* ---- 8.3 Tables: modern data-grid header and empty state ---------------- */

/* Compact, uppercase column labels: quieter than the old 16px bold black,
   which competed with the data instead of framing it */
.theme-table th {
    font-size: 12px;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ks-text-muted) !important;
}

/* Checkbox column titles sit in span.lab inside label.custom-chk, and both carry their own
   font-size from CommonNew.css (22px on the label, 16px on the span), so neither inherits the
   header scale set above. Reset the whole chain, not just the span: inherit on the span alone
   would resolve to the label's 22px. The label's font-size is vestigial here, since .checkmark
   is sized in fixed px. Keeps a th with a checkbox (Invoice Method, Early Pymt Discount)
   matching its plain-text siblings. */
.theme-table th .table-chk.custom-chk,
.theme-table th .table-chk span.lab {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Soften the grid's outer corners */
.theme-table tr:first-child th:first-child {
    border-top-left-radius: var(--ks-radius-md);
}

.theme-table tr:first-child th:last-child {
    border-top-right-radius: var(--ks-radius-md);
}

.theme-table tr:last-child td:first-child {
    border-bottom-left-radius: var(--ks-radius-md);
}

.theme-table tr:last-child td:last-child {
    border-bottom-right-radius: var(--ks-radius-md);
}

/* Empty state: give "No records found" room to breathe so it reads as a
   deliberate state, not a broken row */
.theme-table td.text-center.text-muted {
    padding: 40px 16px !important;
    font-size: 13px;
    color: var(--ks-text-muted) !important;
}

/* ---- 8.4 Status badges: soft enterprise style ---------------------------
   Solid saturated chips become tinted backgrounds with strong text,
   the pattern used across Linear/Jira/M365. Unified/avatar variants
   (kt-badge--unified-*, --username) are intentionally untouched. */
.kt-badge.kt-badge--success {
    background: #E1F3E6;
    color: var(--ks-success);
}

.kt-badge.kt-badge--warning {
    background: #FCF0DC;
    color: var(--ks-warning);
}

.kt-badge.kt-badge--danger {
    background: #FBE4E4;
    color: var(--ks-danger);
}

.kt-badge.kt-badge--info {
    background: #E4EEFB;
    color: var(--ks-info);
}

.kt-badge.kt-badge--primary,
.kt-badge.kt-badge--brand {
    background: var(--ks-primary-soft);
    color: var(--ks-primary);
}

.kt-badge.kt-badge--dark {
    background: #EAEEF5;
    color: #3F4A5A;
}

.kt-badge.kt-badge--pill {
    font-weight: 600;
}

/* ---- 8.5 Forms: readable values, clear field states --------------------- */

/* White fields with dark text: the old pale-blue fill with #666 12px text
   made entered values look like placeholders.
   Selector is doubled on purpose: login.css (loaded late by Reports,
   Account, and password pages) re-declares .form-control with !important;
   the extra class beats it on specificity so fields stay consistent. */
.form-control.form-control {
    background: var(--ks-white) !important;
    color: var(--ks-text) !important;
    font-size: 13px !important;
    border-radius: 6px;
}

/* Read-only and disabled fields are now visibly non-editable */
.form-control[readonly],
.form-control:disabled {
    background: #F1F4F9 !important;
    color: var(--ks-text-muted) !important;
}

/* Field labels anchor the form's scanning rhythm */
.form-group label {
    font-weight: 500;
    color: #3F4A5A;
}

/* ---- 8.6 Page titles and cards ------------------------------------------ */
.heading-section {
    padding-bottom: 6px;
}

.heading-section h4 {
    font-size: 22px;
    letter-spacing: -0.01em;
}

/* Cards get a hairline border for definition on the tinted canvas */
.dashboard-cards {
    border: 1px solid rgba(9, 23, 60, 0.08);
}

/* Selected dashboard card: replace the old heavy treatment (3px border,
   dark halo shadow, scale jump) with a calm 1px brand border plus a soft
   blue ring; no size change, so surrounding cards don't shift */
.dashboard-cards.selected {
    border-width: 1px;
    border-color: var(--ks-primary);
    box-shadow: 0 0 0 3px rgba(18, 18, 215, 0.14), var(--ks-shadow-md);
    transform: none;
}

/* An already-selected card stays put on hover (no lift, ring kept) */
.dashboard-cards.selected.c-p:hover {
    box-shadow: 0 0 0 3px rgba(18, 18, 215, 0.14), var(--ks-shadow-md);
    transform: none;
}

.kt-portlet {
    border-radius: var(--ks-radius-md);
    border: 1px solid var(--ks-border);
}

/* ---- 8.7 Scrollbars: slim and unobtrusive ------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ks-border-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--ks-border-strong);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #A9B8D6;
}

/* ---- 8.8 Pagination controls -------------------------------------------- */
.row-select-pagination {
    background: var(--ks-white);
    border: 1px solid var(--ks-border-strong);
    border-radius: var(--ks-radius-sm);
}

/* --------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}