/* ── Synqrid Brand Variables ─────────────────────────────── */
:root {
  --sq-primary:        #00A085;
  --sq-primary-dark:   #008a71;
  --sq-primary-light:  #00b896;
  --sq-primary-dim:    rgba(0,160,133,.1);
  --sq-primary-glow:   rgba(0,160,133,.2);

  --sq-navy:           #0F1923;
  --sq-navy-mid:       #172130;
  --sq-navy-light:     #1E2D3D;

  --sq-bg:             #F1F5F9;
  --sq-surface:        #FFFFFF;
  --sq-surface-2:      #F8FAFC;

  --sq-text:           #0F172A;
  --sq-text-secondary: #475569;
  --sq-muted:          #94A3B8;

  --sq-border:         #E2E8F0;
  --sq-border-strong:  #CBD5E1;

  --sq-sidebar-w:      248px;
  --sq-topbar-h:       52px;
  --sq-radius:         8px;
  --sq-radius-sm:      6px;
  --sq-radius-lg:      12px;

  /* Semantic colors */
  --sq-success:        #059669;
  --sq-success-bg:     #D1FAE5;
  --sq-success-text:   #065F46;
  --sq-warning:        #D97706;
  --sq-warning-bg:     #FEF3C7;
  --sq-warning-text:   #92400E;
  --sq-danger:         #DC2626;
  --sq-danger-bg:      #FEE2E2;
  --sq-danger-text:    #991B1B;
  --sq-info:           #2563EB;
  --sq-info-bg:        #EFF6FF;
  --sq-info-text:      #1D4ED8;
  --sq-neutral-bg:     #F1F5F9;
  --sq-neutral-text:   #475569;

  /* Shadows */
  --sq-shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --sq-shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --sq-shadow-md:  0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --sq-shadow-lg:  0 10px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);

  /* Bootstrap overrides */
  --bs-primary:          #00A085;
  --bs-primary-rgb:      0,160,133;
  --bs-link-color:       #00A085;
  --bs-link-color-rgb:   0,160,133;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-body-color:       #0F172A;
  --bs-body-bg:          #F1F5F9;
  --bs-border-color:     #E2E8F0;
  --bs-border-radius:    8px;
  --bs-card-border-radius: 8px;
}

/* ── Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-size: .875rem;
  line-height: 1.6;
  background: var(--sq-bg);
  color: var(--sq-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sq-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sq-muted); }

/* ── App Shell ───────────────────────────────────────────── */
.sq-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sq-sidebar {
  width: var(--sq-sidebar-w);
  flex-shrink: 0;
  background: var(--sq-navy);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 100;
  border-right: 1px solid rgba(255,255,255,.03);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

.sq-sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,160,133,.3) 0%, rgba(0,160,133,.05) 40%, transparent 100%);
  pointer-events: none;
}

/* Logo */
.sq-sidebar-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.25rem 1rem 1.125rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity .15s ease;
}

.sq-sidebar-logo:hover { opacity: .85; }

.sq-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,160,133,.25), rgba(0,160,133,.1));
  border: 1px solid rgba(0,160,133,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.sq-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.sq-logo-name {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}

.sq-logo-sub {
  font-size: .6rem;
  color: var(--sq-primary);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}

/* Nav */
.sq-nav {
  flex: 1;
  padding: .5rem 0 .5rem;
  display: flex;
  flex-direction: column;
}

.sq-nav-section {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.3);
  padding: 1rem 1rem .375rem;
}

.sq-nav-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.06);
}

.sq-nav-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .45rem 1rem;
  padding-left: calc(1rem - 3px);
  border-left: 3px solid transparent;
  color: rgba(255,255,255,.48);
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  border-radius: 0 var(--sq-radius-sm) var(--sq-radius-sm) 0;
  margin-right: .5rem;
}

.sq-nav-link i {
  font-size: .875rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  transition: color .15s ease;
}

.sq-nav-link:hover {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  border-left-color: rgba(255,255,255,.12);
}

.sq-nav-link.active {
  background: rgba(0,160,133,.12);
  color: #fff;
  border-left-color: var(--sq-primary);
  font-weight: 600;
}

.sq-nav-link.active i {
  color: var(--sq-primary);
}

/* Sidebar footer */
.sq-sidebar-footer {
  padding: .5rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}

.sq-user-card {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem 1rem;
  margin-bottom: .25rem;
}

.sq-avatar {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, rgba(0,160,133,.35), rgba(0,160,133,.15));
  border: 1px solid rgba(0,160,133,.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sq-avatar i {
  color: #6ee7c8;
  font-size: .75rem;
}

.sq-user-info { overflow: hidden; }

.sq-user-name {
  font-size: .775rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sq-user-role {
  font-size: .6rem;
  color: var(--sq-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .02em;
  opacity: .7;
  font-weight: 500;
}

.sq-logout {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  padding-left: calc(1rem - 3px);
  border-left: 3px solid transparent;
  color: rgba(255,255,255,.32);
  text-decoration: none;
  font-size: .78rem;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  border-radius: 0 var(--sq-radius-sm) var(--sq-radius-sm) 0;
  margin-right: .5rem;
}

.sq-logout:hover {
  background: rgba(220,38,38,.12);
  color: #fca5a5;
  border-left-color: rgba(220,38,38,.35);
}

/* ── Main area ───────────────────────────────────────────── */
.sq-main {
  margin-left: var(--sq-sidebar-w);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.sq-topbar {
  background: var(--sq-surface);
  border-bottom: 1px solid var(--sq-border);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--sq-topbar-h);
  box-shadow: var(--sq-shadow-xs);
}

.sq-topbar-title {
  font-weight: 600;
  font-size: .875rem;
  color: var(--sq-text);
  margin-right: auto;
  letter-spacing: -.01em;
}

.sq-topbar-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sq-topbar-date {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: .7rem;
  color: var(--sq-muted);
  border-left: 1px solid var(--sq-border);
  padding-left: .875rem;
  letter-spacing: .01em;
}

/* Content */
.sq-content {
  padding: 1.5rem;
  flex: 1;
}

/* ── Page Header ─────────────────────────────────────────── */
.sq-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.sq-page-header h2,
.sq-page-header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sq-text);
  margin-bottom: .125rem;
  letter-spacing: -.02em;
}

/* ── Stat Cards ──────────────────────────────────────────── */
.sq-stat {
  background: var(--sq-surface);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  padding: 1.25rem 1.25rem 1.125rem;
  box-shadow: var(--sq-shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: box-shadow .2s ease, transform .2s ease;
}

.sq-stat:hover {
  box-shadow: var(--sq-shadow-md);
  transform: translateY(-1px);
}

.sq-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--sq-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.sq-stat-icon--primary { background: rgba(0,160,133,.1);  color: var(--sq-primary); }
.sq-stat-icon--warning { background: rgba(217,119,6,.1);   color: var(--sq-warning); }
.sq-stat-icon--danger  { background: rgba(220,38,38,.1);   color: var(--sq-danger); }
.sq-stat-icon--success { background: rgba(5,150,105,.1);   color: var(--sq-success); }
.sq-stat-icon--info    { background: rgba(37,99,235,.1);   color: var(--sq-info); }

.sq-stat-body { flex: 1; min-width: 0; }

.sq-stat-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--sq-muted);
  margin-bottom: .3rem;
}

.sq-stat-value {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--sq-text);
  line-height: 1;
  letter-spacing: -.04em;
}

.sq-stat-sub {
  font-size: .7rem;
  color: var(--sq-muted);
  margin-top: .375rem;
}

/* Legacy stat variants (colored left border) */
.sq-stat--primary { border-top: 3px solid var(--sq-primary); }
.sq-stat--warning { border-top: 3px solid var(--sq-warning); }
.sq-stat--danger  { border-top: 3px solid var(--sq-danger); }
.sq-stat--success { border-top: 3px solid var(--sq-success); }

/* ── Bootstrap Component Overrides ───────────────────────── */

/* Primary button */
.btn-primary {
  --bs-btn-bg:              #00A085;
  --bs-btn-border-color:    #00A085;
  --bs-btn-hover-bg:        #008a71;
  --bs-btn-hover-border-color: #008a71;
  --bs-btn-active-bg:       #007a63;
  --bs-btn-active-border-color: #007a63;
  --bs-btn-disabled-bg:     #00A085;
  --bs-btn-disabled-border-color: #00A085;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,160,133,.3); }
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
  --bs-btn-color:            #00A085;
  --bs-btn-border-color:     #00A085;
  --bs-btn-hover-bg:         #00A085;
  --bs-btn-hover-border-color: #00A085;
  --bs-btn-active-bg:        #008a71;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.btn-outline-primary:hover { transform: translateY(-1px); }

.btn-success {
  --bs-btn-bg:           #059669;
  --bs-btn-border-color: #059669;
  --bs-btn-hover-bg:     #047857;
  font-weight: 500;
}

.btn-outline-secondary {
  --bs-btn-color:          #475569;
  --bs-btn-border-color:   #CBD5E1;
  --bs-btn-hover-bg:       #F1F5F9;
  --bs-btn-hover-color:    #0F172A;
  --bs-btn-hover-border-color: #94A3B8;
  font-weight: 500;
}

.btn-danger {
  --bs-btn-bg:           #DC2626;
  --bs-btn-border-color: #DC2626;
  --bs-btn-hover-bg:     #B91C1C;
  font-weight: 500;
}

.btn {
  border-radius: var(--sq-radius-sm);
  font-size: .8125rem;
  transition: all .15s ease;
}

.btn-sm { font-size: .75rem; padding: .3rem .75rem; }
.btn-lg { font-size: .9375rem; padding: .625rem 1.375rem; }

/* Cards */
.card {
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow-sm);
  background: var(--sq-surface);
}

/* Normalize Bootstrap utility class overrides on cards */
.card.border-0        { border: 1px solid var(--sq-border) !important; }
.card.shadow-sm       { box-shadow: var(--sq-shadow-sm) !important; }
.card-header.bg-white { background: var(--sq-surface-2) !important; }

.card-header {
  border-bottom: 1px solid var(--sq-border);
  background: var(--sq-surface-2);
  border-radius: var(--sq-radius) var(--sq-radius) 0 0 !important;
  padding: .875rem 1.25rem;
}

.card-header h6,
.card-header .h6 {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--sq-text);
  letter-spacing: -.01em;
}

.card-body { padding: 1.25rem; }

/* Tables */
.table > :not(caption) > * > * {
  padding: .5625rem 1rem;
  font-size: .8125rem;
}

.table-light th {
  background: var(--sq-surface-2);
  color: var(--sq-muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--sq-border);
  white-space: nowrap;
}

.table-hover tbody tr {
  transition: background .12s ease;
}

.table-hover tbody tr:hover td {
  background: rgba(0,160,133,.035);
}

.table td, .table th {
  border-color: var(--sq-border);
  vertical-align: middle;
}

/* Financial numbers — monospace & aligned */
.sq-num,
.table td.text-end,
.table .font-mono {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* Empty state in tables */
.sq-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--sq-muted);
}
.sq-empty i { font-size: 2rem; opacity: .35; display: block; margin-bottom: .75rem; }
.sq-empty p { font-size: .8125rem; margin: 0; }

/* Badges */
.badge {
  border-radius: 4px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .3em .65em;
}

/* Soft semantic badge colors */
.bg-success                { background: var(--sq-success-bg) !important; color: var(--sq-success-text) !important; }
.bg-danger                 { background: var(--sq-danger-bg) !important;  color: var(--sq-danger-text) !important; }
.bg-warning.text-dark,
.bg-warning                { background: var(--sq-warning-bg) !important; color: var(--sq-warning-text) !important; }
.bg-secondary              { background: var(--sq-neutral-bg) !important;  color: var(--sq-neutral-text) !important; }
.bg-info.text-dark,
.bg-info                   { background: var(--sq-info-bg) !important;    color: var(--sq-info-text) !important; }
.bg-primary                { background: rgba(0,160,133,.1) !important;   color: #00735f !important; }
.bg-light.text-dark,
.bg-light                  { background: var(--sq-neutral-bg) !important;  color: var(--sq-neutral-text) !important; }

/* Forms */
.form-control,
.form-select {
  border-color: var(--sq-border);
  border-radius: var(--sq-radius-sm);
  font-size: .8125rem;
  color: var(--sq-text);
  transition: border-color .15s ease, box-shadow .15s ease;
  background-color: var(--sq-surface);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sq-primary);
  box-shadow: 0 0 0 3px rgba(0,160,133,.12);
  background-color: var(--sq-surface);
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
  border-color: var(--sq-border-strong);
}

.form-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--sq-text-secondary);
  margin-bottom: .35rem;
}

.form-text { font-size: .72rem; color: var(--sq-muted); }

.form-check-input:checked {
  background-color: var(--sq-primary);
  border-color: var(--sq-primary);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(0,160,133,.12);
}

/* Input group */
.input-group-text {
  background: var(--sq-surface-2);
  border-color: var(--sq-border);
  color: var(--sq-muted);
  font-size: .8125rem;
}

/* Progress */
.progress {
  border-radius: 3px;
  background: var(--sq-border);
  height: 6px;
}
.progress-bar { background: var(--sq-primary); border-radius: 3px; }

/* Alerts */
.alert {
  border-radius: var(--sq-radius-sm);
  font-size: .8125rem;
  border-left-width: 3px;
  padding: .75rem 1rem;
}

.alert-success {
  background: var(--sq-success-bg);
  border-color: var(--sq-success);
  color: var(--sq-success-text);
}
.alert-danger {
  background: var(--sq-danger-bg);
  border-color: var(--sq-danger);
  color: var(--sq-danger-text);
}
.alert-warning {
  background: var(--sq-warning-bg);
  border-color: var(--sq-warning);
  color: var(--sq-warning-text);
}
.alert-info {
  background: rgba(0,160,133,.07);
  border-color: rgba(0,160,133,.3);
  color: #00735f;
}

/* Links */
a { color: var(--sq-primary); transition: color .15s ease; }
a:hover { color: var(--sq-primary-dark); }

/* Dropdown */
.dropdown-menu {
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow-lg);
  font-size: .8125rem;
  padding: .375rem;
}
.dropdown-item {
  border-radius: var(--sq-radius-sm);
  padding: .4rem .75rem;
  color: var(--sq-text);
  transition: background .12s ease;
}
.dropdown-item:hover { background: var(--sq-primary-dim); color: var(--sq-primary-dark); }

/* ── Flash messages ──────────────────────────────────────── */
.sq-flash {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1rem;
  border-radius: var(--sq-radius-sm);
  font-size: .8125rem;
  font-weight: 500;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  animation: slideDown .2s ease-out;
}
.sq-flash i { font-size: 1rem; flex-shrink: 0; }
.sq-flash--success {
  background: var(--sq-success-bg);
  border-color: rgba(5,150,105,.25);
  color: var(--sq-success-text);
}
.sq-flash--error {
  background: var(--sq-danger-bg);
  border-color: rgba(220,38,38,.25);
  color: var(--sq-danger-text);
}
.sq-flash--warning {
  background: var(--sq-warning-bg);
  border-color: rgba(217,119,6,.25);
  color: var(--sq-warning-text);
}
.sq-flash--info {
  background: rgba(0,160,133,.07);
  border-color: rgba(0,160,133,.2);
  color: #00735f;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section dividers ────────────────────────────────────── */
.sq-section-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--sq-muted);
  margin-bottom: .875rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--sq-border);
}

/* ── Detail list (show pages) ────────────────────────────── */
.sq-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.sq-detail-item { display: flex; flex-direction: column; gap: .2rem; }
.sq-detail-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sq-muted);
}
.sq-detail-value {
  font-size: .875rem;
  font-weight: 500;
  color: var(--sq-text);
}

/* ── Utilities ───────────────────────────────────────────── */
.text-primary { color: var(--sq-primary) !important; }
.text-muted   { color: var(--sq-muted) !important; }
.text-secondary { color: var(--sq-text-secondary) !important; }

.fw-semibold { font-weight: 600 !important; }

/* Mono financial amounts */
.sq-amount {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* Status dot */
.sq-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: .375rem;
  flex-shrink: 0;
}
.sq-dot--success { background: var(--sq-success); }
.sq-dot--warning { background: var(--sq-warning); }
.sq-dot--danger  { background: var(--sq-danger); }
.sq-dot--muted   { background: var(--sq-muted); }
.sq-dot--primary { background: var(--sq-primary); }

/* Action button group */
.sq-actions {
  display: flex;
  align-items: center;
  gap: .375rem;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sq-sidebar-w: 0px; }
  .sq-sidebar {
    transform: translateX(-248px);
    transition: transform .25s ease;
    width: 248px;
  }
  .sq-sidebar.open { transform: translateX(0); }
  .sq-main { margin-left: 0; }

  .sq-content { padding: 1rem; }

  .sq-stat { flex-direction: column; gap: .75rem; }
  .sq-stat-value { font-size: 1.5rem; }
}