/* ================================================================================================= */
/* Design System — tokens (CardLink 2.0, clean modern SaaS)                                            */
/* ================================================================================================= */
:root {
  /* Brand (blue) */
  --brand-50 : #eef4ff;
  --brand-100: #dce7ff;
  --brand-200: #c0d4ff;
  --brand-300: #97b6ff;
  --brand-400: #6690ff;
  --brand-500: #4f7cff;   /* logo accent */
  --brand-600: #2f66f0;   /* primary actions */
  --brand-700: #1f4fd6;   /* hover / pressed */
  --brand-soft: #eff4ff;

  /* Neutrals (slate) */
  --bg        : #f5f7fb;  /* app background */
  --bg-2      : #eef1f7;
  --surface   : #ffffff;
  --surface-2 : #f8fafc;
  --glass     : rgba(255, 255, 255, 0.85); /* frosted app-bar / auth card */
  --border    : #e6e9f1;
  --border-2  : #eef1f6;

  --text      : #1b2230;  /* primary text */
  --text-2    : #5a6473;  /* secondary text */
  --text-muted: #8a93a3;  /* muted / hints */

  /* Feedback */
  --success: #17b26a;
  --danger : #e5484d;
  --warning: #f5a524;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Elevation — soft, layered */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.10), 0 4px 10px rgba(16, 24, 40, 0.05);
  --shadow-brand: 0 6px 18px rgba(47, 102, 240, 0.28);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* legacy alias kept for existing components */
  --grey-1: #c7cdd8;
}

/* Dark theme — token overrides (JS sets data-theme; media query covers pre-JS flash) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-50:#141d33; --brand-100:#1a2748; --brand-soft:#17233f;
    --brand-500:#6f97ff; --brand-600:#4f7cff; --brand-700:#7aa2ff;
    --bg:#0e131f; --bg-2:#181f2e; --surface:#151b28; --surface-2:#1b2231;
    --glass:rgba(21,27,40,0.82);
    --border:#273246; --border-2:#212b3c;
    --text:#e8edf6; --text-2:#9aa6b8; --text-muted:#6f7c90;
    --success:#3ddc97;
    --shadow-xs:0 1px 2px rgba(0,0,0,.4);
    --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 6px 16px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
    --shadow-lg:0 16px 36px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.4);
    --shadow-brand:0 6px 18px rgba(47,102,240,.5);
  }
}
:root[data-theme="dark"] {
  --brand-50:#141d33; --brand-100:#1a2748; --brand-soft:#17233f;
  --brand-500:#6f97ff; --brand-600:#4f7cff; --brand-700:#7aa2ff;
  --bg:#0e131f; --bg-2:#181f2e; --surface:#151b28; --surface-2:#1b2231;
  --glass:rgba(21,27,40,0.82);
  --border:#273246; --border-2:#212b3c;
  --text:#e8edf6; --text-2:#9aa6b8; --text-muted:#6f7c90;
  --success:#3ddc97;
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 16px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
  --shadow-lg:0 16px 36px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.4);
  --shadow-brand:0 6px 18px rgba(47,102,240,.5);
}

html, body {
  font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Scrollbar — neutral, slim */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-thumb { /* Handle */
  background: #cbd2de;
  border-radius: 12px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { /* Handle on hover */
  background: #aab3c2;
  background-clip: padding-box;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* Makes the input field smaller */
.small .q-field--dense {
  .q-field__control-container, .q-field__native {
    padding-top: 2px !important;
    font-size:13px;
  }

  .q-field__control {
    height: 18px !important;
    min-height: 18px !important;
    border-radius: 5px !important;
    border: 1px solid rgb(231, 224, 224) !important;
  }

  /* This is for clear button making it smaller */
  .q-field__marginal {
    height: 18px !important;
    font-size: 18px;
    padding-bottom: 2px !important;
  }
}

/* Makes the input field smaller - 2 */
.small2 .q-field--dense {
  .q-field__control {
    height    : 38px !important;
    min-height: 38px !important;
  }

  /* This is for clear button making it smaller */
  .q-field__marginal {
    height   : 38px !important;
    font-size: 22px;
  }
}

.dotBorder {
  border: 2px dotted var(--grey-1) !important;
  border-radius: 12px !important;
  padding-right: 12px !important;
}

/* Card Preview Style */
.q-card__section {
  padding: 8px !important;
}

.border12 {
  border-radius: 12px !important;
}

.border25 {
  border-radius: 25px !important;
}

/* Google Label Style */
.label {
  line-height: 1.5rem;
  font-size: 1.125rem;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: #1f1f1f
}
/* Google Text Style */
.text {
  font-family: "Google Sans",Roboto,Arial,sans-serif;
  line-height: 1.5rem;
  font-size: 1.125rem;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #444746;
  word-break: break-word
}

.IsNoClick {
  pointer-events: none;
}

.InputLabel {
  font-size: 12px;
  color: #888;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Quasar
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
.q-item__section--side { /* за да са по-близко иконките до текста */
  min-width: 20px !important;
}

.q-item--dense { /* за да съвпадат иконките при затворено и отворено състояние */
  padding-left: 3px !important;
}

.q-table { /* за да нямат таблиците стрнна линия отдясно */
  border-right: none !important;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* from Bizzio 2.0 */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
.IsNormal {
  font-weight : normal;
  /* font-family : roboto-Regular; */
  font-variant: normal;
}

.IsBold {
  font-weight:bold;
 }

.IsInfo { /* син цвят за инфо текст */
  color: #36f;
}

.IsInfo2 {
  color: #c0c;
}

.IsError {
  color: #F04;
}

.IsFixFont {
  font-family: Menlo, Consolas, monospace;
  font-size: 110%;
  /* font-family: roboto-Mono; */
}

.IsCondens {
  font-stretch: condensed;
  /* font-family: roboto-Condensed; */
 }

.IsSmallCaps {
  font-variant: small-caps;
}

.IsHead { /* IsBold + IsCondens + IsSmallCaps */
  font-weight : bold;
  font-stretch: condensed;
  /* font-family : roboto-Condensed; */
  font-variant: small-caps;
}

.IsPre {
  white-space: pre;
}

.IsJustify {
  text-align: justify;
  /* text-justify: inter-word; */
}

.IsPreWrap {
  white-space: pre-wrap;
}

/* textarea да няма word wrap */
.IsNoWrap {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.IsSmall {
  font-size:10px;
}

.IsBig {
  font-size:14px;
}

.IsHover {
  cursor: pointer;
}
.IsHover:hover {
  text-decoration: underline;
}

.IsLink {
  color : #008ae6; /*#1a53ff*/
  cursor: pointer;
}
.IsLink:hover {
  text-decoration: underline;
}

.IsSelected { /* основно за q-item */
  color: black !important;
  background: #fb08;
}

.IsDisabled {
  pointer-events: none;
  opacity: 0.5;
}

.IsResizable {
  resize:both;
}

.Is3Dots {
  text-overflow: ellipsis;
  white-space  : nowrap;
  overflow     : hidden;
}

.IsSticky {
  z-index: 1;
  position: sticky;
  top: 0;
  background:white;
}

.IsSticky_THead thead {
  z-index: 1;
  position: sticky;
  top: 0;
}

.IsSticky_THead thead td{
  background:white;
}

.AsBtnBlue {
  background-image:linear-gradient(rgb(212, 242, 255), rgb(33, 189, 255));
}

.AsBtnGrey {
  background-image: linear-gradient(rgb(255, 255, 255), rgb(195, 203, 210));
}

/* за disable на скролера */
.NoScroll {
  position: fixed;
  overflow-y: scroll;
  width: 100%;
  touch-action:none;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ================================================================================================= */
/* Design System — global surface polish & helpers (CardLink 2.0)                                      */
/* ================================================================================================= */

/* Refined link colour to match new brand */
.IsLink { color: var(--brand-600); }

/* --- Reusable surface / layout helpers ------------------------------------------------------------ */
.ds-surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.ds-muted   { color: var(--text-muted); }
.ds-text-2  { color: var(--text-2); }

/* Soft, animated hover-lift for interactive cards */
.ds-lift {
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.ds-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* --- Quasar component polish (non-breaking, cosmetic only) ---------------------------------------- */

/* Buttons: smoother radius, remove heavy uppercase feel, softer press ripple */
.q-btn {
  border-radius: var(--r-sm);
  font-weight: 600;
  letter-spacing: 0.1px;
}
.q-btn.q-btn--rounded { border-radius: 9999px; }

/* Primary brand button helper */
.ds-btn-primary {
  background: var(--brand-600) !important;
  color: #fff !important;
  box-shadow: var(--shadow-brand);
  transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.05s var(--ease);
}
.ds-btn-primary:hover  { background: var(--brand-700) !important; }
.ds-btn-primary:active { transform: translateY(1px); }

/* Inputs: modern outlined look, brand focus ring */
.ds-fields .q-field--outlined .q-field__control {
  border-radius: var(--r-sm);
}
.ds-fields .q-field--outlined .q-field__control:before {
  border-color: var(--border);
  transition: border-color .15s var(--ease);
}
.ds-fields .q-field--outlined .q-field__control:hover:before {
  border-color: var(--brand-300);
}
/* on focus: paint a single 2px brand border on :before, and fully neutralize Quasar's :after
   (!important beats Quasar's own focus rule that would otherwise transparent :before) */
.ds-fields .q-field--outlined.q-field--focused .q-field__control:before {
  border: 2px solid var(--brand-600) !important;
}
.ds-fields .q-field--outlined.q-field--focused .q-field__control:after {
  border-color: transparent !important;
}

/* Cards: unify radius + soft border */
.ds-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm);
}

/* Dialog surfaces get the modern radius */
.q-dialog__inner > .bg-white,
.q-dialog__inner > div.bg-white {
  border-radius: var(--r-lg) !important;
}

/* Menus & tooltips: rounder, softer */
.q-menu {
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border);
  padding: 6px !important;            /* inset items so highlights don't poke the rounded corners */
}
.q-menu .q-item {
  border-radius: var(--r-sm);
  min-height: 40px;
  font-size: 14px;
}
/* selected value — brand highlight */
.q-menu .q-item--active {
  background: var(--brand-soft);
  color: var(--brand-700);
  font-weight: 600;
}
/* hover / keyboard focus — subtle grey, but never overrides the selected item's brand look */
.q-menu .q-item.q-manual-focusable--focused:not(.q-item--active) {
  background: var(--bg-2);
  color: var(--text);
}
.q-tooltip{ border-radius: var(--r-xs) !important; }

/* --- App shell / top navigation ------------------------------------------------------------------ */
.ds-appbar {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.ds-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.3px;
  color: var(--text);
  cursor: pointer;
}
.ds-brand .ds-brand-accent { color: var(--brand-500); }

.ds-ver {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-2);
  border-radius: 9999px;
  padding: 2px 9px;
}

/* Nav pills */
.ds-nav .navBtn {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--r-sm);
  padding: 8px 16px !important;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.ds-nav .navBtn:hover  { color: var(--text); background: var(--bg-2); }
.ds-nav .navBtn.active {
  color: var(--brand-700);
  background: var(--brand-soft);
  font-weight: 600;
}

/* --- Auth screen --------------------------------------------------------------------------------- */
.ds-auth-bg {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 85% -8%, var(--brand-100) 0%, rgba(220,231,255,0) 60%),
    radial-gradient(900px 560px at -10% 110%, #e7ecff 0%, rgba(231,236,255,0) 55%),
    var(--bg);
}
/* soft floating colour blobs */
.ds-auth-bg::before,
.ds-auth-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
.ds-auth-bg::before {
  width: 460px; height: 460px;
  top: -120px; right: -80px;
  background: radial-gradient(circle at 30% 30%, var(--brand-300), var(--brand-500));
  animation: ds-float-a 16s ease-in-out infinite;
}
.ds-auth-bg::after {
  width: 400px; height: 400px;
  bottom: -140px; left: -100px;
  background: radial-gradient(circle at 70% 70%, #8ea6ff, #b9c8ff);
  animation: ds-float-b 20s ease-in-out infinite;
}
@keyframes ds-float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 50px) scale(1.12); }
}
@keyframes ds-float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(50px, -40px) scale(1.1); }
}
.ds-auth-top { position: relative; z-index: 1; }
.ds-auth-card {
  position: relative;
  z-index: 1;
  width: 400px;
  max-width: calc(100vw - 32px);
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: ds-card-in 0.5s var(--ease) both;
}
@keyframes ds-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .ds-auth-bg::before, .ds-auth-bg::after, .ds-auth-card { animation: none; }
}
.ds-seg {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--bg-2);
  border-radius: 9999px;
}
.ds-seg .seg {
  border-radius: 9999px !important;
  font-weight: 600;
  color: var(--text-2);
  padding: 5px 16px !important;
}
.ds-seg .seg.active {
  background: var(--surface);
  color: var(--brand-700);
  box-shadow: var(--shadow-xs);
}

/* --- Empty-state / onboarding hero --------------------------------------------------------------- */
.ds-hero-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
}
.ds-hero-sub {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
}
.ds-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brand-600);
}

/* --- Editor: section headers & field rows -------------------------------------------------------- */
.ds-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 7px 12px;
  margin-bottom: 6px;
}

/* Field row: never let label + info + action collide */
.ds-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 1px 2px;
  border-radius: var(--r-xs);
}
.ds-field-row:hover { background: var(--surface-2); }
.ds-field-row .ds-field-info {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--brand-600);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ================================================================================================= */
/* Responsive — phones & small tablets                                                                 */
/* Global, low-risk adaptations so the business dashboard is usable on mobile. Page components add     */
/* their own scoped @media rules for column stacking on top of this.                                   */
/* ================================================================================================= */

/* Never let a stray fixed-width child scroll the whole page sideways.
   `clip` (not `hidden`) so overflow-y stays visible — body doesn't become a scroll
   container, keeping the sticky app-bar and Quasar's window-scroll detection intact. */
html, body { max-width: 100%; overflow-x: clip; }

@media (max-width: 640px) {
  /* App shell */
  .ds-shell   { padding: 8px 8px 16px; }
  .ds-appbar  { top: 6px; padding: 8px 10px; margin-bottom: 14px; }
  .ds-brand   { font-size: 17px; gap: 7px; }
  .ds-ver     { display: none; }
  .ds-nav .navBtn { font-size: 14px; padding: 7px 12px !important; }

  /* Onboarding hero scales down */
  .ds-hero-title { font-size: 22px; }
  .ds-hero-sub   { font-size: 14px; }

  /* Dialogs: fill the screen instead of overflowing a fixed min-width off-canvas.
     Overrides any inline width/min-width set on the app's custom dialog bodies. */
  .q-dialog__inner--minimized { padding: 10px !important; }
  .q-dialog__inner--minimized > div,
  .q-dialog__inner--minimized > .q-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Dropdown menus / selects never wider than the viewport */
  .q-menu { max-width: calc(100vw - 16px) !important; }

  /* Table & generic toolbars wrap their controls rather than clipping them */
  .q-toolbar { flex-wrap: wrap; row-gap: 2px; min-height: auto; }

  /* Big FontAwesome section icons ease off a touch */
  .fa-classic, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fal, .far, .fas, .fat { font-size: 14px; }
}

/* Very small phones */
@media (max-width: 400px) {
  .ds-shell  { padding: 6px 6px 14px; }
  .ds-appbar { padding: 7px 8px; }
  .ds-brand  { font-size: 16px; }
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */