/* ════════════════════════════════════════════════════════════════════════════════════════════
   PRIME — the presentation site's premium look, carried into the platform.
   Windows 11 light behind everything (Bloom: sky, lilac, a touch of peach) with fine film grain;
   acrylic glass for the bars, rail, dialogs, notifications and chat; frosted white cards with a
   light-catching rim; gradient primary buttons with a sheen; a calm fade-in for every page.
   Cards get no backdrop blur on purpose: long tables must scroll smoothly.
   Loaded last (after style.css, fiori.css, fluent.css); it only changes looks.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --p-violet: #7c5cf0;
  --p-grad: linear-gradient(135deg, #2a7fd8 0%, #1f6fc5 45%, #4d5fe0 100%);
  --p-grad-hover: linear-gradient(135deg, #2474c9 0%, #175aa3 45%, #4351cc 100%);
  --p-rim: linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.25) 40%, rgba(200,210,255,.25) 70%, rgba(255,255,255,.7));
  --p-card: rgba(255,255,255,.86);
  --p-shadow: 0 1px 2px rgba(24,30,60,.06), 0 8px 24px rgba(24,30,60,.07);
  --p-shadow-hi: 0 1px 2px rgba(24,30,60,.06), 0 16px 40px rgba(24,30,60,.12);
  --p-frost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --radius: 12px;
}

/* ——— the light behind everything ——— */
body {
  background:
    radial-gradient(900px 640px at 0% 0%, rgba(150,205,255,.42), transparent 60%),
    radial-gradient(800px 600px at 100% 10%, rgba(214,200,255,.40), transparent 60%),
    radial-gradient(900px 700px at 70% 110%, rgba(255,214,190,.34), transparent 60%),
    #f4f6fb;
  background-attachment: fixed;
}
/* fine film grain over the whole app */
body::after { content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.shell, .content { background: transparent; }

/* ——— acrylic title bar ——— */
.top { background: rgba(255,255,255,.58) var(--p-frost); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(24,30,60,.07), 0 6px 24px rgba(24,30,60,.04); }
.toptabs a.active { background: rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(24,30,60,.08), inset 0 0 0 1px rgba(255,255,255,.9); }
.top-new { background: var(--p-grad) !important; box-shadow: 0 6px 16px rgba(31,111,197,.28) !important; }
.top-new:hover { background: var(--p-grad-hover) !important; }

/* ——— glass rail ——— */
.tree { background: rgba(255,255,255,.46) var(--p-frost); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset -1px 0 0 rgba(24,30,60,.06); }
.tree .lbl:hover { background: rgba(255,255,255,.6); }
.tree a.lbl.active { background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(24,30,60,.06), 0 6px 18px rgba(24,30,60,.06); }
.tree a.lbl.active::before { background: linear-gradient(180deg, #2f8cff, var(--p-violet)); width: 3.5px; }
.tree a.lbl.active .fi { color: #2a6fd0; }
.tree-foot { border-top-color: rgba(24,30,60,.07); }

/* ——— frosted cards with a light-catching rim ——— */
.card, .gridbox, .tabs, .offer-box, .tile, .stepper .st, .mail, .crm-list, .crm-user-card, .qa-tender {
  background-color: var(--p-card); background-image: var(--p-frost); box-shadow: var(--p-shadow); position: relative; }
.card, .gridbox, .offer-box, .mail, .qa-tender { border-radius: var(--radius); }
.card::before, .gridbox::before, .offer-box::before, .mail::before, .qa-tender::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: var(--p-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.tbl th, .dense th { background: transparent; }
.tbl tfoot td { background: rgba(240,243,250,.7); }
.dense tr.clickable:hover td, .tbl tr.clickable:hover td { background: linear-gradient(90deg, rgba(47,140,255,.07), rgba(124,92,240,.04)) !important; }
.mail .it:hover { background: rgba(47,140,255,.05); }
.mail .it.sel { background: linear-gradient(90deg, rgba(47,140,255,.12), rgba(124,92,240,.06)); }

/* ——— page heading ——— */
.page-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.022em; }
.page-head .sub { color: var(--text-2); }

/* ——— buttons: gradient primary with a passing sheen, soft press ——— */
.btn { transition: background .15s var(--f-ease), border-color .15s var(--f-ease), box-shadow .2s var(--f-ease), transform .12s var(--f-ease); }
.btn:active { transform: scale(.98); }
.btn.primary, .btn.add-main { background: var(--p-grad); box-shadow: 0 1px 2px rgba(24,30,60,.12), 0 6px 16px rgba(31,111,197,.24), inset 0 1px 0 rgba(255,255,255,.18); position: relative; overflow: hidden; }
.btn.primary:hover, .btn.add-main:hover { background: var(--p-grad-hover); box-shadow: 0 1px 2px rgba(24,30,60,.12), 0 10px 24px rgba(31,111,197,.32), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.primary::after, .btn.add-main::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); }
.btn.primary:hover::after, .btn.add-main:hover::after { transform: translateX(120%); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.btn.ok { background: linear-gradient(135deg, #1aa363, #0f7b3f); box-shadow: 0 6px 16px rgba(15,123,63,.24); }
.btn:not(.primary):not(.add-main):not(.ok):not(.danger-solid):not(.ghost) { background: rgba(255,255,255,.85); }

/* ——— fields: a soft coloured glow on focus ——— */
input:focus, select:focus, textarea:focus { box-shadow: inset 0 -1px 0 var(--primary), 0 0 0 4px rgba(47,140,255,.12); }
.amount-in:focus-within { box-shadow: inset 0 -2px 0 var(--primary), 0 0 0 4px rgba(47,140,255,.12); }

/* ——— badges with a hairline ——— */
.badge.ok { box-shadow: inset 0 0 0 1px rgba(15,123,63,.14) !important; }
.badge.warn { box-shadow: inset 0 0 0 1px rgba(184,92,0,.14) !important; }
.badge.bad { box-shadow: inset 0 0 0 1px rgba(196,43,28,.14) !important; }
.badge.info, .badge.primary { box-shadow: inset 0 0 0 1px rgba(31,111,197,.14) !important; }

/* ——— glass dialogs, notifications, chat ——— */
.modal-bg { background: rgba(20,26,48,.32); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); }
.modal { background: rgba(255,255,255,.9) var(--p-frost); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 30px 80px rgba(20,26,48,.28), inset 0 1px 0 rgba(255,255,255,.9); animation: p-pop .28s cubic-bezier(.2,.8,.2,1); }
@keyframes p-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.modal .mf { background: rgba(244,246,251,.7); }
.toast { background: rgba(255,255,255,.88) var(--p-frost); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 16px 40px rgba(20,26,48,.16); }
.chat-btn { background: var(--p-grad); box-shadow: 0 10px 28px rgba(31,111,197,.35); }
.chat-btn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(47,140,255,.35); animation: p-ring 2.8s ease-out infinite; pointer-events: none; }
@keyframes p-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.chat-pop { background: rgba(255,255,255,.9); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); }
.chat-head { background: rgba(255,255,255,.7); }
.chat-body { background: transparent; }

/* ——— segmented controls and the stepper ——— */
.cur-switch, .seg { background: rgba(20,48,106,.06); }
.stepper .st.active { background: linear-gradient(135deg, rgba(47,140,255,.12), rgba(124,92,240,.08)); }
.stepper .st.active .n { background: var(--p-grad); box-shadow: 0 4px 12px rgba(31,111,197,.3); }

/* ——— sign-in: the website's light, with grain ——— */
.signin { background:
  radial-gradient(760px 620px at 0% 0%, rgba(150,205,255,.5), transparent 62%),
  radial-gradient(700px 560px at 30% 110%, rgba(214,200,255,.45), transparent 62%),
  radial-gradient(600px 500px at 100% 0%, rgba(255,214,190,.35), transparent 62%),
  #f1f3f8; }
.signin-card { background: rgba(255,255,255,.72) var(--p-frost); position: relative; box-shadow: 0 30px 80px rgba(20,26,48,.16), inset 0 1px 0 rgba(255,255,255,.9); }
.signin-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--p-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.auth .formside .box { background: rgba(255,255,255,.86) var(--p-frost); box-shadow: 0 24px 60px rgba(20,26,48,.12); }
.auth .promo { background: radial-gradient(700px 500px at 0% 0%, rgba(120,190,255,.55), transparent 60%), radial-gradient(600px 500px at 100% 100%, rgba(140,110,240,.45), transparent 60%), linear-gradient(160deg, #1f6fc5 0%, #1b3f8f 100%); }

/* ——— a calm fade-in when a page opens ——— */
.content > .page-head, .content > .crumbs, .content > .card, .content > .gridbox, .content > .stack, .content > .tabs, .content > .grid, .content > .searchbar, .content > .alert {
  animation: p-in .45s cubic-bezier(.2,.8,.2,1) both; }
.content > :nth-child(2) { animation-delay: .04s; } .content > :nth-child(3) { animation-delay: .08s; } .content > :nth-child(n+4) { animation-delay: .12s; }
@keyframes p-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 900px) {
  .tree { background: rgba(250,251,255,.92) var(--p-frost); }
  body { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .content > * { animation: none !important; }
  .chat-btn::after { animation: none; display: none; }
  .modal { animation: none; }
  .btn.primary::after, .btn.add-main::after { display: none; }
}

/* admin «Të gjithë tenderët»: a strip of statistics above the table */
.adm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.adm-stat { position: relative; padding: 14px 16px; border-radius: var(--radius); background: var(--p-card) var(--p-frost); box-shadow: var(--p-shadow); }
.adm-stat b { display: block; font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.adm-stat span { color: var(--text-2); font-size: 12.5px; }
.ok-t { color: var(--ok); font-weight: 600; } .bad-t { color: var(--bad); font-weight: 600; }
@media (max-width: 900px) { .adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tbl td.num { white-space: nowrap; }

/* ════════ Support: a living orb, the idle hop, and the help-first chat (supportChat in app.js) ════════ */
@property --orb { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.chat-btn { background: transparent !important; box-shadow: none !important; overflow: visible; }
.chat-btn::after { display: none; }
.orb { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; isolation: isolate; }
.orb-glow { position: absolute; inset: -6px; border-radius: 50%; z-index: -1; filter: blur(10px); opacity: .65;
  background: conic-gradient(from var(--orb), #2f8cff, #8a5cf6, #ff9fc4, #ffbe7a, #19c2a0, #2f8cff); animation: orb-spin 6s linear infinite; }
.orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from var(--orb), #2f8cff, #8a5cf6, #ff9fc4, #ffbe7a, #19c2a0, #2f8cff); animation: orb-spin 6s linear infinite; }
.orb::after { content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.55) 32%, rgba(220,226,255,.35) 60%, rgba(160,170,255,.15)); backdrop-filter: blur(6px); }
.orb-core { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 4px; }
.orb-core i { width: 6px; height: 6px; border-radius: 3px; background: #3b3f8f; animation: orb-dot 1.8s ease-in-out infinite; }
.orb-core i:nth-child(2) { animation-delay: .15s; } .orb-core i:nth-child(3) { animation-delay: .3s; }
@keyframes orb-spin { to { --orb: 360deg; } }
@keyframes orb-dot { 0%, 60%, 100% { height: 6px; opacity: .75; } 30% { height: 14px; opacity: 1; } }
.chat-btn:hover .orb-glow, .chat-btn:hover .orb::before { animation-duration: 2s; }
.chat-btn:hover .orb-core i { animation-duration: .9s; }
#chat-fab.open .orb-core i { animation-duration: 1s; }
/* an operator has written: a green breathing ring */
#chat-fab.live .chat-btn::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2.5px solid #19c27a; animation: orb-live 1.8s ease-out infinite; }
@keyframes orb-live { 0% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
/* the idle hop: up with a soft squash, or a little sideways skip */
.chat-btn.hop { animation: orb-hop .9s cubic-bezier(.3,.7,.3,1); }
.chat-btn.hop-side { animation: orb-side .8s cubic-bezier(.3,.7,.3,1); }
@keyframes orb-hop { 0% { transform: none; } 18% { transform: scale(1.06, .9); } 45% { transform: translateY(-22px) scale(.96, 1.06); } 70% { transform: translateY(0) scale(1.05, .93); } 85% { transform: translateY(-5px); } 100% { transform: none; } }
@keyframes orb-side { 0%, 100% { transform: none; } 20% { transform: translateX(-12px) rotate(-8deg); } 45% { transform: translateX(8px) rotate(6deg); } 70% { transform: translateX(-4px) rotate(-2deg); } }
.chat-av { width: 34px; height: 34px; flex: none; }
.chat-av .orb-core i { width: 4px; height: 4px; } .chat-av .orb-core { gap: 2.5px; }
/* the chat window */
.chat-pop { width: min(400px, calc(100vw - 28px)); }
#chat-sub.live { color: #0f8a55; font-weight: 600; }
.ch-hello { padding: 12px 14px; margin-bottom: 4px; border-radius: 14px; background: linear-gradient(135deg, rgba(47,140,255,.10), rgba(138,92,246,.08)); }
.ch-hello b { display: block; font-size: 15px; } .ch-hello span { font-size: 13px; color: var(--text-2); }
.ch-sec { margin: 14px 2px 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ch-qas { display: flex; flex-direction: column; gap: 6px; }
.ch-qa { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: 600 13.5px/1.35 var(--font); color: var(--text);
  box-shadow: 0 1px 2px rgba(24,30,60,.06), inset 0 0 0 1px rgba(24,30,60,.05); transition: transform .2s, box-shadow .2s; animation: p-in .35s cubic-bezier(.2,.8,.2,1) both; }
.ch-qa:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(24,30,60,.1); }
.ch-qi { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(135deg, #8fb4ff, #7c5cf0); }
.ch-qa span:nth-child(2) { flex: 1; } .ch-go { color: var(--text-3); font-size: 18px; }
.ch-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-cat { border: 0; cursor: pointer; padding: 8px 12px; border-radius: 999px; font: 600 12.5px var(--font); color: #2a5aa8; background: rgba(47,140,255,.09); transition: background .2s, transform .2s, box-shadow .2s; }
.ch-cat:hover { background: rgba(47,140,255,.16); }
.ch-cat.hot { color: #fff; background: linear-gradient(135deg, #2a7fd8, #4d5fe0); box-shadow: 0 6px 14px rgba(31,111,197,.3); animation: p-in .3s both; }
.ch-cat.on { color: #fff; background: linear-gradient(135deg, #2a7fd8, #4d5fe0); }
.ch-ans { font-size: 13.5px; line-height: 1.55; } .ch-ans h4 { font-size: 15px; margin: 0 0 8px; }
.ch-ans p { margin: 0 0 8px; } .ch-ans figure { margin: 10px 0; } .ch-ans img { width: 100%; border-radius: 10px; box-shadow: 0 4px 14px rgba(24,30,60,.12); }
.ch-ans figcaption { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }
.ch-ans .mq-steps { padding-left: 18px; margin: 6px 0 10px; } .ch-ans .mq-steps li { margin-bottom: 4px; }
.ch-ans .mq-note { padding: 8px 10px; border-radius: 10px; margin: 8px 0; background: #eef5fd; font-size: 12.5px; } .ch-ans .mq-note b { display: block; }
.ch-ans .mq-note.warn { background: #fff6eb; } .ch-ans .mq-note.tip { background: #eef8f1; }
.ch-ans table { width: 100%; border-collapse: collapse; font-size: 12px; } .ch-ans td, .ch-ans th { border-bottom: 1px solid var(--border); padding: 4px 6px; text-align: left; vertical-align: top; }
.ch-ans .mq-two { display: grid; gap: 8px; } .ch-ans ul { padding-left: 18px; margin: 4px 0 8px; }
.ch-help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.ch-help span { flex: 1 1 100%; }
/* the operator has joined */
.cm-join { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 6px auto; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #0f7b4f; background: #e7f7ef; box-shadow: inset 0 0 0 1px rgba(15,123,79,.18); }
.cm-join i { width: 8px; height: 8px; border-radius: 50%; background: #19c27a; box-shadow: 0 0 0 0 rgba(25,194,122,.5); animation: join-dot 1.6s ease-out infinite; }
.cm-join.fresh { animation: join-in .7s cubic-bezier(.3,1.4,.5,1); }
@keyframes join-dot { to { box-shadow: 0 0 0 7px rgba(25,194,122,0); } }
@keyframes join-in { from { opacity: 0; transform: translateY(8px) scale(.85); } }
@media (prefers-reduced-motion: reduce) { .orb-glow, .orb::before, .orb-core i, .cm-join i, #chat-fab.live .chat-btn::before { animation: none; } .chat-btn.hop, .chat-btn.hop-side { animation: none; } }
.ch-hello span b { display: inline; font-size: inherit; }