/* ============================================================
   brand-overrides.css  —  Tabler CDN edition
   Maps your brand tokens onto Tabler's CSS variable layer.
   Load AFTER colors.css and tabler.min.css, BEFORE any
   page-specific styles.

   COLORS: this file no longer declares any hex/rgba values.
   All colors (including the --tblr-* mapping) now live in
   colors.css — edit palette values there, not here.
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Non-color design tokens ──────────────────────────────── */
:root {
    /* Typography */
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body:    'DM Sans', sans-serif;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transition */
    --transition: .2s ease;

    /* Typography (Tabler mapping) */
    --tblr-font-sans-serif: var(--font-body);

    /* Shadows (Tabler mapping — color values come from colors.css) */
    --tblr-box-shadow:     var(--shadow-card);
    --tblr-box-shadow-sm:  var(--shadow-sm);
    --tblr-box-shadow-lg:  var(--shadow-lg);
}

/* ── Global typography ────────────────────────────────────── */
body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.page-title, .card-title, .navbar-brand-text {
    font-family: var(--font-heading);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
    --tblr-btn-bg:           var(--accent);
    --tblr-btn-border-color: var(--accent);
    --tblr-btn-hover-bg:     var(--accent-dark);
    --tblr-btn-hover-border-color: var(--accent-dark);
    --tblr-btn-active-bg:    var(--accent-active);
}
.btn-outline-primary {
    --tblr-btn-color:        var(--accent);
    --tblr-btn-border-color: var(--accent);
    --tblr-btn-hover-bg:     var(--accent);
    --tblr-btn-hover-border-color: var(--accent);
}

/* ── Vertical sidebar accent ──────────────────────────────── */
.navbar-vertical .nav-link.active {
    background: var(--accent-a18) !important;
    color: var(--color-white) !important;
    position: relative;
}
.navbar-vertical .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
    box-shadow: var(--shadow-card);
    border-color: var(--ash-200);
    border-radius: var(--radius-md);
}
.card-header {
    border-bottom-color: var(--ash-200);
    background: transparent;
    font-family: var(--font-heading);
    font-weight: 600;
}

/* ── Badge variants (light tinted) ───────────────────────── */
/* Tabler uses bg-{color}-lt already; these are here as fallbacks */
.badge-success-lt  { background: var(--success-a12);  color: var(--success); }
.badge-danger-lt   { background: var(--danger-a12);  color: var(--danger);  }
.badge-warning-lt  { background: var(--warning-a12);  color: var(--warning); }

/* ── Alerts ───────────────────────────────────────────────── */
.alert-primary  { background: var(--accent-bg); border-color: var(--accent-light); color: var(--accent-dark); }
.alert-success  { background: var(--alert-success-bg); border-color: var(--alert-success-border); color: var(--alert-success-text); }
.alert-danger   { background: var(--alert-danger-bg); border-color: var(--alert-danger-border); color: var(--alert-danger-text); }

/* ── Notification badge positioning ──────────────────────── */
.badge-notification {
    position: absolute;
    top: 1px; right: 1px;
    min-width: 16px; height: 16px;
    border-radius: 8px;
    border: 2px solid var(--color-white);
    font-size: .6rem;
    font-weight: 700;
    padding: 0 3px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Social circle buttons (auth pages) ──────────────────── */
.social-circle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background-color: var(--ash-100);
    color: var(--ash-700);
    transition: all var(--transition);
    margin: 0 .25rem;
    text-decoration: none;
}
.social-circle-btn:hover {
    background-color: var(--ash-200);
    transform: translateY(-2px);
    color: var(--accent);
}

/* ── Password toggle ─────────────────────────────────────── */
.password-toggle {
    position: absolute;
    right: .75rem; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    color: var(--ash-600);
    cursor: pointer; z-index: 10;
    transition: color var(--transition);
}
.password-toggle:hover { color: var(--accent); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--ash-100); }
::-webkit-scrollbar-thumb  { background: var(--ash-400); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ash-500); }




/* ================================================================
   PWA UI STYLES — AllConnect Data
   Splash, offline bar, update banner, install banners (Android & iOS).
   All tokens reference the site :root variables defined above —
   no separate hex values needed. Edit colours only in colors.css.
   No gradients are used anywhere in this section — solid brand
   colors only, per system styling rules.
   ================================================================ */

/* ── PWA component tokens (aliases to colors.css) ─────────────── */
:root {
  --pwa-z:          99990;
  --pwa-radius-sm:  var(--radius-sm);
  --pwa-radius-md:  var(--radius-md);
  --pwa-radius-lg:  var(--radius-lg);
  --pwa-radius-xl:  var(--radius-xl);
  --pwa-shadow-sm:  var(--shadow-sm);
  --pwa-shadow-lg:  var(--shadow-lg);
  --pwa-transition: var(--transition);
  --pwa-font-head:  var(--font-heading);
  --pwa-font-body:  var(--font-body);
  --pwa-accent:       var(--accent);
  --pwa-accent-dark:  var(--accent-dark);
  --pwa-accent-light: var(--accent-light);
  --pwa-accent-bg:    var(--accent-bg);
  --pwa-hero:         var(--hero-dark);
  --pwa-surface:      var(--color-white);
  --pwa-surface-2:    var(--ash-50);
  --pwa-ash-100:      var(--ash-100);
  --pwa-ash-200:      var(--ash-200);
  --pwa-ash-300:      var(--ash-300);
  --pwa-ash-600:      var(--ash-600);
  --pwa-ash-700:      var(--ash-700);
  --pwa-ash-800:      var(--ash-800);
  --pwa-ash-900:      var(--ash-900);
  --pwa-danger:       var(--danger);
}

/* ── Splash Screen ────────────────────────────────────────────
   Solid brand-dark background (no gradient)                    */
#pwa-splash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--pwa-z) + 10);
  background: var(--pwa-hero);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  transition: opacity .4s ease;
}

#pwa-splash .splash-logo {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  border-radius: 20px;
  object-fit: contain;
  box-shadow: 0 0 0 0 var(--accent-a45);
  animation: splashPulse 2s ease-in-out infinite;
}

#pwa-splash .splash-name {
  position: relative;
  z-index: 1;
  font-family: var(--pwa-font-head);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -.02em;
}

#pwa-splash .splash-tag {
  position: relative;
  z-index: 1;
  font-family: var(--pwa-font-body);
  font-size: .8125rem;
  color: var(--white-a55);
}

#pwa-splash .splash-bar {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 3px;
  background: var(--white-a12);
  border-radius: 99px;
  overflow: hidden;
  margin-top: .25rem;
}

#pwa-splash .splash-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 45%;
  background: var(--pwa-accent);
  border-radius: 99px;
  animation: splashBar 1.1s ease-in-out infinite;
}

@keyframes splashPulse {
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 0    var(--accent-a45); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 14px transparent; }
}
@keyframes splashBar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%);  }
}

/* ── Offline Bar ──────────────────────────────────────────────*/
#pwa-offline-bar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--pwa-z);
  background: var(--pwa-danger);
  color: var(--color-white);
  font-family: var(--pwa-font-head);
  font-size: .8125rem;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem 1rem;
  text-align: center;
  letter-spacing: .01em;
}

/* ── Update Banner ───────────────────────────────────────────*/
#pwa-update-banner {
  display: none;
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--pwa-z);
  width: calc(100% - 2rem);
  max-width: 440px;
  background: var(--pwa-hero);
  border: 1px solid var(--accent-a30);
  border-radius: var(--pwa-radius-lg);
  box-shadow: var(--pwa-shadow-lg), 0 0 0 1px var(--accent-a15);
  padding: .875rem 1.25rem;
  font-family: var(--pwa-font-body);
  flex-direction: row;
  align-items: center;
  gap: .875rem;
  animation: pwaSlideDown .4s cubic-bezier(.34,1.56,.64,1);
}

/* Top accent line — solid, no gradient */
#pwa-update-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2.5px;
  background: var(--pwa-accent);
  border-radius: var(--pwa-radius-lg) var(--pwa-radius-lg) 0 0;
}

#pwa-update-banner .upd-text {
  flex: 1;
  color: var(--color-white);
  font-size: .875rem;
  font-weight: 500;
}

#pwa-update-banner .upd-text strong {
  display: block;
  font-family: var(--pwa-font-head);
  font-weight: 700;
  font-size: .9375rem;
  margin-bottom: .15rem;
  color: var(--pwa-accent-light);
}

.pwa-btn-update {
  background: var(--pwa-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--pwa-radius-md);
  padding: .5rem 1.1rem;
  font-family: var(--pwa-font-head);
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--pwa-transition), transform var(--pwa-transition);
  flex-shrink: 0;
}
.pwa-btn-update:hover  { background: var(--pwa-accent-dark); }
.pwa-btn-update:active { transform: scale(.97); }

/* ── Android/Desktop Install Banner ─────────────────────────*/
#pwa-install-banner {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--pwa-z);
  width: calc(100% - 2rem);
  max-width: 480px;
  background: var(--pwa-surface);
  border: 1px solid var(--pwa-ash-200);
  border-radius: var(--pwa-radius-xl);
  box-shadow: var(--pwa-shadow-lg);
  padding: 1.125rem 1.25rem;
  font-family: var(--pwa-font-body);
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  animation: pwaSlideUp .4s cubic-bezier(.34,1.56,.64,1);
  /* Accent top stripe */
  overflow: hidden;
}

#pwa-install-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--pwa-accent);
}

#pwa-install-banner .inst-icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid var(--pwa-ash-200);
}

#pwa-install-banner .inst-text { flex: 1; min-width: 0; }

#pwa-install-banner .inst-text strong {
  display: block;
  font-family: var(--pwa-font-head);
  font-size: .9375rem;
  font-weight: 800;
  color: var(--pwa-ash-900);
  margin-bottom: .2rem;
}

#pwa-install-banner .inst-text span {
  display: block;
  font-size: .8125rem;
  color: var(--pwa-ash-600);
  line-height: 1.4;
}

#pwa-install-banner .inst-actions {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex-shrink: 0;
}

.pwa-btn-install {
  background: var(--pwa-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--pwa-radius-md);
  padding: .52rem 1.15rem;
  font-family: var(--pwa-font-head);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px var(--accent-a35);
  transition: all var(--pwa-transition);
}
.pwa-btn-install:hover  { background: var(--pwa-accent-dark); box-shadow: 0 6px 20px var(--accent-a45); transform: translateY(-1px); }
.pwa-btn-install:active { transform: scale(.97); }

.pwa-btn-dismiss {
  background: transparent;
  color: var(--pwa-ash-600);
  border: 1px solid var(--pwa-ash-300);
  border-radius: var(--pwa-radius-md);
  padding: .45rem 1.15rem;
  font-family: var(--pwa-font-head);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--pwa-transition);
}
.pwa-btn-dismiss:hover { color: var(--pwa-ash-900); border-color: var(--pwa-ash-400); background: var(--pwa-ash-100); }

/* ── iOS Install Banner ──────────────────────────────────────*/
#pwa-ios-banner {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--pwa-z);
  width: calc(100% - 2rem);
  max-width: 480px;
  background: var(--pwa-surface);
  border: 1px solid var(--pwa-ash-200);
  border-radius: var(--pwa-radius-xl);
  box-shadow: var(--pwa-shadow-lg);
  padding: 1.25rem;
  font-family: var(--pwa-font-body);
  flex-direction: column;
  gap: 1rem;
  animation: pwaSlideUp .4s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}

/* Arrow pointing down to Share button */
#pwa-ios-banner::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px;
  background: var(--pwa-surface);
  border-right: 1px solid var(--pwa-ash-200);
  border-bottom: 1px solid var(--pwa-ash-200);
}

/* Accent top stripe — solid, no gradient */
#pwa-ios-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--pwa-accent);
}

#pwa-ios-banner .ios-head {
  display: flex;
  align-items: center;
  gap: .875rem;
}

#pwa-ios-banner .ios-logo {
  width: 46px; height: 46px;
  border-radius: 11px;
  object-fit: contain;
  border: 1px solid var(--pwa-ash-200);
  flex-shrink: 0;
}

#pwa-ios-banner .ios-title { flex: 1; }
#pwa-ios-banner .ios-title strong {
  display: block;
  font-family: var(--pwa-font-head);
  font-size: .9375rem;
  font-weight: 800;
  color: var(--pwa-ash-900);
  margin-bottom: .15rem;
}
#pwa-ios-banner .ios-title small {
  color: var(--pwa-ash-600);
  font-size: .8125rem;
}

#pwa-ios-banner .ios-close {
  width: 28px; height: 28px;
  background: var(--pwa-ash-100);
  border: none;
  border-radius: 50%;
  color: var(--pwa-ash-600);
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--pwa-transition);
}
#pwa-ios-banner .ios-close:hover { background: var(--pwa-ash-200); color: var(--pwa-ash-900); }

#pwa-ios-banner .ios-divider {
  height: 1px;
  background: var(--pwa-ash-100);
  margin: 0 -.25rem;
}

#pwa-ios-banner .ios-steps {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

#pwa-ios-banner .ios-step {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

#pwa-ios-banner .ios-step-num {
  width: 24px; height: 24px;
  background: var(--pwa-accent-bg);
  color: var(--pwa-accent-dark);
  border-radius: 50%;
  font-family: var(--pwa-font-head);
  font-size: .75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
}

#pwa-ios-banner .ios-step p {
  color: var(--pwa-ash-700);
  font-size: .8375rem;
  line-height: 1.5;
  margin: 0;
}

#pwa-ios-banner .ios-step p strong {
  color: var(--pwa-ash-900);
  font-weight: 700;
}

.ios-share-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--pwa-accent);
  color: var(--color-white);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--pwa-font-head);
  vertical-align: middle;
  margin: 0 1px;
}

/* ── Standalone safe-area padding ────────────────────────────*/
.pwa-standalone body {
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}

/* ── Animations ──────────────────────────────────────────────*/
@keyframes pwaSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
@keyframes pwaSlideDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);     }
}

/* ── Mobile: full-width bottom sheet ────────────────────────*/
@media (max-width: 500px) {
  #pwa-install-banner,
  #pwa-ios-banner {
    bottom: 0;
    left: 0; right: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: var(--pwa-radius-xl) var(--pwa-radius-xl) 0 0;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    animation: pwaSheetUp .38s cubic-bezier(.34,1.4,.64,1);
  }

  #pwa-ios-banner::after { display: none; }

  @keyframes pwaSheetUp {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0);    }
  }
}