/**
 * ╔══════════════════════════════════════════════════════════════════════════╗
 * ║  ATLASSIAN DESIGN SYSTEM — Maximum Fidelity Override for Plane          ║
 * ║  v3.0 — Tokens + Components + Shadows + Typography + Interactions       ║
 * ╚══════════════════════════════════════════════════════════════════════════╝
 *
 * Strategy:
 *  • Use [data-theme*=dark], [data-theme*=dark] * pattern (same specificity
 *    as Plane's own rules) to override the lab() cascade — loaded LAST so wins
 *  • Add structural component overrides for Buttons, Cards, Inputs, Badges etc.
 *  • Atlassian shadow elevation system
 *  • Atlassian focus ring (3px blue offset)
 *
 * Atlassian Design Tokens: https://atlassian.design/foundations/tokens
 */

/* ════════════════════════════════════════════════════════════════════════════
   § 1. SHARED ROOT — Brand, Typography, Radius, Priority (both themes)
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand blue ── */
  --brand-default:  #0052CC;
  --brand-100:      #E6EDFF;
  --brand-200:      #CCE0FF;
  --brand-300:      #98C5FF;
  --brand-400:      #4C9AFF;
  --brand-500:      #2684FF;
  --brand-600:      #0065FF;
  --brand-700:      #1868DB;
  --brand-900:      #0747A6;
  --brand-1000:     #0638A0;
  --brand-1100:     #003884;
  --brand-1200:     #002669;

  /* ── Green (success) ── */
  --green-100:  #E3FCEF;
  --green-200:  #ABF5D1;
  --green-300:  #79F2C0;
  --green-400:  #57D9A3;
  --green-500:  #36B37E;
  --green-600:  #00875A;
  --green-700:  #006644;
  --green-800:  #005535;
  --green-900:  #003B25;

  /* ── Red (danger) ── */
  --red-100:  #FFEBE6;
  --red-200:  #FFBDAD;
  --red-300:  #FF8F73;
  --red-400:  #FF7452;
  --red-500:  #FF5630;
  --red-600:  #DE350B;
  --red-700:  #BF2600;
  --red-800:  #A51900;

  /* ── Amber (warning) ── */
  --amber-100:  #FFFAE6;
  --amber-200:  #FFF0B3;
  --amber-300:  #FFE380;
  --amber-400:  #FFC400;
  --amber-500:  #FFAB00;
  --amber-600:  #FF991F;
  --amber-700:  #FF8B00;
  --amber-800:  #E06600;

  /* ── Typography ── */
  --font-body: "Inter Variable","Inter",-apple-system,BlinkMacSystemFont,
               "Segoe UI",Roboto,sans-serif;

  /* ── Priority colours ── */
  --priority-urgent: #BF2600;
  --priority-high:   #FF5630;
  --priority-medium: #FFAB00;
  --priority-low:    #0065FF;
  --priority-none:   #97A0AF;

  /* ── Border radius (Atlassian: 3px default, 8px card, pill) ── */
  --radius-sm:  3px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-xl:  8px;
  --radius-2xl: 12px;

  /* ── Atlassian elevation shadows ── */
  --shadow-raised:  0px 1px 1px rgba(9,30,66,.25),0px 0px 1px rgba(9,30,66,.31);
  --shadow-overlay: 0px 8px 12px rgba(9,30,66,.15),0px 0px 1px rgba(9,30,66,.31);
  --shadow-modal:   0px 20px 32px -8px rgba(9,30,66,.25),0px 0px 1px rgba(9,30,66,.31);
}

/* ════════════════════════════════════════════════════════════════════════════
   § 2. LIGHT THEME — Full token override
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme=light],[data-theme=light] *,
[data-theme=light-contrast],[data-theme=light-contrast] * {
  /* Atlassian neutral N0–N800 */
  --neutral-white: #FFFFFF;
  --neutral-100:   #F4F5F7;
  --neutral-200:   #EBECF0;
  --neutral-300:   #DFE1E6;
  --neutral-400:   #C1C7D0;
  --neutral-500:   #B3BAC5;
  --neutral-600:   #A5ADBA;
  --neutral-700:   #97A0AF;
  --neutral-800:   #7A869A;
  --neutral-900:   #6B778C;
  --neutral-1000:  #5E6C84;
  --neutral-1100:  #344563;
  --neutral-1200:  #172B4D;
  --neutral-black: #091E42;

  /* Backgrounds */
  --bg-canvas:               #F4F5F7;
  --bg-surface-1:            #FFFFFF;
  --bg-surface-2:            #F4F5F7;
  --bg-layer-1:              #EBECF0;
  --bg-layer-1-hover:        #DFE1E6;
  --bg-layer-1-active:       #C1C7D0;
  --bg-layer-1-selected:     #CCE0FF;
  --bg-layer-2:              #FFFFFF;
  --bg-layer-2-hover:        #F4F5F7;
  --bg-layer-2-active:       #EBECF0;
  --bg-layer-2-selected:     #DEEBFF;
  --bg-layer-3:              #F4F5F7;
  --bg-layer-3-hover:        #EBECF0;
  --bg-layer-transparent-hover: rgba(9,30,66,.04);
  --bg-layer-transparent-active: rgba(9,30,66,.08);
  --bg-accent-primary:       #0052CC;
  --bg-accent-primary-hover: #0065FF;
  --bg-accent-primary-active: #0747A6;
  --bg-accent-subtle:        #DEEBFF;
  --bg-accent-subtle-hover:  #CCE0FF;
  --bg-success-primary:      #006644;
  --bg-success-subtle:       #E3FCEF;
  --bg-warning-primary:      #FF8B00;
  --bg-warning-subtle:       #FFFAE6;
  --bg-danger-primary:       #DE350B;
  --bg-danger-subtle:        #FFEBE6;
  --bg-backdrop:             rgba(9,30,66,.54);
  --bg-inverse:              #172B4D;

  /* Borders */
  --border-subtle:        #DFE1E6;
  --border-subtle-1:      #C1C7D0;
  --border-strong:        #97A0AF;
  --border-strong-1:      #7A869A;
  --border-inverse:       #FFFFFF;
  --border-disabled:      #EBECF0;
  --border-accent-strong: #0052CC;
  --border-accent-subtle: #98C5FF;
  --border-success-strong: #006644;
  --border-success-subtle: #ABF5D1;
  --border-warning-strong: #FF8B00;
  --border-warning-subtle: #FFE380;
  --border-danger-strong:  #DE350B;
  --border-danger-subtle:  #FFBDAD;

  /* Text */
  --txt-primary:           #172B4D;
  --txt-secondary:         #344563;
  --txt-tertiary:          #5E6C84;
  --txt-placeholder:       #7A869A;
  --txt-disabled:          #A5ADBA;
  --txt-accent-primary:    #0052CC;
  --txt-accent-secondary:  #0065FF;
  --txt-on-color:          #FFFFFF;
  --txt-inverse:           #FFFFFF;
  --txt-success-primary:   #006644;
  --txt-success-secondary: #00875A;
  --txt-warning-primary:   #7A2800;
  --txt-warning-secondary: #FF8B00;
  --txt-danger-primary:    #BF2600;
  --txt-danger-secondary:  #DE350B;
  --txt-link-primary:      #0052CC;
  --txt-link-primary-hover: #0747A6;
  --txt-icon-primary:      #172B4D;
  --txt-icon-secondary:    #344563;
  --txt-icon-tertiary:     #5E6C84;
  --txt-icon-accent-primary: #0052CC;
  --txt-icon-danger-primary: #BF2600;
  --txt-icon-success-primary: #006644;

  /* Scrollbar */
  --scrollbar-thumb:              #C1C7D0;
  --scrollbar-thumb-hover:        #97A0AF;
  --scrollbar-thumb-active:       #7A869A;
  --scrollbar-thumb-surface-hover: #B3BAC5;

  /* Editor */
  --editor-colors-dark-blue-background:  #CCE0FF;
  --editor-colors-dark-blue-text:        #172B4D;
  --editor-colors-light-blue-background: #DEEBFF;
  --editor-colors-light-blue-text:       #0747A6;
  --editor-colors-gray-background:       #EBECF0;
  --editor-colors-gray-text:             #344563;
  --editor-colors-green-background:      #E3FCEF;
  --editor-colors-green-text:            #006644;
  --editor-colors-orange-background:     #FFFAE6;
  --editor-colors-orange-text:           #7A2800;
  --editor-colors-pink-background:       #FFECF8;
  --editor-colors-pink-text:             #8B0051;
  --editor-colors-purple-background:     #EAE6FF;
  --editor-colors-purple-text:           #403294;
  --editor-colors-peach-background:      #FFEBE6;
  --editor-colors-peach-text:            #BF2600;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 3. DARK THEME — Full token override
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme=dark],[data-theme=dark] *,
[data-theme=dark-contrast],[data-theme=dark-contrast] * {
  /* Atlassian dark neutral */
  --neutral-white: #C7D1DB;
  --neutral-100:   #B6C2CF;
  --neutral-200:   #9FADBC;
  --neutral-300:   #8C9BAB;
  --neutral-400:   #738496;
  --neutral-500:   #596773;
  --neutral-600:   #454F59;
  --neutral-700:   #38414A;
  --neutral-800:   #2C333A;
  --neutral-900:   #22272B;
  --neutral-1000:  #1D2125;
  --neutral-1100:  #161A1D;
  --neutral-1200:  #101214;
  --neutral-black: #060B10;

  /* Backgrounds */
  --bg-canvas:               #1D2125;
  --bg-surface-1:            #22272B;
  --bg-surface-2:            #282E33;
  --bg-layer-1:              #2C333A;
  --bg-layer-1-hover:        #38414A;
  --bg-layer-1-active:       #454F59;
  --bg-layer-1-selected:     #1C2B41;
  --bg-layer-2:              #22272B;
  --bg-layer-2-hover:        #2C333A;
  --bg-layer-2-active:       #38414A;
  --bg-layer-2-selected:     #1C2B41;
  --bg-layer-3:              #282E33;
  --bg-layer-transparent-hover: rgba(166,197,255,.08);
  --bg-layer-transparent-active: rgba(166,197,255,.16);
  --bg-accent-primary:       #0055CC;
  --bg-accent-primary-hover: #0065FF;
  --bg-accent-primary-active: #0052CC;
  --bg-accent-subtle:        #1C2B41;
  --bg-accent-subtle-hover:  #09326C;
  --bg-success-primary:      #1F845A;
  --bg-success-subtle:       #164B35;
  --bg-warning-primary:      #E2812D;
  --bg-warning-subtle:       #533F04;
  --bg-danger-primary:       #CA3521;
  --bg-danger-subtle:        #42221F;
  --bg-backdrop:             rgba(3,4,4,.54);
  --bg-inverse:              #C7D1DB;

  /* Borders */
  --border-subtle:        #2C333A;
  --border-subtle-1:      #38414A;
  --border-strong:        #454F59;
  --border-strong-1:      #596773;
  --border-inverse:       #1D2125;
  --border-disabled:      #2C333A;
  --border-accent-strong: #4C9AFF;
  --border-accent-subtle: #1C2B41;
  --border-success-strong: #4BCE97;
  --border-success-subtle: #164B35;
  --border-warning-strong: #F5CD47;
  --border-warning-subtle: #533F04;
  --border-danger-strong:  #F87168;
  --border-danger-subtle:  #42221F;

  /* Text */
  --txt-primary:           #C7D1DB;
  --txt-secondary:         #9FADBC;
  --txt-tertiary:          #8C9BAB;
  --txt-placeholder:       #596773;
  --txt-disabled:          #454F59;
  --txt-accent-primary:    #4C9AFF;
  --txt-accent-secondary:  #85B8FF;
  --txt-on-color:          #FFFFFF;
  --txt-inverse:           #1D2125;
  --txt-success-primary:   #4BCE97;
  --txt-success-secondary: #7EE2B8;
  --txt-warning-primary:   #F5CD47;
  --txt-warning-secondary: #F8E6A0;
  --txt-danger-primary:    #F87168;
  --txt-danger-secondary:  #FFA898;
  --txt-link-primary:      #4C9AFF;
  --txt-link-primary-hover: #85B8FF;
  --txt-icon-primary:      #C7D1DB;
  --txt-icon-secondary:    #9FADBC;
  --txt-icon-tertiary:     #8C9BAB;
  --txt-icon-accent-primary: #4C9AFF;
  --txt-icon-danger-primary: #F87168;
  --txt-icon-success-primary: #4BCE97;

  /* Brand in dark — lighter for contrast */
  --brand-default:  #4C9AFF;
  --brand-400:      #85B8FF;
  --brand-700:      #8AB5FF;
  --brand-900:      #CCE0FF;

  /* Scrollbar */
  --scrollbar-thumb:              #454F59;
  --scrollbar-thumb-hover:        #596773;
  --scrollbar-thumb-active:       #738496;
  --scrollbar-thumb-surface-hover: #596773;

  /* Shadows — dark */
  --shadow-raised:  0px 1px 1px rgba(3,4,4,.4),0px 0px 1px rgba(3,4,4,.5);
  --shadow-overlay: 0px 8px 12px rgba(3,4,4,.4),0px 0px 1px rgba(3,4,4,.5);
  --shadow-modal:   0px 20px 32px -8px rgba(3,4,4,.4),0px 0px 1px rgba(3,4,4,.5);
}

/* ════════════════════════════════════════════════════════════════════════════
   § 4. GLOBAL RESETS — Atlassian base
   ════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Smooth transitions for theme switching — somente em elementos interativos */
button, a, input, textarea, select,
[class*="sidebar"], [class*="nav-item"], [class*="menu-item"] {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 5. BUTTONS — Atlassian exact proportions
   ════════════════════════════════════════════════════════════════════════════ */

/* Primary button */
[data-theme=light] button[class*="bg-accent-primary"],
[data-theme=light-contrast] button[class*="bg-accent-primary"],
[data-theme=light] a[class*="bg-accent-primary"] {
  background-color: #0052CC !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 3px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

[data-theme=light] button[class*="bg-accent-primary"]:hover,
[data-theme=light] a[class*="bg-accent-primary"]:hover {
  background-color: #0065FF !important;
}

[data-theme=light] button[class*="bg-accent-primary"]:active {
  background-color: #0747A6 !important;
}

/* Dark primary button */
[data-theme=dark] button[class*="bg-accent-primary"],
[data-theme=dark-contrast] button[class*="bg-accent-primary"] {
  background-color: #0055CC !important;
  color: #FFFFFF !important;
  border-radius: 3px !important;
}

[data-theme=dark] button[class*="bg-accent-primary"]:hover {
  background-color: #0065FF !important;
}

/* Subtle/transparent buttons */
[data-theme=light] button[class*="bg-layer-transparent"],
[data-theme=light-contrast] button[class*="bg-layer-transparent"] {
  color: #172B4D !important;
  border-radius: 3px !important;
}

[data-theme=light] button[class*="bg-layer-transparent"]:hover,
[data-theme=light-contrast] button[class*="bg-layer-transparent"]:hover {
  background-color: rgba(9,30,66,.04) !important;
}

/* Focus visible — Atlassian blue ring */
*:focus-visible {
  outline: 2px solid #4C9AFF !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

[data-theme=light] *:focus-visible,
[data-theme=light-contrast] *:focus-visible {
  outline-color: #4C9AFF !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 6. INPUT FIELDS — Atlassian style
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme=light] input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
[data-theme=light] textarea,
[data-theme=light-contrast] input:not([type=checkbox]):not([type=radio]),
[data-theme=light-contrast] textarea {
  border: 2px solid #DFE1E6 !important;
  border-radius: 3px !important;
  background-color: #FFFFFF !important;
  color: #172B4D !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

[data-theme=light] input:focus,
[data-theme=light] textarea:focus {
  border-color: #4C9AFF !important;
  box-shadow: 0 0 0 2px rgba(76,154,255,.2) !important;
  outline: none !important;
}

[data-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=color]),
[data-theme=dark] textarea {
  border: 2px solid #38414A !important;
  border-radius: 3px !important;
  background-color: #22272B !important;
  color: #C7D1DB !important;
}

[data-theme=dark] input:focus,
[data-theme=dark] textarea:focus {
  border-color: #4C9AFF !important;
  box-shadow: 0 0 0 2px rgba(76,154,255,.2) !important;
  outline: none !important;
}

/* Search bar */
[data-theme=light] input[placeholder*="Search"],
[data-theme=light] input[placeholder*="search"],
[data-theme=light] input[placeholder*="Buscar"],
[data-theme=light] input[placeholder*="buscar"],
[data-theme=light] input[placeholder*="Pesquisar"],
[data-theme=light] input[placeholder*="commands"] {
  background-color: #F4F5F7 !important;
  border: 2px solid #DFE1E6 !important;
  border-radius: 6px !important;
  color: #172B4D !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 7. CARDS & PANELS — Atlassian raised elevation
   ════════════════════════════════════════════════════════════════════════════ */

/* Light mode cards */
[data-theme=light] [class*="bg-surface-1"][class*="border"][class*="rounded"],
[data-theme=light-contrast] [class*="bg-surface-1"][class*="border"][class*="rounded"] {
  box-shadow: 0px 1px 1px rgba(9,30,66,.25),0px 0px 1px rgba(9,30,66,.31) !important;
  border-color: #DFE1E6 !important;
}

/* Dark mode cards */
[data-theme=dark] [class*="bg-surface-1"][class*="border"][class*="rounded"],
[data-theme=dark-contrast] [class*="bg-surface-1"][class*="border"][class*="rounded"] {
  box-shadow: 0px 1px 1px rgba(3,4,4,.4),0px 0px 1px rgba(3,4,4,.5) !important;
  border-color: #2C333A !important;
}

/* Kanban cards hover effect */
[data-theme=light] [class*="bg-surface-1"]:hover:where([class*="cursor-pointer"],[class*="draggable"]) {
  box-shadow: 0px 4px 8px rgba(9,30,66,.15),0px 0px 1px rgba(9,30,66,.31) !important;
  transform: translateY(-1px);
}

[data-theme=dark] [class*="bg-surface-1"]:hover:where([class*="cursor-pointer"],[class*="draggable"]) {
  box-shadow: 0px 4px 8px rgba(3,4,4,.4),0px 0px 1px rgba(3,4,4,.5) !important;
  transform: translateY(-1px);
}

/* Dropdown / popover panels */
[data-theme=light] [role=dialog],
[data-theme=light] [role=listbox],
[data-theme=light] [role=menu],
[data-theme=light] [data-radix-popper-content-wrapper] {
  box-shadow: 0px 8px 12px rgba(9,30,66,.15),0px 0px 1px rgba(9,30,66,.31) !important;
  border-radius: 8px !important;
  border: 1px solid #DFE1E6 !important;
}

[data-theme=dark] [role=dialog],
[data-theme=dark] [role=listbox],
[data-theme=dark] [role=menu],
[data-theme=dark] [data-radix-popper-content-wrapper] {
  box-shadow: 0px 8px 12px rgba(3,4,4,.4),0px 0px 1px rgba(3,4,4,.5) !important;
  border-radius: 8px !important;
  border: 1px solid #38414A !important;
  background-color: #22272B !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 8. SIDEBAR — Atlassian navigation panel
   ════════════════════════════════════════════════════════════════════════════ */

/* Light sidebar */
[data-theme=light] .h-full.bg-surface-1.border-r,
[data-theme=light-contrast] .h-full.bg-surface-1.border-r {
  background-color: #FFFFFF !important;
  border-right: 1px solid #DFE1E6 !important;
  box-shadow: 1px 0 0 #DFE1E6 !important;
}

/* Dark sidebar — Atlassian darkest nav */
[data-theme=dark] .h-full.bg-surface-1.border-r,
[data-theme=dark-contrast] .h-full.bg-surface-1.border-r {
  background-color: #161A1D !important;
  border-right: 1px solid #2C333A !important;
}

/* Sidebar nav items — hover */
[data-theme=light] .h-full.bg-surface-1.border-r [class*="rounded"][class*="hover"] {
  border-radius: 3px !important;
}

/* Sidebar selected nav item */
[data-theme=light] .h-full.bg-surface-1.border-r [class*="bg-layer-1-selected"] {
  background-color: #DEEBFF !important;
  color: #0052CC !important;
  border-radius: 3px !important;
}

[data-theme=dark] .h-full.bg-surface-1.border-r [class*="bg-layer-1-selected"] {
  background-color: #1C2B41 !important;
  color: #4C9AFF !important;
  border-radius: 3px !important;
}

/* Sidebar section labels */
[data-theme=light] .h-full.bg-surface-1.border-r [class*="text-tertiary"],
[data-theme=light-contrast] .h-full.bg-surface-1.border-r [class*="text-tertiary"] {
  color: #5E6C84 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 9. TOPBAR / HEADER — Atlassian top navigation
   ════════════════════════════════════════════════════════════════════════════ */

/* Light header */
[data-theme=light] .desktop-header,
[data-theme=light-contrast] .desktop-header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #DFE1E6 !important;
  box-shadow: 0 1px 0 #DFE1E6 !important;
}

/* Dark header */
[data-theme=dark] .desktop-header,
[data-theme=dark-contrast] .desktop-header {
  background-color: #22272B !important;
  border-bottom: 1px solid #2C333A !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 10. STATUS BADGES / LOZENGES — Atlassian lozenge style
   ════════════════════════════════════════════════════════════════════════════ */

/* Base lozenge style for all status tags */
[class*="rounded-full"][class*="border"][class*="bg-"],
[class*="rounded"][class*="text-"][class*="bg-"][class*="px-"] {
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 2px 4px !important;
  height: auto !important;
}

/* Work item priority icons — Atlassian colors */
[class*="priority"][class*="urgent"],
svg[class*="urgent"],
[data-priority="urgent"] { color: #BF2600 !important; }

[class*="priority"][class*="high"],
svg[class*="high"],
[data-priority="high"] { color: #FF5630 !important; }

[class*="priority"][class*="medium"],
svg[class*="medium"],
[data-priority="medium"] { color: #FFAB00 !important; }

[class*="priority"][class*="low"],
svg[class*="low"],
[data-priority="low"] { color: #0065FF !important; }

/* ════════════════════════════════════════════════════════════════════════════
   § 11. LINKS — Atlassian blue
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme=light] a:not([class*="btn"]):not([class*="button"]):not([class*="nav"]) {
  color: #0052CC !important;
  text-decoration: none !important;
}

[data-theme=light] a:not([class*="btn"]):not([class*="button"]):hover {
  color: #0747A6 !important;
  text-decoration: underline !important;
}

[data-theme=dark] a:not([class*="btn"]):not([class*="button"]):not([class*="nav"]) {
  color: #4C9AFF !important;
  text-decoration: none !important;
}

[data-theme=dark] a:not([class*="btn"]):not([class*="button"]):hover {
  color: #85B8FF !important;
  text-decoration: underline !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 12. AVATARS — Atlassian style
   ════════════════════════════════════════════════════════════════════════════ */
[class*="rounded-full"][class*="text-"][style*="background"] {
  box-shadow: 0 0 0 2px #FFFFFF !important;
}

[data-theme=dark] [class*="rounded-full"][class*="text-"][style*="background"] {
  box-shadow: 0 0 0 2px #1D2125 !important;
}

/* Avatar ring on hover */
[class*="rounded-full"][class*="text-"]:hover {
  box-shadow: 0 0 0 2px #4C9AFF !important;
  transition: box-shadow .1s ease !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 13. KANBAN BOARD — Atlassian board styling
   ════════════════════════════════════════════════════════════════════════════ */

/* Column headers */
[data-theme=light] [class*="flex"][class*="items-center"][class*="gap"][class*="font-semibold"],
[data-theme=light-contrast] [class*="flex"][class*="items-center"][class*="gap"][class*="font-semibold"] {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #172B4D !important;
  letter-spacing: 0 !important;
}

/* Backlog/Status column count badge */
[class*="rounded-full"][class*="text-"][class*="bg-"][class*="size-"] {
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 14. MODALS & OVERLAYS — Atlassian modal style
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme=light] [role=dialog][class*="rounded"],
[data-theme=light-contrast] [role=dialog][class*="rounded"] {
  background-color: #FFFFFF !important;
  border-radius: 8px !important;
  box-shadow: 0px 20px 32px -8px rgba(9,30,66,.25),
              0px 0px 1px rgba(9,30,66,.31) !important;
  border: none !important;
}

[data-theme=dark] [role=dialog][class*="rounded"],
[data-theme=dark-contrast] [role=dialog][class*="rounded"] {
  background-color: #282E33 !important;
  border-radius: 8px !important;
  box-shadow: 0px 20px 32px -8px rgba(3,4,4,.4),
              0px 0px 1px rgba(3,4,4,.5) !important;
}

/* Backdrop overlay */
[data-theme=light] [class*="bg-backdrop"],
[data-theme=light-contrast] [class*="bg-backdrop"] {
  background-color: rgba(9,30,66,.54) !important;
  backdrop-filter: blur(2px) !important;
}

[data-theme=dark] [class*="bg-backdrop"],
[data-theme=dark-contrast] [class*="bg-backdrop"] {
  background-color: rgba(3,4,4,.54) !important;
  backdrop-filter: blur(2px) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 15. SCROLLBARS — Atlassian thin style
   ════════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

[data-theme=light] ::-webkit-scrollbar-thumb,
[data-theme=light-contrast] ::-webkit-scrollbar-thumb {
  background-color: #C1C7D0;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-theme=light] ::-webkit-scrollbar-thumb:hover,
[data-theme=light-contrast] ::-webkit-scrollbar-thumb:hover {
  background-color: #97A0AF;
}

[data-theme=dark] ::-webkit-scrollbar-thumb,
[data-theme=dark-contrast] ::-webkit-scrollbar-thumb {
  background-color: #454F59;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-theme=dark] ::-webkit-scrollbar-thumb:hover,
[data-theme=dark-contrast] ::-webkit-scrollbar-thumb:hover {
  background-color: #596773;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 16. TYPOGRAPHY — Atlassian type scale
   ════════════════════════════════════════════════════════════════════════════ */

/* Page headings */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Code / monospace */
code, pre, kbd, samp {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: .875em !important;
}

/* Body text quality */
body {
  font-family: "Inter Variable","Inter",-apple-system,BlinkMacSystemFont,
               "Segoe UI",Roboto,sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 17. BREADCRUMBS — Atlassian path navigation
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme=light] [class*="breadcrumb"],
[data-theme=light] nav[aria-label="breadcrumb"] {
  color: #5E6C84 !important;
  font-size: 12px !important;
}

[data-theme=light] [class*="breadcrumb"] a,
[data-theme=light] nav[aria-label="breadcrumb"] a {
  color: #5E6C84 !important;
}

[data-theme=light] [class*="breadcrumb"] a:hover,
[data-theme=light] nav[aria-label="breadcrumb"] a:hover {
  color: #172B4D !important;
  text-decoration: underline !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 18. TOOLTIPS — Atlassian tooltip style
   ════════════════════════════════════════════════════════════════════════════ */
[role=tooltip] {
  background-color: #172B4D !important;
  color: #FFFFFF !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  box-shadow: 0px 4px 8px rgba(9,30,66,.25) !important;
  max-width: 240px !important;
}

[data-theme=dark] [role=tooltip] {
  background-color: #E8EAED !important;
  color: #172B4D !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 19. CHECKBOXES & RADIO — Atlassian form controls
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme=light] input[type=checkbox],
[data-theme=light-contrast] input[type=checkbox] {
  accent-color: #0052CC !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
}

[data-theme=light] input[type=radio],
[data-theme=light-contrast] input[type=radio] {
  accent-color: #0052CC !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

[data-theme=dark] input[type=checkbox],
[data-theme=dark-contrast] input[type=checkbox] {
  accent-color: #4C9AFF !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 20. NOTIFICATION TOASTS — Atlassian flag style
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme=light] [class*="toast"],
[data-theme=light] [class*="notification"],
[data-theme=light] [role=alert] {
  border-radius: 8px !important;
  border-left: 4px solid #0052CC !important;
  box-shadow: 0px 8px 12px rgba(9,30,66,.15),0px 0px 1px rgba(9,30,66,.31) !important;
}

[data-theme=dark] [class*="toast"],
[data-theme=dark] [class*="notification"],
[data-theme=dark] [role=alert] {
  border-radius: 8px !important;
  border-left: 4px solid #4C9AFF !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 21. SELECTIONS / HIGHLIGHTS — Atlassian blue tint
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme=light] ::selection {
  background-color: #CCE0FF !important;
  color: #172B4D !important;
}

[data-theme=dark] ::selection {
  background-color: #1C2B41 !important;
  color: #C7D1DB !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 22. SKELETON LOADERS — Atlassian shimmer
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme=light] [class*="animate-pulse"],
[data-theme=light-contrast] [class*="animate-pulse"] {
  background: linear-gradient(90deg,#EBECF0 25%,#DFE1E6 50%,#EBECF0 75%) !important;
  background-size: 200% 100% !important;
  animation: atlassian-shimmer 1.5s infinite !important;
  border-radius: 3px !important;
}

[data-theme=dark] [class*="animate-pulse"],
[data-theme=dark-contrast] [class*="animate-pulse"] {
  background: linear-gradient(90deg,#2C333A 25%,#38414A 50%,#2C333A 75%) !important;
  background-size: 200% 100% !important;
  animation: atlassian-shimmer 1.5s infinite !important;
}

@keyframes atlassian-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   § 23. DIVIDERS — Atlassian separator style
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme=light] hr,
[data-theme=light-contrast] hr {
  border-color: #DFE1E6 !important;
  border-width: 1px 0 0 !important;
  margin: 8px 0 !important;
}

[data-theme=dark] hr,
[data-theme=dark-contrast] hr {
  border-color: #2C333A !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 24. ICONS — Size and color consistency
   ════════════════════════════════════════════════════════════════════════════ */

/* Icon opacity in disabled state */
[disabled] svg, [aria-disabled=true] svg {
  opacity: 0.4 !important;
}

/* Sidebar icons — Atlassian size 16px */
[data-theme=light] .h-full.bg-surface-1.border-r svg {
  color: #344563 !important;
}

[data-theme=dark] .h-full.bg-surface-1.border-r svg {
  color: #9FADBC !important;
}

/* Selected sidebar icon */
[data-theme=light] .h-full.bg-surface-1.border-r [class*="bg-layer-1-selected"] svg {
  color: #0052CC !important;
}

[data-theme=dark] .h-full.bg-surface-1.border-r [class*="bg-layer-1-selected"] svg {
  color: #4C9AFF !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 25. HIDE UPGRADE BUTTON — belt + suspenders (JS patch already applied)
   ════════════════════════════════════════════════════════════════════════════ */
[class*="h-12"][class*="border-t"][class*="bg-surface-1"],
[class*="h-12"][class*="border-t"][class*="flex"][class*="items-center"] {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   § 26. CRITICAL CSS VARIABLE override (theme-init inline style)
   ════════════════════════════════════════════════════════════════════════════ */
/* Override the inline background set by theme-init script for light mode */
html[data-theme=light] { background-color: #F4F5F7 !important; }
html[data-theme=dark]  { background-color: #1D2125 !important; }