/* ================================================================
   Resayil — Helpdesk app overlay (rs-helpdesk.css)
   Phase 24.5, Plan 24.5-02
   ----------------------------------------------------------------
   Scope: Helpdesk routes ONLY (7 route_prefixes — see overlays/helpdesk.json).
   Consumes --rs-* tokens from resayil-brand.css. No new custom properties.
   Activation of bento card grid requires rs-helpdesk-bento.js to tag
   .list-row-container with data-rs-helpdesk-bento="true".
   Depends on: resayil-brand.css (tokens), rs-desk.css (chrome baseline).
   ================================================================ */

/* -----------------------------------------------------------------
   S1 — Typography + baseline inheritance
   Every Helpdesk route inherits the brand sans stack, foreground,
   and subtle bg token so the app reads as "Resayil" regardless of
   where Frappe's default body styles are applied.
   ----------------------------------------------------------------- */
body[data-route^="helpdesk"],
body[data-route^="/helpdesk"],
body[data-route*="/hd-ticket"],
body[data-route*="/hd-article"],
body[data-route*="/hd-team"],
body[data-route*="/hd-customer"],
body[data-route*="/hd-settings"] {
  font-family: var(--rs-font-sans);
  color: var(--rs-fg);
  background: var(--rs-bg);
  line-height: var(--rs-leading-normal);
}

body[data-route^="helpdesk"] h1,
body[data-route^="/helpdesk"] h1,
body[data-route*="/hd-ticket"] h1,
body[data-route*="/hd-article"] h1,
body[data-route*="/hd-team"] h1,
body[data-route*="/hd-customer"] h1,
body[data-route*="/hd-settings"] h1 {
  font-size: var(--rs-text-3xl);
  line-height: var(--rs-leading-tight);
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-4);
}

body[data-route^="helpdesk"] h2,
body[data-route^="/helpdesk"] h2,
body[data-route*="/hd-ticket"] h2,
body[data-route*="/hd-article"] h2,
body[data-route*="/hd-team"] h2,
body[data-route*="/hd-customer"] h2,
body[data-route*="/hd-settings"] h2 {
  font-size: var(--rs-text-2xl);
  line-height: var(--rs-leading-tight);
  color: var(--rs-fg);
  margin-bottom: var(--rs-space-3);
}

/* -----------------------------------------------------------------
   S2 — Surface + card chrome
   Page wrappers pick up brand surface, radius, shadow. Targets both
   Desk-rendered Helpdesk routes (/app/hd-*) and the Vue SPA at
   /helpdesk/*. Avoids :root / html / body (unqualified).
   ----------------------------------------------------------------- */
body[data-route^="helpdesk"] .page-container,
body[data-route^="/helpdesk"] .page-container,
body[data-route*="/hd-ticket"] .page-container,
body[data-route*="/hd-article"] .page-container,
body[data-route*="/hd-team"] .page-container,
body[data-route*="/hd-customer"] .page-container,
body[data-route*="/hd-settings"] .page-container {
  background: var(--rs-bg);
  color: var(--rs-fg);
}

body[data-route^="helpdesk"] .layout-main-section,
body[data-route^="/helpdesk"] .layout-main-section,
body[data-route*="/hd-ticket"] .layout-main-section,
body[data-route*="/hd-article"] .layout-main-section,
body[data-route*="/hd-team"] .layout-main-section,
body[data-route*="/hd-customer"] .layout-main-section,
body[data-route*="/hd-settings"] .layout-main-section {
  background: var(--rs-surface);
  border-radius: var(--rs-radius-md);
  box-shadow: var(--rs-shadow-sm);
  padding: var(--rs-space-5);
}

body[data-route^="helpdesk"] .page-head,
body[data-route^="/helpdesk"] .page-head,
body[data-route*="/hd-ticket"] .page-head,
body[data-route*="/hd-article"] .page-head,
body[data-route*="/hd-team"] .page-head,
body[data-route*="/hd-customer"] .page-head,
body[data-route*="/hd-settings"] .page-head {
  background: var(--rs-surface);
  border-bottom: 1px solid var(--rs-border);
  padding: var(--rs-space-4) var(--rs-space-5);
  margin-bottom: var(--rs-space-5);
}

body[data-route^="helpdesk"] .page-content,
body[data-route^="/helpdesk"] .page-content,
body[data-route*="/hd-ticket"] .page-content,
body[data-route*="/hd-article"] .page-content,
body[data-route*="/hd-team"] .page-content,
body[data-route*="/hd-customer"] .page-content,
body[data-route*="/hd-settings"] .page-content {
  background: var(--rs-bg);
  color: var(--rs-fg);
}

/* -----------------------------------------------------------------
   S3 — Bento card grid for ticket/article list views
   Tagged by rs-helpdesk-bento.js with data-rs-helpdesk-bento="true".
   `!important` on display + grid-template-columns only — Frappe emits
   inline style on list containers; we defeat that to land bento.
   ----------------------------------------------------------------- */
body[data-route^="helpdesk"] [data-rs-helpdesk-bento],
body[data-route^="/helpdesk"] [data-rs-helpdesk-bento],
body[data-route*="/hd-ticket"] [data-rs-helpdesk-bento],
body[data-route*="/hd-article"] [data-rs-helpdesk-bento],
body[data-route*="/hd-team"] [data-rs-helpdesk-bento],
body[data-route*="/hd-customer"] [data-rs-helpdesk-bento],
body[data-route*="/hd-settings"] [data-rs-helpdesk-bento] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--rs-space-5);
  margin-bottom: var(--rs-space-8);
  padding: var(--rs-space-2) 0;
}

body[data-route^="helpdesk"] [data-rs-helpdesk-bento] > *,
body[data-route^="/helpdesk"] [data-rs-helpdesk-bento] > *,
body[data-route*="/hd-ticket"] [data-rs-helpdesk-bento] > *,
body[data-route*="/hd-article"] [data-rs-helpdesk-bento] > *,
body[data-route*="/hd-team"] [data-rs-helpdesk-bento] > *,
body[data-route*="/hd-customer"] [data-rs-helpdesk-bento] > *,
body[data-route*="/hd-settings"] [data-rs-helpdesk-bento] > * {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-5);
  transition:
    transform var(--rs-duration) var(--rs-ease-brand),
    border-color var(--rs-duration) var(--rs-ease-brand),
    box-shadow var(--rs-duration) var(--rs-ease-brand);
  color: var(--rs-fg);
}

body[data-route^="helpdesk"] [data-rs-helpdesk-bento] > *:hover,
body[data-route^="/helpdesk"] [data-rs-helpdesk-bento] > *:hover,
body[data-route*="/hd-ticket"] [data-rs-helpdesk-bento] > *:hover,
body[data-route*="/hd-article"] [data-rs-helpdesk-bento] > *:hover,
body[data-route*="/hd-team"] [data-rs-helpdesk-bento] > *:hover,
body[data-route*="/hd-customer"] [data-rs-helpdesk-bento] > *:hover,
body[data-route*="/hd-settings"] [data-rs-helpdesk-bento] > *:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-md);
  transform: translateY(-2px);
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  body[data-route^="helpdesk"] [data-rs-helpdesk-bento],
  body[data-route^="/helpdesk"] [data-rs-helpdesk-bento],
  body[data-route*="/hd-ticket"] [data-rs-helpdesk-bento],
  body[data-route*="/hd-article"] [data-rs-helpdesk-bento],
  body[data-route*="/hd-team"] [data-rs-helpdesk-bento],
  body[data-route*="/hd-customer"] [data-rs-helpdesk-bento],
  body[data-route*="/hd-settings"] [data-rs-helpdesk-bento] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--rs-space-4);
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  body[data-route^="helpdesk"] [data-rs-helpdesk-bento],
  body[data-route^="/helpdesk"] [data-rs-helpdesk-bento],
  body[data-route*="/hd-ticket"] [data-rs-helpdesk-bento],
  body[data-route*="/hd-article"] [data-rs-helpdesk-bento],
  body[data-route*="/hd-team"] [data-rs-helpdesk-bento],
  body[data-route*="/hd-customer"] [data-rs-helpdesk-bento],
  body[data-route*="/hd-settings"] [data-rs-helpdesk-bento] {
    grid-template-columns: 1fr !important;
    gap: var(--rs-space-3);
  }
}

/* -----------------------------------------------------------------
   S4 — Ticket detail: 2-column header bento (status/priority |
   SLA/timer). Applies on /app/hd-ticket/<name> + /helpdesk/tickets/*.
   ----------------------------------------------------------------- */
body[data-route*="/hd-ticket"] .form-layout .section-head,
body[data-route^="/helpdesk"] .ticket-header,
body[data-route^="helpdesk"] .ticket-header {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--rs-space-4);
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-5);
  margin-bottom: var(--rs-space-5);
}

body[data-route*="/hd-ticket"] .page-head-content,
body[data-route^="/helpdesk"] .ticket-header .meta,
body[data-route^="helpdesk"] .ticket-header .meta {
  color: var(--rs-fg-muted);
  font-size: var(--rs-text-sm);
}

body[data-route*="/hd-article"] .article-body,
body[data-route^="/helpdesk"] .article-body,
body[data-route^="helpdesk"] .article-body {
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-md);
  padding: var(--rs-space-6);
  color: var(--rs-fg);
  line-height: var(--rs-leading-relaxed);
}

/* -----------------------------------------------------------------
   S5 — Accent buttons + interactive controls inside Helpdesk
   ----------------------------------------------------------------- */
body[data-route^="helpdesk"] .btn-primary,
body[data-route^="/helpdesk"] .btn-primary,
body[data-route*="/hd-ticket"] .btn-primary,
body[data-route*="/hd-article"] .btn-primary,
body[data-route*="/hd-team"] .btn-primary,
body[data-route*="/hd-customer"] .btn-primary,
body[data-route*="/hd-settings"] .btn-primary {
  background: var(--rs-accent);
  border-color: var(--rs-accent);
  color: #ffffff;
  border-radius: var(--rs-radius);
  transition: background var(--rs-duration) var(--rs-ease);
}

body[data-route^="helpdesk"] .btn-primary:hover,
body[data-route^="/helpdesk"] .btn-primary:hover,
body[data-route*="/hd-ticket"] .btn-primary:hover,
body[data-route*="/hd-article"] .btn-primary:hover,
body[data-route*="/hd-team"] .btn-primary:hover,
body[data-route*="/hd-customer"] .btn-primary:hover,
body[data-route*="/hd-settings"] .btn-primary:hover {
  background: var(--rs-accent-hover);
  border-color: var(--rs-accent-hover);
}

/* -----------------------------------------------------------------
   S6 — Dark mode (scoped — inherits tokens from :root[data-theme=dark])
   The --rs-* surface/border tokens re-resolve automatically under the
   dark-theme block defined in resayil-brand.css. We only need to
   adjust the hover shadow which is perceptually weaker in dark mode.
   ----------------------------------------------------------------- */
body[data-theme="dark"][data-route^="helpdesk"] [data-rs-helpdesk-bento] > *,
body[data-theme="dark"][data-route^="/helpdesk"] [data-rs-helpdesk-bento] > *,
body[data-theme="dark"][data-route*="/hd-ticket"] [data-rs-helpdesk-bento] > *,
body[data-theme="dark"][data-route*="/hd-article"] [data-rs-helpdesk-bento] > *,
body[data-theme="dark"][data-route*="/hd-team"] [data-rs-helpdesk-bento] > *,
body[data-theme="dark"][data-route*="/hd-customer"] [data-rs-helpdesk-bento] > *,
body[data-theme="dark"][data-route*="/hd-settings"] [data-rs-helpdesk-bento] > * {
  border-color: var(--rs-border);
  background: var(--rs-surface);
}

body[data-theme="dark"][data-route^="helpdesk"] [data-rs-helpdesk-bento] > *:hover,
body[data-theme="dark"][data-route^="/helpdesk"] [data-rs-helpdesk-bento] > *:hover,
body[data-theme="dark"][data-route*="/hd-ticket"] [data-rs-helpdesk-bento] > *:hover,
body[data-theme="dark"][data-route*="/hd-article"] [data-rs-helpdesk-bento] > *:hover,
body[data-theme="dark"][data-route*="/hd-team"] [data-rs-helpdesk-bento] > *:hover,
body[data-theme="dark"][data-route*="/hd-customer"] [data-rs-helpdesk-bento] > *:hover,
body[data-theme="dark"][data-route*="/hd-settings"] [data-rs-helpdesk-bento] > *:hover {
  border-color: var(--rs-accent);
  box-shadow: var(--rs-shadow-lg);
}

body[data-theme="dark"][data-route*="/hd-ticket"] .form-layout .section-head,
body[data-theme="dark"][data-route^="/helpdesk"] .ticket-header,
body[data-theme="dark"][data-route^="helpdesk"] .ticket-header {
  background: var(--rs-surface);
  border-color: var(--rs-border);
}

/* -----------------------------------------------------------------
   S7 — RTL (Arabic, Hebrew). Swap physical left/right to logical
   inline-start/end where we used them, and flip grid direction for
   the ticket-header 2-column layout.
   ----------------------------------------------------------------- */
[dir="rtl"] body[data-route^="helpdesk"] .layout-main-section,
[dir="rtl"] body[data-route^="/helpdesk"] .layout-main-section,
[dir="rtl"] body[data-route*="/hd-ticket"] .layout-main-section,
[dir="rtl"] body[data-route*="/hd-article"] .layout-main-section,
[dir="rtl"] body[data-route*="/hd-team"] .layout-main-section,
[dir="rtl"] body[data-route*="/hd-customer"] .layout-main-section,
[dir="rtl"] body[data-route*="/hd-settings"] .layout-main-section {
  font-family: var(--rs-font-arabic);
  direction: rtl;
  text-align: right;
}

[dir="rtl"] body[data-route*="/hd-ticket"] .form-layout .section-head,
[dir="rtl"] body[data-route^="/helpdesk"] .ticket-header,
[dir="rtl"] body[data-route^="helpdesk"] .ticket-header {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  text-align: right;
}

[dir="rtl"] body[data-route^="helpdesk"] [data-rs-helpdesk-bento] > *,
[dir="rtl"] body[data-route^="/helpdesk"] [data-rs-helpdesk-bento] > *,
[dir="rtl"] body[data-route*="/hd-ticket"] [data-rs-helpdesk-bento] > *,
[dir="rtl"] body[data-route*="/hd-article"] [data-rs-helpdesk-bento] > *,
[dir="rtl"] body[data-route*="/hd-team"] [data-rs-helpdesk-bento] > *,
[dir="rtl"] body[data-route*="/hd-customer"] [data-rs-helpdesk-bento] > *,
[dir="rtl"] body[data-route*="/hd-settings"] [data-rs-helpdesk-bento] > * {
  text-align: right;
}

/* -----------------------------------------------------------------
   S8 — Reduced motion: kill transforms/transitions
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-route^="helpdesk"] [data-rs-helpdesk-bento] > *,
  body[data-route^="/helpdesk"] [data-rs-helpdesk-bento] > *,
  body[data-route*="/hd-ticket"] [data-rs-helpdesk-bento] > *,
  body[data-route*="/hd-article"] [data-rs-helpdesk-bento] > *,
  body[data-route*="/hd-team"] [data-rs-helpdesk-bento] > *,
  body[data-route*="/hd-customer"] [data-rs-helpdesk-bento] > *,
  body[data-route*="/hd-settings"] [data-rs-helpdesk-bento] > * {
    transition: none;
  }
  body[data-route^="helpdesk"] [data-rs-helpdesk-bento] > *:hover,
  body[data-route^="/helpdesk"] [data-rs-helpdesk-bento] > *:hover,
  body[data-route*="/hd-ticket"] [data-rs-helpdesk-bento] > *:hover,
  body[data-route*="/hd-article"] [data-rs-helpdesk-bento] > *:hover,
  body[data-route*="/hd-team"] [data-rs-helpdesk-bento] > *:hover,
  body[data-route*="/hd-customer"] [data-rs-helpdesk-bento] > *:hover,
  body[data-route*="/hd-settings"] [data-rs-helpdesk-bento] > *:hover {
    transform: none;
  }
}

/* -----------------------------------------------------------------
   SCOPE GUARDS (Plan 24.5-02)
   This file MUST NOT emit rules matching:
   - :root, html, body (unqualified)
   - body[data-route^="/app"]:not(...hd-*)
   - body[data-route^="/subscribe"] / loyalty / whatsapp
   - Any portal or workspace route outside route_prefixes in
     erpnext_cli/overlays/helpdesk.json
   Enforced by scripts/verify_helpdesk_css_scope.py (Task 3).
   ----------------------------------------------------------------- */