/* =====================================================================
   RADOS MEDYA — LEGACY → V2 BRIDGE
   =====================================================================
   Loaded LAST, after style.css and rados-v2.css.

   WHY THIS FILE EXISTS

   The V2 design system (rados-v2.css) is complete and good. The problem was
   never the system — it was ADOPTION. Measured on the panel before this file:

       .glass-card    164 uses      .btn-primary    99 uses
       .input-field   227 uses      .btn-secondary  96 uses
       inline style=  679 uses      var(--text-muted) 338 uses

   Those legacy classes and tokens resolve against a SECOND, older palette
   (--primary #6C63FF, --bg-card #1a1a2e, --text-muted #4a5568), so every screen
   that has not been migrated renders in a different purple, on a different
   background, with different corner radii — inside the same product.

   THE MEASURED DEFECT THIS FIXES FIRST

       #4a5568 on #1a1a2e  =  2.27:1   ← WCAG AA needs 4.5:1 for body text
       #4a5568 on #0f0f1e  =  2.52:1

   --text-muted is the dominant secondary-text colour in the panel: 338 inline
   uses in panel.js plus 38 in style.css. Every one of them was below the
   accessibility floor. Re-pointing one token fixes all of them at once.

   HOW IT WORKS — and why it is not another redesign

   1. It RE-POINTS the legacy tokens at the V2 tokens. No JS changes, no markup
      changes, no new classes to learn.
   2. It maps the four legacy component classes onto the V2 surface treatment,
      so a legacy screen and a V2 screen are visually the same product.
   3. It never touches a .rm-* selector, so nothing already migrated changes.

   Deleting this file reverts the panel to exactly its previous appearance.
   That is deliberate: it is a bridge, not a rewrite. Screens migrate to .rm-*
   classes at their own pace and the bridge quietly stops applying to them.

   ISOLATION CONTRACT — audited after the dashboard regression report

   The dashboard is a V2 component (.rm-card .rm-stat …) and this file did NOT
   cause that regression; the root cause was an `overflow-wrap: anywhere` inside
   rados-v2.css itself. The audit is recorded anyway, because "the bridge is
   probably fine" is not something a later reader should have to re-derive.

   Every rule below is in exactly one of three groups:

     A. LEGACY CLASS TOKENS — .glass-card, .glow-card, .btn-primary,
        .btn-secondary, .btn-danger, .input-field, and the Tailwind `primary`
        utilities. A CSS class selector matches whole tokens, so `.btn-primary`
        does NOT match class="rm-btn rm-btn-primary". The V2 modules use only
        .rm-* classes, so they are untouched by this group. Verified by test.

     B. TOKEN RE-POINTING — :root custom properties. Global by nature and by
        intent: that is the whole mechanism. V2 reads --rm-* and is unaffected.

     C. THREE DELIBERATE GLOBAL RULES — a focus ring for elements V2 does not
        style, a 44px touch floor on legacy controls, and prefers-reduced-motion.
        These are accessibility floors: scoping them to legacy screens would mean
        deliberately shipping a worse experience on half the product.

   No rule targets a .rm-* selector. A test enforces that, so the two systems
   cannot start overlapping by accident.

   MAINTENANCE RULE
   New code uses .rm-* classes and --rm-* tokens. This file exists to stop the
   OLD code from looking wrong, not to give new code somewhere else to live.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. LEGACY TOKENS NOW RESOLVE TO THE V2 PALETTE
   One palette, one product. The legacy names survive so that 679 inline
   styles and 4224 lines of style.css keep working untouched.
   --------------------------------------------------------------- */
:root {
  /* brand — the two purples were 4 hex points apart and read as a mistake */
  --primary:        var(--rm-brand);
  --primary-dark:   var(--rm-brand-active);
  --primary-glow:   var(--rm-brand-soft);

  /* surfaces */
  --bg-dark:        var(--rm-bg);
  --bg-card:        var(--rm-surface);
  --bg-card-2:      var(--rm-surface-2);
  --bg-input:       var(--rm-surface-2);
  --bg-hover:       var(--rm-surface-hover);
  --card-bg:        var(--rm-surface);
  --sidebar-bg:     var(--rm-surface);
  --navbar-bg:      var(--rm-surface);
  --toast-bg:       var(--rm-surface-2);

  /* text — this is the accessibility fix. 2.27:1 -> 4.94:1 */
  --text-primary:   var(--rm-text);
  --text-secondary: var(--rm-text-secondary);
  --text-muted:     var(--rm-text-muted);

  /* borders */
  --border:         var(--rm-brand-border);
  --border-subtle:  var(--rm-border);
  --glass:          var(--rm-surface);
  --glass-border:   var(--rm-border);

  --shadow:         var(--rm-shadow);
  --shadow-sm:      var(--rm-shadow-sm);
}

/* ---------------------------------------------------------------
   2. SURFACES
   The legacy card was glassmorphism: a translucent fill plus a 20px
   backdrop-filter blur, and a hover that lifted the card 2px and glowed.
   Three problems, in order of importance:
     - a blurred translucent panel over a busy background is the reason text
       contrast could not be guaranteed anywhere;
     - backdrop-filter on 164 elements is the single most expensive thing the
       panel asks a mid-range phone to do;
     - a card that moves when you point at it reads as a button.
   The V2 treatment is an opaque surface with a real border. It is calmer,
   faster and legible by construction.
   --------------------------------------------------------------- */
.glass-card {
  background: var(--rm-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
  transition: border-color var(--rm-t), background var(--rm-t);
}

/* Hover no longer moves or glows. Only genuinely clickable cards react, and
   they say so by being links or carrying an onclick. */
.glass-card:hover {
  border-color: var(--rm-border);
  box-shadow: none;
  transform: none;
}
/* Only a card that is genuinely clickable reacts, and it says so by being a link
   or carrying an onclick. (A `.glass-card.rm-card-hover` variant used to be listed
   here too; nothing in the codebase combines those two classes, and naming a .rm-*
   class in this file weakens the isolation contract for no benefit.) */
a.glass-card:hover,
.glass-card[onclick]:hover {
  border-color: var(--rm-brand-border);
  background: var(--rm-surface-hover);
}

.glow-card {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
}
.glow-card::before { display: none; }

/* ---------------------------------------------------------------
   3. BUTTONS
   The legacy primary carried a ::before sheen that swept across on hover.
   It fires on every button on the screen and competes with the one action
   the user is actually looking for. Removed; the button still has a clear
   hover and a real focus ring.
   --------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-danger {
  border-radius: var(--rm-radius);
  font-weight: 600;
  transition: background var(--rm-t), border-color var(--rm-t), color var(--rm-t);
  box-shadow: none;
}
.btn-primary::before,
.btn-secondary::before { display: none; }

/* --rm-brand-cta, not --rm-brand: white on the identity purple is 3.89:1, below the
   4.5:1 AA floor for button labels. See the token comment in rados-v2.css. */
.btn-primary {
  background: var(--rm-brand-cta);
  border: 1px solid var(--rm-brand-cta);
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  background: var(--rm-brand-cta-hover);
  border-color: var(--rm-brand-cta-hover);
  transform: none;
  box-shadow: none;
}
.btn-primary:active:not(:disabled) { background: var(--rm-brand-active); }

/* The legacy admin tab bar (.svc-tab, /admin/hizmetler and /admin/operasyon) fills its active
   tab with the identity purple and writes the label in white: the same 3.89:1 as above. */
.svc-tab.active {
  background: var(--rm-brand-cta);
  border-color: var(--rm-brand-cta);
  box-shadow: none;
}
/* style.css clips .btn-primary (overflow: hidden) for the sheen this file removes above. With
   the sheen gone the clip only ever cut labels: a header row squeezed "Hizmet Ekle" to "Hizmet Ek". */
.btn-primary { overflow: visible; }
.btn-primary.btn-sm, .btn-secondary.btn-sm, .btn-danger.btn-sm { flex-shrink: 0; white-space: nowrap; }

.btn-secondary {
  background: var(--rm-surface-2);
  border: 1px solid var(--rm-border-strong);
  color: var(--rm-text);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--rm-surface-hover);
  border-color: var(--rm-brand-border);
  transform: none;
}

.btn-danger {
  background: var(--rm-danger);
  border: 1px solid var(--rm-danger);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { opacity: .92; }

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------
   4. FORMS
   --------------------------------------------------------------- */
.input-field,
select.input-field,
textarea.input-field {
  background: var(--rm-surface-2);
  border: 1px solid var(--rm-border-strong);
  border-radius: var(--rm-radius);
  color: var(--rm-text);
  transition: border-color var(--rm-t), box-shadow var(--rm-t);
}
.input-field:focus,
select.input-field:focus,
textarea.input-field:focus {
  border-color: var(--rm-brand);
  box-shadow: 0 0 0 3px var(--rm-brand-soft);
  outline: none;
}
.input-field::placeholder { color: var(--rm-text-muted); }

/* A disabled field must look unavailable, not merely quiet. */
.input-field:disabled,
select.input-field:disabled,
textarea.input-field:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------
   4b. TAILWIND BRAND UTILITIES
   tailwind.config carries its own `primary` scale (500 #6C63FF, 400 #8876f4) —
   the OLD brand — and the JS uses it 116 times. That was a third purple in the
   same product. Only the utilities actually used are re-pointed.
   --------------------------------------------------------------- */
:root {
  --primary-500: var(--rm-brand);       /* style.css uses this with a hardcoded fallback */
  --primary-400: var(--rm-brand-text);  /* panel.js uses var(--primary-400) WITHOUT a fallback: it was never
                                           defined, so the 404 page's gradient-clipped "404" rendered invisible */
}

.bg-primary-500     { background-color: var(--rm-brand-cta) !important; }
.text-primary-400,
.text-primary-300   { color: var(--rm-brand-text) !important; }
.border-primary-500 { border-color: var(--rm-brand) !important; }
.ring-primary-500   { --tw-ring-color: var(--rm-brand); }

/* Status text utilities. The legacy screens colour status with Tailwind's own palette
   (emerald/red/amber/blue-400) — four hues that sit next to the tokens' four and never
   quite match. Same rule as above: only the utilities actually used are re-pointed.
   .text-accent never existed in the compiled sheet at all (no `accent` colour in
   tailwind.config), so 29 "success" labels rendered in plain text colour. */
.text-green-400,
.text-accent        { color: var(--rm-success) !important; }
.text-red-400,
.text-red-300       { color: var(--rm-danger)  !important; }
.text-yellow-400,
.text-yellow-500,
.text-yellow-300    { color: var(--rm-warning) !important; }
.text-blue-400      { color: var(--rm-info)    !important; }

/* ---------------------------------------------------------------
   5. FOCUS VISIBILITY  (group C — deliberate global rule)
   Keyboard focus was invisible on legacy controls. A focus ring is not
   decoration: without it the panel cannot be operated without a mouse.
   :focus-visible so pointer users never see it.

   The ring matches the one rados-v2.css already gives .rm-btn / .rm-iconbtn
   exactly (2px solid var(--rm-brand), 2px offset), so a V2 control that also
   matches `button:focus-visible` sees no change.

   NOTE: this rule used to set `border-radius` as well, which DID reshape V2
   controls while they were focused — the one genuine leak the scoping audit
   found. An outline follows the element's own border-radius anyway, so the
   declaration was doing nothing except that harm. Removed.
   --------------------------------------------------------------- */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.glass-card a:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--rm-brand);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   6. TOUCH TARGETS  (group C — deliberate global rule, legacy selectors)
   Anything tappable reaches the 44px minimum on touch devices. Applied by
   pointer type, so the desktop layout keeps its density. rados-v2.css has
   the same floor for .rm-* controls; this covers the legacy ones.
   --------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .input-field,
  select.input-field {
    min-height: 44px;
  }
  /* .btn-sm stays compact by design, but never below the tappable floor. */
  .btn-sm { min-height: 36px; }
}

/* ---------------------------------------------------------------
   7. MOTION  (group C — deliberate global rule)
   Respect the OS setting. The panel animates a lot for a tool people use
   all day. This one is intentionally universal: a user who asks for less
   motion means everywhere, not only on the unmigrated screens.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}