/* Liquid glass: translucent, blurred panels over a soft coloured backdrop, in light and dark themes.
   Loaded after styles.css and company.css so it only restyles surfaces, never layout. */
:root{
 --glass-bg:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.72));
 --glass-bg-strong:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,255,255,.84));
 --glass-well:rgba(255,255,255,.45);
 --glass-edge:rgba(255,255,255,.75);
 --glass-rim:rgba(32,91,75,.10);
 --glass-shine:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.25);
 --glass-shadow:0 8px 24px -14px rgba(23,60,48,.18),0 1px 4px -2px rgba(23,60,48,.06);
 --glass-blur:blur(20px) saturate(170%);
 --glass-backdrop:
  radial-gradient(42vw 42vw at 8% 12%,rgba(120,196,160,.30),transparent 70%),
  radial-gradient(38vw 38vw at 92% 8%,rgba(145,186,255,.26),transparent 70%),
  radial-gradient(46vw 46vw at 78% 88%,rgba(230,187,126,.22),transparent 70%),
  radial-gradient(36vw 36vw at 20% 92%,rgba(196,170,240,.18),transparent 70%),
  #f3f6f4;
}
:root[data-theme=dark]{
 --glass-bg:linear-gradient(145deg,rgba(40,60,96,.62),rgba(19,33,57,.42));
 --glass-bg-strong:linear-gradient(145deg,rgba(40,60,96,.86),rgba(19,33,57,.74));
 --glass-well:rgba(19,33,57,.32);
 --glass-edge:rgba(160,190,240,.22);
 --glass-rim:rgba(0,0,0,.35);
 --glass-shine:inset 0 1px 0 rgba(200,220,255,.18),inset 0 -1px 0 rgba(0,0,0,.25);
 --glass-shadow:0 14px 34px -12px rgba(0,0,0,.6),0 2px 6px -2px rgba(0,0,0,.35);
 --glass-backdrop:
  radial-gradient(42vw 42vw at 8% 12%,rgba(66,109,168,.45),transparent 70%),
  radial-gradient(38vw 38vw at 92% 8%,rgba(46,140,120,.30),transparent 70%),
  radial-gradient(46vw 46vw at 78% 88%,rgba(120,80,170,.28),transparent 70%),
  radial-gradient(36vw 36vw at 20% 92%,rgba(230,187,126,.14),transparent 70%),
  #0b1426;
}

/* The backdrop sits on a fixed layer so it stays put while scrolling (also on iOS). */
body{background:transparent}
body::before{content:'';position:fixed;inset:0;z-index:-1;background:var(--glass-backdrop);pointer-events:none}

/* Panels */
:is(.card,.metric,.objective-card,.task-card,.kpi-card,.admin-client,.map-card,.map-kr,.map-stat,.trash-row,.auth-preview,.about-principles article,.setup-progress li),
[data-theme=dark] :is(.card,.metric,.objective-card,.task-card,.kpi-card,.admin-client,.map-card,.map-kr,.map-stat,.trash-row,.auth-preview,.about-principles article,.setup-progress li){
 background:var(--glass-bg);
 -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
 border-color:var(--glass-edge);
 box-shadow:var(--glass-shine),0 0 0 1px var(--glass-rim),var(--glass-shadow);
}
/* Keep the coloured accent edges some panels use. */
.kpi-card{border-top-color:var(--green)}
.admin-client{border-left-color:var(--green)}
:is(.card,.metric,.objective-card,.task-card,.kpi-card,.admin-client,.map-card,.trash-row){transition:box-shadow .2s ease,transform .2s ease}
@media (hover:hover){
 :is(.objective-card,.task-card,.kpi-card,.admin-client,.map-card):hover{transform:translateY(-1px);box-shadow:var(--glass-shine),0 0 0 1px var(--glass-rim),0 18px 40px -14px rgba(23,60,48,.32)}
 [data-theme=dark] :is(.objective-card,.task-card,.kpi-card,.admin-client,.map-card):hover{box-shadow:var(--glass-shine),0 0 0 1px var(--glass-rim),0 20px 44px -14px rgba(0,0,0,.7)}
}

/* Recessed wells (kanban columns) read as a thinner sheet of glass. */
.board-column,[data-theme=dark] .board-column{background:var(--glass-well);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}

/* Chrome: sidebar, top bar and floating menus. */
.sidebar,.topbar,[data-theme=dark] :is(.sidebar,.topbar){background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--glass-edge)}
:is(.user-menu-panel,.notice-panel),[data-theme=dark] :is(.user-menu-panel,.notice-panel){background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);border-color:var(--glass-edge);box-shadow:var(--glass-shine),0 0 0 1px var(--glass-rim),0 24px 60px -16px rgba(16,42,51,.35)}

/* Dialogs float above a frosted page. */
dialog,[data-theme=dark] dialog{background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-color:var(--glass-edge);box-shadow:var(--glass-shine),0 0 0 1px var(--glass-rim),0 30px 100px rgba(16,42,51,.3)}
dialog::backdrop{background:rgba(20,40,32,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Mobile drawer needs to stay readable over the page it covers. */
body.nav-open .sidebar,[data-theme=dark] body.nav-open .sidebar{background:var(--glass-bg-strong)}

/* Without blur support, or when the user asks for less transparency, fall back to solid surfaces. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :root{--glass-bg:rgba(255,255,255,.94);--glass-bg-strong:#fff;--glass-well:rgba(255,255,255,.5)}
 :root[data-theme=dark]{--glass-bg:rgba(19,33,57,.95);--glass-bg-strong:#132139;--glass-well:rgba(19,33,57,.6)}
}
@media (prefers-reduced-transparency:reduce){
 :root{--glass-bg:#fff;--glass-bg-strong:#fff;--glass-well:#eef2ee}
 :root[data-theme=dark]{--glass-bg:#132139;--glass-bg-strong:#132139;--glass-well:#1a2b47}
}

/* Tiles as real glass: rim light on the edges, a specular sheen top-left, a caustic glow at the bottom,
   and the coloured inner surfaces (objective header, kanban columns, initiatives, post-its) made translucent
   so the blur shows through. :root prefixes beat the existing per-tile and dark-theme overrides. */
:root{
 --tile-base:linear-gradient(160deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.26) 55%,rgba(255,255,255,.44) 100%);
 --tile-sheen:radial-gradient(130% 70% at 0% 0%,rgba(255,255,255,.8),rgba(255,255,255,0) 55%);
 --tile-rim:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -22px 30px -26px rgba(255,255,255,.95);
 --tile-depth:0 0 0 1px rgba(23,60,48,.07),0 1px 2px rgba(23,60,48,.06),0 14px 30px -14px rgba(23,60,48,.26);
 --tile-depth-hover:0 0 0 1px rgba(23,60,48,.08),0 1px 2px rgba(23,60,48,.06),0 22px 44px -16px rgba(23,60,48,.34);
 --tile-tint:55%;
}
:root[data-theme=dark]{
 --tile-base:linear-gradient(160deg,rgba(52,76,118,.55) 0%,rgba(19,33,57,.34) 55%,rgba(34,52,86,.48) 100%);
 --tile-sheen:radial-gradient(130% 70% at 0% 0%,rgba(170,200,255,.18),rgba(170,200,255,0) 55%);
 --tile-rim:inset 1px 1px 0 rgba(200,222,255,.32),inset -1px -1px 0 rgba(200,222,255,.1),inset 0 0 0 1px rgba(200,222,255,.06),inset 0 -22px 30px -26px rgba(170,200,255,.35);
 --tile-depth:0 1px 1px rgba(0,0,0,.3),0 14px 32px -14px rgba(0,0,0,.65);
 --tile-depth-hover:0 1px 1px rgba(0,0,0,.3),0 22px 44px -16px rgba(0,0,0,.75);
 --tile-tint:42%;
}
:root :is(.card,.metric,.objective-card,.task-card,.kpi-card,.admin-client,.map-card,.map-kr,.map-stat,.trash-row),
:root[data-theme=dark] :is(.card,.metric,.objective-card,.task-card,.kpi-card,.admin-client,.map-card,.map-kr,.map-stat,.trash-row){
 background:var(--tile-sheen),var(--tile-base);
 -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
 border-color:rgba(255,255,255,.9);
 box-shadow:var(--tile-rim),var(--tile-depth);
}
:root[data-theme=dark] :is(.card,.metric,.objective-card,.task-card,.kpi-card,.admin-client,.map-card,.map-kr,.map-stat,.trash-row){border-color:rgba(160,190,240,.2)}
:root .objective-card.has-team,:root[data-theme=dark] .objective-card.has-team{background:var(--tile-sheen),linear-gradient(90deg,color-mix(in srgb,var(--team-color) 12%,transparent),transparent 45%),var(--tile-base);border-left-color:var(--team-color)}
@media (hover:hover){
 :root :is(.objective-card,.task-card,.kpi-card,.admin-client,.map-card,.map-kr,.metric):hover,
 :root[data-theme=dark] :is(.objective-card,.task-card,.kpi-card,.admin-client,.map-card,.map-kr,.metric):hover{box-shadow:var(--tile-rim),var(--tile-depth-hover)}
}

/* Coloured inner surfaces become tinted glass. */
:root .objective-top,:root[data-theme=dark] .objective-top{background:color-mix(in srgb,var(--objective-surface) var(--tile-tint),transparent)}
:root .objective-number,:root[data-theme=dark] .objective-number{background:color-mix(in srgb,var(--objective-surface) 70%,rgba(255,255,255,.35));box-shadow:inset 1px 1px 0 rgba(255,255,255,.7)}
:root[data-theme=dark] .objective-number{box-shadow:inset 1px 1px 0 rgba(200,222,255,.2)}
:root :is(.initiative-block,.initiative-overview>.card>.card-head),:root[data-theme=dark] :is(.initiative-block,.initiative-overview>.card>.card-head){background:color-mix(in srgb,var(--initiative-surface) var(--tile-tint),transparent)}
:root .initiative-task-row,:root[data-theme=dark] .initiative-task-row{background:color-mix(in srgb,var(--task-surface) var(--tile-tint),transparent);box-shadow:inset 1px 1px 0 rgba(255,255,255,.5)}
:root[data-theme=dark] .initiative-task-row{box-shadow:inset 1px 1px 0 rgba(200,222,255,.12)}
:root .board-column,:root[data-theme=dark] .board-column{background:color-mix(in srgb,var(--task-surface) 45%,transparent);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 1px 1px 0 rgba(255,255,255,.6),inset 0 2px 8px rgba(23,60,48,.05)}
:root .board-column:nth-child(2){background:color-mix(in srgb,#f5f1fb 45%,transparent)}
:root .board-column:nth-child(3){background:color-mix(in srgb,#f0f8f2 45%,transparent)}
:root[data-theme=dark] .board-column:nth-child(2){background:color-mix(in srgb,#302840 45%,transparent)}
:root[data-theme=dark] .board-column:nth-child(3){background:color-mix(in srgb,#1d382d 45%,transparent)}
:root .task-board .pending-column{background:color-mix(in srgb,#eef1f5 55%,transparent)}
:root[data-theme=dark] .task-board .pending-column{background:color-mix(in srgb,#26324a 45%,transparent)}
:root[data-theme=dark] .board-column{box-shadow:inset 1px 1px 0 rgba(200,222,255,.12),inset 0 2px 8px rgba(0,0,0,.25)}
/* Post-its keep their colour, as coloured glass. */
:root .team-postit,:root .team-board-section .team-postit{-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:var(--tile-rim),var(--tile-depth)}
:root .team-postit{background:var(--tile-sheen),color-mix(in srgb,#fff7cf 60%,transparent)}
:root .team-postit:nth-child(3n+2){background:var(--tile-sheen),color-mix(in srgb,#e9f5e9 60%,transparent)}
:root .team-postit:nth-child(3n){background:var(--tile-sheen),color-mix(in srgb,#fce9df 60%,transparent)}
:root .team-board-section .team-postit,:root .team-board-section .team-postit:nth-child(3n+2),:root .team-board-section .team-postit:nth-child(3n){background:var(--tile-sheen),color-mix(in srgb,var(--team-color) 14%,rgba(255,255,255,.5))}
:root[data-theme=dark] .team-board-section .team-postit,:root[data-theme=dark] .team-board-section .team-postit:nth-child(3n+2),:root[data-theme=dark] .team-board-section .team-postit:nth-child(3n){background:var(--tile-sheen),color-mix(in srgb,var(--team-color) 22%,rgba(19,33,57,.5))}

@media (prefers-reduced-transparency:reduce){
 :root{--tile-base:#fff;--tile-sheen:linear-gradient(transparent,transparent);--tile-tint:100%}
 :root[data-theme=dark]{--tile-base:#132139;--tile-tint:100%}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :root{--tile-base:rgba(255,255,255,.94);--tile-tint:100%}
 :root[data-theme=dark]{--tile-base:rgba(19,33,57,.95);--tile-tint:100%}
}