/* Custom styles for Provim3 */

/* Make native controls (date/month pickers, spinners, scrollbars) follow the app
   theme instead of the OS setting — otherwise the date picker renders dark on light.
   The element-level rules pin the native picker popup to the input's own scheme. */
[data-theme=light], [data-theme=provim]     { color-scheme: light; }
[data-theme=dark],  [data-theme=provimdark] { color-scheme: dark; }
[data-theme=light] input[type="date"],
[data-theme=light] input[type="month"],
[data-theme=light] input[type="time"],
[data-theme=light] input[type="datetime-local"],
[data-theme=provim] input[type="date"],
[data-theme=provim] input[type="month"],
[data-theme=provim] input[type="time"],
[data-theme=provim] input[type="datetime-local"] { color-scheme: light; }
[data-theme=dark] input[type="date"],
[data-theme=dark] input[type="month"],
[data-theme=dark] input[type="time"],
[data-theme=dark] input[type="datetime-local"],
[data-theme=provimdark] input[type="date"],
[data-theme=provimdark] input[type="month"],
[data-theme=provimdark] input[type="time"],
[data-theme=provimdark] input[type="datetime-local"] { color-scheme: dark; }

/* Sidebar-active background — brand navy. `--brand-blue` is the single source of
   truth for the sidebar rules below; daisyUI's --p is set in the theme blocks. */
[data-theme=provim]     { --brand-blue: #00295A; }
[data-theme=provimdark] { --brand-blue: #3c5c8f; }

.alert-error {
    background-color: rgb(255, 125, 26) !important; /* Force blue background for error alerts */
    color: white !important; /* Also force white text for better contrast */
}

/* Sidebar (portal section tree). Width animates between full and the icon rail. */
.drawer-side .sidebar-nav { transition: width 0.2s ease-in-out; }

/* The header spans the full page width above the sidebar+content row. On desktop
   the sticky drawer sidebar starts just below the 4rem header (daisyUI otherwise
   pins it to the viewport top, where the header would cover its first items). */
@media (min-width: 1024px) {
    .app-shell .drawer-side { top: 4rem; height: calc(100vh - 4rem); }
}

/* <details> Admin group: drop the native disclosure marker; flip the chevron. */
.sidebar-nav details.nav-admin > summary { list-style: none; }
.sidebar-nav details.nav-admin > summary::-webkit-details-marker { display: none; }
.sidebar-nav details.nav-admin[open] .nav-admin-chevron { transform: rotate(180deg); }

/* Desktop collapsed rail: icon-only; labels, section titles and sub-trees hide. */
@media (min-width: 1024px) {
    .sidebar-collapsed .drawer-side .sidebar-nav { width: 4rem; }
    .sidebar-collapsed .drawer-side .nav-label,
    .sidebar-collapsed .drawer-side .nav-section-title,
    .sidebar-collapsed .drawer-side .nav-group-body,
    .sidebar-collapsed .drawer-side .nav-portal-label {
        display: none;
    }
    .sidebar-collapsed .drawer-side .nav-item {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .sidebar-collapsed .drawer-side details.nav-admin > summary {
        justify-content: center;
    }
}

/* One-line text that stays put and, on hover, slides horizontally to reveal
   the clipped remainder (used in the menu-strip name chips). The slide offset
   is measured and applied by the global hover-scroll handler in base.html. */
.hover-scroll {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}
.hover-scroll > span {
    display: inline-block;
    white-space: nowrap;
    transition: transform 1.5s ease-in-out;
    will-change: transform;
}

/* Data-table cells: never wrap. Long values are clipped with an ellipsis and
   slide into view on hover (global handler in base.html scrolls the cell). */
.overflow-x-auto > .table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18rem;
}

/* Action-button cells must never be clipped by the ellipsis rule above. */
.overflow-x-auto > .table td.cell-actions {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

/* DaisyUI sets badge line-height equal to the badge height, which makes the
   line box taller than the bordered content area and pushes the text below
   center. Collapse it so the flexbox centering (align/justify) does the work. */
.badge {
    line-height: 1;
}

/* DaisyUI's primary purple is too dark to read as text on the dark theme's
   background; lighten it there (admin list name-links, sidebar brand). The
   dashboard cards pair primary with primary-content, so they need no help. */
[data-theme="provimdark"] .link-primary,
[data-theme="provimdark"] .text-primary {
    color: #9db8e6;
}
[data-theme="provimdark"] .link-primary:hover {
    color: #bcd0f0;
}

/* DaisyUI's success/error/info badge colors are too saturated for dark badge
   text; lighten them to match the warning (yellow) badge's contrast. */
.badge-success {
    background-color: #86efac;
    border-color: #86efac;
    color: #052e16;
}
.badge-error {
    background-color: #fca5a5;
    border-color: #fca5a5;
    color: #450a0a;
}
.badge-info {
    background-color: #93c5fd;
    border-color: #93c5fd;
    color: #172554;
}

/* ── Record detail: shared "light" styling reused across all entities ──────
   View mode renders the reused form inputs as borderless bold values (so an
   overview reads like a document without per-field rewrites); edit mode keeps
   the Save/Cancel bar in view while the form scrolls. */
.detail-view input,
.detail-view select,
.detail-view textarea {
    border-color: transparent !important;
    background-color: transparent !important;
    padding-left: 0.25rem !important;
    height: auto !important;
    min-height: 0 !important;
    font-weight: 600;
}
/* Distinguish label from value: labels read small and muted, values semibold. */
.detail-view .label-text {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.6;
}
/* Reused overviews group all sections inside one card with <h4> headers. Split
   them into separated panels (like the Clients detail): drop the single outer
   card, turn each section into its own card, and align the header to the eyebrow
   style. `.space-y-3` is the section wrapper in these overviews. */
.detail-view > div {
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
.detail-view .space-y-3 {
    background-color: oklch(var(--b1));
    border: 1px solid oklch(var(--b3));
    border-radius: var(--rounded-box, 0.75rem);
    padding: 1.25rem;
}
.detail-view .space-y-3 > h4 {
    border-bottom: 0;
    padding-bottom: 0;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.4;
}
.detail-actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    background-color: oklch(var(--b1));
    border-top: 1px solid oklch(var(--b3));
}

/* Contactperson-picker selected chip: keep the "name — relation" label on a
   single line with an ellipsis instead of wrapping the picker to two lines. */
.cp-picker-chip {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Provim brand theme (designer redesign)
   Two DaisyUI themes carrying the brand colours — navy #00295A primary,
   orange #EF7D05 accent — in OKLCH. Currently scoped to the login screen via
   `data-theme` on its wrapper; full-app adoption comes with the header rework.
   ========================================================================== */
[data-theme="provim"] {
    color-scheme: light;
    --p: 28.6% 0.098 256; --pc: 100% 0 0;
    --s: 38% 0.06 256; --sc: 100% 0 0;
    --a: 70.5% 0.173 55; --ac: 24% 0.05 55;
    --n: 26% 0.02 256; --nc: 98% 0 0;
    --b1: 100% 0 0; --b2: 97.4% 0.004 256; --b3: 92.8% 0.007 256; --bc: 24% 0.02 256;
    --in: 55% 0.09 240; --inc: 100% 0 0;
    --su: 62% 0.13 155; --suc: 100% 0 0;
    --wa: 78% 0.15 80; --wac: 24% 0.05 80;
    --er: 58% 0.19 27; --erc: 100% 0 0;
    --rounded-box: 0.75rem; --rounded-btn: 0.5rem; --rounded-badge: 0.375rem;
    --border-btn: 1px; --tab-radius: 0.5rem; --animation-btn: 0.2s;
}
[data-theme="provimdark"] {
    color-scheme: dark;
    --p: 66% 0.11 256; --pc: 16% 0.03 256;
    --s: 60% 0.06 256; --sc: 16% 0.03 256;
    --a: 70.5% 0.173 55; --ac: 20% 0.05 55;
    --n: 30% 0.02 256; --nc: 96% 0 0;
    --b1: 21% 0.019 256; --b2: 17.5% 0.019 256; --b3: 27% 0.02 256; --bc: 92% 0.008 256;
    --in: 62% 0.09 240; --inc: 14% 0.02 240;
    --su: 66% 0.13 155; --suc: 14% 0.03 155;
    --wa: 78% 0.15 80; --wac: 20% 0.05 80;
    --er: 62% 0.19 27; --erc: 14% 0.03 27;
    --rounded-box: 0.75rem; --rounded-btn: 0.5rem; --rounded-badge: 0.375rem;
    --border-btn: 1px; --tab-radius: 0.5rem; --animation-btn: 0.2s;
}

/* Noto Sans for the brand theme (loaded in base.html). Scoped to the brand
   themes so it only applies where the redesign is live (login for now). */
[data-theme="provim"],
[data-theme="provimdark"] {
    font-family: 'Noto Sans', system-ui, sans-serif;
}

/* Dark-mode wordmark: invert the navy logo so it stays legible on dark surfaces.
   (Placeholder asset has no transparency, so colours shift — final logo TBD.) */
[data-theme="provimdark"] img[alt="Provim 3"] { filter: invert(1); }

/* ---- Login split-screen ---- */
/* Navy gradient wash over the photo panel. */
.login-photo-overlay {
    background: linear-gradient(200deg, hsl(var(--p) / 0.25), hsl(var(--p) / 0.85));
}
/* Fixed logo footprint + optical left-align nudge (matches designer spec). */
.login-logo {
    width: 266px;
    height: 71px;
    margin-left: -19px;
}