/* DevStation shared theme (docs/BOOTSTRAP_COLORS.md, docs/BRAND_ASSETS.md).
   Dark workstation palette is the default; light tokens flip under
   [data-bs-theme="light"]. Loaded by every page. */

:root {
  --bs-primary: #00E5A8;
  --bs-primary-rgb: 0, 229, 168;
  --bs-secondary: #00C2FF;
  --bs-secondary-rgb: 0, 194, 255;
  --bs-success: #10B981;
  --bs-success-rgb: 16, 185, 129;
  --bs-info: #3B82F6;
  --bs-info-rgb: 59, 130, 246;
  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger: #EF4444;
  --bs-danger-rgb: 239, 68, 68;
  --bs-light: #F8FAFC;
  --bs-light-rgb: 248, 250, 252;
  --bs-dark: #0B1220;
  --bs-dark-rgb: 11, 18, 32;

  --bs-body-bg: #0B1220;
  --bs-body-color: #E2E8F0;
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: #94A3B8;
  --bs-tertiary-color: #64748B;
  --bs-border-color: #334155;
  --bs-link-color: #00C2FF;
  --bs-link-hover-color: #00E5A8;

  --ds-primary: #00E5A8;
  --ds-secondary: #00C2FF;
  --ds-success: #10B981;
  --ds-info: #3B82F6;
  --ds-warning: #F59E0B;
  --ds-danger: #EF4444;
  --ds-accent: #855CF6;
  --ds-bg: #0B1220;
  --ds-surface: #1E293B;
  --ds-surface-elevated: #243449;
  --ds-border: #64748B;
  --ds-text: #FFFFFF;
  --ds-text-muted: #94A3B8;
  --ds-brand-gradient: linear-gradient(90deg, #00E5A8 0%, #00CFEA 55%, #00C2FF 100%);
}

[data-bs-theme="light"] {
  --bs-body-bg: #F8FAFC;
  --bs-body-color: #0F172A;
  --bs-emphasis-color: #0F172A;
  --bs-secondary-color: #475569;
  --bs-border-color: #CBD5E1;

  --ds-bg: #F8FAFC;
  --ds-surface: #FFFFFF;
  --ds-surface-elevated: #F1F5F9;
  --ds-border: #CBD5E1;
  --ds-text: #0F172A;
  --ds-text-muted: #475569;
}

body {
  background: var(--ds-bg);
  color: var(--bs-body-color);
}

/* Bootstrap 5.3 buttons compile literal colors; --bs-primary does not reach
   them, and Tabler paints .btn-primary with its own literal blue. Override
   the button vars AND the painted properties so primary actions use brand
   teal (docs/BOOTSTRAP_COLORS.md). ponytail: fixed hover/active shades. */
.btn-primary {
  --bs-btn-bg: var(--ds-primary);
  --bs-btn-border-color: var(--ds-primary);
  --bs-btn-color: #0B1220;
  --bs-btn-hover-bg: #00CF95;
  --bs-btn-hover-border-color: #00CF95;
  --bs-btn-hover-color: #0B1220;
  --bs-btn-active-bg: #00B884;
  --bs-btn-active-border-color: #00B884;
  --bs-btn-active-color: #0B1220;
  --bs-btn-disabled-bg: var(--ds-primary);
  --bs-btn-disabled-border-color: var(--ds-primary);
  --bs-btn-disabled-color: #0B1220;
  --bs-btn-focus-shadow-rgb: 0, 229, 168;
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  color: var(--bs-btn-color);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}
.btn-primary:active,
.btn-primary.show {
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  color: var(--bs-btn-active-color);
}
.btn-primary:disabled {
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  color: var(--bs-btn-disabled-color);
}

/* Icon actions: borderless FontAwesome buttons (docs/DESIGN_ICON_SYSTEM.md).
   No outline chrome — hover tint only. 44px targets per VISUAL spec. */
.icon-btn {
  border: none;
  background: transparent;
  color: var(--ds-text-muted);
  border-radius: var(--tblr-border-radius);
  padding: 0 .5rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.icon-btn:hover,
.icon-btn:focus-visible {
  background: var(--tblr-bg-surface-secondary);
  color: var(--ds-text);
}
.icon-btn:focus-visible {
  outline: 2px solid var(--ds-secondary);
  outline-offset: -2px;
}
.icon-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  background: transparent;
}
.icon-btn.text-danger { color: var(--ds-danger); }
.icon-btn.text-danger:hover,
.icon-btn.text-danger:focus-visible {
  color: var(--ds-danger);
  background: var(--tblr-bg-surface-secondary);
}

/* Sortable table headers (projects page): click-to-sort with direction
   chevron. */
.sort-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sort-th::after { content: "⇅"; margin-left: .25rem; opacity: .35; }
.sort-th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.sort-th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }

/* Ghost text button: terminal key-send buttons keep their text labels but
   lose the outline border (docs/DESIGN_ICON_SYSTEM.md §3). */
.ghost-btn {
  border: none;
  background: transparent;
  color: var(--ds-text-muted);
  padding: 0 .75rem;
  min-height: 44px;
  border-radius: var(--tblr-border-radius);
  cursor: pointer;
}
.ghost-btn:hover,
.ghost-btn:focus-visible {
  color: var(--ds-text);
  background: var(--tblr-bg-surface-secondary);
}
.ghost-btn:focus-visible {
  outline: 2px solid var(--ds-secondary);
  outline-offset: -2px;
}

/* Sidebar nav and app tabs: fixed icon gutter keeps labels aligned. */
.navbar-vertical .nav-link .fa-solid,
.app-tabs .nav-link .fa-solid {
  width: 1.25em;
  text-align: center;
  margin-right: 0.5rem;
}

/* Theme toggle: sun/moon swap is CSS-driven; app.js only flips data-bs-theme. */
#theme-toggle .fa-sun { display: none; }
[data-bs-theme="light"] #theme-toggle .fa-sun { display: inline-block; }
[data-bs-theme="light"] #theme-toggle .fa-moon { display: none; }

/* Sidebar pin toggle: icon itself reflects state (same swap pattern as the
   sun/moon theme toggle above) - slash = not pinned, plain pin = pinned -
   plus Tabler's own active-nav-item tint so it reads as "on" at a glance.
   Tabler sets aria-pressed="true" when folding IS engaged (collapsed), so
   the "pinned" visuals key off aria-pressed="false", not "true". */
.navbar-vertical [data-bs-toggle="sidebar-folded"] .fa-thumbtack { display: none; }
.navbar-vertical [data-bs-toggle="sidebar-folded"][aria-pressed="false"] .fa-thumbtack { display: inline-block; }
.navbar-vertical [data-bs-toggle="sidebar-folded"][aria-pressed="false"] .fa-thumbtack-slash { display: none; }
.navbar-vertical [data-bs-toggle="sidebar-folded"][aria-pressed="false"] {
  background: var(--tblr-navbar-active-bg);
  color: var(--tblr-navbar-active-color);
}

/* Notifications flyout: always opens to the right of the bell instead of
   Bootstrap's default up/down auto-flip fighting the narrow rail. Sized for
   a panel, not a generic menu.
   #sidebar-menu scrolls internally (overflow:auto, for a long nav list),
   which clips anything absolutely-positioned trying to escape the rail -
   the same reason Tabler forces .navbar-vertical.navbar-expand-lg
   .navbar-collapse .dropdown-menu{position:static} for vertical sidebars
   in the first place (designed for in-place accordion submenus, not
   flyouts - it also strips all popover chrome for the same reason). So
   this panel uses position:fixed with top/left computed in app.js from the
   bell's real screen position (positionPanel()) - the only way out of that
   clip - and restores popover chrome from Tabler's own dropdown tokens so
   it still matches the app's light/dark theme instead of hardcoded colors.
   The #id selector outranks Tabler's 4-class override outright. */
#notifications-nav-item .dropdown-menu {
  position: fixed;
  background-color: var(--tblr-dropdown-bg);
  border: var(--tblr-dropdown-border-width) solid var(--tblr-dropdown-border-color);
  border-radius: var(--tblr-dropdown-border-radius);
  box-shadow: var(--tblr-dropdown-box-shadow);
  min-width: var(--tblr-dropdown-min-width);
  color: var(--tblr-dropdown-color);
}
.ds-notifications-panel {
  width: 22rem;
  max-height: 26rem;
  overflow-y: auto;
  padding: 0;
}

/* Full stacked brand lockup (docs/BRAND_ASSETS.md): sidebar header + login. */
.ds-logo-full {
  height: 68px;
  width: auto;
  max-width: 100%;
}

/* Folded sidebar (lg+): Tabler sets html[data-bs-sidebar^="folded"]; scale the
   same stacked lockup down to fit the rail instead of swapping images. */
@media (min-width: 992px) {
  html[data-bs-sidebar^="folded"] .ds-logo-full { height: 32px; }
  html[data-bs-sidebar^="folded"] .ds-nav-title { display: none; }
}

/* Below lg the vertical navbar becomes a horizontal top navbar. */
@media (max-width: 991.98px) {
  .ds-logo-full {
    height: 40px;
  }
}

/* Login hero above the sign-in card. */
.ds-logo-login {
  height: 100px;
}

/* Top/bottom margin correction */
.page-body {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

.note-editable {
  background-color: white !important;
}

.session-tab {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 5px;
    border: 1px solid var(--tblr-border-color);
    border-bottom: none;
    border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0;
    background: var(--tblr-bg-surface-secondary);
    cursor: pointer;
    min-height: 44px;
}

.page-wrapper .page-header {
    margin: 0 !important;
}