/* ============================================================================
   dashboard-workspace - /dashboard's tab bar and the Workspace / Services
   tab's Quick actions. Linked once by application/views/beckend_colors.php,
   beside backend-cards.css; behaviour in themes/shared/js/dashboard-workspace.js.

   Tab bar   markup: application/views/enduser/lobby/main_tab_nav.php (#fix_js_active)
   Quick actions  markup: application/views/enduser/lobby/quick_start_guide.php (.qqa-*),
             tiles from dashboard_quick_actions() (dashboard_quick_actions_helper.php)

   Same family as the dashboard stat cards (.qdc-*, backend-cards.css): white,
   16px corners, 1px line, soft shadow and a small lift on hover. Colours from
   var(--site_color_g) / var(--site_font_color_g) only. 14px is the smallest text.
   ============================================================================ */

/* ---------- tab bar: a white pill bar, the open tab filled with the accent (client design 2026-10-05) */
#fix_js_active.nav-tabs{display:flex;flex-wrap:nowrap;gap:6px;width:fit-content;max-width:100%;margin:16px 0 22px;padding:5px;border:0 !important;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(8,15,84,.05),0 12px 28px -20px rgba(8,15,84,.45);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#fix_js_active.nav-tabs::-webkit-scrollbar{display:none}
#fix_js_active .nav-item{margin:0 !important;flex:0 0 auto}
#fix_js_active .nav-link{display:inline-flex;align-items:center;gap:8px;padding:10px 18px !important;margin:0 !important;border:0 !important;border-radius:10px !important;background:none !important;color:color-mix(in srgb,var(--site_font_color_g,#0b1a4a) 80%,#fff) !important;font-size:14px !important;font-weight:800 !important;white-space:nowrap;box-shadow:none !important;transition:background .2s,color .2s}
#fix_js_active .nav-link:hover{color:var(--site_color_g) !important}
#fix_js_active .nav-link:focus-visible{outline:2px solid var(--site_color_g);outline-offset:2px}
#fix_js_active .nav-link.active,#fix_js_active .nav-link.active:hover{background:linear-gradient(135deg,var(--site_color_g),color-mix(in srgb,var(--site_color_g) 55%,#b9a8ff)) !important;color:#fff !important;box-shadow:0 10px 20px -10px color-mix(in srgb,var(--site_color_g) 90%,transparent) !important}
#fix_js_active .nav-link::before,#fix_js_active .nav-link::after{display:none !important}

/* Sticky: it sits just under the site header (--dash-header-h is the header's
   real height, kept current by dashboard-workspace.js; 0 without a sticky header).
   Above the cards, below dropdowns (1000), the header (1030), modals and the
   Support Desk widget. Once stuck, a full-width band in the page's colours
   with a hairline and a soft shadow carries it. */
.qdt-sticky{
  --qdt-top:calc(env(safe-area-inset-top, 0px) + var(--dash-header-h, 0px));
  position:-webkit-sticky;position:sticky;top:var(--qdt-top);z-index:990;
}
.qdt-sticky::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;
  background:color-mix(in srgb,var(--site_color_g) 3%,#fff);
  border-bottom:1px solid color-mix(in srgb,var(--site_font_color_g,#0b1a4a) 8%,transparent);
  box-shadow:0 10px 24px -20px rgba(8,15,84,.55);
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.qdt-sticky.is-stuck::before{opacity:1}
.qdt-sticky.is-stuck #fix_js_active.nav-tabs{margin-top:8px;margin-bottom:8px}
/* a tab's content starts below the stuck bar when the page scrolls to it */
.qdt-sticky ~ .tab-content > .tab-pane{scroll-margin-top:calc(var(--qdt-top, 0px) + var(--dash-tabs-h, 64px) + 8px)}
@media (max-width:699px){
  .qdt-sticky{padding-left:16px;padding-right:16px}
  #fix_js_active.nav-tabs{width:auto}
  #fix_js_active .nav-link{padding:10px 14px !important}
}

/* ---------- Quick actions ------------------------------------------------- */
.qqa{
  --qqa-accent:var(--site_color_g,#1a8fd6);
  --qqa-soft:color-mix(in srgb,var(--qqa-accent) 12%,#fff);
  --qqa-fg:#14213a;
  --qqa-muted:#56637a;
  --qqa-line:#dde5f0;
  --qqa-shadow:0 1px 2px rgba(20,33,58,.06),0 12px 30px rgba(20,33,58,.10);
  margin:8px 0 0;
}
.qqa .qdc-sec-head{margin-top:26px}
/* 1 column, 2 from 700px, 3 from 1100px */
.qqa-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0;padding:0;list-style:none}
@media (min-width:700px){.qqa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.qqa-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.qqa-item{min-width:0;margin:0}
.qqa:not(.is-open) .qqa-extra{display:none}

.qqa-tile,.qqa-tile:visited{
  position:relative;display:flex;align-items:center;gap:14px;min-width:0;min-height:88px;height:100%;
  padding:14px 16px;border:1px solid var(--qqa-line);border-radius:16px;overflow:hidden;
  background:#fff;color:var(--qqa-fg);text-align:left;text-decoration:none;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.qqa-tile:hover,.qqa-tile:focus-visible{transform:translateY(-4px);box-shadow:var(--qqa-shadow);border-color:color-mix(in srgb,var(--qqa-accent) 35%,var(--qqa-line));color:var(--qqa-fg);text-decoration:none}
.qqa-tile:focus{outline:0}
.qqa-tile:focus-visible{outline:2px solid var(--qqa-accent);outline-offset:2px}
.qqa-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--qqa-soft);color:var(--qqa-accent);font-size:20px;line-height:1}
.qqa-ico .bi::before{display:block}
.qqa-ico img{display:block;width:24px;height:24px;object-fit:contain}
.qqa-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qqa-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:700;line-height:1.35;color:var(--qqa-fg)}
.qqa-help{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:1.45;color:var(--qqa-muted)}
.qqa-go{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--qqa-accent);white-space:nowrap}
.qqa-go .bi{transition:transform .2s}
.qqa-tile:hover .qqa-go .bi,.qqa-tile:focus-visible .qqa-go .bi{transform:translateX(3px)}
/* the business profile tile: its completion along the bottom edge */
.qqa-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--qqa-soft)}
.qqa-bar > span{display:block;height:100%;background:var(--qqa-accent);border-radius:0 4px 4px 0}

.qqa-more{display:inline-flex;align-items:center;gap:6px;margin:14px 0 0;padding:8px 14px;border:1px solid var(--qqa-line);border-radius:10px;background:#fff;color:var(--qqa-accent);font-size:14px;font-weight:700;cursor:pointer}
.qqa-more:hover{border-color:color-mix(in srgb,var(--qqa-accent) 40%,var(--qqa-line))}
.qqa-more:focus-visible{outline:2px solid var(--qqa-accent);outline-offset:2px}
/* keep the last row clear of the floating Support Desk widget */
.qme-user-container:has(.qqa){padding-bottom:110px}
@media (max-width:420px){
  .qqa-tile{gap:12px;padding:12px 14px}
  .qqa-go-txt{display:none}
  .qqa-go .bi{font-size:18px}
}