/* SuccServer theme for Grimmory (books.succserver.xyz). Injected by the grimmory-theme nginx proxy after the app's own CSS.
   Grimmory = Angular + PrimeNG + Tailwind. PrimeNG's semantic colours are real CSS variables, so most of this is variable overrides.
   Needs (loaded before this file): succserver-theme-tokens.css. The starfield (succserver-stars.js) provides #succ-space behind everything. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

html:root, html.dark:root, :root.dark, :root:root {
  color-scheme: dark;
  /* brand: orange -> cyan */
  --p-primary-50: #effcfd; --p-primary-100: #d3f7fa; --p-primary-200: #a9eef4; --p-primary-300: #7ee4ee; --p-primary-400: #5cdbe9;
  --p-primary-500: #3cc4d4; --p-primary-600: #2ba0b2; --p-primary-700: #247f8e; --p-primary-800: #1f6573; --p-primary-900: #1d535f; --p-primary-950: #0d333c;
  --p-primary-color: #5cdbe9; --p-primary-hover-color: #7ee4ee; --p-primary-active-color: #a9eef4; --p-primary-contrast-color: #02121a;
  --p-primary-hover-contrast-color: #02121a; --p-primary-active-contrast-color: #02121a;
  --p-highlight-background: color-mix(in srgb, #5cdbe9 16%, transparent); --p-highlight-color: #e2e6fa;
  --p-highlight-focus-background: color-mix(in srgb, #5cdbe9 26%, transparent); --p-highlight-focus-color: #ffffff;
  --p-focus-ring-color: #5cdbe9; --p-focus-ring-shadow: 0 0 0 2px rgba(92,219,233,.35);
  /* neutrals: grey -> deep space navy */
  --p-surface-0: #ffffff; --p-surface-50: #e2e6fa; --p-surface-100: #c3c9e6; --p-surface-200: #9aa2c8; --p-surface-300: #7a82a6; --p-surface-400: #5b6490;
  --p-surface-500: #4a5276; --p-surface-600: #343b66; --p-surface-700: #262d5a; --p-surface-800: #151a45; --p-surface-900: #0a0d28; --p-surface-950: #04061a;
  --p-content-background: rgba(6, 8, 22, .62); --p-content-hover-background: rgba(255,255,255,.05);
  --p-content-border-color: rgba(125, 140, 230, .16); --p-content-color: #e2e6fa; --p-content-hover-color: #ffffff;
  --p-text-color: #e2e6fa; --p-text-hover-color: #ffffff; --p-text-muted-color: #7a82a6; --p-text-hover-muted-color: #9aa2c8;
  --p-form-field-background: rgba(255,255,255,.04); --p-form-field-disabled-background: rgba(255,255,255,.02);
  --p-form-field-filled-background: rgba(255,255,255,.05); --p-form-field-filled-hover-background: rgba(255,255,255,.07); --p-form-field-filled-focus-background: rgba(255,255,255,.07);
  --p-form-field-border-color: rgba(125, 140, 230, .22); --p-form-field-hover-border-color: rgba(92,219,233,.5); --p-form-field-focus-border-color: #5cdbe9;
  --p-form-field-color: #e2e6fa; --p-form-field-placeholder-color: #4a5276;
  --p-overlay-modal-background: rgba(4, 6, 16, .94); --p-overlay-modal-border-color: rgba(125,140,230,.18); --p-overlay-modal-color: #e2e6fa;
  --p-overlay-popover-background: rgba(4, 6, 16, .94); --p-overlay-popover-border-color: rgba(125,140,230,.18);
  --p-overlay-select-background: rgba(4, 6, 16, .96); --p-overlay-select-border-color: rgba(125,140,230,.18);
  --p-list-option-focus-background: rgba(255,255,255,.06); --p-list-option-selected-background: color-mix(in srgb, #5cdbe9 14%, transparent); --p-list-option-selected-color: #ffffff;
  --p-navigation-item-focus-background: rgba(255,255,255,.06); --p-navigation-item-active-background: color-mix(in srgb, #5cdbe9 12%, transparent);
  --p-mask-background: rgba(2, 3, 9, .7);
  /* Tailwind's orange is Grimmory's accent in many utility classes: remap it to the cyan scale */
  --color-primary: #5cdbe9;
  /* Grimmory's own semantic colours (bg-card, border-border, text-text, bg-page ...) */
  --color-page: rgba(2, 3, 9, .55); --color-card: rgba(6, 8, 22, .62); --color-border: rgba(125, 140, 230, .16); --border-color: rgba(125, 140, 230, .16);
  --color-text: #e2e6fa; --color-text-secondary: #9aa2c8; --overlay-background: rgba(4, 6, 16, .94);
  --color-surface-50: #e2e6fa; --color-surface-100: #c3c9e6; --color-surface-150: #b2b9db; --color-surface-200: #9aa2c8; --color-surface-300: #7a82a6; --color-surface-400: #5b6490;
  --color-surface-500: #4a5276; --color-surface-600: #343b66; --color-surface-700: #262d5a; --color-surface-800: #151a45; --color-surface-900: #0a0d28; --color-surface-950: #04061a;
  --color-orange-50: #effcfd; --color-orange-100: #d3f7fa; --color-orange-200: #a9eef4; --color-orange-300: #7ee4ee; --color-orange-400: #5cdbe9;
  --color-orange-500: #3cc4d4; --color-orange-600: #2ba0b2; --color-orange-700: #247f8e; --color-orange-800: #1f6573; --color-orange-900: #1d535f; --color-orange-950: #0d333c;
}

/* ---------- page: let the starfield show through ---------- */
html, body { background: #020309 !important; font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea, .p-component { font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.layout-wrapper, .layout-main, .layout-main-container { background: transparent !important; }
app-root { position: relative; z-index: 1; display: block; }
::selection { background: color-mix(in srgb, #5cdbe9 35%, transparent); }

/* sidebar: glass */
.layout-sidebar {
  background: rgba(4, 6, 16, .78) !important; border-right: 1px solid rgba(125,140,230,.14) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
}
app-menu-item { transition: background .2s; border-radius: 12px; }
app-menu-item:hover { background: rgba(255,255,255,.05) !important; }

/* dashboard rows + any card-like container */
.dashboard-scroller-container, .p-card, .p-panel, .p-fieldset, .p-datatable, .p-dataview, .p-tabpanels {
  background: rgba(6, 8, 22, .62) !important; border: 1px solid rgba(125,140,230,.14) !important; border-radius: 18px !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 20px 60px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}
.dashboard-scroller-title { letter-spacing: .01em; font-weight: 700; }

/* buttons */
.p-button { border-radius: 12px !important; letter-spacing: .02em; font-weight: 500; transition: border-color .2s, background .2s, box-shadow .2s; }
.p-button:not(.p-button-text):not(.p-button-link):not(.p-button-secondary):not(.p-button-outlined) {
  background: color-mix(in srgb, #5cdbe9 16%, transparent) !important; border: 1px solid color-mix(in srgb, #5cdbe9 45%, transparent) !important; color: #e2e6fa !important;
}
.p-button:not(.p-button-text):not(.p-button-link):not(.p-button-secondary):not(.p-button-outlined):hover { background: color-mix(in srgb, #5cdbe9 26%, transparent) !important; border-color: #5cdbe9 !important; }
.p-button-secondary, .p-button-outlined { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(125,140,230,.2) !important; color: #e2e6fa !important; }
.p-button-secondary:hover, .p-button-outlined:hover { border-color: rgba(92,219,233,.5) !important; }

/* inputs */
.p-inputtext, .p-select, .p-multiselect, .p-textarea, .p-inputnumber-input, .p-password-input, .p-autocomplete-input {
  border-radius: 10px !important; background: rgba(255,255,255,.04) !important; border-color: rgba(125,140,230,.22) !important; color: #e2e6fa !important;
}
.p-inputtext:focus, .p-select.p-focus, .p-multiselect.p-focus { border-color: #5cdbe9 !important; box-shadow: none !important; }
.p-inputtext::placeholder { color: #4a5276; }

/* dialogs, menus, popovers */
.p-dialog, .p-popover, .p-menu, .p-contextmenu, .p-select-overlay, .p-multiselect-overlay, .p-drawer, .p-toast-message, .p-confirmdialog {
  background: rgba(4, 6, 16, .94) !important; border: 1px solid rgba(125,140,230,.18) !important; border-radius: 18px !important; color: #e2e6fa !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 60px -24px rgba(92,219,233,.4) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.p-dialog-mask, .p-drawer-mask { background: rgba(2,3,9,.7) !important; }

/* tabs, tags, progress, toggles */
.p-tab { font-weight: 700; color: #7a82a6; }
.p-tab-active, .p-tab[aria-selected="true"] { color: #5cdbe9 !important; }
.p-tablist-active-bar { background: #5cdbe9 !important; box-shadow: 0 0 10px rgba(92,219,233,.6); }
.p-progressbar { background: rgba(255,255,255,.08) !important; border-radius: 99px; }
.p-progressbar-value { background: linear-gradient(90deg, #5cdbe9, #4d78ee) !important; }
.p-tag { border-radius: 99px; }
.p-checkbox-checked .p-checkbox-box, .p-radiobutton-checked .p-radiobutton-box, .p-toggleswitch-checked .p-toggleswitch-slider { background: #5cdbe9 !important; border-color: #5cdbe9 !important; }

/* book covers lift like the site's tiles */
@media (hover: hover) {
  app-book-card, .book-card { transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s; }
  app-book-card:hover, .book-card:hover { transform: translateY(-3px); filter: drop-shadow(0 14px 22px rgba(92,219,233,.28)); }
}

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(125,140,230,.3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(125,140,230,.25); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(92,219,233,.4); background-clip: padding-box; }