/* ============================================================
   Telliano — global UI refinement layer
   ------------------------------------------------------------
   Loaded LAST on every page (after the page's own <style> block
   and any other stylesheet). Refines design tokens and component
   primitives without touching markup, copy, business logic, or
   information architecture.

   Goal: lift the visual quality of an existing CRM and its
   public surfaces to feel like a premium commercial SaaS product
   without users having to relearn anything.

   Scope:
   • Refined elevation, motion, focus-ring tokens
   • Tighter typography rhythm
   • Polished buttons, inputs, cards, tables, modals
   • Subtle micro-interactions (hover lift, smooth focus)
   • Better selection + scrollbar treatment
   • Improved responsive padding rhythm

   Constraints:
   • Touches no HTML, no JS, no copy
   • Uses :where() and low-specificity selectors so existing
     brand-specific overrides keep winning when needed
   • Respects prefers-reduced-motion
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. Refined design tokens — appended to existing :root
   ──────────────────────────────────────────────────────────── */
:root{
  /* Soft, layered elevation — replaces flat hard shadows.
     Each step adds a tiny ambient layer for realism. */
  --r-shadow-xs: 0 1px 2px rgba(20, 38, 15, 0.04);
  --r-shadow-sm: 0 1px 3px rgba(20, 38, 15, 0.06), 0 1px 2px rgba(20, 38, 15, 0.04);
  --r-shadow-md: 0 4px 12px rgba(20, 38, 15, 0.07), 0 2px 4px rgba(20, 38, 15, 0.04);
  --r-shadow-lg: 0 12px 28px rgba(20, 38, 15, 0.10), 0 4px 8px rgba(20, 38, 15, 0.04);
  --r-shadow-xl: 0 24px 56px rgba(20, 38, 15, 0.16), 0 8px 16px rgba(20, 38, 15, 0.06);

  /* Radius scale */
  --r-radius-xs: 4px;
  --r-radius-sm: 8px;
  --r-radius-md: 12px;
  --r-radius-lg: 16px;
  --r-radius-xl: 24px;
  --r-radius-pill: 9999px;

  /* Easing curves */
  --r-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --r-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Durations */
  --r-t-fast: 140ms;
  --r-t-base: 220ms;
  --r-t-slow: 380ms;

  /* Focus ring — tangerine glow */
  --r-focus-ring: 0 0 0 3px rgba(255, 85, 0, 0.22);

  /* Hairline border — softer than 1px solid */
  --r-border-hair: 1px solid rgba(20, 64, 16, 0.08);
}

/* ────────────────────────────────────────────────────────────
   2. Reduced-motion respect — disable lift/scale micro-interactions
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────
   3. Typography rhythm — tighter, more confident headings
   ──────────────────────────────────────────────────────────── */
:where(h1){ line-height: 1.15; letter-spacing: -0.01em; }
:where(h2){ line-height: 1.18; letter-spacing: -0.005em; }
:where(h3){ line-height: 1.25; }
:where(h4, h5, h6){ line-height: 1.3; }
:where(p, li){ line-height: 1.65; }

/* Crisper anti-aliasing across the board */
:where(html){
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ────────────────────────────────────────────────────────────
   4. Selection + scrollbar polish — feels brand-aware
   ──────────────────────────────────────────────────────────── */
:where(::selection){
  background: rgba(255, 85, 0, 0.22);
  color: #14260F;
}
:where(::-webkit-scrollbar){       width: 12px; height: 12px; }
:where(::-webkit-scrollbar-track){ background: rgba(20, 64, 16, 0.04); }
:where(::-webkit-scrollbar-thumb){
  background: rgba(20, 64, 16, 0.18);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: padding-box;
  transition: background var(--r-t-fast) var(--r-ease);
}
:where(::-webkit-scrollbar-thumb:hover){
  background: rgba(20, 64, 16, 0.32);
  background-clip: padding-box;
  border: 3px solid transparent;
}

/* ────────────────────────────────────────────────────────────
   5. Universal focus ring — replaces ugly browser outlines
   ──────────────────────────────────────────────────────────── */
:where(:focus){ outline: none; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: none;
  box-shadow: var(--r-focus-ring);
  border-radius: var(--r-radius-sm);
}

/* ────────────────────────────────────────────────────────────
   6. Button polish — subtle lift + spring on press
   Targets generic button classes that already exist across pages
   without overriding their colors or fonts.
   ──────────────────────────────────────────────────────────── */
:where(.btn, .btn-primary, .btn-secondary, .btn-danger,
       .cc-btn, .top-actions a, .top-actions button,
       .wc-toggle-btn, .modal button, .branch-cta, .link-chip,
       .lang-toggle, .lang-btn, .nav-item, .cal-head-add,
       .cal-head-today, .cal-head-nav, .apply-btn,
       button[type="submit"]){
  transition:
    transform var(--r-t-fast) var(--r-ease),
    box-shadow var(--r-t-base) var(--r-ease),
    background-color var(--r-t-fast) var(--r-ease),
    border-color var(--r-t-fast) var(--r-ease),
    color var(--r-t-fast) var(--r-ease);
}
:where(.btn, .btn-primary, .btn-secondary, .btn-danger,
       .cc-btn, .wc-toggle-btn,
       button[type="submit"]):hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: var(--r-shadow-md);
}
:where(.btn, .btn-primary, .btn-secondary, .btn-danger,
       .cc-btn, .wc-toggle-btn,
       button[type="submit"]):active:not(:disabled){
  transform: translateY(0);
  box-shadow: var(--r-shadow-xs);
  transition-duration: 80ms;
}

/* Subtle press feedback on plain icon-only buttons */
:where(.sidebar-toggle, .sidebar-collapse-btn,
       .modal-x, .modal-x-close, .sidebar-mobile-close,
       .cc-banner button):active{
  transform: scale(0.94);
  transition: transform 80ms var(--r-ease);
}

/* ────────────────────────────────────────────────────────────
   7. Form polish — bigger touch targets, softer focus
   ──────────────────────────────────────────────────────────── */
:where(input[type="text"], input[type="email"], input[type="tel"],
       input[type="url"], input[type="number"], input[type="search"],
       input[type="date"], input[type="time"], input[type="password"],
       select, textarea){
  transition:
    border-color var(--r-t-fast) var(--r-ease),
    box-shadow var(--r-t-fast) var(--r-ease),
    background-color var(--r-t-fast) var(--r-ease);
}
:where(input[type="text"], input[type="email"], input[type="tel"],
       input[type="url"], input[type="number"], input[type="search"],
       input[type="date"], input[type="time"], input[type="password"],
       select, textarea):hover:not(:disabled):not(:focus){
  border-color: rgba(20, 64, 16, 0.28);
}

/* Better placeholder treatment */
:where(::placeholder){
  color: rgba(20, 64, 16, 0.42);
  opacity: 1;
}

/* ────────────────────────────────────────────────────────────
   8. Card polish — soft elevation + lift on hover (where intended)
   ──────────────────────────────────────────────────────────── */
:where(.card, .dash-card, .dash-chart-card, .dash-kpi,
       .kpi-card, .dash-branch-card, .dash-rank-card,
       .dash-compare-card, .branch, .modal,
       .top-content, .dash-content-card,
       .wc-day, .wc-match, .wc-section,
       .feedback-card, .form-section){
  transition:
    transform var(--r-t-base) var(--r-ease),
    box-shadow var(--r-t-base) var(--r-ease),
    border-color var(--r-t-base) var(--r-ease);
  will-change: transform;
}

/* Lift only cards explicitly marked as interactive (clickable) */
:where(.dash-jump, .kpi-clickable, .branch, .top-content,
       .dash-rank-card.dash-jump,
       .dash-branch-card.dash-jump):hover{
  transform: translateY(-2px);
  box-shadow: var(--r-shadow-lg);
}

/* ────────────────────────────────────────────────────────────
   9. Table polish — refined header + row hover + nicer borders
   ──────────────────────────────────────────────────────────── */
:where(.dash-ranking thead th,
       .dash-camp-table thead th,
       .audit-table th){
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
}
:where(.dash-ranking tbody tr,
       .dash-camp-table tbody tr,
       .audit-table tbody tr){
  transition: background-color var(--r-t-fast) var(--r-ease);
}
:where(.dash-ranking tbody tr:hover,
       .dash-camp-table tbody tr:hover,
       .audit-table tbody tr:hover) td{
  background: rgba(255, 85, 0, 0.04);
}

/* ────────────────────────────────────────────────────────────
   10. Modal polish — smoother backdrop + refined radius
   ──────────────────────────────────────────────────────────── */
:where(.modal-overlay){
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:where(.modal){
  box-shadow: var(--r-shadow-xl);
}

/* Smoother modal open animation */
@keyframes r-modal-open{
  from{ opacity: 0; transform: translateY(8px) scale(0.985); }
  to  { opacity: 1; transform: translateY(0)   scale(1); }
}
:where(.modal-overlay.show .modal){
  animation: r-modal-open var(--r-t-base) var(--r-ease-out) both;
}

/* ────────────────────────────────────────────────────────────
   11. Sidebar polish (CRM only — refined active state)
   ──────────────────────────────────────────────────────────── */
:where(.sidebar-tabs .tab){
  transition:
    background-color var(--r-t-fast) var(--r-ease),
    color var(--r-t-fast) var(--r-ease),
    padding-inline-start var(--r-t-fast) var(--r-ease);
  position: relative;
}
:where(.sidebar-tabs .tab.active::before){
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  background: var(--tangerine, #FF5500);
  border-radius: 0 3px 3px 0;
}
html[dir="rtl"] :where(.sidebar-tabs .tab.active::before){
  border-radius: 3px 0 0 3px;
}

/* ────────────────────────────────────────────────────────────
   12. Empty + error states — softer presentation
   ──────────────────────────────────────────────────────────── */
:where(.empty, .audit-row-detail, .wc-empty){
  border-radius: var(--r-radius-md);
}

/* ────────────────────────────────────────────────────────────
   13. Chips & pills — uniform pill rhythm + crisper border
   ──────────────────────────────────────────────────────────── */
:where(.chip, .link-chip, .role-pill, .sev-pill,
       .platform-badge, .inf-chip, .auto-save-badge,
       .wc-day-today-pill){
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────
   14. Toast — refined entrance + clean shadow
   ──────────────────────────────────────────────────────────── */
:where(.toast){
  box-shadow: var(--r-shadow-lg);
  border-radius: var(--r-radius-md);
}

/* ────────────────────────────────────────────────────────────
   15. Container rhythm — consistent inner spacing rhythm
   ──────────────────────────────────────────────────────────── */
:where(.section-head + .card,
       .section-head + .dash-row-7030,
       .section-head + .grid-auto-2,
       .section-head + .dash-kpi-grid){
  margin-top: 4px;
}

/* ────────────────────────────────────────────────────────────
   16. Image rendering — sharper logos at any zoom
   ──────────────────────────────────────────────────────────── */
:where(img){
  image-rendering: -webkit-optimize-contrast;
}

/* ────────────────────────────────────────────────────────────
   17. Disabled state — clearer affordance
   ──────────────────────────────────────────────────────────── */
:where(button:disabled, [disabled]){
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.7);
}

/* ────────────────────────────────────────────────────────────
   18. Print — clean printable layout, drop interactive chrome
   ──────────────────────────────────────────────────────────── */
@media print{
  :where(.no-print,
         .sidebar, .sidebar-toggle, .cc-banner,
         .toast, .modal-overlay, .top-actions,
         .cal-head-actions){
    display: none !important;
  }
  :where(body){ background: #fff !important; }
  :where(.card){
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
  }
}