/* TS HQ semantic interaction system. Paired with assets/interaction-system.js (data-isx-* hooks).
   Acid = create, claim, save · blue = contact · violet = viewing and calendar · amber = offer
   preparation · restrained red = destructive business action · neutral = inspect, back, copy, filters.
   One solid action per group; labels always stay visible, colour is never the only cue.
   `:not(#isx)` lifts specificity above page-scoped ID rules without !important. */

/* Tokens, light. sb/sh/sf/sd = solid bg/hover/text/border · tb/tf/td = tint bg/text/border ·
   ic = icon on surface · tx = text on surface. Every text pair is AA 4.5:1, icons and edges 3:1. */
html[data-ui="v3"]{
  --isx-create-sb:#c6ff3f;--isx-create-sh:#b5f02a;--isx-create-sf:#111310;--isx-create-sd:#8fbd1d;--isx-create-tb:#eefbcc;--isx-create-tf:#111310;--isx-create-td:#b6dc55;--isx-create-ic:#3f6b00;--isx-create-tx:#3f6b00;
  --isx-contact-sb:#1f5bd8;--isx-contact-sh:#1a4ebd;--isx-contact-sf:#fff;--isx-contact-sd:#1a4ebd;--isx-contact-tb:#e8f0ff;--isx-contact-tf:#163f8a;--isx-contact-td:#bcd0f6;--isx-contact-ic:#1f5bd8;--isx-contact-tx:#1a4ebd;
  --isx-schedule-sb:#5a3fd0;--isx-schedule-sh:#4b33b8;--isx-schedule-sf:#fff;--isx-schedule-sd:#4b33b8;--isx-schedule-tb:#efebff;--isx-schedule-tf:#3d2a9e;--isx-schedule-td:#d3c9fb;--isx-schedule-ic:#5a3fd0;--isx-schedule-tx:#4b33b8;
  --isx-offer-sb:#f2a516;--isx-offer-sh:#e3970b;--isx-offer-sf:#111310;--isx-offer-sd:#c98508;--isx-offer-tb:#fff1d6;--isx-offer-tf:#6b3f00;--isx-offer-td:#efcd86;--isx-offer-ic:#a55f00;--isx-offer-tx:#6b3f00;
  --isx-danger-sb:#b42318;--isx-danger-sh:#9a1d13;--isx-danger-sf:#fff;--isx-danger-sd:#9a1d13;--isx-danger-tb:#fdecea;--isx-danger-tf:#9c2d1c;--isx-danger-td:#efb8ad;--isx-danger-ic:#b42318;--isx-danger-tx:#9c2d1c;
  --isx-neutral-sb:#111310;--isx-neutral-sh:#282c25;--isx-neutral-sf:#fff;--isx-neutral-sd:#111310;--isx-neutral-tb:#f1f0ea;--isx-neutral-tf:#111310;--isx-neutral-td:rgba(17,19,16,.24);--isx-neutral-ic:#5f635b;--isx-neutral-tx:#111310;
  --isx-focus:#111310
}
/* Dark theme and the ink panels that stay dark in the light theme. */
html[data-ui="v3"][data-theme="dark"],
html[data-ui="v3"] :is(#ofSummaryCard,.v3-cal-brief,.v3-action-center,#finContent>.bento>.card.col-12){
  --isx-create-sb:#c6ff3f;--isx-create-sh:#d6ff7a;--isx-create-sf:#111310;--isx-create-sd:#c6ff3f;--isx-create-tb:rgba(198,255,63,.13);--isx-create-tf:#ecffc6;--isx-create-td:rgba(198,255,63,.42);--isx-create-ic:#c6ff3f;--isx-create-tx:#c6ff3f;
  --isx-contact-sb:#8db4ff;--isx-contact-sh:#a6c4ff;--isx-contact-sf:#0d1a33;--isx-contact-sd:#8db4ff;--isx-contact-tb:rgba(110,160,255,.16);--isx-contact-tf:#d6e4ff;--isx-contact-td:rgba(141,180,255,.42);--isx-contact-ic:#8db4ff;--isx-contact-tx:#a6c4ff;
  --isx-schedule-sb:#b9a8ff;--isx-schedule-sh:#cabdff;--isx-schedule-sf:#1b1240;--isx-schedule-sd:#b9a8ff;--isx-schedule-tb:rgba(170,150,255,.16);--isx-schedule-tf:#e6e0ff;--isx-schedule-td:rgba(185,168,255,.42);--isx-schedule-ic:#b9a8ff;--isx-schedule-tx:#cabdff;
  --isx-offer-sb:#ffc266;--isx-offer-sh:#ffcf85;--isx-offer-sf:#2b1a00;--isx-offer-sd:#ffc266;--isx-offer-tb:rgba(255,180,70,.15);--isx-offer-tf:#ffe2b5;--isx-offer-td:rgba(255,194,102,.42);--isx-offer-ic:#ffc266;--isx-offer-tx:#ffcf85;
  --isx-danger-sb:#ff8a75;--isx-danger-sh:#ffa08e;--isx-danger-sf:#2a0a04;--isx-danger-sd:#ff8a75;--isx-danger-tb:rgba(255,120,100,.13);--isx-danger-tf:#ffc2b5;--isx-danger-td:rgba(255,155,133,.42);--isx-danger-ic:#ff9b85;--isx-danger-tx:#ffc2b5;
  --isx-neutral-sb:#f7f7f1;--isx-neutral-sh:#fff;--isx-neutral-sf:#111310;--isx-neutral-sd:#f7f7f1;--isx-neutral-tb:rgba(255,255,255,.08);--isx-neutral-tf:#f7f7f1;--isx-neutral-td:rgba(255,255,255,.24);--isx-neutral-ic:#c1c5ba;--isx-neutral-tx:#f7f7f1;
  --isx-focus:#c6ff3f
}
html[data-ui="v3"] [data-isx-tone="create"]{--isx-sb:var(--isx-create-sb);--isx-sh:var(--isx-create-sh);--isx-sf:var(--isx-create-sf);--isx-sd:var(--isx-create-sd);--isx-tb:var(--isx-create-tb);--isx-tf:var(--isx-create-tf);--isx-td:var(--isx-create-td);--isx-ic:var(--isx-create-ic);--isx-tx:var(--isx-create-tx)}
html[data-ui="v3"] [data-isx-tone="contact"]{--isx-sb:var(--isx-contact-sb);--isx-sh:var(--isx-contact-sh);--isx-sf:var(--isx-contact-sf);--isx-sd:var(--isx-contact-sd);--isx-tb:var(--isx-contact-tb);--isx-tf:var(--isx-contact-tf);--isx-td:var(--isx-contact-td);--isx-ic:var(--isx-contact-ic);--isx-tx:var(--isx-contact-tx)}
html[data-ui="v3"] [data-isx-tone="schedule"]{--isx-sb:var(--isx-schedule-sb);--isx-sh:var(--isx-schedule-sh);--isx-sf:var(--isx-schedule-sf);--isx-sd:var(--isx-schedule-sd);--isx-tb:var(--isx-schedule-tb);--isx-tf:var(--isx-schedule-tf);--isx-td:var(--isx-schedule-td);--isx-ic:var(--isx-schedule-ic);--isx-tx:var(--isx-schedule-tx)}
html[data-ui="v3"] [data-isx-tone="offer"]{--isx-sb:var(--isx-offer-sb);--isx-sh:var(--isx-offer-sh);--isx-sf:var(--isx-offer-sf);--isx-sd:var(--isx-offer-sd);--isx-tb:var(--isx-offer-tb);--isx-tf:var(--isx-offer-tf);--isx-td:var(--isx-offer-td);--isx-ic:var(--isx-offer-ic);--isx-tx:var(--isx-offer-tx)}
html[data-ui="v3"] [data-isx-tone="danger"]{--isx-sb:var(--isx-danger-sb);--isx-sh:var(--isx-danger-sh);--isx-sf:var(--isx-danger-sf);--isx-sd:var(--isx-danger-sd);--isx-tb:var(--isx-danger-tb);--isx-tf:var(--isx-danger-tf);--isx-td:var(--isx-danger-td);--isx-ic:var(--isx-danger-ic);--isx-tx:var(--isx-danger-tx)}
html[data-ui="v3"] [data-isx-tone="neutral"]{--isx-sb:var(--isx-neutral-sb);--isx-sh:var(--isx-neutral-sh);--isx-sf:var(--isx-neutral-sf);--isx-sd:var(--isx-neutral-sd);--isx-tb:var(--isx-neutral-tb);--isx-tf:var(--isx-neutral-tf);--isx-td:var(--isx-neutral-td);--isx-ic:var(--isx-neutral-ic);--isx-tx:var(--isx-neutral-tx)}

/* Icons. The added SVG never takes clicks: event targets stay the control itself. */
.isx-ico{display:inline-block;flex:none;width:18px;height:18px;vertical-align:-.22em;overflow:visible;pointer-events:none}
html[data-ui="v3"] :is(.btn,.tc-adv,.wl-contact a)>.isx-ico{width:18px;height:18px}
html[data-ui="v3"] :is(.btn-sm,.ctx-item,.tc-adv)>.isx-ico{width:16px;height:16px}
html[data-ui="v3"] [data-isx-gap="0"]:not(.icon-btn)>.isx-ico:first-child{margin-inline-end:.45em}
html[data-ui="v3"] [data-isx-gap="0"]:not(.icon-btn)>.isx-ico:last-child:not(:first-child){margin-inline-start:.45em}
html[data-ui="v3"] [data-isx-swap]>span[aria-hidden="true"]{display:none}
/* The shell sprite is a stroke family; bare <svg><use> references used to render as filled blobs. */
html[data-ui="v3"] svg:has(>use[href^="#i-"]){fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* Plain glyphs everywhere: no circular chips behind icons inside decorated buttons. */
html[data-ui="v3"] :is(.btn,.tc-adv)[data-isx-emph]>svg:not(#isx){padding:0;border-radius:0;background:none;box-shadow:none}
html[data-ui="v3"] #page-oferte #ofSummaryCard .btn[data-isx-emph]>svg:not(#isx){padding:0;border-radius:0;background:none;color:currentColor}

/* Solid: the single primary of its group. */
html[data-ui="v3"] :is(.btn,.tc-adv)[data-isx-emph="solid"]:not(#isx){border-color:var(--isx-sd);background:var(--isx-sb);color:var(--isx-sf);box-shadow:none}
html[data-ui="v3"] :is(.btn,.tc-adv)[data-isx-emph="solid"]:not(#isx):hover:not(:disabled){border-color:var(--isx-sd);background:var(--isx-sh);box-shadow:0 8px 20px color-mix(in srgb,var(--isx-sb) 26%,transparent)}
/* Soft: a different kind of action next to the primary, or the only coloured action of its group. */
html[data-ui="v3"] :is(.btn,.tc-adv,.wl-contact a)[data-isx-emph="soft"]:not(#isx){border-color:var(--isx-td);background:var(--isx-tb);color:var(--isx-tf);box-shadow:none}
html[data-ui="v3"] :is(.btn,.tc-adv,.wl-contact a)[data-isx-emph="soft"]:not(#isx):hover:not(:disabled){border-color:var(--isx-ic);background:color-mix(in srgb,var(--isx-tb) 70%,var(--isx-td))}
html[data-ui="v3"] #page-oferte #ofSummaryCard .btn[data-isx-emph="soft"]:not(#isx){border-color:var(--isx-td);background:var(--isx-tb);color:var(--isx-tf)}
/* Outline: neutral surface; the role colour lives in the icon and the hover tint. */
html[data-ui="v3"] .tc-adv[data-isx-emph="outline"]:not(#isx){border:1px solid var(--border-strong);background:var(--surface);color:var(--text)}
html[data-ui="v3"] .btn.btn-primary[data-isx-emph="outline"]:not(#isx){border-color:var(--border-strong);background:var(--surface);color:var(--text);box-shadow:none}
html[data-ui="v3"] :is(.btn,.tc-adv,.wl-contact a)[data-isx-emph="outline"]:not([data-isx-tone="neutral"]):not(#isx):hover:not(:disabled){border-color:var(--isx-td);background:var(--isx-tb)}
/* Dense rows carry no added glyph, so the label itself takes the role colour. */
html[data-ui="v3"] :is(.row-act,td)>.btn[data-isx-emph="outline"]:is([data-isx-tone="create"],[data-isx-tone="contact"],[data-isx-tone="schedule"],[data-isx-tone="offer"]):not(#isx){border-color:var(--isx-td);color:var(--isx-tx)}
/* Destructive business actions: restrained red text and edge, never a full red fill outside a
   confirmation. !important only overrides the inline color:var(--red) (#EF4444, 3.7:1 on paper). */
html[data-ui="v3"] :is(.btn,.tc-adv,.ctx-item)[data-isx-tone="danger"]:not([data-isx-emph="solid"]):not(#isx){color:var(--isx-tx)!important}
html[data-ui="v3"] :is(.btn,.tc-adv)[data-isx-tone="danger"]:is([data-isx-emph="outline"],[data-isx-emph="quiet"]):not(#isx){border-color:var(--isx-td)}
html[data-ui="v3"] :is(.btn,.tc-adv)[data-isx-tone="danger"]:not([data-isx-emph="solid"]):not(#isx):hover:not(:disabled){border-color:var(--isx-ic);background:var(--isx-tb)}
/* Signing out is not destructive: the inline red is dropped. */
html[data-ui="v3"] .btn[data-isx-role="logout"]:not(#isx){color:var(--text)!important}

/* Icon colour per role; author-declared data-iq-icon hosts keep their own colour. */
html[data-ui="v3"] [data-isx-tone]:not([data-isx-emph="solid"]):not([data-isx-role="iq"])>:is(.isx-ico,svg):not(#isx){color:var(--isx-ic)}
html[data-ui="v3"] [data-isx-tone="neutral"][data-isx-emph="quiet"]>:is(.isx-ico,svg):not(#isx){color:var(--text-3)}
html[data-ui="v3"] [data-isx-emph="solid"]>:is(.isx-ico,svg):not(#isx){color:currentColor}
/* Icon-only table controls: tinted glyph at rest, tinted surface on hover; delete turns red only on intent. */
html[data-ui="v3"] .icon-btn[data-isx-emph="icon"]:not([data-isx-tone="neutral"]):not(#isx):is(:hover,:focus-visible):not(:disabled){border-color:var(--isx-td);background:var(--isx-tb)}
html[data-ui="v3"] .icon-btn[data-isx-tone="danger"]:not(:hover):not(:focus-visible)>:is(.isx-ico,svg):not(#isx){color:inherit}
/* Context menus. */
html[data-ui="v3"] .ctx-item[data-isx-emph="menu"]:not([data-isx-tone="neutral"]):not(#isx):hover{background:var(--isx-tb)}

/* States. */
html[data-ui="v3"] :is(.btn,.tc-adv)[data-isx-role]:disabled:not([data-isx-state="busy"]){opacity:.55;cursor:not-allowed;box-shadow:none}
html[data-ui="v3"] :is(.btn,.tc-adv)[data-isx-emph="solid"]:disabled:not([data-isx-state="busy"]):not(#isx){filter:saturate(.35)}
html[data-ui="v3"] [data-isx-state="busy"]{cursor:progress}
html[data-ui="v3"] :is(.btn,.tc-adv)[data-isx-state="busy"]:disabled{opacity:.82}
html[data-ui="v3"] .isx-ico[data-isx-icon="spinner"]{animation:isx-spin .9s linear infinite}
@keyframes isx-spin{to{transform:rotate(360deg)}}
html[data-ui="v3"] :is(.btn,.tc-adv,.icon-btn,.ctx-item,.wl-contact a)[data-isx-role]:focus-visible:not(#isx){outline:3px solid var(--isx-focus);outline-offset:2px}

/* Same height and radius for every action control. */
html[data-ui="v3"] #page-teams .tc-adv:not(#isx){display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 13px;border-radius:var(--control-radius,13px);font-size:13px;font-weight:700;line-height:1.25}
html[data-ui="v3"] #dashBento .d53-button:not(#isx){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:var(--control-radius,13px);font-weight:700}
html[data-ui="v3"] #dashBento .d53-button:focus-visible:not(#isx){outline:3px solid var(--isx-focus);outline-offset:2px}

/* Azi stays CSS-only (its painter compares innerHTML): icons are masks injected by the JS layer. */
html[data-ui="v3"] #dashBento .d53-button[data-d53-inbox]:not(#isx):hover:not(:disabled){border-color:var(--isx-contact-td);background:var(--isx-contact-tb)}
html[data-ui="v3"] #dashBento .d53-more[data-d53-list="agenda"]:hover{background:var(--isx-schedule-tb)}
html[data-ui="v3"] #dashBento .d53-more:is([data-d53-list="offers"],[data-d53-list="drafts"]):hover{background:var(--isx-offer-tb)}
html[data-ui="v3"] #dashBento .d53-button[data-d53-refresh]:disabled::before{animation:isx-spin .9s linear infinite}

/* Status: shape + label, never colour alone. Filled = done/confirmed, ring = pending,
   square = finished, bar = refused/cancelled, triangle = overdue/conflict. */
html[data-ui="v3"] .badge:is(.pending,.ofertat,.option)::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
html[data-ui="v3"] .badge:is(.done,.finalizat)::before{border-radius:1.5px}
html[data-ui="v3"] .badge:is(.cancelled,.refuzat)::before{width:8px;height:2px;border-radius:1px}
html[data-ui="v3"] .wl-pill:is([data-tone="new"],[data-tone="due"]){display:inline-flex;align-items:center;gap:6px}
html[data-ui="v3"] .wl-pill[data-tone="new"]:not(:has(svg,[data-iq-icon]))::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
html[data-ui="v3"] .wl-pill[data-tone="due"]:not(:has(svg,[data-iq-icon]))::before{content:"";flex:none;width:9px;height:8px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
html[data-ui="v3"] :is(#dashBento,.d53-modal) .d53-badge:is([data-tone="new"],[data-tone="urgent"]){display:inline-flex;align-items:center;gap:6px}
html[data-ui="v3"] :is(#dashBento,.d53-modal) .d53-badge[data-tone="new"]::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
html[data-ui="v3"] :is(#dashBento,.d53-modal) .d53-badge[data-tone="urgent"]::before{content:"";flex:none;width:9px;height:8px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
html[data-ui="v3"] .cloud-state{display:inline-flex;align-items:center;gap:6px}
html[data-ui="v3"] .cloud-state::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
html[data-ui="v3"] .cloud-state:is(.pending,.saving,.idle,.offline)::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
html[data-ui="v3"] .cloud-state:is(.conflict,.error)::before{width:9px;height:8px;border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
html[data-ui="v3"] .cloud-state.unauthorized::before{width:8px;height:2px;border-radius:1px}

/* Due times: overdue tasks read as text, shape and edge, not as red only. "Restant" mirrors the
   label Azi already uses for deadline < today; the class itself is set by Teams.render(). */
html[data-ui="v3"] #page-teams .task-card .tc-meta .overdue:not(#isx){display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:8px;background:var(--isx-danger-tb);box-shadow:inset 0 0 0 1px var(--isx-danger-td);color:var(--isx-danger-tx);font-weight:750}
html[data-ui="v3"] #page-teams .task-card .tc-meta .overdue::after{content:"Restant";font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
html[data-ui="v3"] #page-teams .teams-list td.overdue:not(#isx){color:var(--isx-danger-tx);font-weight:750}
html[data-ui="v3"] #page-teams .teams-list td.overdue::after{content:" · Restant";font-size:11px;font-weight:800}
html[data-ui="v3"] #page-teams .task-card:has(.tc-meta .overdue){box-shadow:inset 3px 0 0 var(--isx-danger-ic),0 10px 26px rgba(20,27,48,.055)}
/* Task cards: one emphasised step per card, compact meta, actions aligned to the end. */
html[data-ui="v3"] #page-teams .task-card .tc-meta{row-gap:8px}
html[data-ui="v3"] #page-teams .tc-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px}

/* Subtle role surfaces. */
html[data-ui="v3"] .modal-foot:has(>[data-isx-emph="solid"]){background:color-mix(in srgb,var(--surface-2) 72%,var(--surface))}
html[data-ui="v3"] .commercial-crm-actions:has(>[data-isx-role]){padding:14px;border:1px solid color-mix(in srgb,var(--isx-offer-td) 55%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--isx-offer-tb) 40%,var(--surface))}

/* Phones 320–390: full-width wrapping labels, footers that share the row, icons never shrink. */
@media(max-width:480px){
  html[data-ui="v3"] :is(.btn,.tc-adv)[data-isx-role]{white-space:normal;line-height:1.3}
  html[data-ui="v3"] .modal-foot>:is(.btn,.tc-adv)[data-isx-role]:not(#isx){flex:1 1 auto;justify-content:center;margin-right:0!important;text-align:center}
  html[data-ui="v3"] .wl-contact>:is(a,button)[data-isx-role]{justify-content:center}
  html[data-ui="v3"] #page-teams .tc-actions{width:100%}
  html[data-ui="v3"] #page-teams .tc-actions>.tc-adv{flex:1 1 auto}
}
@media(max-width:360px){
  html[data-ui="v3"] :is(.btn,.tc-adv,.wl-contact a)>.isx-ico{width:16px;height:16px}
}
@media(prefers-reduced-motion:reduce){
  html[data-ui="v3"] .isx-ico[data-isx-icon="spinner"],
  html[data-ui="v3"] #dashBento .d53-button[data-d53-refresh]:disabled::before{animation:none}
  html[data-ui="v3"] [data-isx-role]{transition:none}
}
@media(forced-colors:active){
  html[data-ui="v3"] :is(.btn,.tc-adv)[data-isx-emph="solid"]:not(#isx){border:2px solid ButtonText}
  html[data-ui="v3"] .isx-ico{forced-color-adjust:auto}
}