/* ================================
   app.css (BASE + DASHBOARD)
   Modern Light UI (Bootstrap 5)
   ================================ */

:root{
  --bg:
    radial-gradient(900px circle at 12% 18%, rgba(110,231,183,.42), transparent 55%),
    radial-gradient(900px circle at 86% 16%, rgba(147,197,253,.55), transparent 55%),
    radial-gradient(900px circle at 72% 86%, rgba(251,191,36,.26), transparent 62%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 55%, #f5f7ff 100%);

  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15,23,42,.10);
  --border-strong: rgba(15,23,42,.14);

  --surface: rgba(255,255,255,.76);
  --surface-2: rgba(255,255,255,.62);

  --shadow: 0 20px 60px rgba(15,23,42,.12);
  --shadow-2: 0 12px 30px rgba(15,23,42,.10);

  --radius: 22px;

  --accent: #12828f;
  --accent-dark: #00525c;
  --accent-soft: rgba(18,130,143,.10);
}

html, body{ height: 100%; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* Safety net: nothing on this platform should ever force the whole page
     to scroll sideways. Tables/cards that need horizontal scroll handle it
     themselves (.table-responsive, .ff-project-table-wrap, etc.), so this
     only catches accidental 1-2px overflow from a stray element. */
  overflow-x: hidden;
}

/* Subtle waves texture */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image: url("/static/img/waves.svg");
  background-size: cover;
  background-position: center;
  opacity: .55;
  pointer-events: none;
  z-index: -1;
}

/* Floating blur blobs */
body::after{
  content:"";
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(600px circle at 20% 30%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(650px circle at 80% 30%, rgba(16,185,129,.10), transparent 60%),
    radial-gradient(700px circle at 60% 80%, rgba(245,158,11,.09), transparent 62%);
  filter: blur(14px);
  animation: floatBg 14s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -2;
}

@keyframes floatBg{
  from{ transform: translate3d(-12px,-10px,0) scale(1.02); }
  to{ transform: translate3d(14px,12px,0) scale(1.06); }
}

a{ color: var(--text); text-decoration: none; }
a:hover{ color: #0b1220; }

/* Shell spacing (account for fixed nav on logged-out pages) */
.app-shell{
  padding-top: 78px;
  min-height: calc(100vh - 120px);
}

/* Buttons / forms */
.btn{ border-radius: 14px; font-weight: 600; }
.btn-primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 14px 34px rgba(18,130,143,.22);
}
.btn-primary:hover{
  background: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}
.btn-outline-secondary{
  border-color: rgba(15,23,42,.22);
}

.form-control, .form-select{
  border-radius: 14px;
  border-color: var(--border-strong);
  background: rgba(255,255,255,.86);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(18,130,143,.45);
  box-shadow: 0 0 0 .25rem rgba(18,130,143,.12);
}

/* Glass helper */
.glass{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-2);
}

/* Tables */
.table{ color: var(--text); }
.table thead th{
  color: rgba(15,23,42,.78);
  border-color: var(--border);
}
.table td, .table th{ border-color: var(--border); }

/* Footer */
.footer{
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
}
.footer .text-muted{ color: rgba(15,23,42,.60) !important; }

/* Modal */
.modal-content{
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ================================
   DASHBOARD
   ================================ */

.dash-layout{
  display: flex;
  min-height: 100vh;
}

.dash-sidebar{
  width: 268px;
  padding: 18px 16px;
  display:flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  gap: 14px;
  background: rgba(255,255,255,.62);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(12px);
  transition: width .2s ease, padding .2s ease;
}

.dash-offcanvas{
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(14px);
}

.dash-brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 8px 10px;
}

.dash-brand-link{
  min-width: 0;
  display:flex;
  align-items:center;
  gap: 10px;
  color: inherit;
}

.dash-brand-text{
  white-space: nowrap;
}

.sidebar-toggle{
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display:grid;
  place-items:center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(18,130,143,.20);
  background: rgba(18,130,143,.10);
  color: var(--accent);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sidebar-toggle:hover{
  background: rgba(18,130,143,.16);
  border-color: rgba(18,130,143,.28);
  color: var(--accent-dark);
}

.sidebar-toggle:focus-visible{
  outline: 3px solid rgba(18,130,143,.18);
  outline-offset: 2px;
}


/* Compact back control used before page-title icons */
.page-back-icon{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: 8px;
  vertical-align: -3px;
  border-radius: 9px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.62);
  color: rgba(15,23,42,.78);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.page-back-icon:hover{
  background: rgba(18,130,143,.10);
  border-color: rgba(18,130,143,.20);
  color: var(--accent);
}

.page-back-icon:focus-visible{
  outline: 3px solid rgba(18,130,143,.18);
  outline-offset: 2px;
}


/* Shared page heading: keeps back button, section icon and title on one baseline */
.page-section-header{
  min-width: 0;
}

.page-heading-row{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.page-heading-row .page-back-icon{
  flex: 0 0 30px;
  margin-right: 0;
  vertical-align: middle;
}

.page-heading-icon{
  flex: 0 0 1.35rem;
  width: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
}

.page-heading-subtitle{
  margin-top: 0;
  /* Align subtitle with the title text, after the page icon. */
  margin-left: calc(1.35rem + 8px);
  font-size: 13px !important;
  line-height: 1.15;
}

/* With a back control, align subtitle after both the back button and page icon. */
.page-section-header--with-back .page-heading-subtitle{
  margin-left: calc(30px + 8px + 1.35rem + 8px);
}

.profile-page-header{
  text-align: left;
}

.profile-settings-row{
  margin-top: 24px;
}

.profile-settings-card{
  margin-top: 0;
}

.dash-logo{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(18,130,143,.10);
  border: 1px solid rgba(18,130,143,.18);
  color: var(--accent);
}

.dash-account{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
}

.dash-main{
  flex: 1;
  min-width: 0;
  padding: 18px 18px 38px;
}

.dash-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.62);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-2);
  margin-bottom: 16px;
}

.dash-title{
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dash-subtitle{
  font-size: .9rem;
  color: rgba(15,23,42,.62);
}

.dash-content{ margin-top: 12px; }

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
 
.sidebar-nav .nav-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  color: rgba(15,23,42,.84);
  border: 1px solid transparent;
}

.sidebar-nav .nav-item i{ font-size: 1.05rem; opacity: .9; }
.sidebar-nav .nav-item span{ font-weight: 600; }
.sidebar-nav .nav-item-badge{
  margin-left:auto;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#e6432c;
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  flex:0 0 auto;
}
.dash-sidebar.is-collapsed .sidebar-nav .nav-item-badge{ display:none; }

.sidebar-nav .nav-item:hover{
  background: rgba(255,255,255,.60);
  border-color: rgba(15,23,42,.08);
}

.sidebar-nav .nav-item.active{
  background: rgba(18,130,143,.10);
  border-color: rgba(18,130,143,.18);
  color: rgba(15,23,42,.95);
}

.sidebar-divider{
  height: 1px;
  background: rgba(15,23,42,.10);
  margin: 10px 6px;
}

/* Desktop sidebar collapsed state */
.dash-sidebar.is-collapsed{
  width: 104px;
  padding-inline: 12px;
}

.dash-sidebar.is-collapsed .dash-brand{
  gap: 6px;
  padding-inline: 0;
}

.dash-sidebar.is-collapsed .dash-brand-link{
  gap: 0;
}

.dash-sidebar.is-collapsed .dash-brand-text,
.dash-sidebar.is-collapsed .sidebar-nav .nav-item span{
  display: none;
}

.dash-sidebar.is-collapsed .sidebar-nav .nav-item{
  justify-content: center;
  padding-inline: 10px;
}

.dash-sidebar.is-collapsed .sidebar-nav .nav-item i{
  font-size: 1.15rem;
}

.dash-sidebar.is-collapsed .dash-account{
  padding: 8px;
}

/* Dashboard user chip (topbar) */
.sg-userchip{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
  backdrop-filter: blur(12px);
}
.sg-userchip .av{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(18,130,143,.10);
  border: 1px solid rgba(18,130,143,.16);
  color: var(--accent);
  font-weight: 600;
}
.sg-userchip .meta{ line-height: 1.05; }
.sg-userchip .k{
  font-size: .72rem;
  font-weight: 600;
  color: rgba(15,23,42,.55);
  text-transform: uppercase;
  letter-spacing: .10em;
}
.sg-userchip .v{
  font-size: .92rem;
  font-weight: 600;
  color: rgba(15,23,42,.88);
  max-width: 220px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stat cards used in dashboard.html */
.stat-card{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--shadow-2);
}
.stat-value{
  font-weight: 600;
  font-size: 1.25rem;
}
.stat-label{
  color: rgba(15,23,42,.65);
  font-size: .9rem;
}
body.landing .ready-card{
  border-radius: 26px;
  background: rgba(255,255,255,.38);   /* minimal + transparent */
  border: 1px solid rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(15,23,42,.06); /* very soft */
}
/* medium width modal */
.logout-md{
  max-width: 520px;   /* medium size */
  width: calc(100% - 24px);
  margin: 0 auto;
}

.logout-card{
  border-radius: 18px;
}

/* One-screen landing (no scroll) */
body.landing .sg-hero--onepage{
  min-height: 100vh;
  padding: 2.5rem 0;
}

/* Tighten sections and cards */
body.landing .sg-section--compact{
  padding: 0;
}

body.landing .sg-card--compact{
  padding: 1rem 1rem;
}

body.landing .sg-preview--compact .sg-preview-body{
  padding: 0.75rem 1rem 1rem;
}

/* Reduce big default margins if your styles add them */
body.landing .sg-feat-wrap{
  margin-top: 1rem !important;
}
.stat-card[role="button"]:hover{
    transform: translateY(-1px);
    transition: 120ms ease;
  }
 
  /* Fixed dashboard panels: do not expand, scroll inside */
  .dash-fixed {
    height: 300px;           /* same height for Recent/Folders/Clients */
    overflow: hidden;        /* prevent card from expanding */
    display: flex;
    flex-direction: column;
  }
 
  .dash-fixed-sm {
    height: 300px;           /* for Shared panel */
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* flex children must be allowed to shrink, otherwise scrolling won't work */
  .dash-fixed .dash-panel-body,
  .dash-fixed-sm .dash-panel-body {
    min-height: 0;
    flex: 1 1 auto;
  }

  /* scroll container inside the card */
  .dash-scroll {
    overflow: auto;
    min-height: 0;
    flex: 1 1 auto;
  }

  /* Make stat cards clickable nicely */
  a.stat-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
  }
  .stat-card[role="button"] { cursor: pointer; }
  .stat-card[role="button"]:hover{
    transform: translateY(-1px);
    transition: 120ms ease;
  }

.stat-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.stat-link .stat-card {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.stat-link:hover .stat-card {
  transform: translateY(-2px);
}

.stat-link:focus-visible .stat-card {
  outline: 2px solid rgba(18,130,143,.6); /* bootstrap primary-ish */
  outline-offset: 2px;
}
/* all 3 cards same height */
.action-card{
  min-height: 170px;                 /* adjust as you like */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.action-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
  border-color: rgba(18,130,143,0.25);
}

.action-card:active{ transform: translateY(-1px); }

.action-card:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(18,130,143,0.25), 0 14px 32px rgba(0,0,0,0.10);
}

.card-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 10px 12px;
}

/* ICON in center (looks like attractive badge) */
.icon-bubble{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(18,130,143,0.10);
}

.icon-bubble i{
  font-size: 26px;
}

.card-title{
  font-weight: 600;
  font-size: 16px;
  margin-top: 4px;
}

.card-subtitle{
  font-size: 13px;
  color: rgba(0,0,0,0.55);
}

.card-value{
  font-size: 22px;
  font-weight: 600;
  margin-top: 2px;
}
.search-wrap { min-width: 260px; }

.search-input{
  position: relative;
  width: 300px;
  max-width: 100%;
}

.search-input i{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0,0,0,0.45);
  pointer-events: none;
}
 
.search-input input{
  padding-left: 38px;   /* space for icon */
  border-radius: 14px;
}
/* ================================
   RESPONSIVE DASHBOARD (PATCH)
   Paste at END of app.css
   ================================ */

/* On mobile/tablet: sidebar should not be sticky 100vh */
@media (max-width: 991.98px){
  .dash-layout{
    display:block;                 /* stop flex layout forcing sidebar height issues */
    min-height:auto;
  }

  .dash-sidebar{
    position: static;
    height: auto;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    display: none !important;      /* keep desktop sidebar hidden on mobile */
  }

  .dash-main{
    padding: 14px 14px 24px;       /* tighter spacing */
  }
}

/* Add safe padding for very small phones */
@media (max-width: 575.98px){
  .dash-main{
    padding: 12px 12px 22px;
  }
}
/* Dashboard search should become full width on mobile */
@media (max-width: 575.98px){
  .search-wrap{
    min-width: 0 !important;
    width: 100%;
  }
  .search-input{
    width: 100% !important;
  }
}
/* ================================
   HORIZONTAL SCROLL INSIDE CARDS
   ================================ */
.dash-panel .table-responsive{
  width: 100%;
  overflow-x: auto;                 /* horizontal scroll */
  -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
}
 
/* Prevent table from shrinking too much */
.dash-panel table{
  min-width: 720px;                 /* adjust if needed */
}

/* If any list-group rows overflow, keep them clipped */
.dash-panel .list-group-item{
  overflow-x: auto;
}

/* Fixed panels should be auto height on small screens */
@media (max-width: 991.98px){
  .dash-fixed,
  .dash-fixed-sm{
    height: auto !important;
    overflow: visible !important;
  }

  .dash-scroll{
    overflow: visible !important;
  }

  .dash-table-scroll{
    max-height: none !important;
    overflow: visible !important;
  }
}
/* =========================
   CLIENTS PAGE RESPONSIVE
   ========================= */

/* Top bar: make search + button stack on mobile */
@media (max-width: 575.98px){
  /* this targets the 2nd row container (search + add button) */
  .d-flex.align-items-center.gap-2.w-100.justify-content-end{
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  /* make input group full width */
  .d-flex.align-items-center.gap-2.w-100.justify-content-end .input-group{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* make Add client button full width */
  .d-flex.align-items-center.gap-2.w-100.justify-content-end .btn.btn-primary{
    width: 100% !important;
  }
}


/* Give table a minimum width so it scrolls instead of squeezing badly */
#clientsTable{
  min-width: 780px;
}

/* Optional: keep long email from breaking layout */
#clientsTable td{
  white-space: nowrap;
}
#clientsTable td:first-child{
  white-space: normal; /* allow name/email block to wrap */
}
@media (max-width: 575.98px){
  #addClientModal .col-6{
    flex: 0 0 100%;
    max-width: 100%;
  }
}
 /* Mobile: sidebar offcanvas should be usable */
@media (max-width: 991.98px){
  .dash-layout{ display: block; }
  .dash-main{ padding: 14px 14px 24px; }
}
.text-success {
  font-size: 15px;}.modal { z-index: 3000 !important; }
.modal-backdrop { z-index: 2990 !important; }
/* scroll container bottom bar */
.card.glass .excel-scroll{
  overflow-x: auto !important;
  overflow-y: auto;                 /* keep your vertical scroll */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/*  THE REAL FIX: override bootstrap .table{width:100%} */
.card.glass table.excel-table{
  width: max-content !important;    /* do NOT fit container */
  min-width: 100% !important;       /* at least full width */
  table-layout: auto !important;    /* natural column sizing */
}

/* prevent wrapping so the table becomes wide -> scrollbar appears */
.card.glass table.excel-table th,
.card.glass table.excel-table td{
  white-space: nowrap !important;
}
/* Modern icon button */
.notif-btn{
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;             /* “app icon” feel */
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.notif-btn i{
  font-size: 1.15rem;
  opacity: .9;
}

.notif-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  background: #12828f;
}

.notif-btn:active{ transform: translateY(0); } 

.notif-btn:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(18,130,143,.18), 0 10px 28px rgba(0,0,0,.12);
}

/* Badge */
.notif-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: #ff3b30; /* iOS-like red */
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transform: scale(.92);
  transform-origin: center;
  animation: notifPop .18s ease-out;
}

@keyframes notifPop{
  from{ transform: scale(.6); }
  to{ transform: scale(.92); }
}

@media (prefers-reduced-motion: reduce){
  .notif-btn, .notif-badge{ transition:none; animation:none; }
}

/* Preview page heading and large-file scrolling */
.preview-page-header{
  min-width: 0;
}

.preview-file-name{
  max-width: min(70vw, 720px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0 !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  background-image: none !important;
}
.preview-file-name::before,
.preview-file-name::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
}

.preview-card{
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.preview-scroll-area{
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  min-height: 120px;
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.preview-table-scroll{
  position: relative;
  direction: ltr;
  scroll-padding-left: 1px;
}

/* Keep generated spreadsheet wrappers from swallowing the main scrollbars. */
.preview-table-scroll > div,
.preview-table-scroll .table-responsive{
  width: max-content;
  min-width: 100%;
  overflow: visible !important;
}

/* Generated spreadsheet HTML can use different table classes. */
.preview-table-scroll table{
  width: max-content !important;
  min-width: 100% !important;
  table-layout: auto !important;
  margin-bottom: 0 !important;
}

.preview-table-scroll th,
.preview-table-scroll td{
  white-space: nowrap !important;
  text-align: left !important;
  padding-left: .8rem !important;
  padding-right: .8rem !important;
}

/* Keep the first visible value safely inside the scroll viewport. */
.preview-table-scroll tr > :first-child{
  padding-left: 1rem !important;
}

.preview-table-scroll thead tr{
  text-align: left !important;
}

.preview-table-scroll thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-body-bg, #fff);
}

.preview-text-scroll pre{
  width: max-content;
  min-width: 100%;
  white-space: pre;
}

.preview-image-scroll{
  text-align: center;
}

.preview-image-scroll img{
  max-width: none;
}

@media (max-width: 767.98px){
  .preview-page-top{
    align-items: stretch !important;
  }

  .preview-actions{
    width: 100%;
    justify-content: flex-end;
  }

  .preview-file-name{
    max-width: calc(100vw - 80px);
  }

  .preview-scroll-area{
    max-height: calc(100vh - 275px);
  }
}


/* Dashboard: combined Recents (3/4) + Clients (1/4) row */
.dash-recents-card,
.dash-clients-card{
  height: 610px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dash-recents-card .dash-panel-body,
.dash-clients-card .dash-panel-body{
  min-height: 0;
  flex: 1 1 auto;
}

.recents-table{
  min-width: 920px !important;
}

.recent-name{
  max-width: 240px;
}

.recent-path{
  max-width: 180px;
  vertical-align: bottom;
}

.client-summary-list .list-group-item:first-child{
  border-top: 0;
}

.client-avatar{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: rgba(25, 135, 84, .12);
  color: var(--bs-success);
  font-weight: 600;
  text-transform: uppercase;
}

.client-stat-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 42px;
}

.min-w-0{
  min-width: 0;
}

.sticky-list-heading{
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 991.98px){
  .dash-recents-card,
  .dash-clients-card{
    height: auto;
    min-height: 420px;
  }

  .dash-recents-card .dash-scroll,
  .dash-clients-card .dash-scroll{
    max-height: 520px;
    overflow: auto !important;
  }
}

/* =========================================================
   GLOBAL DASHBOARD TOPBAR + INTERACTION POLISH
   ========================================================= */
.dash-sidebar-footer{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 15px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.48);
  white-space: nowrap;
  overflow: hidden;
}

.dash-sidebar.is-collapsed .dash-sidebar-footer{
  padding-inline: 8px;
}

.dash-sidebar.is-collapsed .dash-sidebar-footer span{
  display: none;
}

/* Small white "signed in as" card pinned to the bottom of the sidebar. */
.dash-sidebar-user-card{
  margin-top: auto;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: 0 4px 16px rgba(15,23,42,.10);
  min-width: 0;
}
.dash-sidebar-user-top{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dash-sidebar-user-copy{
  min-width: 0;
  flex: 1 1 auto;
}
.dash-sidebar-user-card .dash-sidebar-user-name{
  font-size: .78rem;
  font-weight: 700;
  color: #172033;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-sidebar-user-card .dash-sidebar-user-email{
  font-size: .66rem;
  color: #646d82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-sidebar-user-card .dash-sidebar-user-clock{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: .62rem;
  font-weight: 600;
  color: var(--workspace-primary, #12828f);
  background: var(--workspace-primary-soft, #f4faf7);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-sidebar-user-card .dash-sidebar-user-clock::before{
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}
.dash-sidebar.is-collapsed .dash-sidebar-user-card{
  display: none;
}
.offcanvas-body .dash-sidebar-user-card{
  margin-top: 0;
}

.dash-global-topbar{
  position: sticky;
  top: 12px;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 68px;
  margin-bottom: 20px;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,246,255,.86));
  box-shadow: 0 14px 38px rgba(15,23,42,.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.topbar-page-context{
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}

.topbar-page-kicker{
  color: var(--accent);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.topbar-page-name{
  max-width: min(48vw, 420px);
  overflow: hidden;
  color: rgba(15,23,42,.88);
  font-size: .94rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-menu-btn{
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(18,130,143,.18);
  border-radius: 13px;
  background: rgba(18,130,143,.09);
  color: var(--accent);
  font-size: 1.3rem;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.topbar-profile-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  max-width: 280px;
  padding: 5px 10px 5px 6px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.78);
  color: var(--text);
  box-shadow: 0 8px 22px rgba(15,23,42,.07);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.topbar-profile-btn::after{
  display: none;
}

.topbar-profile-avatar{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(18,130,143,.20);
  border-radius: 12px;
  background: linear-gradient(145deg, #12828f, #43a79d);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(18,130,143,.22);
}

.topbar-profile-copy{
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.08;
}

.topbar-profile-name{
  max-width: 150px;
  overflow: hidden;
  font-size: .86rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-profile-role{
  margin-top: 3px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
}

.topbar-profile-chevron{
  color: rgba(15,23,42,.46);
  font-size: .75rem;
  transition: transform .18s ease;
}

.topbar-profile-btn[aria-expanded="true"] .topbar-profile-chevron{
  transform: rotate(180deg);
}

.topbar-profile-menu{
  width: min(300px, calc(100vw - 28px));
  margin-top: 10px !important;
  padding: 8px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 22px 55px rgba(15,23,42,.17) !important;
}

.topbar-profile-summary{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px 7px;
}

.topbar-profile-avatar-lg{
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 14px;
}

.topbar-profile-menu .dropdown-divider{
  margin: 6px 4px;
  border-color: rgba(15,23,42,.08);
}

.topbar-profile-menu .dropdown-item{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 600;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.dropdown-item-icon{
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(18,130,143,.09);
  color: var(--accent);
}

.topbar-profile-menu .dropdown-item.text-danger .dropdown-item-icon{
  background: rgba(220,53,69,.09);
  color: var(--bs-danger);
}

/* Give all dashboard cards a clearer surface and depth. */
.dash-content .card.glass:not(.modal-content),
.dash-content .glass.card:not(.modal-content){
  border-color: rgba(15,23,42,.09);
  background:
    radial-gradient(420px circle at 100% 0%, rgba(96,165,250,.10), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,252,.82));
  box-shadow:
    0 16px 42px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.78);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Dashboard quick-action cards receive a slightly stronger visual identity. */
.action-card{
  background:
    radial-gradient(180px circle at 50% 0%, rgba(18,130,143,.13), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,246,255,.82));
  box-shadow: 0 14px 34px rgba(15,23,42,.08);
}

.icon-bubble{
  border: 1px solid rgba(18,130,143,.16);
  background: linear-gradient(145deg, rgba(18,130,143,.13), rgba(96,165,250,.08));
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Softer, more intentional table and navigation interactions. */
.table-hover > tbody > tr > *{
  transition: background-color .16s ease, color .16s ease;
}

.nav-pills .nav-link,
.table-control-btn,
.compact-menu .dropdown-item{
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

@media (hover: hover){
  .topbar-menu-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(18,130,143,.30);
    background: rgba(18,130,143,.14);
  }

  .topbar-profile-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(18,130,143,.22);
    background: #fff;
    box-shadow: 0 12px 28px rgba(15,23,42,.11);
  }

  .topbar-profile-menu .dropdown-item:hover{
    transform: translateX(2px);
    background: rgba(18,130,143,.08);
    color: var(--accent-dark);
  }

  .topbar-profile-menu .dropdown-item.text-danger:hover{
    background: rgba(220,53,69,.08);
    color: var(--bs-danger) !important;
  }

  .dash-content .card.glass:not(.modal-content):hover,
  .dash-content .glass.card:not(.modal-content):hover{
    transform: translateY(-2px);
    border-color: rgba(18,130,143,.19);
    box-shadow:
      0 22px 52px rgba(15,23,42,.12),
      0 0 0 1px rgba(18,130,143,.035),
      inset 0 1px 0 rgba(255,255,255,.86);
  }

  .action-card:hover .icon-bubble{
    transform: translateY(-3px) scale(1.04);
    background: linear-gradient(145deg, rgba(18,130,143,.18), rgba(96,165,250,.11));
    box-shadow: 0 10px 24px rgba(18,130,143,.15);
  }

  .table-hover > tbody > tr:hover > *{
    --bs-table-bg-state: rgba(18,130,143,.055);
  }

  .btn:not(.btn-close):not(.topbar-profile-btn):hover{
    transform: translateY(-1px);
  }

  .sidebar-nav .nav-item:hover{
    transform: translateX(2px);
    background: rgba(255,255,255,.82);
    border-color: rgba(18,130,143,.12);
    box-shadow: 0 7px 18px rgba(15,23,42,.055);
  }
}

.topbar-menu-btn:focus-visible,
.topbar-profile-btn:focus-visible{
  outline: 3px solid rgba(18,130,143,.18);
  outline-offset: 2px;
}

@media (max-width: 767.98px){
  .dash-global-topbar{
    top: 8px;
    min-height: 60px;
    margin-bottom: 16px;
    padding: 8px;
    border-radius: 17px;
  }

  .topbar-page-kicker{
    display: none;
  }

  .topbar-page-name{
    max-width: 48vw;
    font-size: .88rem;
  }

  .topbar-profile-btn{
    min-height: 42px;
    padding: 3px 7px 3px 4px;
    border-radius: 13px;
  }

  .topbar-profile-avatar{
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 11px;
  }
}

/* =========================================================
   COMPACT PROFILE MENU — sits in the existing page header row
   ========================================================= */
.dash-content{
  position: relative;
}

.compact-profile-menu{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1035;
}

.compact-profile-btn{
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(18,130,143,.18);
  border-radius: 50%;
  background: linear-gradient(145deg, #12828f, #12828f);
  color: #fff;
  font-size: .84rem;
  line-height: 1;
  box-shadow: 0 5px 14px rgba(18,130,143,.20);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.compact-profile-btn::after{
  display: none;
}

.compact-profile-btn:hover,
.compact-profile-btn[aria-expanded="true"]{
  color: #fff;
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 7px 17px rgba(18,130,143,.27);
}

.compact-profile-btn:focus-visible{
  outline: 3px solid rgba(18,130,143,.20);
  outline-offset: 2px;
}

.compact-profile-dropdown{
  min-width: 132px;
  width: 132px;
  margin-top: 6px !important;
  padding: 4px;
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 28px rgba(15,23,42,.14) !important;
}

.compact-profile-dropdown .dropdown-item{
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
}

.compact-profile-dropdown .dropdown-item i{
  width: 14px;
  text-align: center;
  font-size: .78rem;
}

.compact-profile-dropdown .dropdown-item:hover,
.compact-profile-dropdown .dropdown-item:focus{
  background: rgba(18,130,143,.08);
  color: #00525c;
}

.compact-profile-dropdown .dropdown-item.text-danger:hover,
.compact-profile-dropdown .dropdown-item.text-danger:focus{
  background: rgba(220,38,38,.08);
  color: #dc2626 !important;
}

/* Keep the small icon in the same visual row as each page title/search area. */
.dash-content > .compact-profile-menu + .d-flex,
.dash-content > .compact-profile-menu + .preview-page-top,
.dash-content > .compact-profile-menu + .page-section-header{
  padding-right: 46px;
}

.compact-mobile-menu{
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 10px;
  padding: 0;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 9px;
  background: rgba(255,255,255,.82);
  color: var(--text);
  font-size: 1rem;
  box-shadow: 0 5px 14px rgba(15,23,42,.07);
}

@media (max-width: 575.98px){
  .compact-profile-btn{
    width: 32px;
    height: 32px;
    font-size: .78rem;
  }

  .compact-profile-dropdown{
    min-width: 126px;
    width: 126px;
  }

  .dash-content > .compact-profile-menu + .d-flex,
  .dash-content > .compact-profile-menu + .preview-page-top,
  .dash-content > .compact-profile-menu + .page-section-header{
    padding-right: 42px;
  }
}

/* ======================================================================
   WORKSPACE REDESIGN V3
   Unified dashboard palette, spacing, cards, forms, tables and alignment.
   ====================================================================== */

:root{
  --workspace-bg: #f4faf7;
  --workspace-surface: #ffffff;
  --workspace-surface-soft: #f8fafc;
  --workspace-text: #2d2d2d; 
  --workspace-muted: #404e5c;
  --workspace-line: #dcebe5;
  --workspace-line-strong: #c6e2d7;
  --workspace-primary: #12828f;
  --workspace-primary-dark: #00525c;
  --workspace-primary-soft: #f4faf7;
  --workspace-cyan: #12828f;
  --workspace-success: #059669;
  --workspace-warning: #ff7f50;
  --workspace-danger: #dc2626;
  --workspace-radius: 16px;
  --workspace-radius-sm: 11px;
  --workspace-shadow: 0 10px 30px rgba(30, 41, 59, .07);
  --workspace-shadow-hover: 0 18px 42px rgba(30, 41, 59, .11);
}

/* Clean dashboard canvas. Landing and authentication pages keep their own art. */
body:not(.landing):not(.auth){
  background: var(--workspace-bg) !important;
  color: var(--workspace-text);
}
body:not(.landing):not(.auth)::before,
body:not(.landing):not(.auth)::after{
  display: none !important;
}

/* Main application structure */
.dash-layout{ 
  background: var(--workspace-bg);
}

.dash-main{
  padding: 26px 30px 42px;
  background:
    radial-gradient(700px circle at 98% 0%, rgba(18,130,143,.055), transparent 54%), 
    var(--workspace-bg);
}

.dash-content{
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: start;
  position: relative;
}

/* Every normal page block spans the workspace. The first block shares row 1
   with the compact profile icon, ensuring true vertical alignment. */
.dash-content > :not(.compact-profile-menu){
  grid-column: 1 / -1;
}
.dash-content > .compact-profile-menu{
  position: static !important;
  inset: auto !important;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  margin: 0;
  z-index: 1035;
}
.dash-content > .compact-profile-menu + *{
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding-right: 0 !important;
}
 
/* Sidebar */
.dash-sidebar{
  width: 254px;
  padding: 18px 14px;
  gap: 18px;
  background: linear-gradient(180deg, #00525c 0%, #206358 100%) !important;   
  border-right: 0;
  box-shadow: 10px 0 34px rgba(15,23,42,.11);
  backdrop-filter: none;
}

.dash-brand{
  min-height: 48px;
  padding: 4px 8px 12px;
}
.dash-brand-link,
.dash-brand-link:hover{
  color: #fff;
}
.dash-logo{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.11);
  color: #c6e2d7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.dash-brand-text{
  font-size: .96rem;
  letter-spacing: -.02em;
}
.sidebar-toggle{
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 9px;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #c6e2d7;
}
.sidebar-toggle:hover{
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.14);
  color: #fff;
}
.sidebar-nav{
  gap: 5px;
}
.sidebar-nav .nav-item{
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 11px;
  color: rgba(226,232,240,.78);
  font-size: .9rem;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.sidebar-nav .nav-item i{
  width: 20px;
  color: #9bcdbd;
  opacity: 1;
}
.sidebar-nav .nav-item span{
  font-weight: 600;
}
.sidebar-nav .nav-item:hover{
  transform: translateX(2px);
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.08) !important;
  color: #fff;
  box-shadow: none !important;
}
.sidebar-nav .nav-item.active{
  border-color: rgba(165,180,252,.20);
  background: linear-gradient(135deg, rgba(18,130,143,.40), rgba(18,130,143,.24)) !important;
  color: #fff;
  box-shadow: inset 3px 0 0 #9bcdbd;
}
.sidebar-nav .nav-item.active i{
  color: #fff;
}
.dash-sidebar-footer{
  margin-top: auto;
  padding: 14px 10px 5px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(226,232,240,.58) !important;
}
.dash-sidebar.is-collapsed{
  width: 86px;
  padding-inline: 12px;
}
.dash-sidebar.is-collapsed .dash-brand{
  justify-content: center;
}
.dash-sidebar.is-collapsed .sidebar-toggle{
  position: absolute;
  top: 26px;
  right: -14px;
  background: #fff;
  color: var(--workspace-primary);
  border-color: var(--workspace-line);
  box-shadow: 0 5px 18px rgba(15,23,42,.14);
}
.dash-sidebar.is-collapsed .dash-sidebar-footer span{
  display: none;
}
.dash-sidebar.is-collapsed .dash-sidebar-footer{
  text-align: center;
}

/* Page headings */
.dash-content > .d-flex:first-of-type,
.dash-content > .page-section-header:first-of-type,
.dash-content > .preview-page-top:first-of-type{
  min-height: 46px;
}
.page-section-header{
  min-width: 0;
}
.page-heading-row{
  gap: 10px;
  min-height: 38px;
}
.page-heading-row h1,
.page-heading-row .h1,
.page-heading-row .h2,
.page-heading-row .h3,
.page-heading-row .h4{
  color: var(--workspace-text);
  font-weight: 600 !important;
  letter-spacing: -.025em;
}
.page-heading-icon{
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  background: linear-gradient(145deg, #f4faf7, #c6e2d7);
  border: 1px solid #dcebe5;
  color: var(--workspace-primary);
  font-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.page-heading-subtitle{
  margin-top: 3px;
  margin-left: 48px;
  color: var(--workspace-muted) !important;
  font-size: .8rem !important;
  line-height: 1.3;
}
.page-section-header--with-back .page-heading-subtitle{
  margin-left: 86px;
}
.page-back-icon{
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin-right: 0;
  border-radius: 9px;
  border-color: var(--workspace-line);
  background: #fff;
  color: #657189;
  box-shadow: 0 3px 10px rgba(15,23,42,.045);
}
.page-back-icon:hover{
  border-color: #c6e2d7;
  background: var(--workspace-primary-soft);
  color: var(--workspace-primary);
}

/* Small profile control, now genuinely in the same grid row as title/search. */
.compact-profile-btn{
  width: 36px;
  height: 36px;
  border: 1px solid #d8def0;
  border-radius: 50%;
  background: #fff;
  color: var(--workspace-primary);
  font-size: .9rem;
  box-shadow: 0 5px 15px rgba(30,41,59,.09);
}
.compact-profile-btn:hover,
.compact-profile-btn[aria-expanded="true"]{
  color: #fff;
  border-color: var(--workspace-primary);
  background: var(--workspace-primary);
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 19px rgba(18,130,143,.23);
}
.compact-profile-dropdown{
  min-width: 138px;
  width: 138px;
  margin-top: 8px !important;
  padding: 5px;
  border: 1px solid var(--workspace-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(30,41,59,.15) !important;
}
.compact-profile-dropdown .dropdown-item{
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #354158;
  font-size: .79rem;
  font-weight: 600;
}
.compact-profile-dropdown .dropdown-item:hover,
.compact-profile-dropdown .dropdown-item:focus{
  background: var(--workspace-primary-soft);
  color: var(--workspace-primary-dark);
}

/* Cards and panels */
.dash-content .card,
.dash-content .glass,
.dash-panel,
.stat-card,
.action-card{
  border-color: var(--workspace-line) !important;
}
.dash-content .card.glass:not(.modal-content),
.dash-content .glass.card:not(.modal-content),
.dash-panel,
.stat-card,
.action-card{
  border-radius: var(--workspace-radius) !important;
  background: var(--workspace-surface) !important;
  box-shadow: var(--workspace-shadow) !important;
  backdrop-filter: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.dash-content .card.glass:not(.modal-content),
.dash-content .glass.card:not(.modal-content){
  padding: 20px !important;
}
.dash-content .card.glass:not(.modal-content):hover,
.dash-content .glass.card:not(.modal-content):hover,
.dash-panel:hover{
  transform: translateY(-2px);
  border-color: #d5dcf0 !important;
  box-shadow: var(--workspace-shadow-hover) !important;
}
.dash-content .card h2,
.dash-content .card h3,
.dash-content .card h4,
.dash-content .card h5,
.dash-content .card h6,
.dash-panel h2,
.dash-panel h3,
.dash-panel h4,
.dash-panel h5,
.dash-panel h6{
  color: #1f2a44;
  letter-spacing: -.015em;
}

/* Dashboard metric cards */
.stat-card{
  min-height: 108px;
  padding: 18px 18px 17px !important;
  position: relative;
  overflow: hidden;
}
.stat-card::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 74px;
  height: 74px;
  border-radius: 0 0 0 74px;
  background: linear-gradient(145deg, rgba(18,130,143,.12), rgba(8,145,178,.04));
  pointer-events: none;
}
.stat-value{
  color: #1e2a44;
  font-size: 1.55rem;
  font-weight: 780;
  letter-spacing: -.035em;
}
.stat-label{
  margin-top: 5px;
  color: var(--workspace-muted);
  font-size: .8rem;
  font-weight: 600;
}
.stat-link:hover .stat-card,
.stat-card[role="button"]:hover{
  transform: translateY(-3px);
  border-color: #cdd6ee !important;
  box-shadow: var(--workspace-shadow-hover) !important;
}

/* Dashboard action cards */
.action-card{
  min-height: 154px;
  overflow: hidden;
}
.action-card:hover{
  transform: translateY(-3px);
  border-color: #c6e2d7 !important;
}
.icon-bubble{
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border-color: #dcebe5;
  background: var(--workspace-primary-soft);
  color: var(--workspace-primary);
  box-shadow: none;
}
.icon-bubble i{
  font-size: 23px;
}
.card-title{
  color: #26324a;
  font-size: .95rem;
  font-weight: 720;
}
.card-subtitle{
  color: var(--workspace-muted);
  font-size: .78rem;
}
.card-value{
  color: var(--workspace-primary-dark);
  font-size: 1.35rem;
  font-weight: 780;
}

/* Consistent panel headers and fixed dashboard panels */
.dash-fixed,
.dash-fixed-sm{
  height: 314px;
}
.dash-panel .border-bottom,
.card .border-bottom{
  border-color: var(--workspace-line) !important;
}
.dash-panel-body{
  padding-top: 2px;
}

/* Forms and search controls */
.form-label{
  margin-bottom: 6px;
  color: #41506a;
  font-size: .78rem;
  font-weight: 600;
}
.form-control,
.form-select{
  min-height: 40px;
  border: 1px solid var(--workspace-line-strong);
  border-radius: var(--workspace-radius-sm);
  background-color: var(--workspace-surface-soft);
  color: #27334b;
  font-size: .88rem;
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.form-control:hover,
.form-select:hover{
  border-color: #c7d0df;
  background: #fff;
}
.form-control:focus,
.form-select:focus{
  border-color: #9bcdbd;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(18,130,143,.10);
}
.form-control::placeholder{
  color: #9aa5b6;
}
.search-input,
.clients-search{
  min-width: 270px;
}
.search-input input,
.clients-search .form-control{
  min-height: 40px;
  border-radius: 11px;
  background: #fff;
}
.search-input i,
.clients-search-icon{
  color: #8995a8 !important;
}
.input-group-text{
  border-color: var(--workspace-line-strong);
  background: #f8fafc;
  color: #768298;
}

/* Buttons */
.btn{
  min-height: 38px;
  padding: .48rem .82rem;
  border-radius: 10px;
  font-size: .84rem;
  font-weight: 600;
  box-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn-sm{
  min-height: 32px;
  padding: .34rem .6rem;
  border-radius: 9px;
  font-size: .77rem;
}
.btn-primary{
  border-color: var(--workspace-primary) !important;
  background: var(--workspace-primary) !important;
  box-shadow: 0 7px 16px rgba(18,130,143,.18);
}
.btn-primary:hover{
  border-color: var(--workspace-primary-dark) !important;
  background: var(--workspace-primary-dark) !important;
  box-shadow: 0 9px 20px rgba(18,130,143,.23);
}
.btn-outline-primary{
  border-color: #c6e2d7;
  background: #fff;
  color: var(--workspace-primary);
}
.btn-outline-primary:hover{
  border-color: var(--workspace-primary);
  background: var(--workspace-primary-soft);
  color: var(--workspace-primary-dark);
}
.btn-outline-secondary{
  border-color: var(--workspace-line-strong);
  background: #fff;
  color: #536179;
}
.btn-outline-secondary:hover{
  border-color: #bfc8d7;
  background: #f6f8fb;
  color: #27334b;
}
.btn-danger{
  border-color: var(--workspace-danger);
  background: var(--workspace-danger);
}
.btn:not(.btn-close):not(.compact-profile-btn):hover{
  transform: translateY(-1px);
}

/* Tables */
.table-responsive{
  border-radius: 12px;
}
.table{
  --bs-table-bg: transparent;
  margin-bottom: 0;
  color: #334155;
  font-size: .84rem;
}
.table > :not(caption) > * > *{
  padding: .86rem .8rem;
  border-bottom-color: #edf1f6;
  vertical-align: middle;
}
.table thead th{
  padding-top: .72rem;
  padding-bottom: .72rem;
  border-bottom: 1px solid var(--workspace-line) !important;
  background: #f7f9fc;
  color: #6a768b;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table thead th:first-child{
  border-radius: 10px 0 0 10px;
}
.table thead th:last-child{
  border-radius: 0 10px 10px 0;
}
.table tbody tr:last-child td{
  border-bottom: 0;
}
.table-hover > tbody > tr > *{
  transition: background .15s ease, color .15s ease;
}
.table-hover > tbody > tr:hover > *{
  --bs-table-bg-state: #f5f7ff;
}
.table tbody tr:hover a{
  color: var(--workspace-primary-dark);
}

/* Lists, tabs and badges */
.list-group-item{
  border-color: #edf1f6;
  background: transparent;
}
.list-group-item:hover{
  background: #f8faff;
}
.nav-pills{
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--workspace-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(30,41,59,.045);
  width: fit-content;
}
.nav-pills .nav-link{
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 8px;
  color: #657189;
  font-size: .8rem;
  font-weight: 600;
}
.nav-pills .nav-link:hover{
  background: #f3f5fa;
  color: #344157;
}
.nav-pills .nav-link.active{
  background: var(--workspace-primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(18,130,143,.20);
}
.badge{
  padding: .38rem .55rem;
  border-radius: 8px;
  font-size: .68rem;
  font-weight: 600;
}
.badge-soft{
  border: 1px solid #dcebe5;
  background: var(--workspace-primary-soft);
  color: var(--workspace-primary-dark);
}
.text-bg-success{
  background: #ecfdf5 !important;
  color: #047857 !important;
}
.text-bg-warning{
  background: #fff1ec !important;
  color: #b45309 !important;
}
.text-bg-secondary{
  background: #f1f5f9 !important;
  color: #64748b !important;
}
.text-muted{
  color: var(--workspace-muted) !important;
}

/* Toolbars, dropdowns and action clusters */
.table-controls-bar{
  padding: 10px;
  border: 1px solid var(--workspace-line);
  border-radius: 12px;
  background: #f8fafc;
}
.table-control-btn{
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--workspace-line-strong);
  border-radius: 9px;
  background: #fff;
  color: #536179;
  font-size: .78rem;
  font-weight: 600;
}
.table-control-btn:hover{
  border-color: #c6e2d7;
  background: var(--workspace-primary-soft);
  color: var(--workspace-primary-dark);
}
.dropdown-menu:not(.compact-profile-dropdown){
  padding: 7px;
  border: 1px solid var(--workspace-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(30,41,59,.13) !important;
}
.dropdown-menu .dropdown-item{
  border-radius: 8px;
  font-size: .82rem;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background: var(--workspace-primary-soft);
  color: var(--workspace-primary-dark);
}
.clients-actions,
.d-flex.gap-2:has(> .btn-sm){
  gap: 6px !important;
}
.clients-actions .btn,
td .btn-sm{
  width: 32px;
  padding-inline: 0;
}

/* Modals */
.modal-content,
.modal-content.glass{
  border: 1px solid var(--workspace-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 28px 70px rgba(15,23,42,.20) !important;
  backdrop-filter: none !important;
}
.modal-header,
.modal-footer{
  border-color: var(--workspace-line) !important;
}
.modal-title{
  color: #26324a;
  font-weight: 720;
}

/* Notifications and small utility buttons */
.notif-btn,
.compact-mobile-menu{
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border-color: var(--workspace-line-strong);
  background: #fff;
  color: #59667c;
  box-shadow: 0 5px 15px rgba(30,41,59,.07);
}
.notif-btn:hover,
.compact-mobile-menu:hover{
  border-color: #c6e2d7;
  background: var(--workspace-primary-soft);
  color: var(--workspace-primary);
}
.notif-badge{
  border: 2px solid #fff;
  background: var(--workspace-danger);
}

/* Better row/column rhythm throughout dashboard pages */
.dash-content > .row{
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.25rem;
}
.dash-content > .row + .row{
  margin-top: .1rem;
}
.profile-settings-row{
  margin-top: 20px;
}
.profile-settings-card{
  max-width: 100%;
}
.alert.glass{
  border-radius: 12px;
  background: #fff !important;
  box-shadow: 0 7px 22px rgba(30,41,59,.07) !important;
}

/* Responsive */
@media (max-width: 1199.98px){
  .dash-main{
    padding: 22px 22px 36px;
  }
  .dash-sidebar{
    width: 232px;
  }
}

@media (max-width: 991.98px){
  .dash-main{
    padding: 16px 16px 30px;
  }
  .dash-content{
    column-gap: 9px;
  }
  .dash-offcanvas{
    background: linear-gradient(180deg, #111827 0%, #172554 100%);
    color: #fff;
  }
  .dash-offcanvas .offcanvas-header{
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .dash-offcanvas .btn-close{
    filter: invert(1);
  }
  .dash-offcanvas .btn-outline-secondary{
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: #fff;
  }
  .compact-mobile-menu{
    margin-bottom: 12px;
  }
}

@media (max-width: 767.98px){
  .dash-content > .compact-profile-menu + *{
    padding-right: 0 !important;
  }
  .dash-content > .compact-profile-menu{
    align-self: start;
    margin-top: 1px;
  }
  .page-heading-icon{
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 10px;
  }
  .page-heading-subtitle{
    margin-left: 44px;
  }
  .page-section-header--with-back .page-heading-subtitle{
    margin-left: 80px;
  }
  .dash-content .card.glass:not(.modal-content),
  .dash-content .glass.card:not(.modal-content){
    padding: 16px !important;
  }
  .search-input,
  .clients-search{
    min-width: 0;
    width: 100%;
  }
  .dash-content > .compact-profile-menu + .d-flex{
    gap: 12px !important;
  }
}

@media (max-width: 575.98px){
  .dash-main{
    padding: 12px 12px 26px;
  }
  .dash-content{
    column-gap: 8px;
  }
  .compact-profile-btn{
    width: 34px;
    height: 34px;
  }
  .page-heading-row h1,
  .page-heading-row .h3,
  .page-heading-row .h4{
    font-size: 1.08rem !important;
  }
  .page-heading-subtitle{
    font-size: .74rem !important;
  }
  .btn{
    min-height: 36px;
  }
  .nav-pills{
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .nav-pills .nav-link{
    white-space: nowrap;
  }
  .stat-card{
    min-height: 96px;
  }
}

/* ======================================================================
   FINAL HEADER ALIGNMENT FIX
   Dashboard profile control lives inside the same flex row as search.
   ====================================================================== */
.dashboard-header-actions{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.dashboard-header-actions .compact-profile-menu{
  position: static !important;
  inset: auto !important;
  display: flex;
  align-items: center;
  align-self: center;
  margin: 0 !important;
  flex: 0 0 auto;
  z-index: 1035;
}

.dashboard-header-actions .compact-profile-btn{
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  flex: 0 0 40px;
  align-self: center;
}

.dashboard-header-actions .search-wrap,
.dashboard-header-actions .search-input,
.dashboard-header-actions .search-input input{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 767.98px){
  .dashboard-header-actions{
    width: 100%;
    flex-wrap: wrap;
  }

  .dashboard-header-actions .search-wrap{
    flex: 1 1 220px;
  }

  .dashboard-header-actions .compact-profile-btn{
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex-basis: 38px;
  }
}


/* ======================================================================
   VISUAL REFRESH V4 - NEUTRAL BACKGROUND
   Keep the original workspace/card colors. Only the bell is purple and
   decorative shapes are transparent overlays without recoloring surfaces.
   ====================================================================== */

/* Restore the original workspace canvas colors */
body:not(.landing):not(.auth){
  background: var(--workspace-bg) !important;
}

.dash-layout{
  background: var(--workspace-bg) !important;
}

.dash-main{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px circle at 98% 0%, rgba(18,130,143,.055), transparent 54%),
    var(--workspace-bg) !important;
}

/* Minimal transparent bubbles/waves only */
.dash-main::before,
.dash-main::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.dash-main::before{
  background:
    radial-gradient(180px circle at 10% 16%, rgba(18,130,143,.035), transparent 70%),
    radial-gradient(150px circle at 88% 12%, rgba(18,130,143,.028), transparent 72%),
    radial-gradient(170px circle at 76% 82%, rgba(18,130,143,.022), transparent 72%);
}

.dash-main::after{
  background:
    radial-gradient(125% 52% at 52% -10%, transparent 69%, rgba(18,130,143,.025) 69.5%, rgba(18,130,143,.025) 70.5%, transparent 71.2%),
    radial-gradient(118% 48% at 45% -13%, transparent 76%, rgba(18,130,143,.018) 76.5%, rgba(18,130,143,.018) 77.4%, transparent 78%);
}

.dash-content{
  position: relative;
  z-index: 1;
}

/* Purple notification icon by default */
.notif-btn{
  border-color: #c6e2d7 !important;
  background: #fff !important;
  color: var(--workspace-primary) !important;
  box-shadow: 0 7px 18px rgba(18,130,143,.12) !important;
}
.notif-btn i{
  color: var(--workspace-primary) !important;
}
.notif-btn:hover,
.notif-btn:focus-visible{
  border-color: var(--workspace-primary) !important;
  background: var(--workspace-primary-soft) !important;
  color: var(--workspace-primary-dark) !important;
}

/* Dashboard cards use the original application styling. */

@media (max-width: 991.98px){
  .dash-main::after{ opacity: .75; }
}

/* ======================================================================
   LAYOUT STABILITY FIX
   - Keep page content out of the old profile-alignment grid.
   - Place the profile icon inside each page's real header action row.
   - Keep every Bootstrap modal inside the viewport with internal scrolling.
   ====================================================================== */

.dash-content{
  display: block !important;
  position: relative;
}

.dash-content > *{
  grid-column: auto !important;
  grid-row: auto !important;
}

.compact-profile-menu{
  position: relative !important;
  inset: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  margin: 0 !important;
  z-index: 1045;
}

.compact-profile-btn,
.dashboard-header-actions .compact-profile-btn{
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  margin: 0;
  align-self: center;
}

.page-header-actions,
.clients-header-actions,
.preview-actions,
.dashboard-header-actions,
.dash-content > .d-flex > .d-flex:has(.compact-profile-menu){
  display: flex;
  align-items: center !important;
  gap: 8px;
}

.page-header-actions{
  flex: 0 0 auto;
  margin-left: auto;
}

/* Bootstrap modals must not behave like grid/page children. */
.dash-content > .modal,
.dash-main .modal{
  grid-column: auto !important;
  grid-row: auto !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 3000 !important;
}

.modal-backdrop{
  z-index: 2990 !important;
}

.modal-dialog{
  width: auto;
  max-height: calc(100dvh - 32px);
  margin: 16px auto !important;
  pointer-events: none;
}

.modal-dialog-centered{
  min-height: calc(100dvh - 32px) !important;
  display: flex;
  align-items: center;
}

.modal-content,
.modal-content.glass{
  width: 100%;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}

.modal-header,
.modal-footer{
  flex: 0 0 auto;
}

.modal-body{
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Prevent large form dialogs from extending below shorter laptop screens. */
#addClientModal .modal-dialog,
#uploadModal .modal-dialog,
#newFolderModal .modal-dialog,
#renameModal .modal-dialog,
#shareModal .modal-dialog{
  max-height: calc(100dvh - 32px);
}

#addClientModal .modal-body,
#uploadModal .modal-body,
#newFolderModal .modal-body,
#renameModal .modal-body,
#shareModal .modal-body{
  scrollbar-width: thin;
}

@media (max-width: 991.98px){
  .clients-header-actions{
    flex-wrap: wrap;
  }
}

@media (max-width: 767.98px){
  .page-header-actions,
  .preview-actions,
  .clients-header-actions,
  .dashboard-header-actions{
    align-items: center !important;
  }

  .modal-dialog,
  .modal-dialog-centered{
    min-height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px);
    margin: 8px auto !important;
    align-items: flex-start;
  }

  .modal-content,
  .modal-content.glass{
    max-height: calc(100dvh - 16px);
    border-radius: 15px !important;
  }
}

@media (max-width: 575.98px){
  .compact-profile-btn,
  .dashboard-header-actions .compact-profile-btn{
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex-basis: 38px;
  }

  .page-header-actions{
    margin-left: 0;
  }

  .clients-header-actions .clients-search{
    flex: 1 1 100%;
  }

  .clients-header-actions .clients-add{
    flex: 1 1 auto;
  }
}

.modal-content > form{
  min-height: 0;
  max-height: inherit;
  display: flex;
  flex-direction: column;
}

.modal-content > form > .modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}


/* ======================================================================
   FINAL TUNE
   Unified purple accents across pages + dashboard-only background art.
   ====================================================================== */

body:not(.landing):not(.auth){
  --bs-primary: var(--workspace-primary);
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color-rgb: 67, 56, 202;
}

body:not(.landing):not(.auth) .link-primary,
body:not(.landing):not(.auth) .text-primary,
body:not(.landing):not(.auth) .page-link,
body:not(.landing):not(.auth) .dropdown-item.active,
body:not(.landing):not(.auth) .dropdown-item:active{
  color: var(--workspace-primary);
}

body:not(.landing):not(.auth) .bg-primary,
body:not(.landing):not(.auth) .text-bg-primary,
body:not(.landing):not(.auth) .badge.bg-primary,
body:not(.landing):not(.auth) .badge.text-bg-primary,
body:not(.landing):not(.auth) .btn-primary,
body:not(.landing):not(.auth) .page-item.active .page-link{
  background-color: var(--workspace-primary) !important;
  border-color: var(--workspace-primary) !important;
  color: #fff !important;
}

body:not(.landing):not(.auth) .btn-primary:hover,
body:not(.landing):not(.auth) .page-item.active .page-link:hover{
  background-color: var(--workspace-primary-dark) !important;
  border-color: var(--workspace-primary-dark) !important;
}

body:not(.landing):not(.auth) .btn-outline-primary,
body:not(.landing):not(.auth) .border-primary{
  border-color: #c6e2d7 !important;
  color: var(--workspace-primary) !important;
}

body:not(.landing):not(.auth) .btn-outline-primary:hover,
body:not(.landing):not(.auth) .btn-outline-primary:focus,
body:not(.landing):not(.auth) .btn-outline-primary:active{
  background: var(--workspace-primary-soft) !important;
  border-color: var(--workspace-primary) !important;
  color: var(--workspace-primary-dark) !important;
}

body:not(.landing):not(.auth) .nav-pills .nav-link.active,
body:not(.landing):not(.auth) .list-group-item.active,
body:not(.landing):not(.auth) .form-check-input:checked{
  background-color: var(--workspace-primary) !important;
  border-color: var(--workspace-primary) !important;
}

body:not(.landing):not(.auth) .form-check-input:focus,
body:not(.landing):not(.auth) .page-link:focus,
body:not(.landing):not(.auth) .btn:focus,
body:not(.landing):not(.auth) .form-control:focus,
body:not(.landing):not(.auth) .form-select:focus{
  box-shadow: 0 0 0 3px rgba(18,130,143,.12) !important;
}

/* Provided wave background on every logged-in content page.
   The sidebar is intentionally untouched. */
body:not(.landing):not(.auth) .dash-main{
  position: relative;
  overflow: hidden;
  background: #f4f6fb !important;
}
body:not(.landing):not(.auth) .dash-main::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(248,249,255,.32) 0%, rgba(244,246,251,.42) 100%),
    url('../img/circular-wave-bg.png');
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center top;
  opacity: .72;
  pointer-events: none;
  z-index: 0;
}
body:not(.landing):not(.auth) .dash-content,
body:not(.landing):not(.auth) .compact-mobile-menu,
body:not(.landing):not(.auth) #toast-area,
body:not(.landing):not(.auth) .dash-main > .alert{
  position: relative;
  z-index: 1;
}

/* Dashboard cards: keep old look but add soft inner shade */
body.dashboard-view .dash-recents-card,
body.dashboard-view .dash-clients-card{
  position: relative;
  overflow: hidden;
}
body.dashboard-view .dash-recents-card::before,
body.dashboard-view .dash-clients-card::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
body.dashboard-view .dash-recents-card::before{
  background:
    radial-gradient(180px 110px at 88% 14%, rgba(18,130,143,.08), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(238,242,255,.22));
}
body.dashboard-view .dash-clients-card::before{
  background:
    radial-gradient(170px 110px at 86% 16%, rgba(18,130,143,.07), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(243,244,246,.16));
}
body.dashboard-view .dash-recents-card > *,
body.dashboard-view .dash-clients-card > *{
  position: relative;
  z-index: 1;
}
body.dashboard-view .dash-recents-card h2 i,
body.dashboard-view .dash-clients-card h2 i,
body.dashboard-view .dash-recents-card .bi-clock-history,
body.dashboard-view .dash-clients-card .bi-people,
body.dashboard-view .dash-clients-card .client-avatar,
body.dashboard-view .dash-recents-card .file-kind-icon,
body.dashboard-view .dash-recents-card .folder-kind-icon{
  color: var(--workspace-primary);
}
body.dashboard-view .dash-recents-card .client-avatar,
body.dashboard-view .dash-clients-card .client-avatar{
  background: rgba(18,130,143,.10);
  border-color: rgba(18,130,143,.14);
}


/* Content text corrections requested by the user. */
.files-page-title,
.files-page-card .folder-name-link{
  color: #111827 !important;
}
.files-page-card .folder-name-link:hover,
.files-page-card .folder-name-link:focus{
  color: #111827 !important;
  text-decoration: none;
}

/* Keep the profile dropdown neutral rather than purple. */
.compact-profile-dropdown .dropdown-item:not(.text-danger),
.compact-profile-dropdown .dropdown-item:not(.text-danger) i,
.compact-profile-dropdown .dropdown-item:not(.text-danger) span{
  color: #4b5563 !important;
}
.compact-profile-dropdown .dropdown-item:not(.text-danger):hover,
.compact-profile-dropdown .dropdown-item:not(.text-danger):focus{
  background: #f3f4f6 !important;
  color: #111827 !important;
}
.compact-profile-dropdown .dropdown-item:not(.text-danger):hover i,
.compact-profile-dropdown .dropdown-item:not(.text-danger):hover span,
.compact-profile-dropdown .dropdown-item:not(.text-danger):focus i,
.compact-profile-dropdown .dropdown-item:not(.text-danger):focus span{
  color: #111827 !important;
}

/* ======================================================================
   GLOBAL AFTER-LOGIN PAGE BACKGROUND
   Apply the minimal end-wave design on all internal pages only.
   Login, signup and landing pages stay unchanged.
   ====================================================================== */

/* Clean workspace base for internal pages only. */
body:not(.landing):not(.auth),
body:not(.landing):not(.auth) .dash-layout,
body:not(.landing):not(.auth) .dash-main{
  background: var(--workspace-bg) !important;
  background-image: none !important;
}

/* Disable older artwork layers first. */
body:not(.landing):not(.auth) .dash-main::before{
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Keep the collapse button above the content canvas. */
.dash-sidebar{
  position: sticky;
  z-index: 40;
  overflow: visible !important;
}

.dash-main{
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

.sidebar-toggle,
.dash-sidebar.is-collapsed .sidebar-toggle{
  z-index: 60;
  isolation: isolate;
}

.dash-sidebar.is-collapsed .sidebar-toggle{
  right: -15px;
  border: 1px solid #d7deeb;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15,23,42,.18);
}

/* Minimal wave accent on every after-login page. Sidebar remains untouched. */
body:not(.landing):not(.auth) .dash-main{
  isolation: isolate;
}

body:not(.landing):not(.auth) .dash-main::after{
  content: "" !important;
  display: block !important;
  position: absolute;
  top: auto !important;
  left: auto !important;
  right: 0 !important;
  bottom: 20px !important;
  width: min(36vw, 520px);
  height: 220px;
  background-color: transparent !important;
  background-image: url('../img/dashboard-end-waves.svg') !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: contain !important;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

body:not(.landing):not(.auth) .dash-content,
body:not(.landing):not(.auth) .compact-mobile-menu,
body:not(.landing):not(.auth) #toast-area,
body:not(.landing):not(.auth) .dash-main > .alert{
  position: relative;
  z-index: 1;
}

body:not(.landing):not(.auth) .dash-content{
  background: transparent !important;
}

@media (max-width: 991.98px){
  body:not(.landing):not(.auth) .dash-main::after{
    width: min(58vw, 320px);
    height: 160px;
    bottom: 12px;
    opacity: .92;
  }
}

/* ======================================================================
   DASHBOARD QUICK-ACTION ICON CONSISTENCY
   Use the same existing application purple used across other controls.
   The original sidebar colors remain unchanged.
   ====================================================================== */
body.dashboard-view .action-card .icon-bubble{
  border-color: #dcebe5 !important;
  background: var(--workspace-primary-soft) !important;
  color: var(--workspace-primary) !important;
}

body.dashboard-view .action-card .icon-bubble i{
  color: var(--workspace-primary) !important;
}

body.dashboard-view .action-card:hover .icon-bubble{
  background: linear-gradient(145deg, rgba(18,130,143,.18), rgba(18,130,143,.11)) !important;
  color: var(--workspace-primary-dark) !important;
  box-shadow: 0 10px 24px rgba(18,130,143,.15) !important;
}

body.dashboard-view .action-card:hover .icon-bubble i{
  color: var(--workspace-primary-dark) !important;
}

/* ======================================================================
   ROLE MENU + CONSISTENT INTERNAL PAGE SPACING
   ====================================================================== */
.compact-profile-dropdown{
  width: max-content !important;
  min-width: 190px !important;
}

.compact-profile-role{
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.25;
}

/* Keep the top, left and right workspace gutters equal on every logged-in page. */
body:not(.landing):not(.auth) .dash-main{
  padding-top: 28px !important;
  padding-right: 28px !important;
  padding-left: 28px !important;
}

@media (max-width: 1199.98px){
  body:not(.landing):not(.auth) .dash-main{
    padding-top: 22px !important;
    padding-right: 22px !important;
    padding-left: 22px !important;
  }
}

@media (max-width: 991.98px){
  body:not(.landing):not(.auth) .dash-main{
    padding-top: 16px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
}

@media (max-width: 575.98px){
  body:not(.landing):not(.auth) .dash-main{
    padding-top: 12px !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .compact-profile-dropdown{
    min-width: 184px !important;
  }
}


/* Dashboard panel heading icons */
.dash-panel-title-icon{
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(18,130,143,.16), rgba(59,130,246,.09));
  border: 1px solid rgba(18,130,143,.16);
  color: var(--workspace-primary, #12828f);
  box-shadow: 0 10px 24px rgba(18,130,143,.10);
  font-size: 1.05rem;
}
.dash-panel-title-icon--received{
  background: linear-gradient(145deg, rgba(18,130,143,.16), rgba(59,130,246,.09));
  border-color: rgba(18,130,143,.16);
  color: var(--workspace-primary, #12828f);
}
@media (max-width: 991.98px){
  .dash-recents-card,
  .dash-clients-card{
    height: auto;
    min-height: 420px;
  }
}

/* Client dashboard: keep Received panel icons in the existing purple theme. */
.dash-received-card .client-avatar{
  color: var(--workspace-primary, #12828f);
  background: linear-gradient(135deg, rgba(18,130,143,.16), rgba(18,130,143,.06));
  border-color: rgba(18,130,143,.14);
}

/* ======================================================================
   ROUND 5: tighter page headers + compact Received/Clients lists
   ====================================================================== */

/* Reduce only the top gutter while preserving the equal left/right gutters. */
body:not(.landing):not(.auth) .dash-main{
  padding-top: 16px !important;
}

/* Slightly denser cards inside both Clients and Received dashboard panels. */
body.dashboard-view .client-summary-list{
  gap: 9px;
}
body.dashboard-view .client-summary-item{
  padding: 9px 10px;
  border-radius: 14px;
}
body.dashboard-view .client-summary-item::after{
  left: 10px;
  right: 10px;
}
body.dashboard-view .client-summary-item .client-avatar{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex: 0 0 32px;
}
body.dashboard-view .client-summary-item .client-avatar i{
  color: inherit !important;
  font-size: .95rem;
  line-height: 1;
}
body.dashboard-view .received-summary-item .fw-semibold{
  font-size: .87rem;
  line-height: 1.2;
}
body.dashboard-view .received-summary-item .small{
  font-size: .74rem !important;
  margin-top: 2px !important;
}

/* Ensure the Received heading icon is rendered and remains purple. */
body.dashboard-view .dash-panel-title-icon--received,
body.dashboard-view .dash-panel-title-icon--received i{
  color: var(--workspace-primary, #12828f) !important;
}
body.dashboard-view .dash-panel-title-icon--received i{
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
}

/* Received item controls stay purple on desktop, tablets and phones. */
body.dashboard-view .dash-received-card .received-item-actions .btn{
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  border-color: #c6e2d7 !important;
  background: #fff !important;
  color: var(--workspace-primary, #12828f) !important;
  box-shadow: none !important;
}
body.dashboard-view .dash-received-card .received-item-actions .btn i{
  color: var(--workspace-primary, #12828f) !important;
  font-size: .85rem;
  line-height: 1;
}
body.dashboard-view .dash-received-card .received-item-actions .btn:hover,
body.dashboard-view .dash-received-card .received-item-actions .btn:focus-visible{
  border-color: var(--workspace-primary, #12828f) !important;
  background: var(--workspace-primary-soft, #f4faf7) !important;
  color: var(--workspace-primary-dark, #00525c) !important;
}

@media (max-width: 1199.98px){
  body:not(.landing):not(.auth) .dash-main{
    padding-top: 14px !important;
  }
}

@media (max-width: 991.98px){
  body:not(.landing):not(.auth) .dash-main{
    padding-top: 12px !important;
  }
}

@media (max-width: 575.98px){
  body:not(.landing):not(.auth) .dash-main{
    padding-top: 9px !important;
  }

  body.dashboard-view .client-summary-list{
    gap: 7px;
  }
  body.dashboard-view .client-summary-item{
    padding: 8px;
    border-radius: 12px;
  }
  body.dashboard-view .received-summary-item > .d-flex{
    gap: 7px !important;
  }
  body.dashboard-view .dash-received-card .received-item-actions .btn{
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }
}

/* ======================================================================
   ROUND 8: fixed client dashboard panels + compact purple login screen
   ====================================================================== */

/* Keep Recents and the role-specific Clients/Received panel at a stable
   height regardless of the number of rows currently available. */
body.dashboard-view .dash-panels > [class*="col-"]{
  display: flex;
}
body.dashboard-view .dash-recents-card,
body.dashboard-view .dash-clients-card{
  width: 100%;
  height: 460px !important;
  min-height: 460px !important;
  max-height: 460px !important;
}
body.dashboard-view .dash-recents-card .dash-panel-body,
body.dashboard-view .dash-clients-card .dash-panel-body{
  min-height: 0;
  overflow: hidden;
}
body.dashboard-view .dash-recents-card .dash-scroll,
body.dashboard-view .dash-clients-card .dash-scroll{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow: auto !important;
}

@media (max-width: 991.98px){
  body.dashboard-view .dash-recents-card,
  body.dashboard-view .dash-clients-card{
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
  }
}

@media (max-width: 575.98px){
  body.dashboard-view .dash-recents-card,
  body.dashboard-view .dash-clients-card{
    height: 380px !important;
    min-height: 380px !important;
    max-height: 380px !important;
  }
}

/* Login page only: use the same clean workspace background as the
   dashboard, with no decorative image or animated color blobs. */
body.login-view{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--workspace-bg) !important;
  background-image: none !important;
  color: var(--workspace-text);
  --accent: var(--workspace-primary);
  --accent-dark: var(--workspace-primary-dark);
  --accent-soft: rgba(18,130,143,.10);
}
body.login-view::before,
body.login-view::after{
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
}
body.login-view .sg-nav{
  background: rgba(255,255,255,.92) !important;
  border-bottom-color: var(--workspace-line) !important;
  box-shadow: 0 2px 12px rgba(30,41,59,.04);
}
body.login-view .sg-brandmark{
  color: var(--workspace-primary) !important;
  background: var(--workspace-primary-soft) !important;
  border-color: #c6e2d7 !important;
}
body.login-view .sg-brandmark i{
  color: var(--workspace-primary) !important;
}
body.login-view .sg-nav .btn-primary,
body.login-view .auth-login-submit{
  background: var(--workspace-primary) !important;
  border-color: var(--workspace-primary) !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(18,130,143,.20) !important;
}
body.login-view .sg-nav .btn-primary:hover,
body.login-view .auth-login-submit:hover{
  background: var(--workspace-primary-dark) !important;
  border-color: var(--workspace-primary-dark) !important;
}
body.login-view .app-shell{
  flex: 1 0 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 72px;
}
body.login-view .app-shell > .container:first-child{
  flex: 0 0 auto;
}
body.login-view .app-shell > .container.py-5{
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
body.login-view .auth-login-row{
  width: 100%;
  margin: 0;
}
body.login-view .auth-login-column{
  width: 100%;
  max-width: 410px;
  padding-left: 12px;
  padding-right: 12px;
}
body.login-view .auth-login-card{
  width: 100%;
  border-radius: 18px;
  border-color: var(--workspace-line);
  background: #fff;
  box-shadow: 0 14px 34px rgba(30,41,59,.09);
}
body.login-view .auth-login-card .form-control{
  min-height: 42px;
  border-radius: 11px;
  background: #fff;
}
body.login-view .auth-login-card .form-control:focus{
  border-color: rgba(18,130,143,.45);
  box-shadow: 0 0 0 .22rem rgba(18,130,143,.11);
}
body.login-view .auth-login-submit{
  width: auto !important;
  min-width: 132px;
  min-height: 40px;
  border-radius: 11px;
}
body.login-view .footer{
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: 0 !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  background: #fff;
  border-top-color: var(--workspace-line);
}

@media (max-width: 575.98px){
  body.login-view .app-shell{
    padding-top: 66px;
  }
  body.login-view .app-shell > .container.py-5{
    align-items: flex-start;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
  body.login-view .auth-login-card{
    padding: 20px !important;
  }
  body.login-view .footer .d-flex{
    justify-content: center !important;
    text-align: center;
  }
}



/* ======================================================================
   ROUND 9: matching Signup/Home workspace styling and fixed auth footer
   ====================================================================== */

/* Signup and public Home now use the same clean canvas as the dashboard. */
body.signup-view,
body.home-view{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--workspace-bg) !important;
  background-image: none !important;
  color: var(--workspace-text);
  --accent: var(--workspace-primary);
  --accent-dark: var(--workspace-primary-dark);
  --accent-soft: rgba(18,130,143,.10);
}
body.signup-view::before,
body.signup-view::after,
body.home-view::before,
body.home-view::after{
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
}
body.signup-view .sg-nav,
body.home-view .sg-nav{
  background: rgba(255,255,255,.92) !important;
  border-bottom-color: var(--workspace-line) !important;
  box-shadow: 0 2px 12px rgba(30,41,59,.04);
}
body.signup-view .sg-brandmark,
body.home-view .sg-brandmark{
  color: var(--workspace-primary) !important;
  background: var(--workspace-primary-soft) !important;
  border-color: #c6e2d7 !important;
}
body.signup-view .sg-brandmark i,
body.home-view .sg-brandmark i{
  color: var(--workspace-primary) !important;
}
body.signup-view .sg-nav .btn-primary,
body.signup-view .auth-signup-submit,
body.home-view .btn-primary{
  background: var(--workspace-primary) !important;
  border-color: var(--workspace-primary) !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(18,130,143,.20) !important;
}
body.signup-view .sg-nav .btn-primary:hover,
body.signup-view .auth-signup-submit:hover,
body.home-view .btn-primary:hover{
  background: var(--workspace-primary-dark) !important;
  border-color: var(--workspace-primary-dark) !important;
  color: #fff !important;
}

/* Only the signup card scrolls. The fixed navbar and footer remain visible. */
body.signup-view{
  overflow: hidden;
}
body.signup-view .app-shell{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 72px;
  overflow: hidden;
}
body.signup-view .app-shell > .container:first-child{
  flex: 0 0 auto;
}
body.signup-view .app-shell > .container.py-5{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  overflow: hidden;
}
body.signup-view .auth-signup-row{
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  align-items: center;
}
body.signup-view .auth-signup-column{
  width: 100%;
  max-width: 470px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  display: flex;
  align-items: center;
}
body.signup-view .auth-signup-card{
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-radius: 18px;
  border-color: var(--workspace-line);
  background: #fff;
  box-shadow: 0 14px 34px rgba(30,41,59,.09);
}
body.signup-view .auth-signup-card .form-control,
body.signup-view .auth-signup-card .form-select{
  min-height: 42px;
  border-radius: 11px;
  background: #fff;
}
body.signup-view .auth-signup-card .form-control:focus,
body.signup-view .auth-signup-card .form-select:focus{
  border-color: rgba(18,130,143,.45);
  box-shadow: 0 0 0 .22rem rgba(18,130,143,.11);
}
body.signup-view .auth-signup-submit{
  width: auto !important;
  min-width: 132px;
  min-height: 40px;
  border-radius: 11px;
}
body.signup-view .footer{
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: 0 !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  background: #fff;
  border-top-color: var(--workspace-line);
}

/* Home keeps normal content scrolling, but its footer rests at the bottom
   whenever the content is shorter than the viewport. */
body.home-view .app-shell{
  flex: 1 0 auto;
  width: 100%;
  min-height: 0;
  padding-top: 72px;
  background: transparent !important;
}
body.home-view .footer{
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: 0 !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  background: #fff;
  border-top-color: var(--workspace-line);
}
body.home-view .ready-card,
body.home-view .sg-card{
  background: #fff !important;
  border-color: var(--workspace-line) !important;
  box-shadow: var(--workspace-shadow) !important;
}
body.home-view .sg-label .pill,
body.home-view .sg-ic{
  color: var(--workspace-primary) !important;
}
body.home-view .sg-label .pill{
  background: var(--workspace-primary) !important;
  box-shadow: 0 0 0 6px rgba(18,130,143,.10) !important;
}

@media (max-width: 575.98px){
  body.signup-view .app-shell,
  body.home-view .app-shell{
    padding-top: 66px;
  }
  body.signup-view .app-shell > .container.py-5{
    align-items: stretch;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  body.signup-view .auth-signup-column{
    align-items: stretch;
    padding-left: 6px;
    padding-right: 6px;
  }
  body.signup-view .auth-signup-card{
    padding: 20px !important;
  }
  body.signup-view .footer .d-flex,
  body.home-view .footer .d-flex{
    justify-content: center !important;
    text-align: center;
  }
}

/* Complete the Home purple icon treatment. */
body.home-view .sg-ic{
  background: var(--workspace-primary-soft) !important;
  border-color: #c6e2d7 !important;
}

/* ======================================================================
   ROUND 10: page-level signup scrolling and tighter heading spacing
   ====================================================================== */

/* The browser/page owns Signup scrolling; the card no longer has an
   independent scrollbar. The footer follows the page content normally. */
body.signup-view{
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body.signup-view .app-shell{
  flex: 1 0 auto !important;
  min-height: 0 !important;
  display: block !important;
  overflow: visible !important;
}
body.signup-view .app-shell > .container.py-5{
  min-height: 0 !important;
  display: block !important;
  overflow: visible !important;
  padding-top: 14px !important;
  padding-bottom: 24px !important;
}
body.signup-view .auth-signup-row{
  height: auto !important;
  min-height: 0 !important;
  align-items: flex-start !important;
}
body.signup-view .auth-signup-column{
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
}
body.signup-view .auth-signup-card{
  max-height: none !important;
  overflow: visible !important;
  scrollbar-gutter: auto !important;
}

/* Keep the main page title and its supporting line visually closer on all
   logged-in pages. */
.page-heading-subtitle{
  margin-top: -3px !important;
  line-height: 1.15 !important;
}

/* Apply the same compact title/subtext rhythm to authentication, profile,
   public information, and dashboard panel headings. */
body.login-view .auth-login-card > h2,
body.signup-view .auth-signup-card > h2,
.dash-content .card > h1,
.dash-content .card > h2{
  margin-bottom: 0 !important;
}
body.login-view .auth-login-card > h2 + p.text-muted,
body.signup-view .auth-signup-card > h2 + p.text-muted,
.dash-content .card > h1 + p.text-muted,
.dash-content .card > h2 + p.text-muted{
  margin-top: 2px !important;
}
body.dashboard-view .dash-panel h2 + .small.text-muted{
  margin-top: 1px !important;
}
body.home-view .sg-h2 + p.text-muted{
  margin-top: .35rem !important;
}

/* Move the Login card upward instead of vertically centering it in the
   available area. The footer still stays at the bottom on short screens. */
body.login-view .app-shell > .container.py-5{
  align-items: flex-start !important;
  padding-top: 10px !important;
  padding-bottom: 20px !important;
}
body.login-view .auth-login-row{
  margin-top: 0 !important;
}

@media (max-width: 575.98px){
  body.signup-view .app-shell > .container.py-5{
    padding-top: 8px !important;
    padding-bottom: 18px !important;
  }
  body.login-view .app-shell > .container.py-5{
    padding-top: 7px !important;
    padding-bottom: 16px !important;
  }
  .page-heading-subtitle{
    margin-top: -2px !important;
  }
}

/* ======================================================================
   ROUND 11: fixed auth footer, signup-card scrolling, login offset
   ====================================================================== */

/* Keep the browser viewport itself still on authentication pages. The
   footer is pinned to the screen and the signup form card owns scrolling. */
body.signup-view,
body.login-view{
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.signup-view .footer,
body.login-view .footer{
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  height: 56px;
  min-height: 56px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  background: #fff !important;
  border-top: 1px solid var(--workspace-line) !important;
}
body.signup-view .footer > .container,
body.login-view .footer > .container{
  width: 100%;
}

body.signup-view .app-shell,
body.login-view .app-shell{
  box-sizing: border-box;
  height: 100vh !important;
  min-height: 0 !important;
  padding-top: 72px !important;
  padding-bottom: 56px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.signup-view .app-shell > .container:first-child,
body.login-view .app-shell > .container:first-child{
  flex: 0 0 auto;
}

/* Signup: the viewport and footer never scroll. Only the white signup card
   scrolls when all form fields do not fit in the available height. */
body.signup-view .app-shell > .container.py-5{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
body.signup-view .auth-signup-row{
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-items: center !important;
}
body.signup-view .auth-signup-column{
  width: 100%;
  max-width: 470px;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  display: flex !important;
  align-items: center !important;
}
body.signup-view .auth-signup-card{
  width: 100%;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Login: retain the fixed footer, but place the compact card a little lower
   than the previous top-aligned version. */
body.login-view .app-shell > .container.py-5{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100%;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding-top: 110px !important;
  padding-bottom: 16px !important;
}
body.login-view .auth-login-row{
  width: 100%;
  margin-top: 0 !important;
}

@media (max-width: 575.98px){
  body.signup-view .footer,
  body.login-view .footer{
    height: 68px;
    min-height: 68px;
  }
  body.signup-view .app-shell,
  body.login-view .app-shell{
    padding-top: 66px !important;
    padding-bottom: 68px !important;
  }
  body.signup-view .app-shell > .container.py-5{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  body.signup-view .auth-signup-column{
    padding-left: 6px;
    padding-right: 6px;
  }
  body.login-view .app-shell > .container.py-5{
    padding-top: 22px !important;
    padding-bottom: 12px !important;
  }
}

/* ======================================================================
   ROUND 12: full-width Signup content scrolling with fixed nav/footer
   ====================================================================== */

/* Keep the browser body still so the public navbar and footer remain fixed.
   The full-width app shell owns vertical scrolling, which places the
   scrollbar at the far-right edge of the screen instead of inside the card. */
body.signup-view{
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.signup-view .app-shell{
  height: 100vh !important;
  min-height: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
  padding-top: 72px !important;
  padding-bottom: 56px !important;
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

/* Let the Signup content grow naturally inside the full-width scrolling
   shell. The card itself never creates a scrollbar. */
body.signup-view .app-shell > .container.py-5{
  width: 100% !important;
  min-height: calc(100vh - 128px) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: visible !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
body.signup-view .auth-signup-row{
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-items: flex-start !important;
}
body.signup-view .auth-signup-column{
  width: 100%;
  max-width: 470px;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  display: block !important;
}
body.signup-view .auth-signup-card{
  width: 100%;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
  scrollbar-gutter: auto !important;
}

@media (max-width: 575.98px){
  body.signup-view .app-shell{
    padding-top: 66px !important;
    padding-bottom: 68px !important;
  }
  body.signup-view .app-shell > .container.py-5{
    min-height: calc(100vh - 134px) !important;
    padding-top: 16px !important;
    padding-bottom: 18px !important;
  }
  body.signup-view .auth-signup-column{
    padding-left: 6px;
    padding-right: 6px;
  }
}


/* Profile password shortcut and change-password card */
.compact-password-btn{
  text-decoration: none;
  background: linear-gradient(145deg, #12828f, #00525c);
  border-color: rgba(81,69,229,.24);
  box-shadow: 0 6px 16px rgba(81,69,229,.22);
}
.compact-password-btn:hover,
.compact-password-btn:focus,
.compact-password-btn.is-active{
  color: #fff;
  background: linear-gradient(145deg, #12828f, #00525c);
  box-shadow: 0 8px 19px rgba(81,69,229,.28);
}
.change-password-card{
  max-width: 620px;
  margin-inline: auto;
}
.change-password-card .form-control{
  min-height: 44px;
}

/* Round 13: match the Change Password shortcut to the white profile control. */
.compact-password-btn,
.compact-password-btn.is-active{
  color: #12828f !important;
  background: #ffffff !important;
  border-color: rgba(18,130,143,.24) !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.10) !important;
}
.compact-password-btn i,
.compact-password-btn.is-active i{
  color: #12828f !important;
}
.compact-password-btn:hover,
.compact-password-btn:focus,
.compact-password-btn.is-active:hover,
.compact-password-btn.is-active:focus{
  color: #00525c !important;
  background: #edf7f2 !important;
  border-color: rgba(18,130,143,.34) !important;
  box-shadow: 0 7px 17px rgba(18,130,143,.16) !important;
  filter: none !important;
}
.compact-password-btn:hover i,
.compact-password-btn:focus i,
.compact-password-btn.is-active:hover i,
.compact-password-btn.is-active:focus i{
  color: #00525c !important;
}

/* ======================================================================
   Public pages: shared background image for Home, Login, and Signup
   ====================================================================== */
body.home-view,
body.login-view,
body.signup-view{
  background-color: #edf7f2 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)),
    url('../img/public-page-background.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

@media (max-width: 767.98px){
  body.home-view,
  body.login-view,
  body.signup-view{
    background-position: center top !important;
    background-attachment: scroll !important;
  }
}

/* ======================================================================
   FINAL TWEAKS: lighter public-page background + wider signup form
   ====================================================================== */
body.home-view,
body.login-view,
body.signup-view{
  background-color: #f4faf7 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42)),
    url('../img/public-page-background.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

body.home-view::before,
body.home-view::after,
body.login-view::before,
body.login-view::after,
body.signup-view::before,
body.signup-view::after{
  opacity: 0 !important;
  background-image: none !important;
}

body.signup-view .app-shell > .container.py-5{
  min-height: calc(100vh - 128px) !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

body.signup-view .auth-signup-column{
  max-width: 960px !important;
}

body.signup-view .auth-signup-card{
  border-radius: 20px;
  padding: 24px 26px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 16px 40px rgba(30,41,59,.10) !important;
}

body.signup-view .auth-signup-card .form-label{
  margin-bottom: .35rem;
  font-weight: 600;
}

body.signup-view .auth-signup-card .form-control,
body.signup-view .auth-signup-card .form-select{
  min-height: 44px;
}

body.signup-view .auth-signup-submit{
  min-width: 150px;
}

@media (max-width: 767.98px){
  body.home-view,
  body.login-view,
  body.signup-view{
    background-position: center top !important;
    background-attachment: scroll !important;
  }

  body.signup-view .auth-signup-column{
    max-width: 560px !important;
  }

  body.signup-view .auth-signup-card{
    padding: 20px !important;
  }
}

/* ======================================================================
   Change-password icon hover + Login vertical position
   ====================================================================== */
.compact-password-btn:hover,
.compact-password-btn:focus-visible,
.compact-password-btn.is-active:hover,
.compact-password-btn.is-active:focus-visible{
  color: #ffffff !important;
  background: var(--workspace-primary) !important;
  border-color: var(--workspace-primary) !important;
  box-shadow: 0 8px 19px rgba(18,130,143,.23) !important;
  filter: none !important;
  transform: translateY(-1px);
}

.compact-password-btn:hover i,
.compact-password-btn:focus-visible i,
.compact-password-btn.is-active:hover i,
.compact-password-btn.is-active:focus-visible i{
  color: #ffffff !important;
}

/* ======================================================================
   SPLIT-SCREEN LOGIN PAGE
   Two-panel layout: left = brand/feature panel, right = login form.
   Keeps the existing Thomson Data purple palette (--workspace-primary).
   ====================================================================== */
body.login-split-view{
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: none !important;
}
body.login-split-view .sg-nav,
body.login-split-view .footer,
body.login-split-view .app-shell > .container:first-child{
  display: none !important;
}
body.login-split-view .app-shell{
  height: auto !important;
  min-height: 100vh !important;
  padding: 0 !important;
  overflow: visible !important;
  display: block !important;
}
body.login-split-view .app-shell > .container.py-5{
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
}

.login-split{
  display: flex;
  min-height: 100vh;
  height: auto;
  width: 100%;
  align-items: stretch;
}

.login-split-left{
  flex: 1 1 50%;
  max-width: 50%;
  background-color: #f4faf7;
  background-image:
    linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42)),
    url('../img/public-page-background.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: var(--workspace-text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 56px;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--workspace-line);
}
.login-split-left-inner{ position: relative; z-index: 1; max-width: 460px; }

.login-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 56px;
  color: var(--workspace-text);
}
.login-brand-mark{
  width: 40px; height: 40px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-split-title{
  font-weight: 600;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  color: var(--workspace-text);
}
.login-split-sub{
  color: rgba(23,32,51,.65);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 420px;
}

.login-split-features{ display: flex; flex-direction: column; gap: 22px; }
.login-split-feature{ display: flex; gap: 14px; align-items: flex-start; }
.login-split-feature-ic{
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--workspace-primary-soft);
  color: var(--workspace-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.login-split-feature-title{ font-weight: 600; margin-bottom: 2px; color: var(--workspace-text); }
.login-split-feature-desc{ color: rgba(23,32,51,.6); font-size: .92rem; line-height: 1.55; }

.login-split-footer{
  position: relative;
  z-index: 1;
  color: rgba(23,32,51,.5);
  font-size: .82rem;
}

.login-split-right{
  flex: 1 1 50%;
  max-width: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow-y: auto;
}
.login-split-form-wrap{ width: 100%; max-width: 400px; }

.login-split-card{
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.input-icon-group{ position: relative; }
.input-icon-group > i{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--workspace-primary);
  opacity: .7;
  font-size: .95rem;
  pointer-events: none;
}
.input-icon-group .form-control{ padding-left: 40px; }
.input-icon-toggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: rgba(30,41,59,.5);
  padding: 4px;
  line-height: 1;
}
.input-icon-toggle:hover{ color: var(--workspace-primary); }

@media (min-width: 901px) and (max-height: 820px){
  .login-split-left{
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .login-brand{ margin-bottom: 28px; }
  .login-split-sub{ margin-bottom: 24px; }
  .login-split-features{ gap: 14px; }
  .login-split-right{
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 900px){
  body.login-split-view,
  body.login-split-view .app-shell,
  body.login-split-view .app-shell > .container.py-5{
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .login-split{
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }
  .login-split-left,
  .login-split-right{
    max-width: 100%;
    flex: none;
  }
  .login-split-left{ padding: 32px 24px; }
  .login-split-features{ display: none; }
  .login-split-right{ padding: 32px 20px; }
}

/* ======================================================================
   BRAND LOGO
   Swaps the bi-boxes icon glyph for the real Thomson Data mark
   (static/img/logo/logo-icon.svg) across the top nav, mobile offcanvas,
   desktop sidebar, and the split login screen. Also standardizes the
   "Thomson Data" wordmark to the bold, tight-tracking style used in the
   logo lockup.
   ====================================================================== */
.brand-logo-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.sg-brandmark.sg-brandmark--logo,
body.landing .sg-brandmark.sg-brandmark--logo,
body.auth .sg-brandmark.sg-brandmark--logo,
body.login-view .sg-brandmark.sg-brandmark--logo,
body.signup-view .sg-brandmark.sg-brandmark--logo,
body.home-view .sg-brandmark.sg-brandmark--logo{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.sg-brandmark.sg-brandmark--logo img{ border-radius: 12px; }

.dash-logo.dash-logo--brand{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
.dash-logo.dash-logo--brand img{ border-radius: 10px; }
.dash-logo.dash-logo--sm{
  width: 26px;
  height: 26px;
}

.brand-wordmark{
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* Thomson (red) / Data (green) text wordmark — used everywhere the round
   Thomson Data emblem previously appeared, except the main hi-res sidebar
   logo, the login page logo, and the favicon, which stay as images. */
.td-text-logo{
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: #fff;
}
.td-text-logo .td-text-logo-thomson{ color: #E60201; }
.td-text-logo .td-text-logo-data{ color: #028F2D; }

/* Lightweight color-only variant for inline mentions (e.g. footer copyright)
   that shouldn't take on the bold wordmark treatment. */
.td-brand-red{ color: #E60201; font-weight: 700; }
.td-brand-green{ color: #028F2D; font-weight: 700; }

/* Compact "TD" monogram for tight spaces (collapsed sidebar rail) where the
   full two-word wordmark won't fit. Same red/green split. */
.td-monogram{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e5e9f0;
  font-weight: 800;
  letter-spacing: 0;
}
.td-monogram .td-monogram-t{ color: #E60201; }
.td-monogram .td-monogram-d{ color: #028F2D; }

/* ======================================================================
   SIDEBAR TOGGLE: float at the vertical center of the sidebar's right
   edge (both expanded and collapsed), instead of sitting inline next to
   the brand logo at the top.
   ====================================================================== */
.dash-sidebar{
  position: sticky !important;
  overflow: visible !important;
}

.sidebar-toggle{
  position: absolute !important;
  top: 50% !important;
  right: -15px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  flex: none !important;
  border-radius: 50% !important;
  border: 1px solid var(--workspace-line) !important;
  background: #ffffff !important;
  color: var(--workspace-primary) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.16) !important;
  z-index: 60 !important;
}
.sidebar-toggle:hover{
  background: var(--workspace-primary-soft) !important;
  border-color: var(--workspace-primary) !important;
  color: var(--workspace-primary-dark) !important;
}
.dash-brand{
  padding-right: 0 !important;
}

/* ======================================================================
   DASHBOARD REWORK: flexible-height Recents / Clients-Received panels.
   Previously locked to a fixed 460px/420px/380px height regardless of
   content (see the disabled rule this replaces, further up this file);
   the cards now grow or shrink to fit whatever they contain instead.
   ====================================================================== */
body.dashboard-view .dash-recents-card,
body.dashboard-view .dash-clients-card{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
body.dashboard-view .dash-recents-card .dash-panel-body,
body.dashboard-view .dash-clients-card .dash-panel-body{
  min-height: 0 !important;
  overflow: visible !important;
}
body.dashboard-view .dash-recents-card .dash-scroll,
body.dashboard-view .dash-clients-card .dash-scroll{
  max-height: none !important;
  overflow: visible !important;
}

/* ======================================================================
   BRAND CONSISTENCY: upload/share popups and progress bars still used
   leftover Bootstrap blue (rgba(18,130,143,...)) from before the indigo
   rebrand. These are duplicated per-page (dashboard.html, all_folders_
   files.html) so an !important override here keeps every instance —
   current and future — on the same indigo palette from one place.
   ====================================================================== */
/* Center pop-up card used for Upload/Share confirmations (#centerToast,
   built by __ensureCenterCard() in app.js). This used to be defined
   per-page with copy-pasted CSS, so any page without that copy (like a
   client's detail page) showed the message as bare unstyled text. Defined
   once here so it always renders as an actual pop-up everywhere. */
.center-toast-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .28);
  z-index: 99998;
  animation: uploadPopFade .18s ease;
}
.upload-pop-card{
  position: relative;
  text-align: center;
  border-radius: 20px;
  padding: 28px 24px 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 24px 70px rgba(15,23,42,.22);
}
.upload-pop-close{
  position: absolute;
  top: 12px;
  right: 12px;
}
.upload-pop-icon{
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--workspace-primary-soft, #eef7f6);
  color: var(--workspace-primary, #12828f);
  font-size: 1.5rem;
}
.upload-pop-title{ font-weight: 700; font-size: 17px; color: #1c2332; }
.upload-pop-msg{ margin-top: 6px; font-size: 13px; color: rgba(0,0,0,0.6); line-height: 1.5; }
.upload-pop-bar-wrap{
  height: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
}
.upload-pop-bar{
  height: 100%;
  border-radius: 999px;
  transition: width 250ms ease;
  background: var(--workspace-primary, #12828f) !important;
}
#centerToast.upload-pop-in .upload-pop-card{
  animation: uploadPopIn .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes uploadPopIn{
  from{ opacity: 0; transform: scale(.92); }
  to{ opacity: 1; transform: scale(1); }
}
@keyframes uploadPopFade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
.upload-dropzone.dragover{
  border-color: var(--workspace-primary, #12828f) !important;
  background: var(--workspace-primary-soft, #f4faf7) !important;
}
.upload-dropzone.flash{
  border-color: var(--workspace-primary, #12828f) !important;
  box-shadow: 0 0 0 4px var(--workspace-primary-soft, #f4faf7) !important;
}
#uploadProgressWrap .progress-bar{
  background-color: var(--workspace-primary, #12828f) !important;
}
.compact-menu .dropdown-item:hover{
  background: var(--workspace-primary-soft, #f4faf7) !important;
}
.compact-menu .dropdown-item.active{
  background: var(--workspace-primary-soft, #f4faf7) !important;
  color: var(--workspace-primary-dark, #00525c) !important;
}

/* ======================================================================
   FILES PAGE (all_folders_files.html): toolbar, table and status badges
   restyled to the same indigo workspace look used elsewhere in the app,
   replacing the leftover plain gray/blue Bootstrap styling.
   ====================================================================== */
.files-page-card{
  border-color: var(--workspace-line, #dcebe5) !important;
  border-radius: var(--workspace-radius, 16px) !important;
  box-shadow: var(--workspace-shadow, 0 10px 30px rgba(30,41,59,.07)) !important;
}
.files-page-card .table-control-btn{
  border-color: var(--workspace-line, #dcebe5) !important;
  background: #fff !important;
  color: var(--workspace-text, #2d2d2d) !important;
}
.files-page-card .table-control-btn i{
  color: var(--workspace-primary, #12828f);
}
.files-page-card .table-control-btn:hover,
.files-page-card .table-control-btn:focus-visible{
  border-color: #c6e2d7 !important;
  background: var(--workspace-primary-soft, #f4faf7) !important;
  box-shadow: none !important;
}
.files-page-card table thead th{
  color: var(--workspace-muted, #404e5c);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--workspace-line, #dcebe5) !important;
  background: var(--workspace-surface-soft, #f8fafc);
}
.files-page-card table tbody tr{
  border-bottom: 1px solid #f1f3f8;
}
.files-page-card table tbody tr:hover{
  background: rgba(18,130,143,.035) !important;
}
.files-page-card table tbody td{
  border: 0 !important;
  vertical-align: middle;
}
.files-page-card .badge.text-bg-success{
  background: var(--workspace-primary-soft, #f4faf7) !important;
  color: var(--workspace-primary-dark, #00525c) !important;
  font-weight: 600;
  font-size: .7rem;
}
.files-page-card .badge.text-bg-secondary{
  background: #f1f3f8 !important;
  color: var(--workspace-muted, #404e5c) !important;
  font-weight: 600;
  font-size: .7rem;
}
.files-page-card td .btn-outline-secondary{
  border-color: var(--workspace-line, #dcebe5);
  color: var(--workspace-muted, #404e5c);
}
.files-page-card td .btn-outline-secondary:hover{
  background: var(--workspace-primary-soft, #f4faf7);
  border-color: #c6e2d7;
  color: var(--workspace-primary-dark, #00525c);
}

/* ======================================================================
   GLOBAL SHARE MODAL (layout.html #shareModal): more modern styling —
   tinted header band, refined picker buttons, softer message field.
   ====================================================================== */
#shareModal .modal-content{
  border-radius: 18px !important;
  border: 1px solid var(--workspace-line, #dcebe5) !important;
  box-shadow: var(--workspace-shadow-hover, 0 18px 42px rgba(30,41,59,.11)) !important;
  overflow: hidden;
}
#shareModal .modal-header{
  background: var(--workspace-primary-soft, #f4faf7);
  border-bottom: 1px solid var(--workspace-line, #dcebe5);
  padding: 16px 22px;
}
#shareModal .modal-header .modal-title{
  font-weight: 600;
  font-size: .98rem;
  color: var(--workspace-text, #2d2d2d);
}
#shareModal .modal-header .modal-title i{
  color: var(--workspace-primary, #12828f);
}
#shareModal .modal-body{
  padding: 20px 22px;
}
#shareModal .form-label{
  font-weight: 600;
  font-size: .8rem;
  color: var(--workspace-text, #2d2d2d);
}
#shareModal .share-picker-btn{
  border-radius: 11px !important;
  border-color: var(--workspace-line, #dcebe5) !important;
  min-height: 42px;
}
#shareModal .share-picker-btn:hover{
  border-color: #c6e2d7 !important;
  background: var(--workspace-primary-soft, #f4faf7) !important;
}
#shareModal #filesCollapse .card,
#shareModal #recipientsCollapse .card{
  border-radius: 12px !important;
  border-color: var(--workspace-line, #dcebe5) !important;
  background: var(--workspace-surface-soft, #f8fafc) !important;
}
#shareModal textarea#shareMessage{
  border-radius: 11px !important;
  border-color: var(--workspace-line, #dcebe5) !important;
  min-height: 115px !important; /* 10-row default; prevents older auto-grow code from shrinking it */
  resize: vertical;
  overflow-y: auto;
}
#shareModal textarea#shareMessage:focus{
  border-color: #c6e2d7 !important;
  box-shadow: 0 0 0 .2rem var(--workspace-primary-soft, #f4faf7) !important;
}
#shareModal .modal-footer{
  border-top: 1px solid var(--workspace-line, #dcebe5);
  padding: 14px 22px;
}
#shareModal .btn-outline-primary{
  border-color: var(--workspace-primary, #12828f) !important;
  color: var(--workspace-primary, #12828f) !important;
}
#shareModal .btn-outline-primary:hover{
  background: var(--workspace-primary-soft, #f4faf7) !important;
}

/* V7: keep the login CTA compact and centered. */
body.login-split-view .auth-login-submit{
  display: block !important;
  width: 150px !important;
  min-width: 150px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 420px){
  body.login-split-view .auth-login-submit{
    width: min(100%, 180px) !important;
  }
}

/* ======================================================================
   V8 LOGIN — reference-style split screen + viewport-safe responsive fit
   ====================================================================== */
body.login-split-view{
  height: 100vh !important;
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}
body.login-split-view .app-shell,
body.login-split-view .app-shell > .container.py-5{
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100svh !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.login-split-view .sg-nav,
body.login-split-view .footer,
body.login-split-view .app-shell > .container:first-child{
  display: none !important;
}

.login-reference-layout.login-split{
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); 
  overflow: hidden;
}

.login-reference-layout .login-split-left{
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 100%;
  padding: clamp(28px, 4.15vh, 50px) clamp(36px, 5vw, 84px) clamp(24px, 3.8vh, 42px);
  border-right: 1px solid #dddff0;
  background:
    radial-gradient(circle at 18% 11%, rgba(255,255,255,.96), rgba(255,255,255,0) 35%),
    radial-gradient(circle at 72% 64%, rgba(230,225,255,.58), rgba(255,255,255,0) 33%),
    linear-gradient(135deg, #ffffff 0%, #eef8f4 58%, #f7fbf9 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
}
.login-reference-layout .login-split-left::after{
  content: "";
  position: absolute;
  z-index: -1;
  left: -7%;
  right: -8%;
  bottom: 7%;
  height: 30%;
  opacity: .42;
  background:
    repeating-radial-gradient(ellipse at 50% 100%, transparent 0 20px, rgba(111,94,238,.16) 21px 22px, transparent 23px 38px);
  transform: scaleX(1.2);
  pointer-events: none;
}
.login-reference-layout .login-split-left-inner{
  max-width: 470px;
  height: auto;
  position: relative;
  z-index: 2;
}
.login-reference-layout .login-brand{
  gap: 12px;
  margin: 0 0 clamp(26px, 4.9vh, 56px);
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
}
.login-reference-layout .login-brand-mark{
  width: clamp(34px, 2.8vw, 42px);
  height: clamp(34px, 2.8vw, 42px);
  border-radius: 11px;
}
.login-reference-layout .login-split-title{
  font-size: clamp(1.85rem, 2.7vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  margin: 0 0 clamp(14px, 2vh, 22px);
  color: #142033;
}
.login-reference-layout .login-split-sub{
  max-width: 430px;
  font-size: clamp(.82rem, 1.03vw, 1rem);
  line-height: 1.58;
  color: #60708a;
  margin: 0 0 clamp(22px, 3.7vh, 42px);
}
.login-reference-layout .login-split-features{
  gap: clamp(12px, 2.2vh, 22px);
}
.login-reference-layout .login-split-feature{
  gap: 13px;
  align-items: center;
}
.login-reference-layout .login-split-feature-ic{
  width: clamp(34px, 2.75vw, 42px);
  height: clamp(34px, 2.75vw, 42px);
  border-radius: 10px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(18,130,143,.07);
  color: #12828f;
}
.login-reference-layout .login-split-feature-title{
  color: #2d2d2d;
  font-size: clamp(.78rem, .95vw, .95rem);
  line-height: 1.2;
}
.login-reference-layout .login-split-feature-desc{
  margin-top: 3px;
  color: #65728a;
  font-size: clamp(.72rem, .86vw, .87rem);
  line-height: 1.35;
}
.login-reference-layout .login-hero-illustration{
  position: absolute;
  z-index: 1;
  width: clamp(175px, 22vw, 325px);
  height: auto;
  left: 50%;
  bottom: clamp(34px, 5.4vh, 64px);
  transform: translateX(-18%);
  pointer-events: none;
  user-select: none;
}
.login-reference-layout .login-split-footer{
  position: absolute;
  left: clamp(36px, 5vw, 84px);
  bottom: clamp(14px, 2.2vh, 26px);
  z-index: 3;
  color: #7a8499;
  font-size: clamp(.68rem, .76vw, .78rem);
}

.login-reference-layout .login-split-right{
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 100%;
  padding: clamp(22px, 4vh, 44px) clamp(32px, 7vw, 110px);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.login-reference-layout .login-split-form-wrap{
  width: min(100%, 480px);
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.login-reference-layout .login-lock-badge{
  width: clamp(64px, 6.5vw, 94px);
  height: clamp(64px, 6.5vw, 94px);
  margin: 0 auto clamp(14px, 2.2vh, 24px);
  border-radius: 50%;
  background: #eef8f4;
  color: #12828f;
  display: grid;
  place-items: center;
  font-size: clamp(1.45rem, 2.2vw, 2.2rem);
}
.login-reference-layout .login-split-card{
  width: 100%;
  text-align: left;
}
.login-reference-layout .login-form-title{
  margin: 0;
  color: #142033;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 1.15;
  font-weight: 600;
  text-align: center;
  letter-spacing: -.025em;
}
.login-reference-layout .login-form-subtitle{
  margin: clamp(6px, .9vh, 10px) 0 clamp(24px, 4.1vh, 42px);
  color: #404e5c;
  font-size: clamp(.78rem, .98vw, .95rem);
  text-align: center;
}
.login-reference-layout .login-form{
  width: 100%;
}
.login-reference-layout .login-field-group{
  margin-bottom: clamp(15px, 2.2vh, 22px);
}
.login-reference-layout .login-field-group .form-label{
  margin-bottom: clamp(6px, .9vh, 9px);
  color: #2d2d2d;
  font-size: clamp(.72rem, .84vw, .84rem);
  font-weight: 600;
}
.login-reference-layout .input-icon-group .form-control{
  height: clamp(44px, 5.7vh, 54px);
  border-radius: 10px;
  border: 1px solid #d7deeb;
  padding-left: 44px;
  padding-right: 42px;
  color: #2d2d2d;
  font-size: clamp(.78rem, .95vw, .93rem);
  background: #fff;
}
.login-reference-layout .input-icon-group .form-control:focus{
  border-color: #9bcdbd;
  box-shadow: 0 0 0 3px rgba(18,130,143,.09);
}
.login-reference-layout .input-icon-group > i{
  left: 16px;
  color: #12828f;
  opacity: 1;
}
.login-reference-layout .input-icon-toggle{
  right: 12px;
}
.login-reference-layout .login-inline-error{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -7px 0 clamp(12px, 1.7vh, 17px);
  color: #dc3545;
  font-size: clamp(.7rem, .82vw, .82rem);
  font-weight: 500;
}
.login-reference-layout .login-options-row{
  min-height: 24px;
  margin-bottom: clamp(16px, 2.6vh, 25px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.login-reference-layout .login-options-row .form-check{
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
.login-reference-layout .login-options-row .form-check-input{
  margin: 0;
}
.login-reference-layout .login-options-row .form-check-label{
  color: #637089;
  font-size: clamp(.75rem, .9vw, .88rem);
}
body.login-split-view .auth-login-submit{
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(44px, 5.6vh, 52px);
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 9px;
  background: linear-gradient(90deg, #12828f 0%, #12828f 100%) !important;
  box-shadow: 0 9px 22px rgba(18,130,143,.18);
  font-size: clamp(.8rem, .92vw, .92rem);
  font-weight: 600;
}
body.login-split-view .auth-login-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 11px 25px rgba(18,130,143,.24);
}
.login-reference-layout .login-or{
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(18px, 2.7vh, 27px) 0 clamp(16px, 2.4vh, 24px);
  color: #7a8499;
  font-size: clamp(.72rem, .82vw, .82rem);
}
.login-reference-layout .login-or::before,
.login-reference-layout .login-or::after{
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: #dde2ec;
}
.login-reference-layout .login-signup-copy{
  text-align: center;
  color: #404e5c;
  font-size: clamp(.76rem, .92vw, .9rem);
}
.login-reference-layout .login-signup-copy a{
  color: #00525c;
  font-weight: 600;
  text-decoration: none;
}
.login-reference-layout .login-signup-copy a:hover{
  text-decoration: underline;
}

/* Short laptop screens: reduce vertical rhythm instead of adding a scrollbar. */
@media (min-width: 901px) and (max-height: 780px){
  .login-reference-layout .login-split-left{
    padding-top: 22px;
    padding-bottom: 20px;
  }
  .login-reference-layout .login-brand{
    margin-bottom: 20px;
  }
  .login-reference-layout .login-split-title{
    font-size: clamp(1.55rem, 2.3vw, 2.1rem);
    margin-bottom: 10px;
  }
  .login-reference-layout .login-split-sub{
    font-size: .78rem;
    line-height: 1.42;
    margin-bottom: 16px;
  }
  .login-reference-layout .login-split-features{
    gap: 9px;
  }
  .login-reference-layout .login-split-feature-ic{
    width: 32px;
    height: 32px;
  }
  .login-reference-layout .login-split-feature-title{ font-size: .76rem; }
  .login-reference-layout .login-split-feature-desc{ font-size: .69rem; }
  .login-reference-layout .login-hero-illustration{
    width: min(19vw, 220px);
    bottom: 26px;
  }
  .login-reference-layout .login-split-right{
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .login-reference-layout .login-lock-badge{
    width: 58px;
    height: 58px;
    font-size: 1.45rem;
    margin-bottom: 10px;
  }
  .login-reference-layout .login-form-title{ font-size: 1.35rem; }
  .login-reference-layout .login-form-subtitle{ margin: 5px 0 20px; font-size: .78rem; }
  .login-reference-layout .login-field-group{ margin-bottom: 13px; }
  .login-reference-layout .input-icon-group .form-control{ height: 42px; }
  .login-reference-layout .login-options-row{ margin-bottom: 13px; }
  body.login-split-view .auth-login-submit{ height: 42px; }
  .login-reference-layout .login-or{ margin: 14px 0 12px; }
}

@media (min-width: 901px) and (max-height: 620px){
  .login-reference-layout .login-split-features{ gap: 6px; }
  .login-reference-layout .login-split-feature-desc{ display: none; }
  .login-reference-layout .login-hero-illustration{ display: none; }
  .login-reference-layout .login-lock-badge{ display: none; }
  .login-reference-layout .login-form-subtitle{ margin-bottom: 14px; }
}

/* Tablets/phones: show a clean single-screen login, never a stacked scrolling page. */
@media (max-width: 900px){
  body.login-split-view,
  body.login-split-view .app-shell,
  body.login-split-view .app-shell > .container.py-5{
    height: 100vh !important;
    height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .login-reference-layout.login-split{
    display: block;
    height: 100vh;
    height: 100svh;
    min-height: 0;
  }
  .login-reference-layout .login-split-left{
    display: none !important;
  }
  .login-reference-layout .login-split-right{
    width: 100%;
    max-width: none;
    height: 100%;
    padding: clamp(16px, 4vh, 30px) clamp(18px, 7vw, 54px);
    background:
      radial-gradient(circle at 8% 5%, rgba(238,234,255,.82), rgba(255,255,255,0) 31%),
      radial-gradient(circle at 95% 95%, rgba(232,228,255,.72), rgba(255,255,255,0) 32%),
      #fff;
  }
  .login-reference-layout .login-split-form-wrap{
    width: min(100%, 440px);
  }
  .login-reference-layout .login-lock-badge{
    width: clamp(52px, 10vh, 74px);
    height: clamp(52px, 10vh, 74px);
    margin-bottom: clamp(8px, 1.6vh, 14px);
  }
  .login-reference-layout .login-form-title{
    font-size: clamp(1.25rem, 4.5vw, 1.65rem);
  }
  .login-reference-layout .login-form-subtitle{
    margin-bottom: clamp(16px, 3vh, 28px);
    font-size: clamp(.72rem, 2.7vw, .9rem);
  }
  .login-reference-layout .login-field-group{
    margin-bottom: clamp(12px, 2vh, 18px);
  }
  .login-reference-layout .input-icon-group .form-control{
    height: clamp(42px, 6.7vh, 50px);
  }
  .login-reference-layout .login-options-row{
    margin-bottom: clamp(12px, 2.3vh, 20px);
  }
  body.login-split-view .auth-login-submit{
    height: clamp(42px, 6.7vh, 50px);
  }
  .login-reference-layout .login-or{
    margin: clamp(13px, 2.3vh, 21px) 0;
  }
}

@media (max-width: 480px), (max-height: 560px){
  .login-reference-layout .login-split-right{
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .login-reference-layout .login-lock-badge{
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
    margin-bottom: 7px;
  }
  .login-reference-layout .login-form-title{ font-size: 1.2rem; }
  .login-reference-layout .login-form-subtitle{
    margin: 4px 0 12px;
    font-size: .7rem;
  }
  .login-reference-layout .login-field-group{ margin-bottom: 9px; }
  .login-reference-layout .login-field-group .form-label{
    margin-bottom: 4px;
    font-size: .68rem;
  }
  .login-reference-layout .input-icon-group .form-control{
    height: 38px;
    font-size: .76rem;
  }
  .login-reference-layout .login-options-row{
    min-height: 18px;
    margin-bottom: 9px;
  }
  .login-reference-layout .login-options-row .form-check-label{ font-size: .7rem; }
  body.login-split-view .auth-login-submit{ height: 38px; font-size: .78rem; }
  .login-reference-layout .login-or{ margin: 9px 0; }
  .login-reference-layout .login-signup-copy{ font-size: .72rem; }
}

/* V8: explicitly restore the original dark navy sidebar palette. */
.dash-sidebar{
    background: linear-gradient(180deg, #00525c 0%, #206358 100%) !important; 
}
@media (max-width: 991.98px){
  .dash-offcanvas{
      background: linear-gradient(180deg, #00525c 0%, #206358 100%) !important; 
    color: #fff !important;
  }
}


/* ======================================================================
   V9 LOGIN — text-only left panel + compact centered sign-in form
   ====================================================================== */
.login-reference-layout .login-hero-illustration,
.login-reference-layout .login-lock-badge{
  display: none !important;
}

/* Keep the left panel clean: brand, message and feature text only. */
.login-reference-layout .login-split-left{
  padding-left: clamp(42px, 5.4vw, 90px);
  padding-right: clamp(42px, 5.4vw, 90px);
}
.login-reference-layout .login-split-left-inner{
  max-width: 520px;
}
.login-reference-layout .login-brand{
  margin-bottom: clamp(30px, 5.2vh, 58px);
}
.login-reference-layout .login-split-title{
  max-width: 470px;
  font-size: clamp(1.8rem, 2.55vw, 2.65rem);
}
.login-reference-layout .login-split-sub{
  max-width: 470px;
  font-size: clamp(.8rem, .96vw, .95rem);
  margin-bottom: clamp(22px, 3.4vh, 36px);
}
.login-reference-layout .login-split-features{
  max-width: 500px;
  gap: clamp(13px, 2.15vh, 21px);
}
.login-reference-layout .login-split-feature-desc{
  font-size: clamp(.7rem, .8vw, .82rem);
}

/* Compact right-side form. */
.login-reference-layout .login-split-form-wrap{
  width: min(100%, 370px);
  max-width: 370px;
}
.login-reference-layout .login-form-title{
  font-size: clamp(1.35rem, 1.7vw, 1.65rem);
}
.login-reference-layout .login-form-subtitle{
  margin: 6px 0 clamp(20px, 3vh, 30px);
  font-size: clamp(.72rem, .82vw, .82rem);
}
.login-reference-layout .login-field-group{
  margin-bottom: clamp(13px, 1.8vh, 17px);
}
.login-reference-layout .login-field-group .form-label{
  margin-bottom: 6px;
  font-size: clamp(.68rem, .75vw, .76rem);
}
.login-reference-layout .input-icon-group .form-control{
  height: clamp(40px, 4.9vh, 46px);
  border-radius: 9px;
  font-size: clamp(.74rem, .82vw, .82rem);
}
.login-reference-layout .login-options-row{
  margin-bottom: clamp(13px, 2vh, 18px);
}
.login-reference-layout .login-options-row .form-check-label{
  font-size: clamp(.7rem, .78vw, .79rem);
}

/* Requested: smaller Sign in button, centered. */
body.login-split-view .auth-login-submit{
  width: min(58%, 210px) !important;
  height: clamp(39px, 4.8vh, 44px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(.76rem, .82vw, .82rem) !important;
}
.login-reference-layout .login-or{
  max-width: 310px;
  margin: clamp(13px, 2vh, 18px) auto clamp(12px, 1.8vh, 16px);
}
.login-reference-layout .login-signup-copy{
  font-size: clamp(.72rem, .8vw, .8rem);
}

/* Short laptop screens: compress typography/spacing so there is no scroll. */
@media (min-width: 901px) and (max-height: 760px){
  .login-reference-layout .login-split-left{
    padding-top: 20px;
    padding-bottom: 18px;
  }
  .login-reference-layout .login-brand{
    margin-bottom: 18px;
  }
  .login-reference-layout .login-split-title{
    font-size: clamp(1.45rem, 2.15vw, 1.95rem);
    margin-bottom: 9px;
  }
  .login-reference-layout .login-split-sub{
    font-size: .74rem;
    line-height: 1.38;
    margin-bottom: 14px;
  }
  .login-reference-layout .login-split-features{
    gap: 8px;
  }
  .login-reference-layout .login-split-feature-ic{
    width: 30px;
    height: 30px;
  }
  .login-reference-layout .login-split-feature-title{
    font-size: .72rem;
  }
  .login-reference-layout .login-split-feature-desc{
    font-size: .66rem;
    line-height: 1.25;
  }
  .login-reference-layout .login-split-footer{
    font-size: .64rem;
  }
  .login-reference-layout .login-split-right{
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .login-reference-layout .login-split-form-wrap{
    max-width: 340px;
  }
  .login-reference-layout .login-form-title{
    font-size: 1.22rem;
  }
  .login-reference-layout .login-form-subtitle{
    margin: 4px 0 16px;
    font-size: .72rem;
  }
  .login-reference-layout .login-field-group{
    margin-bottom: 10px;
  }
  .login-reference-layout .input-icon-group .form-control{
    height: 38px;
    font-size: .74rem;
  }
  .login-reference-layout .login-options-row{
    margin-bottom: 9px;
  }
  body.login-split-view .auth-login-submit{
    width: min(56%, 190px) !important;
    height: 38px !important;
    font-size: .74rem !important;
  }
  .login-reference-layout .login-or{
    margin: 10px auto;
  }
}

@media (min-width: 901px) and (max-height: 610px){
  .login-reference-layout .login-split-feature-desc{
    display: none;
  }
  .login-reference-layout .login-split-features{
    gap: 6px;
  }
  .login-reference-layout .login-split-sub{
    margin-bottom: 10px;
  }
  .login-reference-layout .login-form-subtitle{
    margin-bottom: 11px;
  }
}

/* Small screens: only the compact form is shown and remains within the viewport. */
@media (max-width: 900px){
  .login-reference-layout .login-split-form-wrap{
    width: min(100%, 350px);
    max-width: 350px;
  }
  .login-reference-layout .login-split-right{
    padding: clamp(12px, 3vh, 22px) clamp(18px, 7vw, 42px);
  }
  .login-reference-layout .login-form-title{
    font-size: clamp(1.15rem, 4vw, 1.4rem);
  }
  .login-reference-layout .login-form-subtitle{
    margin: 4px 0 clamp(14px, 2.5vh, 22px);
    font-size: clamp(.68rem, 2.4vw, .78rem);
  }
  .login-reference-layout .login-field-group{
    margin-bottom: clamp(10px, 1.8vh, 14px);
  }
  .login-reference-layout .input-icon-group .form-control{
    height: clamp(38px, 6vh, 44px);
  }
  .login-reference-layout .login-options-row{
    margin-bottom: clamp(10px, 1.8vh, 14px);
  }
  body.login-split-view .auth-login-submit{
    width: min(60%, 190px) !important;
    height: clamp(38px, 6vh, 42px) !important;
  }
  .login-reference-layout .login-or{
    max-width: 270px;
    margin: clamp(9px, 1.7vh, 14px) auto;
  }
}

@media (max-width: 480px), (max-height: 540px){
  .login-reference-layout .login-split-form-wrap{
    max-width: 320px;
  }
  .login-reference-layout .login-form-title{
    font-size: 1.08rem;
  }
  .login-reference-layout .login-form-subtitle{
    margin: 3px 0 10px;
    font-size: .66rem;
  }
  .login-reference-layout .login-field-group{
    margin-bottom: 8px;
  }
  .login-reference-layout .login-field-group .form-label{
    margin-bottom: 3px;
    font-size: .64rem;
  }
  .login-reference-layout .input-icon-group .form-control{
    height: 36px;
    font-size: .72rem;
  }
  .login-reference-layout .login-options-row{
    min-height: 16px;
    margin-bottom: 7px;
  }
  .login-reference-layout .login-options-row .form-check-label{
    font-size: .66rem;
  }
  body.login-split-view .auth-login-submit{
    width: min(58%, 170px) !important;
    height: 36px !important;
    font-size: .72rem !important;
  }
  .login-reference-layout .login-or{
    margin: 7px auto;
    font-size: .68rem;
  }
  .login-reference-layout .login-signup-copy{
    font-size: .68rem;
  }
}

/* Preserve the original dark navy sidebar palette. */
.dash-sidebar{
    background: linear-gradient(180deg, #00525c 0%, #206358 100%) !important; 
}
@media (max-width: 991.98px){
  .dash-offcanvas{
      background: linear-gradient(180deg, #00525c 0%, #206358 100%) !important; 
    color: #fff !important;
  }
}


/* ======================================================================
   V10 LOGIN TUNE — larger left-side copy + full-height left content
   ====================================================================== */
.login-reference-layout .login-split-left{
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
}
.login-reference-layout .login-split-left-inner{
  max-width: 560px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: clamp(18px, 3vh, 30px);
}
.login-reference-layout .login-brand{
  margin-bottom: clamp(34px, 5.6vh, 64px);
}
.login-reference-layout .login-split-title{
  max-width: 520px;
  font-size: clamp(2.02rem, 2.95vw, 3rem);
  margin-bottom: clamp(16px, 2.25vh, 24px);
}
.login-reference-layout .login-split-sub{
  max-width: 500px;
  font-size: clamp(.9rem, 1.08vw, 1.06rem);
  line-height: 1.62;
  margin-bottom: clamp(28px, 4.1vh, 42px);
}
.login-reference-layout .login-split-features{
  max-width: 530px;
  gap: clamp(16px, 2.45vh, 24px);
  margin-top: auto;
}
.login-reference-layout .login-split-feature-title{
  font-size: clamp(.88rem, 1vw, 1rem);
}
.login-reference-layout .login-split-feature-desc{
  font-size: clamp(.78rem, .9vw, .9rem);
  line-height: 1.42;
}
.login-reference-layout .login-split-footer{
  position: static;
  left: auto;
  bottom: auto;
  margin-top: auto;
  padding-top: clamp(14px, 2.2vh, 22px);
}

@media (min-width: 901px) and (max-height: 760px){
  .login-reference-layout .login-split-left-inner{
    padding-bottom: 10px;
  }
  .login-reference-layout .login-brand{
    margin-bottom: 22px;
  }
  .login-reference-layout .login-split-title{
    font-size: clamp(1.62rem, 2.35vw, 2.12rem);
    margin-bottom: 10px;
  }
  .login-reference-layout .login-split-sub{
    font-size: .78rem;
    line-height: 1.42;
    margin-bottom: 16px;
  }
  .login-reference-layout .login-split-features{
    gap: 10px;
  }
  .login-reference-layout .login-split-feature-title{
    font-size: .76rem;
  }
  .login-reference-layout .login-split-feature-desc{
    font-size: .69rem;
    line-height: 1.28;
  }
}

@media (min-width: 901px) and (max-height: 610px){
  .login-reference-layout .login-brand{
    margin-bottom: 16px;
  }
  .login-reference-layout .login-split-title{
    font-size: 1.5rem;
  }
  .login-reference-layout .login-split-sub{
    margin-bottom: 12px;
  }
  .login-reference-layout .login-split-features{
    gap: 7px;
  }
}

/* ======================================================================
   V11 LOGIN — larger left content, full-height distribution, smaller CTA
   ====================================================================== */
@media (min-width: 901px){
  /* Use the full left panel height instead of clustering everything near the top. */
  .login-reference-layout .login-split-left-inner{
    width: 100%;
    max-width: 545px;
    height: calc(100% - 34px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .login-reference-layout .login-brand{
    flex: 0 0 auto;
    font-size: clamp(1.12rem, 1.42vw, 1.42rem);
    margin-bottom: clamp(32px, 5vh, 54px);
  }

  .login-reference-layout .login-split-title{
    flex: 0 0 auto;
    max-width: 500px;
    font-size: clamp(2rem, 2.8vw, 2.85rem);
    line-height: 1.07;
    margin-bottom: clamp(15px, 2.1vh, 22px);
  }

  .login-reference-layout .login-split-sub{
    flex: 0 0 auto;
    max-width: 500px;
    font-size: clamp(.9rem, 1.04vw, 1.03rem);
    line-height: 1.55;
    margin-bottom: clamp(26px, 3.8vh, 38px);
  }

  /* Let the feature block occupy the remaining panel height. */
  .login-reference-layout .login-split-features{
    width: 100%;
    max-width: 525px;
    flex: 1 1 auto;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 10px;
    padding-bottom: clamp(50px, 8vh, 84px);
  }

  .login-reference-layout .login-split-feature{
    gap: 14px;
  }

  .login-reference-layout .login-split-feature-ic{
    width: clamp(36px, 2.8vw, 44px);
    height: clamp(36px, 2.8vw, 44px);
  }

  .login-reference-layout .login-split-feature-title{
    font-size: clamp(.86rem, 1vw, 1rem);
  }

  .login-reference-layout .login-split-feature-desc{
    font-size: clamp(.78rem, .9vw, .9rem);
    line-height: 1.38;
  }

  /* Requested: make the Sign in button narrower while staying centered. */
  body.login-split-view .auth-login-submit{
    width: min(46%, 170px) !important;
  }
}

/* Keep the full-height left layout readable on short laptops without scrolling. */
@media (min-width: 901px) and (max-height: 760px){
  .login-reference-layout .login-split-left-inner{
    height: calc(100% - 26px);
  }
  .login-reference-layout .login-brand{
    font-size: 1rem;
    margin-bottom: 17px;
  }
  .login-reference-layout .login-split-title{
    font-size: clamp(1.55rem, 2.25vw, 2rem);
    margin-bottom: 8px;
  }
  .login-reference-layout .login-split-sub{
    font-size: .78rem;
    line-height: 1.36;
    margin-bottom: 10px;
  }
  .login-reference-layout .login-split-features{
    min-height: 185px;
    padding-bottom: 34px;
    gap: 4px;
  }
  .login-reference-layout .login-split-feature-ic{
    width: 31px;
    height: 31px;
  }
  .login-reference-layout .login-split-feature-title{
    font-size: .76rem;
  }
  .login-reference-layout .login-split-feature-desc{
    font-size: .68rem;
  }
  body.login-split-view .auth-login-submit{
    width: min(44%, 155px) !important;
  }
}

/* On mobile the left panel is hidden; keep the CTA compact and centered. */
@media (max-width: 900px){
  body.login-split-view .auth-login-submit{
    width: min(52%, 165px) !important;
  }
}

/* =========================================================
   Searchable Country / State dropdowns
   - Used globally for every select[name="country"] / select[name="state"]
   - Shows at most 8 options before scrolling
   ========================================================= */
.geo-search-select {
  position: relative;
  width: 100%;
  font-size: 13px;
}

.geo-search-select .geo-search-input {
  width: 100%;
  min-height: 38px;
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  background: #fff;
  color: var(--bs-body-color, #212529);
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  box-shadow: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.geo-search-select .geo-search-input:focus {
  border-color: #9bcdbd;
  box-shadow: 0 0 0 0.2rem rgba(18, 130, 143, 0.12);
}

.geo-search-select::after {
  content: "";
  position: absolute;
  top: 17px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #6c757d;
  border-bottom: 1.5px solid #6c757d;
  transform: rotate(45deg);
  pointer-events: none;
  transition: transform .15s ease;
}

.geo-search-select.is-open::after {
  top: 20px;
  transform: rotate(225deg);
}

.geo-search-select.is-disabled .geo-search-input {
  background: #fff;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 1;
}

.geo-search-select.is-disabled::after {
  opacity: .55;
}

.geo-search-options {
  /* Rendered directly under <body> by app.js so cards/page containers with
     overflow:hidden cannot clip Country/State results. */
  position: fixed;
  z-index: 20000;
  display: none;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  max-height: 268px; /* approximately 8 compact rows */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, .55) transparent;
}

.geo-search-options.is-open {
  display: block;
}

.geo-search-options::-webkit-scrollbar {
  width: 5px;
}

.geo-search-options::-webkit-scrollbar-track {
  background: transparent;
}

.geo-search-options::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .45);
  border-radius: 999px;
}

.geo-search-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #1f2937;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.25;
  cursor: pointer;
}

.geo-search-option:hover,
.geo-search-option.is-active {
  background: #f1f5f9;
}

.geo-search-option.is-selected {
  font-weight: 600;
  color: #12828f;
}

.geo-search-empty {
  padding: 8px 9px;
  color: #94a3b8;
  font-size: 12.5px;
}

/* Keep the real select in the form for normal submission and existing JS logic. */
select.geo-search-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.geo-search-option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
}

.geo-search-select--sm .geo-search-input {
  min-height: 31px;
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12.5px;
}

.geo-search-select--sm::after {
  top: 13px;
}

.geo-search-select--sm.is-open::after {
  top: 16px;
}

/* Compact client-detail profile chip keeps its existing inline dimensions. */
.geo-search-select--chip {
  width: 118px;
  flex: 0 0 118px;
}

.geo-search-select--chip .geo-search-input {
  min-height: 24px;
  padding: 0 22px 0 2px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #526078;
  font-size: 12.5px;
  box-shadow: none !important;
}

.geo-search-select--chip .geo-search-input:focus {
  border: 0;
  box-shadow: none !important;
}

.geo-search-select--chip::after {
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
}

.geo-search-select--chip.is-open::after {
  top: 10px;
}

.geo-search-select--chip .geo-search-options {
  min-width: 210px;
}

/* ======================================================================
   THOMSON DATA BRAND SYSTEM
   Palette/typography aligned with thomsondata.com brand tokens supplied
   for this project. This final block intentionally wins over older rounds.
   ====================================================================== */
:root{
  --e-global-color-primary: #252525;
  --e-global-color-secondary: #12828f;
  --e-global-color-text: #2d2d2d;
  --e-global-color-accent: #00525c;
  --e-global-color-136afdec: #ffffff;
  --e-global-color-33f90e2: #ff7f50;
  --e-global-color-79bb5a2: #377438;
  --e-global-color-70793c2: #377438;
  --e-global-color-afa5372: #252525;
  --e-global-color-df71fb2: #206358;
  --e-global-color-d6d53b5: rgba(128,128,128,.13);
  --e-global-color-f606bed: #f4faf7;
  --e-global-color-6a3ec57: #ff7f50;
  --e-global-color-d53acf5: #c6e2d7;
  --e-global-color-c9fd44f: #b30b25;
  --e-global-color-552b7b66: #404e5c;
  --e-global-color-6b49fc1: #353e44;

  --e-global-typography-primary-font-family: "Quicksand";
  --e-global-typography-primary-font-weight: 600;
  --e-global-typography-secondary-font-family: "Quicksand";
  --e-global-typography-secondary-font-weight: 400;
  --e-global-typography-text-font-family: "Quicksand";
  --e-global-typography-text-font-size: 16px;
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: "Quicksand";
  --e-global-typography-accent-font-weight: 500;

  --workspace-bg: #f4faf7;
  --workspace-surface: #ffffff;
  --workspace-surface-soft: #f8fcfa;
  --workspace-text: #2d2d2d;
  --workspace-muted: #404e5c;
  --workspace-line: #dcebe5;
  --workspace-line-strong: #c6e2d7;
  --workspace-primary: #12828f;
  --workspace-primary-dark: #00525c;
  --workspace-primary-soft: rgba(18,130,143,.10);
  --workspace-cyan: #12828f;
  --workspace-success: #377438;
  --workspace-warning: #ff7f50;
  --workspace-danger: #b30b25;
  --workspace-shadow: 0 10px 30px rgba(0,82,92,.08);
  --workspace-shadow-hover: 0 18px 42px rgba(0,82,92,.13);

  --accent: #12828f;
  --accent-dark: #00525c;
  --accent-soft: rgba(18,130,143,.10);
  --text: #2d2d2d;
  --muted: #404e5c;
  --border: rgba(0,82,92,.12);
  --border-strong: rgba(0,82,92,.20);
}

html, body{
  font-family: var(--e-global-typography-text-font-family), system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
  color: var(--e-global-color-text);
}

h1,h2,h3,h4,h5,h6,
.brand-wordmark,
.dash-title,
.ff-page-title,
.ff-section-label{
  font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--e-global-color-primary);
}

.btn,
.form-label,
.nav-link,
.dropdown-item,
.fw-semibold,
.fw-bold,
.fw-bolder,
strong{
  font-weight: 600 !important;
}

.btn-primary{
  background: var(--e-global-color-secondary) !important;
  border-color: var(--e-global-color-secondary) !important;
  box-shadow: 0 8px 20px rgba(18,130,143,.18) !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background: var(--e-global-color-accent) !important;
  border-color: var(--e-global-color-accent) !important;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(18,130,143,.50) !important;
  box-shadow: 0 0 0 .2rem rgba(18,130,143,.12) !important;
}

a{ color: var(--e-global-color-secondary); }
a:hover{ color: var(--e-global-color-accent); }

/* Logged-in workspace */
body:not(.landing):not(.auth){
  background: var(--e-global-color-f606bed) !important;
  color: var(--e-global-color-text) !important;
}
body:not(.landing):not(.auth) .dash-main{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(700px circle at 98% 0%, rgba(18,130,143,.055), transparent 54%),
    var(--e-global-color-f606bed) !important;
}
body:not(.landing):not(.auth) .dash-content{ flex: 1 0 auto; }

.dash-sidebar{
  background: linear-gradient(180deg, #00525c 0%, #206358 100%) !important;
  box-shadow: 10px 0 34px rgba(0,82,92,.16) !important;
}
.dash-logo,
.sidebar-toggle,
.compact-profile-btn,
.compact-password-btn{
  border-color: var(--workspace-line-strong) !important;
}

/* Logged-in footer */
.dashboard-footer{
  width: 100%;
  max-width: 1580px;
  margin: 36px auto 0;
  padding: 18px 0;
  border-top: 1px solid var(--workspace-line);
  color: var(--e-global-color-552b7b66);
  font-size: .82rem;
}
.dashboard-footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
}
.dashboard-footer-brand{ color: var(--e-global-color-552b7b66); }
.dashboard-footer-links{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 18px;
  flex-wrap: wrap;
}
.dashboard-footer-links a{
  color: var(--e-global-color-552b7b66);
  font-weight: 500;
  text-decoration: none;
}
.dashboard-footer-links a:hover{
  color: var(--e-global-color-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Login / password recovery: single centered card matching the supplied reference. */
body.thomson-login-view{
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background:
    radial-gradient(circle at -2% 102%, rgba(198,226,215,.80) 0 20%, transparent 20.2%),
    radial-gradient(circle at 95% 8%, rgba(157,214,198,.55) 0 15%, transparent 15.2%),
    radial-gradient(circle at 9% 15%, rgba(198,226,215,.52), transparent 34%),
    linear-gradient(110deg, #eaf7f1 0%, #ffffff 48%, #e6f7f2 100%) !important;
  color: var(--e-global-color-text) !important;
}
body.thomson-login-view::before,
body.thomson-login-view::after{ display: none !important; content: none !important; }
body.thomson-login-view .sg-nav,
body.thomson-login-view .footer,
body.thomson-login-view .app-shell > .container:first-child{
  display: none !important;
}
body.thomson-login-view .app-shell{
  min-height: 100vh !important;
  height: auto !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
}
body.thomson-login-view .app-shell > .container.py-5{
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 28px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.td-login-stage{
  width: 100%;
  min-height: calc(100vh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.td-login-card{
  width: min(100%, 432px);
  padding: 30px 30px 28px;
  border-radius: 20px;
  border: 1px solid rgba(18,130,143,.15);
  background: rgba(255,255,255,.94);
  box-shadow: 0 24px 64px rgba(0,82,92,.13);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.td-login-card::after{
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -62px;
  bottom: -74px;
  border-radius: 50%;
  border: 1px solid rgba(18,130,143,.12);
  box-shadow:
    0 0 0 11px rgba(18,130,143,.04),
    0 0 0 23px rgba(18,130,143,.035),
    0 0 0 36px rgba(18,130,143,.025);
  pointer-events: none;
}
.td-login-brand{
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.td-login-brand--centered{
  display: grid !important;
  place-items: center;
  margin-bottom: 20px;
}
.td-login-brand--centered .td-login-brand-mark{ display: block; }
.td-login-brand--centered .td-login-brand-mark img{ display: block; margin: 0 auto; }
.td-login-brand-mark{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 11px;
  background: var(--e-global-color-f606bed);
  box-shadow: 0 7px 18px rgba(18,130,143,.12);
}
.td-login-brand-mark img{ width: 100%; height: 100%; object-fit: contain; }
.td-login-brand-copy{ display: flex; flex-direction: column; line-height: 1.15; }
.td-login-brand-copy strong{ color: var(--e-global-color-primary); font-size: .94rem; }
.td-login-brand-copy small{ color: #60736e; font-size: .72rem; margin-top: 4px; }

/* Combined logo+wordmark image (auth cards: login, forgot/reset password) —
   the artwork already contains the brand name, so the icon-square backdrop
   is dropped and only the tagline remains as separate text. */
.td-login-brand-mark.td-login-brand-mark--combined{
  width: auto;
  height: 48px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.td-login-brand-mark.td-login-brand-mark--combined img{
  width: auto;
  height: 100%;
  max-width: 170px;
  object-fit: contain;
}
.td-login-brand-copy--tagline-only{ justify-content: center; }
.td-login-kicker{
  color: #0b8a6f;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .12em;
  font-weight: 600;
  margin-bottom: 9px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.td-login-title{
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
  color: #193a31 !important;
  text-align: center;
  position: relative;
  z-index: 1;
}
.td-login-subtitle{
  margin: 10px 0 26px;
  color: #64756f;
  font-size: .88rem;
  line-height: 1.55;
  text-align: center;
  position: relative;
  z-index: 1;
}
.td-login-form{ position: relative; z-index: 1; }
.td-form-group{ margin-bottom: 16px; }
.td-form-group .form-label{
  color: #29463e;
  font-size: .82rem;
  margin-bottom: 7px;
}
.td-form-group .form-control{
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid #bcd9cf;
  background: rgba(255,255,255,.86);
  color: var(--e-global-color-text);
  font-size: .86rem;
  padding: 10px 13px;
  box-shadow: none;
}
.td-form-group .form-control::placeholder{ color: #8a9994; }
.td-form-group .form-control:focus{
  border-color: var(--e-global-color-secondary) !important;
  box-shadow: 0 0 0 3px rgba(18,130,143,.10) !important;
}
.td-password-label-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.td-forgot-link,
.td-back-login{
  color: var(--e-global-color-secondary);
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none;
}
.td-forgot-link:hover,
.td-back-login:hover{ color: var(--e-global-color-accent); text-decoration: underline; text-underline-offset: 3px; }
.td-password-input-wrap{ position: relative; }
.td-password-input-wrap .form-control{ padding-right: 46px; }
.td-password-toggle{
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: var(--e-global-color-f606bed);
  color: #2d8070;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.td-password-toggle:hover{ background: #e5f4ee; color: var(--e-global-color-accent); }
.td-field-note{ margin-top: 6px; color: #64756f; font-size: .74rem; }
.td-input-icon-wrap{ position: relative; }
.td-input-icon{
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: #2d8070;
  font-size: .95rem;
  pointer-events: none;
  z-index: 2;
}
.td-form-group .form-control.td-input-with-icon{ padding-left: 40px; }
.td-login-footnote{
  margin: 14px 0 0;
  text-align: center;
  color: #64756f;
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.td-login-footnote i{ color: #2d8070; }
.td-login-submit{
  width: 100%;
  min-height: 44px;
  margin-top: 1px;
  border-radius: 12px !important;
  background: #078772 !important;
  border-color: #078772 !important;
  color: #fff !important;
  font-size: .86rem;
  font-weight: 600 !important;
  box-shadow: 0 10px 22px rgba(18,130,143,.17) !important;
}
.td-login-submit:hover,
.td-login-submit:focus{ background: #006f64 !important; border-color: #006f64 !important; }
.td-auth-messages{ display: grid; gap: 8px; margin: 0 0 14px; }
.td-auth-message{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 10px;
  border-radius: 10px;
  background: #f4faf7;
  border: 1px solid #c6e2d7;
  color: #35564d;
  font-size: .76rem;
  line-height: 1.45;
}
.td-auth-message--danger,
.td-auth-message--error{ background: #fff4f5; border-color: #efc4c7; color: #8a1629; }
.td-auth-message--warning{ background: #fff1ec; border-color: #ffc4b1; color: #9c432b; }
.td-auth-message--success{ background: #f1faef; border-color: #cfe5c8; color: #377438; }
.td-back-login{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 19px;
  position: relative;
  z-index: 1;
}
.td-recovery-card{ width: min(100%, 460px); }

/* Legal and contact pages */
.td-legal-page{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  color: var(--e-global-color-text);
}
.td-legal-hero{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 28px;
  padding: 26px 28px;
  margin-bottom: 20px;
  border: 1px solid var(--workspace-line);
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f4faf7 100%);
  box-shadow: var(--workspace-shadow);
}
.td-legal-kicker{ color: var(--e-global-color-secondary); font-size: .72rem; letter-spacing: .12em; font-weight: 600; margin-bottom: 8px; }
.td-legal-hero h1{ margin: 0 0 8px; font-size: 1.65rem; }
.td-legal-hero p{ margin: 0; max-width: 760px; color: var(--e-global-color-552b7b66); line-height: 1.65; font-size: .92rem; }
.td-legal-grid{ display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px; align-items: start; }
.td-legal-nav{
  position: sticky;
  top: 20px;
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 14px;
  background: #fff;
}
.td-legal-nav a{ padding: 8px 9px; border-radius: 9px; color: #52615d; font-size: .78rem; text-decoration: none; }
.td-legal-nav a:hover{ background: var(--workspace-primary-soft); color: var(--workspace-primary-dark); }
.td-legal-content{
  padding: 8px 28px 28px;
  border: 1px solid var(--workspace-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,82,92,.05);
}
.td-legal-content section{ padding: 22px 0; border-bottom: 1px solid var(--workspace-line); scroll-margin-top: 24px; }
.td-legal-content section:last-of-type{ border-bottom: 0; }
.td-legal-content h2{ margin: 0 0 10px; font-size: 1.05rem; }
.td-legal-content p{ margin: 0 0 10px; color: #44534f; line-height: 1.75; font-size: .88rem; }
.td-legal-content p:last-child{ margin-bottom: 0; }
.td-contact-inline{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; color: #44534f; font-size: .84rem; line-height: 1.7; }
.td-legal-note{ margin-top: 22px; padding: 13px 14px; border-left: 3px solid var(--workspace-primary); background: #f4faf7; color: #52615d; font-size: .78rem; line-height: 1.6; }
.td-contact-card-grid{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.td-contact-card{ padding: 22px; border: 1px solid var(--workspace-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(0,82,92,.05); }
.td-contact-icon{ width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--workspace-primary-soft); color: var(--workspace-primary); margin-bottom: 13px; }
.td-contact-card h2{ margin: 0 0 8px; font-size: 1rem; }
.td-contact-card p{ color: #52615d; line-height: 1.65; font-size: .84rem; min-height: 54px; }
.td-contact-card a{ display: block; width: fit-content; margin-top: 6px; font-size: .82rem; font-weight: 500; }
.td-contact-help{ display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 22px 24px; border-radius: 16px; background: #00525c; color: #fff; }
.td-contact-help h2{ color: #fff !important; margin: 0 0 6px; font-size: 1.05rem; }
.td-contact-help p{ margin: 0; max-width: 760px; color: rgba(255,255,255,.82); font-size: .84rem; line-height: 1.6; }
.td-contact-help .btn-primary{ background: #fff !important; border-color: #fff !important; color: #00525c !important; box-shadow: none !important; white-space: nowrap; }

@media (max-width: 900px){
  .td-legal-grid{ grid-template-columns: 1fr; }
  .td-legal-nav{ position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .td-contact-card-grid{ grid-template-columns: 1fr; }
  .td-contact-card p{ min-height: 0; }
  .td-contact-inline{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  body.thomson-login-view .app-shell > .container.py-5{ padding: 18px 14px !important; }
  .td-login-stage{ min-height: calc(100vh - 36px); }
  .td-login-card{ padding: 24px 20px 22px; border-radius: 16px; }
  .td-legal-hero{ align-items: flex-start; flex-direction: column; padding: 20px; }
  .td-legal-grid{ gap: 14px; }
  .td-legal-nav{ grid-template-columns: 1fr 1fr; }
  .td-legal-content{ padding: 4px 18px 20px; }
  .td-contact-help{ flex-direction: column; align-items: flex-start; }
  .dashboard-footer-inner{ align-items: flex-start; flex-direction: column; }
  .dashboard-footer-links{ justify-content: flex-start; }
}

/* ======================================================================
   THOMSON DATA V2 VISUAL POLISH
   Latest brand direction: richer Quicksand weights, #12828f as the
   dominant product teal, and #ff7f50 in place of yellow/amber accents.
   ====================================================================== */
:root{
  --td-teal: #12828f;
  --td-teal-dark: #00525c;
  --td-teal-soft: rgba(18,130,143,.10);
  --td-coral: #ff7f50;
  --td-coral-soft: #fff1ec;
  --td-ink: #252525;
  --td-text: #2d2d2d;
  --td-muted: #586b6f;

  --e-global-color-secondary: var(--td-teal);
  --e-global-color-33f90e2: var(--td-coral);
  --e-global-color-6a3ec57: var(--td-coral);
  --e-global-typography-primary-font-weight: 700;
  --e-global-typography-text-font-weight: 500;

  --workspace-primary: var(--td-teal);
  --workspace-primary-soft: var(--td-teal-soft);
  --workspace-warning: var(--td-coral);
  --accent: var(--td-teal);
  --accent-soft: var(--td-teal-soft);

  --bs-primary: var(--td-teal);
  --bs-primary-rgb: 18,130,143;
  --bs-warning: var(--td-coral);
  --bs-warning-rgb: 255,127,80;
}

html, body{
  font-weight: 500 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body,
.form-control,
.form-select,
.dropdown-menu,
.table,
.btn,
.nav-link{
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

h1,h2,h3,h4,h5,h6,
.dash-title,
.ff-page-title,
.dashboard-reference-title,
.brand-wordmark{
  font-weight: 700 !important;
  letter-spacing: -.02em;
}

p, small, .small,
.text-muted,
.dashboard-reference-subtitle,
.dashboard-recent-muted,
.dashboard-client-last-active,
.dashboard-client-copy small{
  font-weight: 500;
}
body:not(.landing):not(.auth) .text-muted{
  color: var(--td-muted) !important;
}
.form-control,
.form-select,
.input-group-text{
  font-weight: 500;
}
.form-control::placeholder{
  color: #7c8c8f;
  opacity: .9;
  font-weight: 500;
}
strong,
.fw-semibold,
.fw-bold,
.fw-bolder,
.form-label,
.btn,
.nav-link,
.dropdown-item{
  font-weight: 600 !important;
}

/* Bootstrap color utilities follow the platform palette instead of falling
   back to Bootstrap blue/yellow. */
.text-primary{ color: var(--td-teal) !important; }
.text-warning{ color: var(--td-coral) !important; }
.bg-primary{ background-color: var(--td-teal) !important; }
.bg-warning{ background-color: var(--td-coral) !important; }
.border-primary{ border-color: var(--td-teal) !important; }

/* Primary interactions */
.btn{
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease;
}
.btn-primary{
  background: var(--td-teal) !important;
  border-color: var(--td-teal) !important;
  box-shadow: 0 8px 20px rgba(18,130,143,.20) !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background: var(--td-teal-dark) !important;
  border-color: var(--td-teal-dark) !important;
  box-shadow: 0 10px 24px rgba(0,82,92,.24) !important;
}
.form-control:focus,
.form-select:focus{
  border-color: rgba(18,130,143,.58) !important;
  box-shadow: 0 0 0 .2rem rgba(18,130,143,.12) !important;
}

@media (hover:hover){
  .btn:not(:disabled):hover{ transform: translateY(-1px); }
  .btn:not(:disabled):active{ transform: translateY(0); }
}

/* Sidebar: use the requested Thomson Data teal as the visible brand anchor. */
.dash-sidebar,
.dash-offcanvas{
  background: #12828f !important;
  color: #fff !important;
}
.dash-sidebar{
  box-shadow: 10px 0 34px rgba(0,82,92,.18) !important;
}
.dash-sidebar .dash-brand{
  padding-top: 6px;
  padding-bottom: 14px;
}
.dash-sidebar .dash-brand-link,
.dash-sidebar .dash-brand-link:hover,
.dash-offcanvas .offcanvas-title{
  color: #fff !important;
}
.dash-sidebar .dash-brand-text.brand-wordmark,
.dash-offcanvas .brand-wordmark{
  color: #fff !important;
  font-size: 1.18rem !important;
  line-height: 1.1;
  font-weight: 700 !important;
  letter-spacing: -.025em;
  text-shadow: 0 1px 1px rgba(0,82,92,.12);
}
.dash-sidebar .dash-logo,
.dash-offcanvas .dash-logo{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(0,82,92,.12);
}

/* Combined logo+wordmark image (sidebar only) — the artwork already
   contains the brand name, so it's shown at its own size with no
   square icon backdrop and no separate text span next to it. */
.dash-sidebar .dash-logo.dash-logo--combined,
.dash-offcanvas .dash-logo.dash-logo--combined{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto;
  height: 84px;
  min-width: 0;
  border-radius: 0;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.dash-logo.dash-logo--combined img{
  height: 100%;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  border-radius: 0;
}
.dash-sidebar.is-collapsed .dash-logo.dash-logo--combined{
  height: 54px;
}
.dash-sidebar.is-collapsed .dash-logo.dash-logo--combined img{
  max-width: 90px;
}
.dash-sidebar .sidebar-toggle{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.20) !important;
  color: #fff !important;
}
.dash-sidebar .sidebar-toggle:hover{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.30) !important;
}
.dash-sidebar.is-collapsed .sidebar-toggle{
  background: #fff !important;
  color: var(--td-teal) !important;
  border-color: rgba(18,130,143,.18) !important;
}
.dash-offcanvas .btn-close{
  filter: brightness(0) invert(1);
  opacity: .85;
}
.sidebar-nav .nav-item{
  color: rgba(255,255,255,.86) !important;
  font-size: .93rem;
  font-weight: 600 !important;
  border-color: transparent !important;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease,
              color .18s ease, box-shadow .18s ease;
}
.sidebar-nav .nav-item i{
  color: #d8f2f4 !important;
  opacity: 1 !important;
  transition: transform .18s ease, color .18s ease;
}
.sidebar-nav .nav-item:hover{
  transform: translateX(3px);
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(0,82,92,.10) !important;
}
.sidebar-nav .nav-item:hover i{
  color: #fff !important;
  transform: scale(1.06);
}
.sidebar-nav .nav-item.active{
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.24) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--td-coral), 0 8px 22px rgba(0,82,92,.13) !important;
}
.sidebar-nav .nav-item.active i{ color:#fff !important; }

/* Workspace cards and actions: a little more depth without changing layout. */
.dashboard-reference-card,
.qa-tile,
.td-contact-card,
.td-legal-content{
  border-color: rgba(18,130,143,.15) !important;
  box-shadow: 0 12px 32px rgba(0,82,92,.075) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dashboard-reference-title{
  color: var(--td-ink) !important;
  font-size: 1.06rem !important;
}
.dashboard-reference-subtitle{
  color: #607277 !important;
  font-size: .78rem !important;
}
.dashboard-view-all{
  border-color: rgba(18,130,143,.28) !important;
  background: #fff !important;
  color: var(--td-teal) !important;
  font-weight: 600 !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease;
}
.dashboard-view-all:hover{
  background: var(--td-teal) !important;
  border-color: var(--td-teal) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(18,130,143,.18);
  transform: translateY(-1px);
}
.dashboard-recent-table tbody tr,
.dashboard-client-row{
  transition: background-color .16s ease, box-shadow .16s ease;
}
.dashboard-recent-table tbody tr:hover td{
  background: #f3faf8 !important;
}
body.dashboard-view .dashboard-client-row:hover{
  background: #f3faf8 !important;
  box-shadow: inset 3px 0 0 rgba(18,130,143,.55);
}
body.dashboard-view .dashboard-client-row:hover .dashboard-client-copy strong,
.dashboard-recent-name:hover{
  color: var(--td-teal) !important;
}
.dashboard-recent-action,
.dashboard-client-count,
.dashboard-client-action{
  transition: transform .16s ease, background-color .16s ease, color .16s ease,
              border-color .16s ease, box-shadow .16s ease;
}
.dashboard-recent-action:hover,
.dashboard-client-action:hover{
  background: var(--td-teal) !important;
  border-color: var(--td-teal) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(18,130,143,.16);
}
.dashboard-recent-icon:has(.text-warning){
  background: var(--td-coral-soft) !important;
}
.dashboard-recent-icon .text-warning,
.dashboard-recent-icon.is-folder{
  color: var(--td-coral) !important;
}
.dashboard-recent-icon.is-folder{
  background: var(--td-coral-soft) !important;
}

@media (hover:hover){
  .dashboard-reference-card:hover,
  .qa-tile:hover,
  .td-contact-card:hover{
    transform: translateY(-2px);
    border-color: rgba(18,130,143,.24) !important;
    box-shadow: 0 17px 38px rgba(0,82,92,.11) !important;
  }
}

/* Footer stays understated, but no longer looks like an afterthought. */
.dashboard-footer{
  font-weight: 500;
  border-top-color: rgba(18,130,143,.16) !important;
}
.dashboard-footer-links a{
  color: #53676b;
  font-weight: 600 !important;
  transition: color .16s ease;
}
.dashboard-footer-links a:hover{
  color: var(--td-teal) !important;
  text-decoration-color: var(--td-coral);
}

/* Authentication remains clean while using the stronger hierarchy. */
.td-login-brand-copy strong,
.td-login-title{ font-weight: 700 !important; }
.td-login-subtitle,
.td-form-group .form-control,
.td-field-note{ font-weight: 500; }
.td-login-submit{
  background: var(--td-teal) !important;
  border-color: var(--td-teal) !important;
}
.td-login-submit:hover,
.td-login-submit:focus{
  background: var(--td-teal-dark) !important;
  border-color: var(--td-teal-dark) !important;
}

/* Dashboard quick actions get the same depth and brand feedback as the
   lower panels, while preserving all existing click behavior. */
body.dashboard-view .action-card{
  border-color: rgba(18,130,143,.15) !important;
  box-shadow: 0 11px 28px rgba(0,82,92,.07) !important;
  overflow: hidden;
}
body.dashboard-view .action-card .card-title{
  color: #252525 !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
}
body.dashboard-view .action-card .card-subtitle{
  color: #607277 !important;
  font-weight: 500 !important;
}
body.dashboard-view .action-card .icon-bubble{
  background: rgba(18,130,143,.10) !important;
  color: #12828f !important;
  border: 1px solid rgba(18,130,143,.12);
  box-shadow: 0 7px 18px rgba(18,130,143,.08);
}
@media (hover:hover){
  body.dashboard-view .action-card:hover{
    transform: translateY(-3px) !important;
    border-color: rgba(18,130,143,.26) !important;
    box-shadow: 0 18px 38px rgba(0,82,92,.115) !important;
  }
  body.dashboard-view .action-card:hover .icon-bubble{
    background: #12828f !important;
    color: #fff !important;
    border-color: #12828f;
    box-shadow: 0 9px 22px rgba(18,130,143,.22);
  }
}


/* ======================================================================
   THOMSON DATA V3 COLOR BALANCE
   Teal remains the primary brand/action color. Coral is now a visible
   secondary accent, while Thomson green is reserved for success states.
   ====================================================================== */
:root{
  --td-teal:#12828f;
  --td-coral:#ff7f50;
  --td-coral-dark:#e8663b;
  --td-coral-soft:#fff1ec;
  --td-success:#377438;
  --td-success-soft:#f1faef;
}

/* Login/auth feedback sits outside the card. Logout confirmation is brief. */
body.thomson-login-view .app-shell > .container:first-child{
  display:block !important;
  position:fixed;
  inset:0;
  width:0;
  height:0;
  padding:0 !important;
  margin:0 !important;
  z-index:4200;
  pointer-events:none;
}
body.thomson-login-view .app-flash-stack{
  top:24px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(390px,calc(100vw - 28px)) !important;
}
body.thomson-login-view .app-flash-toast{
  min-height:auto !important;
  padding:11px 15px !important;
  border-radius:13px !important;
  flex-direction:row !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:10px !important;
  border-color:rgba(18,130,143,.18) !important;
  box-shadow:0 14px 34px rgba(0,82,92,.16) !important;
}
body.thomson-login-view .app-flash-icon{
  width:32px !important;
  height:32px !important;
  flex-basis:32px !important;
  border-radius:9px !important;
}
.app-flash-toast--logout{
  border-left:4px solid var(--td-coral) !important;
  background:#fff !important;
}
.app-flash-toast--logout .app-flash-icon{
  color:var(--td-success) !important;
  background:var(--td-success-soft) !important;
  box-shadow:inset 0 0 0 1px rgba(55,116,56,.14) !important;
}

/* Coral should be visible as a secondary brand accent, not only as warning. */
.sidebar-nav .nav-item.active i{
  color:#ffd2c4 !important;
}
.sidebar-nav .nav-item:hover:not(.active){
  box-shadow:inset 3px 0 0 rgba(255,127,80,.74), 0 7px 18px rgba(0,82,92,.10) !important;
}
.sidebar-nav .nav-item:hover i{
  color:#ffd2c4 !important;
}

/* Dashboard: alternate teal/coral accents for quick actions. */
body.dashboard-view .dash-stats-compact > div:nth-child(2) .action-card .icon-bubble,
body.dashboard-view .dash-stats-compact > div:nth-child(3) .action-card .icon-bubble{
  background:var(--td-coral-soft) !important;
  color:var(--td-coral) !important;
  border-color:rgba(255,127,80,.18) !important;
  box-shadow:0 7px 18px rgba(255,127,80,.09) !important;
}
body.dashboard-view .dash-stats-compact > div:nth-child(2) .action-card .icon-bubble i,
body.dashboard-view .dash-stats-compact > div:nth-child(3) .action-card .icon-bubble i{
  color:var(--td-coral) !important;
}
@media (hover:hover){
  body.dashboard-view .dash-stats-compact > div:nth-child(2) .action-card:hover,
  body.dashboard-view .dash-stats-compact > div:nth-child(3) .action-card:hover{
    border-color:rgba(255,127,80,.34) !important;
    box-shadow:0 18px 38px rgba(255,127,80,.12) !important;
  }
  body.dashboard-view .dash-stats-compact > div:nth-child(2) .action-card:hover .icon-bubble,
  body.dashboard-view .dash-stats-compact > div:nth-child(3) .action-card:hover .icon-bubble{
    background:var(--td-coral) !important;
    border-color:var(--td-coral) !important;
    color:#fff !important;
    box-shadow:0 9px 22px rgba(255,127,80,.24) !important;
  }
  body.dashboard-view .dash-stats-compact > div:nth-child(2) .action-card:hover .icon-bubble i,
  body.dashboard-view .dash-stats-compact > div:nth-child(3) .action-card:hover .icon-bubble i{
    color:#fff !important;
  }
}

/* The two main dashboard panels intentionally use different brand accents. */
.dashboard-reference-card{
  position:relative;
  overflow:hidden;
}
.dashboard-reference-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:var(--td-teal);
  opacity:.95;
}
.dashboard-recent-card::before{ background:var(--td-coral); }
.dashboard-recent-card .dashboard-view-all{
  color:var(--td-coral) !important;
  border-color:rgba(255,127,80,.34) !important;
}
.dashboard-recent-card .dashboard-view-all:hover{
  color:#fff !important;
  background:var(--td-coral) !important;
  border-color:var(--td-coral) !important;
  box-shadow:0 7px 16px rgba(255,127,80,.22) !important;
}
.dashboard-recent-action[title="Download"]{
  color:var(--td-coral) !important;
  border-color:rgba(255,127,80,.24) !important;
  background:var(--td-coral-soft) !important;
}
.dashboard-recent-action[title="Download"]:hover{
  color:#fff !important;
  border-color:var(--td-coral) !important;
  background:var(--td-coral) !important;
  box-shadow:0 6px 14px rgba(255,127,80,.22) !important;
}
.dashboard-client-count i{ color:var(--td-coral) !important; }

/* General secondary buttons/links get coral feedback while primary CTAs stay teal. */
.btn-outline-warning{
  color:var(--td-coral) !important;
  border-color:rgba(255,127,80,.48) !important;
}
.btn-outline-warning:hover{
  color:#fff !important;
  background:var(--td-coral) !important;
  border-color:var(--td-coral) !important;
}
.dashboard-footer-links a:nth-child(even):hover{
  color:var(--td-coral) !important;
}

/* Success is green; attention/accent is coral. */
.text-success{ color:var(--td-success) !important; }
.bg-success{ background-color:var(--td-success) !important; }
.text-bg-success{ background-color:var(--td-success) !important; color:#fff !important; }

/* ======================================================================
   THOMSON DATA V23 FOOTER BOTTOM SPACING
   The footer already has balanced internal padding. Remove the extra
   workspace bottom padding that was creating a large empty area below it.
   ====================================================================== */
body:not(.landing):not(.auth) .dash-main{
  padding-bottom:0 !important;
}

/* Thomson Data emblem + name: compact/collapsed brand asset. Keeps the
   round mark AND the "Thomson"/"Data" wordmark together (not cropped to a
   circle) so the name stays visible even when the sidebar is collapsed. */
.dash-logo.dash-logo--combined .sidebar-logo-collapsed{
  display: none;
}
.dash-sidebar.is-collapsed .dash-logo.dash-logo--combined{
  width: 58px;
  height: 68px;
  min-width: 58px;
}
.dash-sidebar.is-collapsed .dash-logo.dash-logo--combined .sidebar-logo-full{
  display: none;
}
.dash-sidebar.is-collapsed .dash-logo.dash-logo--combined .sidebar-logo-collapsed{
  display: block;
  width: 58px;
  height: 68px;
  max-width: 58px;
  object-fit: contain;
  border-radius: 0;
}

/* Auth/login cards use the same circular emblem instead of the full wordmark. */
body.thomson-login-view .td-login-brand-mark.td-login-brand-mark--combined{
  width: 52px;
  height: 52px;
  min-width: 52px;
}
body.thomson-login-view .td-login-brand-mark.td-login-brand-mark--combined img{
  width: 52px;
  height: 52px;
  max-width: 52px;
  object-fit: contain;
  border-radius: 50%;
}

/* Forgot/Reset password pages: the round emblem is replaced by the real
   Thomson/Data badge image, so drop the fixed 52px circle and size to the
   image's own aspect ratio instead. */
body.password-recovery-view .td-login-brand-mark.td-login-brand-mark--combined{
  width: auto;
  height: auto;
  min-width: 0;
  border-radius: 0;
  background: transparent;
}
body.password-recovery-view .td-login-brand-mark.td-login-brand-mark--combined img{
  width: auto;
  height: 44px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* Thomson/Data badge image: used wherever the round emblem previously
   appeared with enough room for the full wordmark (not the collapsed
   sidebar rail, which keeps the compact TD monogram). */
.td-text-badge-img{
  height: 30px;
  width: auto;
  object-fit: contain;
  display: inline-block;
}

/* Login page: restore the original full Thomson Data wordmark at a larger size
   and keep the "Secure file workspace" tagline directly underneath it. */
body.login-view .td-login-brand{
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 22px;
}
body.login-view .td-login-brand-mark.td-login-brand-mark--combined{
  width: min(100%, 180px);
  height: auto;
  min-width: 0;
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.login-view .td-login-brand-mark.td-login-brand-mark--combined img{
  display: block;
  width: 180px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
}
body.login-view .td-login-brand-copy--tagline-only{
  display: block;
  width: 100%;
  line-height: 1.2;
}
body.login-view .td-login-brand-copy--tagline-only small{
  display: block;
  margin: 0 0 0 3px;
  font-size: .78rem;
  color: #60736e;
}
@media (max-width: 480px){
  body.login-view .td-login-brand-mark.td-login-brand-mark--combined,
  body.login-view .td-login-brand-mark.td-login-brand-mark--combined img{
    width: 250px;
  }
}