/*
 * TUDI brand theme for ERPNext / Frappe.
 * Source of truth: the LIVE tudi-ui-a21 app (login page, PWA chrome, install
 * button) — maroon #74131B, not BRAND.md's cyan claim (confirmed stale by
 * the user). Montserrat typeface, TUDI logo.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root, [data-theme="light"], [data-theme="dark"] {
    /* Core semantic tokens that drive buttons, links, icons, brand accents */
    --primary: #74131B;
    --primary-color: #74131B;
    --brand-color: #74131B;
    --btn-primary: #74131B;
    --border-primary: #74131B;
    --dt-primary-color: #74131B;

    /* Frappe's blue-* numbered scale -> TUDI maroon equivalent, anchored on
       the two real tudi-ui-a21 tones (tint #f7e9ea, pressed #881720) */
    --blue-50: #f7e9ea;
    --blue-100: #efd3d5;
    --blue-200: #dfa7ab;
    --blue-300: #cf7b81;
    --blue-400: #a44249;
    --blue-500: #74131B;
    --blue-600: #881720;
    --blue-700: #6b1017;
    --blue-800: #4d0c11;
    --blue-900: #33080b;
    --blue: #74131B;

    --ink-blue-1: #f7e9ea;
    --ink-blue-2: #74131B;
    --ink-blue-3: #881720;
    --ink-blue-link: #881720;

    --surface-blue-1: #f7e9ea;
    --surface-blue-2: #efd3d5;
    --surface-blue-3: #881720;
    --surface-cyan-1: #f7e9ea;

    --outline-blue-1: #dfa7ab;

    --bg-blue: var(--blue-100);
    --bg-dark-blue: var(--blue-800);
    --bg-light-blue: var(--blue-50);
    --blue-avatar-bg: var(--blue-100);
    --blue-avatar-color: var(--blue-700);

    /* TUDI accent + semantic palette (matching the live tudi-ui-a21 defaults) */
    --tudi-primary-press: #881720;
    --tudi-primary-tint: #f7e9ea;
    --tudi-accent: #E54C59;
    --tudi-success: #15d667;
    --tudi-success-deep: #0e9c4a;
    --tudi-warning: #e16216;
    --tudi-warning-deep: #b34a0d;
    --tudi-ink: #3C4858;
    --tudi-gray: #999999;
}

/* Canonical UI typeface (see BRAND.md) */
body, .frappe-control, .navbar, .btn, input, select, textarea,
.modal, .page-head, .form-control, .list-row, .desk-sidebar {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Safety-net class overrides so the brand color reaches Bootstrap-era
   components even where they don't consume the CSS variables above */
.btn-primary, .btn-primary:not(:disabled):not(.disabled) {
    background-color: #74131B !important;
    border-color: #74131B !important;
    color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #881720 !important;
    border-color: #881720 !important;
}
a, .navbar a, .breadcrumb a {
    color: #881720;
}
a:hover {
    color: #74131B;
}
/* The blanket `a { color }` rule above is too broad — it also colors
   plain navigational chrome that isn't a "link" in any meaningful
   sense: the workspace-switcher title ("Organization" in the sidebar
   header), the "Getting Started" sidebar item, and the user avatar's
   name text. Confirmed live these were all rendering at #881720 via
   this rule (the title/name are DIVs/SPANs inheriting it from an
   anchor ancestor). User feedback: plain black reads better here than
   any brand-accent color — these are labels, not content links. */
.sidebar-item-label.header-title,
.onboarding-sidebar,
.avatar-name-email {
    color: #000 !important;
}
/* Frappe's indicator-pill text color (.blue variant's dark text, e.g.
   rgb(107,16,23) — matches our own --blue-700 token) assumes a LIGHT
   background. Forcing the background to the dark maroon fill above
   without also fixing the text left dark-on-dark text that's nearly
   invisible (confirmed live: pill bg #74131B, text #6b1017 — almost
   the same color). White text restores the contrast. */
.indicator.blue, .indicator-pill.blue {
    background-color: #74131B !important;
    color: #fff !important;
}
.form-control:focus, .frappe-control:focus-within {
    border-color: #74131B !important;
    box-shadow: 0 0 0 2px rgba(116, 19, 27, .25) !important;
}

/* Logo swap (see hooks.py -> app_include_css / web_include_css; the actual
   src replacement happens via Website Settings / Navbar Settings app_logo,
   this just constrains the box so the TUDI wordmark logo doesn't look
   squeezed like the square ERPNext mark it replaces) */
.app-logo, .navbar-brand img, .app-logo-container img, .navbar-home img {
    max-height: 32px;
    width: auto;
    object-fit: contain;
}
#page-login .app-logo, .for-login .app-logo {
    max-height: 56px;
}

/* Hide "Powered by ERPNext" (see Website Settings.footer_powered, which we
   also blank server-side — this is belt-and-suspenders for any cached
   render that still has the old text) */
.footer-powered {
    display: none !important;
}

/* ============================================================
   ITERATION 1 — foundational polish (elevation, focus, contrast,
   motion). Login-page selectors verified against the live rendered
   HTML (.page-card, .form-signin, .btn-login, etc.), not guessed. */

/* Card elevation — replace the flat white-on-gray card with a soft,
   enterprise-appropriate shadow instead of a hard border. */
.page-card {
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 15, 15, .06), 0 8px 24px -8px rgba(116, 19, 27, .12);
    border: 1px solid #F0E9E9;
}
.page-card-head {
    border-bottom: 1px solid #F0E9E9;
}

/* Smooth, consistent motion on every interactive element (150-250ms,
   per the UX guideline — never instant, never sluggish). */
.btn, a, .form-control, .frappe-control, .indicator-pill, .sidebar-item {
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, box-shadow .18s ease, transform .1s ease;
}
.btn:active {
    transform: translateY(1px);
}

/* Contrast fix — Frappe's default text-muted (#8d99a6-ish) sits under
   the 4.5:1 minimum on white; darken it without changing the palette. */
.text-muted, .text-extra-muted {
    color: #5b6773 !important;
}

/* Consistent border-radius scale across inputs, buttons, cards (8px
   base, matching the tudi-ui-a21 --radius token family). */
.form-control, .btn, .page-card, .modal-content, .frappe-card {
    border-radius: 8px;
}
.btn-login, .btn-login-with-email-link {
    border-radius: 8px;
    font-weight: 600;
}

/* Focus-visible ring in brand color for keyboard navigation — applies
   beyond .form-control to links/buttons that Frappe doesn't already
   ring on focus. */
a:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid #74131B;
    outline-offset: 2px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .btn, a, .form-control, .frappe-control, .indicator-pill, .sidebar-item {
        transition: none !important;
    }
}

/* ============================================================
   ITERATION 2 — micro-interactions & brand consistency. Selectors
   verified against the live Desk DOM (.body-sidebar*, .desktop-navbar,
   workspace module tiles), not guessed. */

/* Navbar — subtle bottom border to separate it from content instead
   of floating with no boundary. */
.desktop-navbar, .navbar-container {
    border-bottom: 1px solid #F0E9E9;
}

/* Sidebar nav items — brand-tinted hover/active instead of Frappe's
   flat gray, so the sidebar reads as "on-brand" not just recolored. */
.body-sidebar .sidebar-item-container:hover,
.body-sidebar .sidebar-item-container.selected {
    background-color: #f7e9ea;
    border-radius: 6px;
}
.body-sidebar .sidebar-item-container.selected .sidebar-item-icon svg,
.body-sidebar .sidebar-item-container.selected .sidebar-item-label {
    color: #74131B;
}

/* Workspace/module tiles on the Desktop grid — lift-on-hover instead
   of static, so the home screen feels responsive to the cursor.
   (.desktop-icon confirmed against the live DOM via elementFromPoint;
   the earlier .desktop-icon-box guess didn't match anything real.) */
.widget.onboarding-widget, .shortcut-widget-box, .desktop-icon {
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
.widget.onboarding-widget:hover, .shortcut-widget-box:hover, .desktop-icon:hover .icon-container {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -6px rgba(116, 19, 27, .22);
}

/* Text selection in brand color, not the browser's default blue —
   small detail, but it's the kind of thing that breaks brand
   immersion when missed. */
::selection {
    background-color: #f7e9ea;
    color: #74131B;
}

/* Thin, brand-tinted scrollbar (Webkit) instead of the default gray
   bar — most enterprise apps at this polish level do this. */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background-color: #dfa7ab;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #a44249;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* Loading spinner / progress bar in brand color where Frappe exposes
   a themeable variable for it. */
.progress-bar, .spinner-border {
    color: #74131B !important;
    border-color: #74131B !important;
}

/* ============================================================
   ITERATION 3 — enterprise depth & typography hierarchy. Scoped to
   body[data-path="login"] (verified against the live login page HTML)
   so this never leaks into the Desk app. */

/* Login page backdrop — a soft brand-tinted gradient instead of flat
   gray, so the card has depth to sit on rather than floating on a
   blank field. Subtle by design (Trust & Authority pattern favors
   restraint over decoration for enterprise/finance-adjacent contexts). */
body[data-path="login"] {
    background: linear-gradient(180deg, #fbf6f6 0%, #f5eeee 45%, #f0e6e6 100%);
    min-height: 100vh;
}

/* Typography hierarchy — the login title reads as the same weight as
   body copy today; give it clear visual priority. */
body[data-path="login"] h1, body[data-path="login"] h2, body[data-path="login"] h3,
body[data-path="login"] h4 {
    font-weight: 700;
    color: #3C4858;
    letter-spacing: -0.01em;
}
body[data-path="login"] .page-card-head h4,
body[data-path="login"] .page-card-head h3 {
    font-size: 20px;
}

/* Input polish — slightly larger touch target (44px min per the
   touch-target guideline) and a calmer resting border than Bootstrap's
   default gray-on-gray. */
body[data-path="login"] .form-control {
    min-height: 44px;
    border-color: #e2d5d5;
}
body[data-path="login"] .form-control::placeholder {
    color: #8b95a1;
}

/* Secondary action buttons ("Login with Email Link") — currently
   visually competes with the primary button at equal weight; step it
   back so the hierarchy (primary action > secondary > tertiary link)
   is unambiguous at a glance. */
body[data-path="login"] .btn-login-with-email-link,
body[data-path="login"] .btn-login-option {
    background-color: transparent;
    border: 1px solid #e2d5d5;
    color: #3C4858;
}
body[data-path="login"] .btn-login-with-email-link:hover,
body[data-path="login"] .btn-login-option:hover {
    background-color: #f7e9ea;
    border-color: #dfa7ab;
}

/* Divider ("or") — de-emphasize further, it's pure visual noise
   between two button groups, not a label needing attention. */
body[data-path="login"] .login-divider {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================
   ITERATION 4 — split-panel login. Structure is built by tudi_erp.js
   (which relocates Frappe's existing, fully-functional login markup —
   this CSS only styles the new wrapper divs, it does not touch anything
   inside .page_content's original content). Design validated first in
   Claude Design (project 1e25bc9f-9821-45af-bdd5-e31913c4e13c), matches
   the split-panel pattern tudi-ui-a21 already uses for its own login. */

body[data-path="login"] {
    background: none; /* the split shell now owns the full-viewport background */
}
#page-login { min-height: 100vh; }
#page-login .page-content-wrapper { padding: 0; max-width: none; }
#page-login .page-breadcrumbs,
#page-login .page-header-wrapper { display: none; } /* no breadcrumbs/header on a login screen */
#page-login main.container { max-width: none; padding: 0; margin: 0; }
#page-login .page_content { padding: 0; }

.tudi-split-shell {
    display: grid;
    grid-template-columns: 42% 58%;
    min-height: 100vh;
}

.tudi-brand-panel {
    position: relative;
    overflow: hidden;
    background: #74131B;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
}
.tudi-motif { position: absolute; right: -90px; bottom: -90px; width: 340px; height: 340px; opacity: .5; }
.tudi-pane { position: absolute; width: 160px; height: 160px; border-radius: 28px; }
.tudi-pane.p1 { left: 0;   top: 0;   background: #881720; }
.tudi-pane.p2 { left: 180px; top: 0;   background: rgba(255,255,255,.16); }
.tudi-pane.p3 { left: 0;   top: 180px; background: rgba(255,255,255,.16); }
.tudi-pane.p4 { left: 180px; top: 180px; background: #881720; }
.tudi-brand-mark { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; z-index: 1; position: relative; }
.tudi-mark { width: 30px; height: 30px; border-radius: 7px; background: #fff; opacity: .95; }
.tudi-brand-copy { z-index: 1; position: relative; color: #fff; max-width: 360px; }
.tudi-brand-copy h1 {
    font-size: 28px; font-weight: 700; line-height: 1.25; margin: 0 0 12px; letter-spacing: -0.01em;
    color: #fff !important; /* explicit: the iteration-3 body[data-path="login"] h1 rule (correctly
      still needed for the form-panel's own "Login to TUDI ERP" h4) explicitly sets #3C4858 on every
      h1-h4 on this page, which wins over this element's inherited white regardless of specificity —
      inheritance always loses to any explicit declaration on the element itself. */
}
.tudi-brand-copy p { font-size: 14px; line-height: 1.6; margin: 0; color: rgba(255,255,255,.82); }
.tudi-brand-foot { z-index: 1; position: relative; font-size: 12px; color: rgba(255,255,255,.6); }

.tudi-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 48px;
}
.tudi-form-panel .page_content,
.tudi-form-panel > div { width: 100%; max-width: 360px; }
.tudi-form-panel .page-card-head { border-bottom: none; padding-bottom: 0; text-align: left; }
.tudi-form-panel .page-card-head h4 { font-size: 22px; }
.tudi-form-panel .login-content.page-card {
    border: none;
    box-shadow: none;
    padding: 0;
}

@media (max-width: 860px) {
    .tudi-split-shell { grid-template-columns: 1fr; }
    .tudi-brand-panel { display: none; }
}

/* ============================================================
   ITERATION 5 — Desktop module-tile backdrop. The sidebar in the earlier
   desktop-view-proposal.html was NOT shipped: checked live and confirmed
   Frappe deliberately hides .body-sidebar-container on this specific route
   (width stays 0 even after clicking the expand toggle — a hard rule, not
   an incidental crop), so forcing it back would fight the framework's own
   intended full-width app-launcher layout for this page. Only the
   legitimate, non-fighting part of that proposal ships here: a soft
   brand-tint backdrop behind each module icon so the tiles read as
   "designed" rather than icons floating on blank white — without touching
   the actual Frappe SVG assets.

   First attempt (plain `.icon-container { background: ... }`) rendered
   invisible: verified live that Frappe's own desk.bundle.css sets
   `.icon-container { padding: unset }`, and the icon <img> itself measures
   exactly 54x54 against a 54x53.5 container — the icon image completely
   covers the box, so any background on the container itself is hidden
   behind it regardless of cascade order. Fixed with an independently-sized
   ::before backdrop instead of relying on the container's own box model. */
.desktop-icon .icon-container {
    position: relative;
}
.desktop-icon .icon-container::before {
    content: "";
    position: absolute;
    inset: -8px;
    background: var(--tudi-primary-tint, #f7e9ea);
    border-radius: 16px;
    z-index: -1;
}

/* ============================================================
   ITERATION 6 — List/table view parity with TUDI's real conventions.

   CORRECTED: the first version of this iteration cited a Claude
   Design mockup (project 019dc76a-d004-75d0-a3a7-a51f08a64c71,
   ui_kits/wms_desktop/kit.css `table.data` rules) as the source of
   truth. That file is a DESIGN MOCKUP, not verified against the real
   tudi-ui-a21 app — per the user's explicit correction, the actual
   source (C:\Github\DERAS-RFID\DERAS-ANDROID\tudi-ui-a21, read-only
   reference) is ground truth instead. A read-only agent survey of
   that repo found:
     - Tables are plain Angular Material `<table mat-table>` inside a
       `mat-card`, elevation `mat-elevation-z8` — no custom header
       styling, Material defaults throughout (tab-report-tudi-lacak
       .component.html:35-92).
     - Row hover is `var(--blue-10)` = #ebfaff (src/styles.scss:31,399-405)
       — a LIGHT BLUE, not maroon. Confirmed with the user this reads
       as an unoverridden Material leftover rather than a deliberate
       brand choice; the user chose to keep ERPNext's row hover on the
       maroon tint for brand consistency rather than replicate it — an
       explicit override, not an oversight.
     - `.tudi-btn-secondary:hover` fills with the CORAL ACCENT
       (--brand-accent / var(--red-secondary) = #E54C59), not the
       primary maroon (src/styles.css:701-720) — corrected below.

   Frappe's list view is a virtualized div grid (.list-row-head /
   .list-row inside .list-row-container), not a literal <table>, so
   the selectors below are still Frappe's own — verified live via
   getComputedStyle on /app/company — only the VALUES were corrected
   against the real tudi-ui-a21 source. */

/* Card treatment for the list container. `mat-elevation-z8` (the real
   tudi-ui-a21 table's actual shadow) was tried here and rejected by the
   user live: on a Material `mat-card` it wraps a compact, distinct
   card, but Frappe's list container is wide and short (near full page
   width, one row tall for small lists) — the same shadow reads as a
   murky gray smear across the row rather than a crisp drop-shadow.
   Faithfulness to the source isn't the goal in isolation; the visual
   result in ERPNext's actual layout is. No shadow — just the white
   background + rounded corners, which already read cleanly against
   Frappe's plain gray-white page background. */
.list-row-container {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* Header — Frappe fills this with a flat gray band (#f3f3f3 measured
   live); the real tudi-ui-a21 tables have no special header fill at
   all (Material defaults sitting on the white mat-card). White +
   semibold here is a light, deliberate embellishment beyond strict
   1:1 parity, not a contradiction of anything observed in the source. */
.list-row-head {
    background: #fff;
    font-weight: 600;
    border-bottom: 1px solid #f7e9ea;
}

/* Row hover — light-maroon tint. NOT what the real app does (real
   hover is light blue, #ebfaff — see comment above); kept maroon per
   explicit user decision, prioritizing brand consistency across
   ERPNext's own surfaces (matches the Desktop icon backdrops in
   iteration 5 and the sidebar hover in iteration 2) over exact parity
   with what looks like an unintentional Material default upstream. */
.list-row:hover {
    background-color: var(--tudi-primary-tint, #f7e9ea);
}
/* The row's meta column (.level-right — timestamp/comment-count/like
   icon on the right) has its own opaque resting background
   (rgb(248,248,248), verified live), which sits on top of the row and
   doesn't inherit the parent's hover tint — leaving a visibly
   untinted patch on the right side of every hovered row. Force it
   transparent on hover only, so the tint reads as one continuous
   surface across the full row width instead of stopping partway. */
.list-row:hover .level-right {
    background-color: transparent !important;
}
/* The checkbox <input> itself also carries its own opaque white fill
   (a native form-control background, not something Frappe themes),
   leaving a small but visible square gap in the tint at the far left
   of every hovered row — confirmed live even after the .level-right
   fix above. Same treatment: transparent on hover only, so the tint
   is continuous edge-to-edge; the checkbox's border still renders so
   it stays visible/usable, just without its own solid fill on top. */
.list-row:hover .list-row-checkbox {
    background-color: transparent !important;
}

/* Row checkboxes default to the browser's native (usually blue)
   accent; tint them to match everything else that's interactive. */
.list-row-checkbox {
    accent-color: #74131B;
}

/* Secondary toolbar buttons (List View / Saved Filters / ellipsis
   menus) currently render as Bootstrap's flat gray `.btn-default`.
   Real tudi-ui-a21 `.tudi-btn-secondary`: white bg, maroon border +
   text at rest; on hover it fills with the CORAL ACCENT (#E54C59),
   not the primary maroon — corrected from the first version of this
   rule, which used maroon on hover based on the unverified mockup.
   Global on purpose — .btn-default is the general "secondary action"
   button across the whole Desk (dialogs, forms, toolbars), and the
   brand should read the same everywhere, not just in the list view. */
/* .btn.btn-default (two classes) is how Frappe's own desk.bundle.css
   sets the gray fill (`.btn.btn-default { background: var(--control-bg) }`)
   — a plain `.btn-default` selector loses that specificity fight and
   silently no-ops, so this must match it class-for-class. */
.btn.btn-default {
    background-color: #fff;
    border: 1px solid #74131B;
    color: #74131B;
}
.btn.btn-default:hover, .btn.btn-default:focus {
    background-color: #E54C59;
    border-color: #E54C59;
    color: #fff;
}

/* ============================================================
   ITERATION 7 — Desktop module icon recolor.

   First attempt (this comment kept as a record of why it was wrong):
   a CSS filter (hue-rotate/saturate/brightness) tuned empirically to
   approximate #74131B. That approach was abandoned — a uniform filter
   over the whole rendered image cannot hit the exact brand hex on the
   dark background AND keep the white glyph fully white at the same
   time; the color also read as noticeably too bright/vivid compared
   to the real brand maroon.

   Replaced with an exact fix in tudi_erp.js: every desktop_icons/
   solid/*.svg ships the SAME hardcoded background fill
   (fill="#0289F7", confirmed via a live fetch of every icon in use),
   so the script fetches the source, string-replaces that one hex for
   #74131B, and swaps the <img> to the modified SVG via a blob: URL.
   Confirmed via canvas pixel sampling: background lands at exactly
   rgb(116,19,27) === #74131B, white glyph paths are untouched (they
   never had that fill to begin with) and stay rgb(255,255,255). No
   CSS rule needed here — see tudi_erp.js for the actual recolor. */