/* =========================================================================
   Sogeti One — Application shell
   Built on the Sogeti Design System (v3.1).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700&display=swap');

:root {
  /* Primary palette */
  --color-capgemini-blue:      #0058AB;
  --color-light-blue:          #1DB8F2;
  --color-capgemini-dark-blue: #121A38;
  --color-cool-tech-red:       #F53B53;
  --color-cool-grey:           #F5F5F7;
  --color-white:               #FFFFFF;
  /* Secondary palette */
  --color-teal:        #00828E;
  --color-purple:      #71609E;
  --color-terracotta:  #BE4D00;
  --color-graphite:    #202020;
  --color-lilac:       #D4D3F1;
  --color-deep-red:    #8F3237;
  --color-turquoise:   #00D5D0;
  --color-yellow:      #FEB100;
  --color-orange:      #FF816E;

  /* Semantic tokens */
  --bg:           var(--color-white);
  --bg-subtle:    var(--color-cool-grey);
  --bg-inverted:  var(--color-capgemini-dark-blue);
  --fg1:          var(--color-capgemini-dark-blue);
  --fg2:          #4A5170;
  --fg3:          #7A8099;
  --fg-on-dark:   var(--color-white);
  --fg-muted-on-dark: rgba(255, 255, 255, 0.72);
  --accent:       var(--color-capgemini-blue);
  --accent-hover: #004A92;
  --accent-active:#003F7D;
  --accent-soft:  #EBF3FB;
  --highlight:    var(--color-cool-tech-red);
  --link:         var(--color-capgemini-blue);
  --link-hover:   var(--color-capgemini-dark-blue);
  --border:       rgba(18, 26, 56, 0.12);
  --border-strong:rgba(18, 26, 56, 0.20);

  /* Type families */
  --font-brand:  'Ubuntu', 'Verdana', 'Segoe UI', Tahoma, sans-serif;
  --font-system: 'Verdana', Tahoma, 'Segoe UI', sans-serif;
  --font-mono:   'Ubuntu Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

  /* Type scale */
  --fs-display-1: clamp(48px, 6vw, 88px);
  --fs-display-2: clamp(40px, 5vw, 72px);
  --fs-h1:        clamp(36px, 4vw, 56px);
  --fs-h2:        clamp(28px, 3vw, 40px);
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-eyebrow:   12px;

  --lh-tight: 1.0; --lh-display: 1.05; --lh-heading: 1.12;
  --lh-body: 1.5; --lh-loose: 1.7;
  --ls-display: -0.02em; --ls-heading: -0.015em;
  --ls-body: -0.01em;  --ls-eyebrow: 0.08em;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;

  /* Spacing */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* Radii */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(18, 26, 56, 0.04);
  --shadow-sm: 0 2px 8px rgba(18, 26, 56, 0.06);
  --shadow-md: 0 6px 20px rgba(18, 26, 56, 0.08);
  --shadow-lg: 0 16px 40px rgba(18, 26, 56, 0.10);
  --shadow-focus: 0 0 0 3px rgba(245, 59, 83, 0.35);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 400ms;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
  text-wrap: balance;
}
::selection { background: var(--color-cool-tech-red); color: var(--color-white); }
:focus-visible { outline: 2px solid var(--color-cool-tech-red); outline-offset: 2px; }
.sg-dot { color: var(--color-cool-tech-red); }

/* -------------------- Reset / base -------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-brand);
  font-weight: var(--fw-light);
  color: var(--fg1);
  background: var(--app-bg);
  transition: background-color var(--dur-base) var(--ease-standard),
              color       var(--dur-base) var(--ease-standard);
}

/* -------------------- Theme tokens -------------------- */
:root,
[data-theme="light"] {
  --app-bg:          var(--color-cool-grey);
  --surface:         var(--color-white);
  --surface-hover:   #ECECF1;
  --surface-active:  #E2E2EA;
  --nav-fg:          var(--fg1);
  --nav-fg-muted:    var(--fg2);
  --nav-active-fg:   var(--color-capgemini-blue);
  --nav-active-bg:   #EBF3FB;
  --divider:         rgba(18, 26, 56, 0.10);
  --logo-color:      url('./assets/one-light.svg');
  --topbar-bg:       transparent;
  --shadow-rail:     0 0 0 1px var(--divider);
}

[data-theme="dark"] {
  --app-bg:          var(--color-capgemini-dark-blue);
  --surface:         #1A2347;
  --surface-hover:   #232D55;
  --surface-active:  #2C3766;
  --nav-fg:          var(--color-white);
  --nav-fg-muted:    rgba(255,255,255,0.62);
  --nav-active-fg:   var(--color-white);
  --nav-active-bg:   rgba(29, 184, 242, 0.16);
  --divider:         rgba(255, 255, 255, 0.08);
  --logo-color:      url('./assets/one-dark.svg');
  --topbar-bg:       transparent;
  --shadow-rail:     0 0 0 1px var(--divider);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --app-bg:          var(--color-capgemini-dark-blue);
    --surface:         #1A2347;
    --surface-hover:   #232D55;
    --surface-active:  #2C3766;
    --nav-fg:          var(--color-white);
    --nav-fg-muted:    rgba(255,255,255,0.62);
    --nav-active-fg:   var(--color-white);
    --nav-active-bg:   rgba(29, 184, 242, 0.16);
    --divider:         rgba(255, 255, 255, 0.08);
    --logo-color:      url('./assets/one-dark.svg');
  }
}

/* =========================================================================
   App layout — CSS grid: [sidebar] [main]
   ========================================================================= */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w, 272px) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--dur-base) var(--ease-standard);
}
.app[data-collapsed="true"] {
  --sidebar-w: 72px;
}

/* =========================================================================
   Sidebar
   ========================================================================= */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 30;
  transition: background-color var(--dur-base) var(--ease-standard);
}

.sidebar__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 20px 18px;
  min-height: 72px;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.sidebar__logo {
  width: 36px;
  height: 36px;
  flex: none;
  background-image: var(--logo-color);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.sidebar__wordmark {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--nav-fg);
  line-height: 1;
  white-space: nowrap;
}
.sidebar__wordmark .sg-dot { color: var(--color-cool-tech-red); }

.sidebar__toggle {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--nav-fg-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.sidebar__toggle:hover { background: var(--surface-hover); color: var(--nav-fg); }
.sidebar__toggle svg { width: 18px; height: 18px; }

/* When collapsed, hide wordmark and center the rail */
.app[data-collapsed="true"] .sidebar__wordmark { display: none; }
.app[data-collapsed="true"] .sidebar__head {
  padding: 20px 0;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.app[data-collapsed="true"] .sidebar__brand { flex: none; }
.app[data-collapsed="true"] .sidebar__toggle {
  display: inline-flex;
}
.app[data-collapsed="true"] .sidebar__toggle svg {
  transform: scaleX(-1);
}

/* Nav lists */
.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar__foot {
  padding: 12px;
  border-top: 1px solid var(--divider);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--nav-fg-muted);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: var(--fw-regular);
  letter-spacing: -0.005em;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.nav-item:hover {
  background: var(--surface-hover);
  color: var(--nav-fg);
}
.nav-item__icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-item__icon svg { width: 20px; height: 20px; stroke-width: 1.6; }
.nav-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item.is-active {
  background: var(--nav-active-bg);
  color: var(--nav-active-fg);
  font-weight: var(--fw-medium);
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-cool-tech-red);
}

/* Profile row at bottom */
.nav-profile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--nav-fg);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.nav-profile:hover { background: var(--surface-hover); }
.nav-profile__avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background-color: var(--color-capgemini-blue);
  background-image: url('./assets/52515992-5ecc-48a7-a959-636f254eeab8.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: 0;
  overflow: hidden;
}
.nav-profile__avatar-initials {
  display: none;
}
.nav-profile__meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.nav-profile__name {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--nav-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-profile__role {
  font-size: 12px;
  color: var(--nav-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-profile__chev {
  color: var(--nav-fg-muted);
  flex: none;
}
.nav-profile__chev svg { width: 16px; height: 16px; }

/* Collapsed rail — show only icons */
.app[data-collapsed="true"] .nav-item { justify-content: center; padding: 12px 0; }
.app[data-collapsed="true"] .nav-item__label { display: none; }
.app[data-collapsed="true"] .nav-item.is-active::before { left: 0; }
.app[data-collapsed="true"] .nav-profile { justify-content: center; padding: 8px 0; }
.app[data-collapsed="true"] .nav-profile__meta,
.app[data-collapsed="true"] .nav-profile__chev { display: none; }

/* Tooltips for collapsed rail */
.app[data-collapsed="true"] .nav-item[data-tip]:hover::after,
.app[data-collapsed="true"] .nav-profile[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-capgemini-dark-blue);
  color: #fff;
  font-size: 12px;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
  box-shadow: var(--shadow-md);
}

/* =========================================================================
   Top bar
   ========================================================================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  min-height: 72px;
  background: var(--app-bg);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.topbar.is-scrolled {
  background: color-mix(in srgb, var(--app-bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom-color: var(--divider);
}

.topbar__menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--nav-fg);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.topbar__menu-btn:hover { background: var(--surface-hover); }
.topbar__menu-btn svg { width: 22px; height: 22px; }

.topbar__title {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: 20px;
  letter-spacing: var(--ls-heading);
  color: var(--nav-fg);
  line-height: 1;
}
.topbar__title .sg-dot { color: var(--color-cool-tech-red); }

.topbar__spacer { flex: 1; }
.topbar__actions { display: inline-flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--nav-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.icon-btn:hover { background: var(--surface-hover); }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.7; }

/* Theme toggle — show the icon for the OTHER mode */
[data-theme="light"] .icon-btn--theme .icon-moon { display: inline-flex; }
[data-theme="light"] .icon-btn--theme .icon-sun  { display: none; }
[data-theme="dark"]  .icon-btn--theme .icon-moon { display: none; }
[data-theme="dark"]  .icon-btn--theme .icon-sun  { display: inline-flex; }

/* =========================================================================
   Content area
   ========================================================================= */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.content {
  padding: 16px 28px 64px;
  flex: 1;
}

/* =========================================================================
   Card surface (used to host tables, forms, etc.)
   ========================================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--divider);
}
.card__title {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: 18px;
  letter-spacing: var(--ls-heading);
  color: var(--nav-fg);
  margin: 0;
  line-height: 1.2;
}
.card__meta {
  font-size: 13px;
  color: var(--nav-fg-muted);
}
.card__spacer { flex: 1; }

/* =========================================================================
   Data table
   ========================================================================= */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  letter-spacing: -0.005em;
}
.data-table thead th {
  text-align: left;
  font-weight: var(--fw-medium);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nav-fg-muted);
  padding: 14px 22px;
  background: transparent;
  border-bottom: 1px solid var(--divider);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 11px 22px;
  border-bottom: 1px solid var(--divider);
  color: var(--nav-fg);
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.3;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr {
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.data-table tbody tr:hover { background: var(--surface-hover); }

.data-table .cell-name { font-weight: var(--fw-medium); color: var(--nav-fg); }
.data-table .cell-phone {
  font-variant-numeric: tabular-nums;
  color: var(--nav-fg-muted);
  white-space: nowrap;
}
.data-table .cell-email a,
.data-table .cell-details a {
  color: var(--color-capgemini-blue);
  text-decoration: none;
}
.data-table .cell-email a:hover,
.data-table .cell-details a:hover { text-decoration: underline; }
[data-theme="dark"] .data-table .cell-email a,
[data-theme="dark"] .data-table .cell-details a { color: var(--color-light-blue); }
.data-table .cell-details {
  color: var(--nav-fg-muted);
  white-space: normal;
}
.cell-empty { color: var(--nav-fg-muted); opacity: 0.5; }

/* Type pill */
.type-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1.5;
}
.type-pill--customer { color: var(--color-capgemini-blue);   background: rgba(0, 88, 171, 0.10); }
.type-pill--product  { color: var(--color-teal);             background: rgba(0, 130, 142, 0.12); }
.type-pill--order    { color: var(--color-terracotta);       background: rgba(190, 77, 0, 0.12); }
.type-pill--supplier { color: var(--color-purple);           background: rgba(113, 96, 158, 0.14); }
.type-pill--invoice  { color: var(--color-deep-red);         background: rgba(143, 50, 55, 0.12); }
[data-theme="dark"] .type-pill--customer { color: #6EB6FF;   background: rgba(110, 182, 255, 0.14); }
[data-theme="dark"] .type-pill--product  { color: #4FD3CE;   background: rgba(79, 211, 206, 0.14); }
[data-theme="dark"] .type-pill--order    { color: #FFB18A;   background: rgba(255, 177, 138, 0.14); }
[data-theme="dark"] .type-pill--supplier { color: #C7BDEB;   background: rgba(199, 189, 235, 0.14); }
[data-theme="dark"] .type-pill--invoice  { color: #FF8A8A;   background: rgba(255, 138, 138, 0.14); }

/* =========================================================================
   Stat cards (overview row above tables)
   ========================================================================= */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 1024px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stat-grid { grid-template-columns: 1fr; } }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-xl);
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.stat-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stat-card__label {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--nav-fg-muted);
  letter-spacing: 0;
}
.stat-card__icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 88, 171, 0.08);
  color: var(--color-capgemini-blue);
}
.stat-card__icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
[data-theme="dark"] .stat-card__icon { background: rgba(110, 182, 255, 0.14); color: #8FC8FF; }

.stat-card--customer .stat-card__icon { background: rgba(0, 88, 171, 0.08);   color: var(--color-capgemini-blue); }
.stat-card--product  .stat-card__icon { background: rgba(0, 130, 142, 0.10);  color: var(--color-teal); }
.stat-card--order    .stat-card__icon { background: rgba(190, 77, 0, 0.10);   color: var(--color-terracotta); }
.stat-card--invoice  .stat-card__icon { background: rgba(143, 50, 55, 0.10);  color: var(--color-deep-red); }
[data-theme="dark"] .stat-card--customer .stat-card__icon { background: rgba(110, 182, 255, 0.14); color: #8FC8FF; }
[data-theme="dark"] .stat-card--product  .stat-card__icon { background: rgba(79, 211, 206, 0.14); color: #4FD3CE; }
[data-theme="dark"] .stat-card--order    .stat-card__icon { background: rgba(255, 177, 138, 0.14); color: #FFB18A; }
[data-theme="dark"] .stat-card--invoice  .stat-card__icon { background: rgba(255, 138, 138, 0.14); color: #FF8A8A; }

.stat-card__value {
  font-family: var(--font-brand);
  font-weight: var(--fw-bold);
  font-size: 36px;
  line-height: 1;
  letter-spacing: var(--ls-heading);
  color: var(--nav-fg);
  font-variant-numeric: tabular-nums;
}
.stat-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--nav-fg-muted);
}
.stat-card__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: var(--fw-medium);
}
.stat-card__delta--up   { color: var(--color-teal); }
.stat-card__delta--down { color: var(--color-cool-tech-red); }
[data-theme="dark"] .stat-card__delta--up { color: #4FD3CE; }
.stat-card__delta svg { width: 12px; height: 12px; stroke-width: 2.2; }

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-head__sub {
  font-size: 14px;
  color: var(--nav-fg-muted);
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-capgemini-blue);
  background: var(--color-capgemini-blue);
  color: #fff;
  font-family: var(--font-brand);
  font-weight: var(--fw-regular);
  font-size: 14px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
  text-decoration: none;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary svg { width: 16px; height: 16px; stroke-width: 2; }

/* Horizontal scroll for narrow viewports */
.table-scroll {
  width: 100%;
  overflow-x: auto;
}
@media (max-width: 720px) {
  .data-table thead th,
  .data-table tbody td { padding: 12px 16px; }
}

/* =========================================================================
   Graph card (used on Overview)
   ========================================================================= */
.graph-card { padding: 0; }
.graph-wrap {
  position: relative;
  width: 100%;
  height: clamp(420px, 70vh, 720px);
}
.graph {
  display: block;
  width: 100%;
  height: 100%;
}
.graph-filter-btn.is-active {
  background: var(--color-capgemini-blue);
  border-color: var(--color-capgemini-blue);
  color: #fff;
}
.graph-filter-btn.is-active:hover { background: var(--color-capgemini-blue); }
.graph__edge {
  stroke: var(--divider);
  stroke-width: 1.5;
}
[data-theme="dark"] .graph__edge { stroke: rgba(255,255,255,0.18); }
.graph__node > circle {
  fill: var(--nav-active-bg);
  stroke: var(--surface);
  stroke-width: 2;
}
.graph__node-icon {
  fill: none;
  stroke: var(--nav-active-fg);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.graph__node-photo { pointer-events: none; }
.graph__label {
  font-family: var(--font-brand);
  color: var(--nav-fg);
  line-height: 1.2;
  letter-spacing: -0.005em;
  pointer-events: none;
}
.graph__label-title {
  font-size: 13.5px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.graph__label-title .type-pill { vertical-align: 1px; margin-left: 4px; }
.graph__label-sub {
  font-size: 12.5px;
  font-weight: var(--fw-regular);
  color: var(--nav-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.graph-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-fg-muted);
  font-size: 14px;
}

/* =========================================================================
   Mobile drawer
   ========================================================================= */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(18, 26, 56, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
  z-index: 25;
}
.app[data-drawer="open"] .scrim {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .topbar { padding-inline: 20px; }
  .content { padding: 16px 20px 48px; }
}

@media (max-width: 720px) {
  .app {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-standard);
    box-shadow: var(--shadow-lg);
  }
  .app[data-drawer="open"] .sidebar {
    transform: translateX(0);
  }
  .app[data-collapsed="true"] .sidebar__wordmark { display: inline; }
  .app[data-collapsed="true"] .sidebar__head { justify-content: flex-start; }
  .app[data-collapsed="true"] .nav-item { justify-content: flex-start; padding: 10px 12px; }
  .app[data-collapsed="true"] .nav-item__label { display: inline; }
  .app[data-collapsed="true"] .nav-profile { justify-content: flex-start; padding: 8px 10px; }
  .app[data-collapsed="true"] .nav-profile__meta,
  .app[data-collapsed="true"] .nav-profile__chev { display: flex; }
  .app[data-collapsed="true"] .sidebar__toggle { display: none; }
  .sidebar__toggle { display: none; }

  .topbar__menu-btn { display: inline-flex; }
  .topbar { padding-inline: 16px; min-height: 64px; }
  .content { padding: 16px 16px 40px; }
}