/* ---------------------------------------------------------------------------
 * YSalesOrder — UI component styles (matching yproject).
 *
 * Layout and spacing are Tailwind utility classes in the markup. This file only
 * holds the handful of things utilities express badly: scrollbars, print rules,
 * the sidebar transition and the loading shimmer.
 * ------------------------------------------------------------------------- */

:root {
    --hcm-sidebar-width: 16rem;
    --hcm-header-height: 3.5rem;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
}

/* --- Scrollbars ---------------------------------------------------------- */
.hcm-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.hcm-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.hcm-scroll::-webkit-scrollbar-track { background: transparent; }
.hcm-scroll::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 9999px; }
.hcm-scroll::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

/* --- Sidebar ------------------------------------------------------------- */
#hcm-sidebar { width: var(--hcm-sidebar-width); transition: transform .2s ease-in-out, width .15s ease-in-out; }

@media (max-width: 1023px) {
    #hcm-sidebar { transform: translateX(-100%); }
    #hcm-sidebar.is-open { transform: translateX(0); }
}

/* The main content column keeps clear of the sidebar by the same variable, so
   collapsing one collapses the other with nothing left to keep in sync. */
@media (min-width: 1024px) {
    .hcm-main { padding-left: calc(var(--hcm-sidebar-width) + 1rem); transition: padding-left .15s ease-in-out; }
}

/* Collapsed: icon rail only. Set on <body> by app.js, restored from
   localStorage before paint so there is no flash of the expanded width.
   Scoped to the desktop breakpoint — the toggle only exists there, but a
   window resized down after collapsing must not narrow the off-canvas
   mobile drawer too. */
@media (min-width: 1024px) {
    body.hcm-sidebar-collapsed { --hcm-sidebar-width: 4.5rem; }

    body.hcm-sidebar-collapsed #hcm-sidebar .hcm-nav-label,
    body.hcm-sidebar-collapsed #hcm-sidebar .hcm-nav-group-chevron {
        display: none;
    }

    /* The group heading collapses to a plain divider, not a button, once
       there is no label left for it to expand or collapse. */
    body.hcm-sidebar-collapsed #hcm-sidebar .hcm-nav-group-label { display: none; }
    body.hcm-sidebar-collapsed #hcm-sidebar .hcm-nav-group-toggle { pointer-events: none; }

    /* A group's own collapse choice stops mattering once there is no room
       to show a label distinguishing the groups anyway. */
    body.hcm-sidebar-collapsed #hcm-sidebar .hcm-nav-group-items { display: block !important; }

    body.hcm-sidebar-collapsed #hcm-sidebar nav a { justify-content: center; }
    body.hcm-sidebar-collapsed #hcm-sidebar-collapse-toggle { transform: rotate(180deg); }
}

/* --- Sidebar group collapse (independent of the whole-sidebar rail mode) - */
.hcm-nav-group-chevron { transform: rotate(0deg); }
.hcm-nav-group.is-collapsed .hcm-nav-group-items { display: none; }
.hcm-nav-group.is-collapsed .hcm-nav-group-chevron { transform: rotate(-90deg); }

/* --- Table row expand (Candidate POP list) -------------------------------- */
.hcm-row-expand-toggle i { transition: transform .15s ease-in-out; }
.hcm-row-expand-toggle[aria-expanded="true"] i { transform: rotate(90deg); }

/* --- Loading skeleton ---------------------------------------------------- */
.hcm-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: hcm-shimmer 1.4s ease infinite;
    border-radius: .375rem;
}

@keyframes hcm-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* --- Sortable table headers ---------------------------------------------- */
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: #0f172a; }
th[data-sort] .hcm-sort-icon { opacity: .25; }
th[data-sort].is-sorted .hcm-sort-icon { opacity: 1; }

/* --- Toasts -------------------------------------------------------------- */
#hcm-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 80; display: grid; gap: .5rem; }

.hcm-toast {
    animation: hcm-toast-in .18s ease-out;
    max-width: 24rem;
}

.hcm-toast.is-leaving { animation: hcm-toast-out .18s ease-in forwards; }

@keyframes hcm-toast-in  { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
@keyframes hcm-toast-out { to   { opacity: 0; transform: translateX(1rem); } }

/* --- Modals -------------------------------------------------------------- */
.hcm-modal-panel { animation: hcm-modal-in .15s ease-out; }

@keyframes hcm-modal-in { from { opacity: 0; transform: scale(.98) translateY(.5rem); } to { opacity: 1; transform: none; } }

body.hcm-modal-open { overflow: hidden; }

/* --- Field errors -------------------------------------------------------- */
.hcm-field-error { display: block; margin-top: .25rem; font-size: .75rem; color: #e11d48; }
.hcm-input.is-invalid { border-color: #fb7185; box-shadow: 0 0 0 1px #fb7185; }

/* --- Print (invoice, workorder, receipts) -------------------------------- */
@media print {
    .hcm-no-print, #hcm-sidebar, #hcm-topbar, #hcm-toasts { display: none !important; }
    .hcm-print-area { margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
    body { background: #fff !important; }
    main { padding: 0 !important; }
    @page { margin: 14mm; }
}