/* =========================================
   BASE — CSS Variables, Reset, Typography
   ========================================= */

:root {
  /* Color Palette */
  --color-primary:      #000000;
  --color-primary-soft: #0d0d0d;
  --color-secondary:    #1c1c1c;
  --color-secondary-mid:#2a2a2a;
  --color-secondary-lt: #3d3d3d;
  --color-border:       #2f2f2f;
  --color-tertiary:     #03ffff;
  --color-tertiary-dim: rgba(3, 255, 255, 0.12);
  --color-tertiary-glow:rgba(3, 255, 255, 0.25);
  --color-text:         #ffffff;
  --color-text-muted:   #888888;
  --color-text-dim:     #555555;
  --color-danger:       rgba(255, 100, 100, 0.9);
  --color-danger-bg:    rgba(239, 68, 68, 0.1);
  --color-danger-border:rgba(239, 68, 68, 0.4);

  /* Admin SOP sidebar — section tone colors */
  --color-sop-red:    #ff6464;
  --color-sop-orange: #ff9f43;
  --color-sop-green:  #5dd879;
  --color-sop-blue:   #5eb3ff;
  --color-sop-purple: #b48cff;
  --color-sop-pink:   #ff7eb9;
  --color-sop-brown:  #c8956c;

  /* Overlay */
  --overlay-bg:         rgba(0, 0, 0, 0.75);
  --overlay-blur:       blur(8px);

  /* Typography */
  --font-base:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;

  /* Border Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-full:9999px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Nav */
  --nav-height: 60px;
  --subnav-height: 44px;
}

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Allow the native OS bounce on the page itself (small rubber band feel) */
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}

body {
  font-family: var(--font-base);
  background-color: var(--color-primary);
  color: var(--color-text);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
}


a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-base);
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-secondary-lt);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-tertiary-dim);
}

/*
  Inner scrollable regions get overscroll-behavior: contain so they don't
  chain scroll events to the page when they bottom/top out, while still
  allowing the page itself to bounce naturally.
*/
.modal-panel,
.modal-body,
.lib-sidebar__body,
.calc-sidebar,
.calc-panel,
.subfilter-dropdown,
.master-filter-dropdown,
.cmp-grid,
.cmp-panel__body,
.folders-panel,
.folders-modal__body,
.rv-modal__list,
.hidden-cards-panel,
.tags-modal__body,
.assign-tags-modal,
.assign-tags-list,
.lib-sort-dropdown,
.db-col-filter__dropdown {
  overscroll-behavior: contain;
}

/* ---- Shared Button Styles ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 10px 28px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), box-shadow var(--transition-base);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-tertiary);
  color: var(--color-primary);
  border-color: var(--color-tertiary);
}
.btn-primary:hover {
  background: transparent;
  color: var(--color-tertiary);
  box-shadow: 0 0 18px var(--color-tertiary-glow);
}

.btn-secondary {
  background: var(--color-secondary-mid);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-secondary-lt);
  color: var(--color-text);
  border-color: var(--color-secondary-lt);
}

.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: var(--color-danger-border);
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.7);
  color: rgb(255, 100, 100);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.btn-ghost:hover {
  color: var(--color-text);
  border-color: var(--color-secondary-lt);
}

/* ---- Form Elements (shared) ---- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-label {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-label-hint {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--color-text-dim);
  font-weight: 400;
  margin-left: 6px;
}

.form-input {
  background: var(--color-primary-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 11px var(--space-md);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.form-input::placeholder {
  color: var(--color-text-dim);
}

.form-input:focus {
  border-color: var(--color-tertiary);
  box-shadow: 0 0 0 3px var(--color-tertiary-dim);
}

/* ---- Shared Overlay Backdrop ---- */
/* Apply .np-overlay alongside any component-specific overlay class.
   Each component class only needs to declare z-index (and optionally
   a background override for non-standard opacity). */
.np-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: var(--overlay-blur);
  -webkit-backdrop-filter: var(--overlay-blur);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}
.np-overlay[hidden] { display: none; }

/* ---- Shared Custom Checkbox ---- */
/* Applied to both .subfilter-option and .modal-sf-option checkboxes */
.subfilter-option input[type="checkbox"],
.modal-sf-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-secondary-lt);
  border-radius: 3px;
  background: var(--color-primary-soft);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.subfilter-option input[type="checkbox"]:checked,
.modal-sf-option input[type="checkbox"]:checked {
  background: var(--color-tertiary);
  border-color: var(--color-tertiary);
}

.subfilter-option input[type="checkbox"]:checked::after,
.modal-sf-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 4px;
  width: 4px;
  height: 7px;
  border: 1.5px solid var(--color-primary);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ---- Page Transition ---- */
.page-fade-in {
  animation: pageFadeIn var(--transition-slow) ease forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Shared Info / About button ---- */
.np-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text-dim);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s;
  line-height: 1;
}
.np-info-btn:hover { color: var(--color-text); }