:root {
  --s360-color-bg: #f6f7f7;
  --s360-color-surface: #ffffff;
  --s360-color-surface-muted: #fbfbfc;
  --s360-color-border: #dcdcde;
  --s360-color-border-soft: #e7e7e9;
  --s360-color-text: #1d2327;
  --s360-color-text-muted: #646970;
  --s360-color-text-soft: #50575e;
  --s360-color-primary: #2271b1;
  --s360-color-primary-hover: #135e96;
  --s360-color-success: #00a32a;
  --s360-color-warning: #b26200;
  --s360-color-danger: #b32d2e;

  --s360-space-2xs: 4px;
  --s360-space-xs: 8px;
  --s360-space-sm: 12px;
  --s360-space-md: 16px;
  --s360-space-lg: 24px;
  --s360-space-xl: 32px;

  --s360-radius-sm: 6px;
  --s360-radius-md: 8px;
  --s360-radius-lg: 10px;

  --s360-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --s360-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);

  --s360-font-size-2xs: 11px;
  --s360-font-size-xs: 12px;
  --s360-font-size-sm: 13px;
  --s360-font-size-md: 14px;
  --s360-font-size-lg: 16px;
  --s360-font-size-xl: 20px;
  --s360-font-weight-medium: 500;
  --s360-font-weight-semibold: 600;
  --s360-font-weight-bold: 700;

  --s360-line-height: 1.5;

  /* =====================================================================
   * UI/IX Phase 1: canonical typography and semantic color contract.
   * ---------------------------------------------------------------------
   * Policy: inherit the WordPress admin font stack unless a future brand
   * font is explicitly approved. These tokens are aliases/contracts only;
   * module CSS should consume them instead of introducing a new visual
   * language. No module-level color mass-replacement is performed here.
   * ===================================================================== */
  --s360-font-family-base: inherit;
  --s360-font-family-heading: var(--s360-font-family-base);
  --s360-font-family-label: var(--s360-font-family-base);
  --s360-font-family-mono: Consolas, Monaco, monospace;

  --s360-font-size-body: var(--s360-font-size-md);
  --s360-font-size-label: var(--s360-font-size-sm);
  --s360-font-size-helper: var(--s360-font-size-xs);
  --s360-font-size-caption: var(--s360-font-size-xs);
  --s360-font-size-heading-sm: var(--s360-font-size-lg);
  --s360-font-size-heading-md: var(--s360-font-size-xl);
  --s360-font-size-heading-lg: 24px;
  --s360-font-size-heading-xl: 28px;

  --s360-line-height-body: var(--s360-line-height);
  --s360-line-height-label: 1.4;
  --s360-line-height-heading: 1.25;
  --s360-line-height-caption: 1.35;

  --s360-font-weight-body: 400;
  --s360-font-weight-label: var(--s360-font-weight-medium);
  --s360-font-weight-heading: var(--s360-font-weight-semibold);
  --s360-font-weight-strong: var(--s360-font-weight-semibold);

  --s360-ui-color-page-bg: var(--s360-color-bg);
  --s360-ui-color-surface: var(--s360-color-surface);
  --s360-ui-color-surface-muted: var(--s360-color-surface-muted);
  --s360-ui-color-surface-raised: var(--s360-color-surface-raised, var(--s360-color-surface));
  --s360-ui-color-border: var(--s360-color-border);
  --s360-ui-color-border-muted: var(--s360-color-border-muted, var(--s360-color-border-soft));
  --s360-ui-color-border-soft: var(--s360-color-border-soft);
  --s360-ui-color-text: var(--s360-color-text);
  --s360-ui-color-heading: var(--s360-color-text-heading, var(--s360-color-text));
  --s360-ui-color-text-muted: var(--s360-color-text-muted);
  --s360-ui-color-text-soft: var(--s360-color-text-soft);
  --s360-ui-color-link: var(--s360-color-link, var(--s360-color-primary));
  --s360-ui-color-link-hover: var(--s360-color-link-hover, var(--s360-color-primary-hover));
  --s360-ui-color-primary: var(--s360-color-primary);
  --s360-ui-color-primary-hover: var(--s360-color-primary-hover);
  --s360-ui-color-success: var(--s360-color-success);
  --s360-ui-color-warning: var(--s360-color-warning);
  --s360-ui-color-danger: var(--s360-color-danger);
  --s360-ui-color-info: var(--s360-color-info-chip, var(--s360-color-primary));
  --s360-ui-color-success-surface: var(--s360-color-success-bg, var(--s360-color-surface-success-soft));
  --s360-ui-color-warning-surface: var(--s360-color-warning-bg, var(--s360-color-surface-warning-soft));
  --s360-ui-color-danger-surface: var(--s360-color-danger-bg, var(--s360-color-surface-danger-soft));
  --s360-ui-color-info-surface: var(--s360-color-info-bg, var(--s360-color-surface-info-soft));

  --s360-color-bg-main: var(--s360-color-bg);

  --s360-color-white: #ffffff;
  --s360-color-black-soft: #0f172a;
  --s360-color-surface-legacy: #fbfdff;
  --s360-color-surface-code: #f5f5f5;
  --s360-color-surface-warning-soft: #fff8e5;
  --s360-color-surface-warning-alt: #fffaf0;
  --s360-color-surface-info-soft: #eef6ff;
  --s360-color-surface-info-alt: #f5f9ff;
  --s360-color-surface-success-soft: #edfaef;
  --s360-color-surface-success-alt: #e6f9f0;
  --s360-color-surface-danger-soft: #fde8e8;
  --s360-color-surface-accent-soft: #e6f0ff;
  --s360-color-border-legacy: #dbe3ea;
  --s360-color-border-legacy-soft: #d7dee6;
  --s360-color-border-legacy-muted: #e3e8ee;
  --s360-color-border-legacy-divider: #e6ebf0;
  --s360-color-text-legacy-muted: #64748b;
  --s360-color-success-deep: #0a7a2f;
  --s360-color-success-chip: #047857;
  --s360-color-warning-deep: #8a5a00;
  --s360-color-warning-chip: #c2410c;
  --s360-color-info-chip: #0b57d0;
  --s360-color-info-link: #175cd3;
  --s360-color-bg-subtle: #f8fafc;
  --s360-color-bg-soft: #f8fbff;
  --s360-color-surface-raised: #ffffff;
  --s360-color-surface-alt: #f7f9fc;
  --s360-color-surface-contrast: #f9fafb;
  --s360-color-border-strong: #cbd5e1;
  --s360-color-border-muted: #e2e8f0;
  --s360-color-border-subtle: #e5e7eb;
  --s360-color-border-soft-alt: #dbe3ee;
  --s360-color-border-accent-soft: #dbeafe;
  --s360-color-border-accent: #93c5fd;
  --s360-color-border-info: #bfdbfe;
  --s360-color-border-warning: #fde68a;
  --s360-color-border-warning-strong: #fcd34d;
  --s360-color-border-success: #bbf7d0;
  --s360-color-border-success-strong: #86efac;
  --s360-color-border-danger: #fecaca;
  --s360-color-border-danger-strong: #fca5a5;

  --s360-color-border-divider: #eef2f7;
  --s360-color-text-subtle: #5b6b7f;
  --s360-color-info-strong: #1e3a8a;
  --s360-color-warning-strong: #92400e;
  --s360-color-warning-tint: #fef3c7;
  --s360-color-success-strong: #166534;
  --s360-color-success-tint: #dcfce7;
  --s360-color-danger-strong: #b91c1c;
  --s360-color-danger-ink: #991b1b;
  --s360-color-danger-tint: #fee2e2;
  --s360-color-text-heading: #0f172a;
  --s360-color-text-strong: #111827;
  --s360-color-text-body: #374151;
  --s360-color-text-secondary: #475569;
  --s360-color-text-tertiary: #64748b;
  --s360-color-text-quaternary: #6b7280;
  --s360-color-text-placeholder: #94a3b8;
  --s360-color-text-label: #334155;
  --s360-color-primary-strong: #1d4ed8;
  --s360-color-primary-hover-strong: #3730a3;
  --s360-color-primary-soft: #eef2ff;
  --s360-color-primary-soft-border: #c7d2fe;
  --s360-color-primary-chip: #4338ca;
  --s360-color-info-bg: #eff6ff;
  --s360-color-info-surface: #f8fbff;
  --s360-color-info-surface-alt: #f9fbff;
  --s360-color-warning-bg: #fffbeb;
  --s360-color-warning-surface: #fffdf4;
  --s360-color-success-bg: #f0fdf4;
  --s360-color-success-surface: #ecfdf5;
  --s360-color-danger-bg: #fef2f2;
  --s360-color-neutral-bg: #e5e7eb;
  --s360-color-neutral-surface: #fcfdff;
  --s360-color-neutral-border: #d1d5db;
  --s360-color-border-exact-d0d7de: var(--s360-color-semantic-border-bridge-d0d7de);
  --s360-color-warning-exact-fff9e6: var(--s360-color-semantic-warning-bridge-fff9e6);
  --s360-shadow-lg: 0 10px 26px rgba(15, 23, 42, 0.04);
  --s360-shadow-xl: 0 10px 28px rgba(15, 23, 42, 0.05);
  --s360-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.04);
  --s360-shadow-floating: 0 6px 18px rgba(15, 23, 42, 0.08);
  --s360-shadow-accent: 0 12px 30px rgba(37, 99, 235, 0.06);
  --s360-shadow-inset-sm: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  --s360-shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --s360-radius-xl: 12px;
  --s360-radius-2xl: 14px;
  --s360-radius-3xl: 16px;

  /* Phase G0 component foundation: shared overlay/z-index stack. */
  --s360-z-base: 1;
  --s360-z-dropdown: 900;
  --s360-z-sticky: 950;
  --s360-z-modal-backdrop: 1000;
  --s360-z-modal: 1001;
  --s360-z-tooltip: 1100;
  --s360-z-toast: 1200;
  --s360-z-skip-link: 1500;
  --s360-overlay-backdrop: rgba(15, 23, 42, 0.55);
  --s360-overlay-blur: 4px;
  --s360-elevation-overlay: 0 20px 40px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08);
  --s360-elevation-floating: 0 12px 24px rgba(0, 0, 0, 0.12);
  --s360-component-overlay-bg: var(--s360-overlay-backdrop);
  --s360-component-overlay-blur: var(--s360-overlay-blur);
  --s360-component-elevation: var(--s360-elevation-overlay);
  --s360-transition-fast: 150ms ease-out;
  --s360-transition-medium: 250ms ease-out;

  /* v11.4.7: Toast / Snackbar component tokens. */
  --s360-toast-bg-success: var(--s360-color-success-tint);
  --s360-toast-bg-info: var(--s360-color-info-bg, #dbeafe);
  --s360-toast-bg-warning: var(--s360-color-warning-tint);
  --s360-toast-bg-error: var(--s360-color-danger-tint);
  --s360-toast-text-success: var(--s360-color-success-strong);
  --s360-toast-text-info: var(--s360-color-info-strong);
  --s360-toast-text-warning: var(--s360-color-warning-strong);
  --s360-toast-text-error: var(--s360-color-danger-strong);
  --s360-toast-border-success: var(--s360-color-success-chip);
  --s360-toast-border-info: var(--s360-color-info-chip);
  --s360-toast-border-warning: var(--s360-color-warning-chip);
  --s360-toast-border-error: var(--s360-color-danger-strong);
  --s360-toast-radius: var(--s360-radius-xl);
  --s360-toast-shadow: var(--s360-elevation-overlay);
  --s360-toast-max-width: 420px;
  --s360-toast-region-gap: var(--s360-space-sm);
  --s360-toast-region-offset: var(--s360-space-lg);


  /* v11.5.0: Modal / Dialog component tokens. */
  --s360-modal-bg: var(--s360-color-surface-raised);
  --s360-modal-backdrop-bg: var(--s360-overlay-backdrop);
  --s360-modal-radius: var(--s360-radius-2xl);
  --s360-modal-shadow: var(--s360-elevation-overlay);
  --s360-modal-max-width-sm: 480px;
  --s360-modal-max-width-md: 640px;
  --s360-modal-max-width-lg: 880px;
  --s360-modal-max-width-xl: 1120px;
  --s360-modal-padding-y: var(--s360-space-lg);
  --s360-modal-padding-x: var(--s360-space-lg);
  --s360-modal-drawer-width: 480px;


  /* v11.5.1: Dropdown Menu component tokens. */
  --s360-dropdown-bg: var(--s360-color-surface-raised);
  --s360-dropdown-shadow: var(--s360-elevation-floating);
  --s360-dropdown-radius: var(--s360-radius-lg);
  --s360-dropdown-border: 1px solid var(--s360-color-border-subtle);
  --s360-dropdown-item-padding-y: var(--s360-space-xs);
  --s360-dropdown-item-padding-x: var(--s360-space-md);
  --s360-dropdown-item-hover-bg: var(--s360-color-bg-subtle);
  --s360-dropdown-item-disabled-opacity: 0.5;
  --s360-dropdown-min-width: 200px;
  --s360-dropdown-max-height: 360px;
  --s360-dropdown-divider-color: var(--s360-color-border-subtle);

  --s360-space-2xl: 48px;
  --s360-control-height-sm: 36px;
  --s360-control-height-md: 40px;
  --s360-control-height-lg: 44px;
  --s360-control-padding-x: 12px;
  --s360-control-padding-y: 10px;
  --s360-control-radius: var(--s360-radius-lg);
  --s360-control-border-width: 1px;
  --s360-form-field-gap: 6px;
  --s360-form-row-gap: var(--s360-space-md);
  --s360-form-stack-gap: var(--s360-space-sm);
  --s360-form-help-gap: 4px;
  --s360-form-actions-gap: 10px;
  --s360-form-section-gap: var(--s360-space-lg);
  --s360-color-input-bg: var(--s360-color-surface-raised);
  --s360-color-input-border: var(--s360-color-border-strong);
  --s360-color-input-border-hover: var(--s360-color-border-accent);
  --s360-color-input-border-focus: var(--s360-color-primary-strong);
  --s360-color-input-text: var(--s360-color-text-heading);
  --s360-color-input-placeholder: var(--s360-color-text-placeholder);
  --s360-color-input-disabled-bg: var(--s360-color-surface-contrast);
  --s360-color-input-disabled-border: var(--s360-color-border-muted);
  --s360-color-input-disabled-text: var(--s360-color-text-tertiary);
  --s360-color-form-label: var(--s360-color-text-label);
  --s360-color-form-help: var(--s360-color-text-tertiary);
  --s360-color-form-error: var(--s360-color-danger-ink);
  --s360-color-form-error-bg: var(--s360-color-danger-bg);
  --s360-color-form-error-border: var(--s360-color-border-danger);
  --s360-color-form-read-bg: var(--s360-color-bg-subtle);
  --s360-color-form-read-border: var(--s360-color-border-muted);
  --s360-shadow-input: var(--s360-shadow-inset-sm);
  --s360-shadow-input-focus: var(--s360-focus-ring);
  --s360-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.12);
  /* UI-W3: admin pages are full-width by default.
   * Component-level/readable/modal widths remain controlled by their own tokens.
   */
  --s360-layout-content-max: none;
  --s360-layout-content-max-narrow: none;
  --s360-layout-admin-page-max: none;
  --s360-layout-admin-page-gutter: 20px;
  --s360-layout-portal-page-max: 1180px;
  --s360-layout-parent-mobile-max: 760px;
  /* Faza 3: shared layout gapovi konzumiraju jedinstvenu kompaktnu skalu.
   * Pogada portal i ne-dashboard admin stranice. Admin dashboard ostaje
   * nepromijenjen jer ga njegov density override (specificniji selektor) gazi. */
  --s360-layout-page-gap: var(--s360-unified-gap-section, 16px);
  --s360-layout-section-gap: var(--s360-unified-gap-section, 16px);
  --s360-layout-panel-gap: var(--s360-unified-gap-section, 16px);
  --s360-layout-cluster-gap: var(--s360-unified-gap-section-mobile, 12px);
  --s360-layout-grid-gap: var(--s360-unified-gap-card, 10px);
  --s360-layout-grid-gap-lg: var(--s360-unified-gap-section, 16px);
  --s360-layout-sidebar-gap: var(--s360-unified-gap-section, 16px);
  --s360-layout-density-compact: 10px;
  --s360-layout-density-comfy: 14px;
  --s360-component-card-padding: 20px;
  --s360-component-card-padding-compact: 16px;
  --s360-component-card-padding-tight: 14px;
  --s360-component-card-header-gap: 14px;
  --s360-component-card-body-gap: 12px;
  --s360-component-card-footer-gap: 14px;
  --s360-component-card-footer-padding-top: 14px;
  --s360-component-button-gap: 6px;
  --s360-component-button-padding-y: 8px;
  --s360-component-button-padding-x: 12px;
  --s360-component-button-padding-x-lg: 14px;
  --s360-component-badge-padding-y: 5px;
  --s360-component-badge-padding-x: 10px;
  --s360-component-chip-padding-y: 4px;
  --s360-component-chip-padding-x: 10px;
  --s360-component-alert-padding-y: 12px;
  --s360-component-alert-padding-x: 14px;
  --s360-component-empty-state-padding: 18px;
  --s360-component-stat-padding: 14px;
  --s360-component-workflow-padding-y: 14px;
  --s360-component-workflow-padding-x: 16px;
  --s360-component-toolbar-gap: 8px;
  --s360-component-inline-meta-gap: 10px;
  --s360-component-pill-radius: 999px;
  --s360-component-button-shadow-hover: var(--s360-shadow-floating);
  --s360-component-button-shadow-focus: var(--s360-focus-ring);
  --s360-component-card-border: 1px solid var(--s360-color-border);
  --s360-component-divider: 1px solid var(--s360-color-border-divider);
  --s360-profile-shell-bg: linear-gradient(180deg,var(--s360-color-bg-soft) 0%,var(--s360-color-surface-raised) 18%,var(--s360-color-surface-raised) 100%);
  --s360-profile-shell-accent-border: var(--s360-color-border-accent-soft);
  --s360-profile-shell-shadow: var(--s360-shadow-soft);
  --s360-profile-header-avatar-size: 60px;
  --s360-profile-header-name-size: 24px;
  --s360-profile-header-subtitle-size: 14px;
  --s360-profile-header-meta-min-width: 220px;
  --s360-profile-header-gap: var(--s360-space-lg);
  --s360-profile-header-actions-gap: var(--s360-space-xs);
  --s360-profile-overview-gap: var(--s360-space-md);
  --s360-profile-section-gap: var(--s360-space-lg);
  --s360-profile-stat-min-height: 108px;
  --s360-profile-stat-padding: var(--s360-space-md);
  --s360-profile-tabs-padding: var(--s360-space-lg);
  --s360-profile-tabs-nav-shadow: var(--s360-shadow-soft);
  --s360-profile-tabs-surface: linear-gradient(180deg,var(--s360-color-surface-raised) 0%,var(--s360-color-bg-subtle) 100%);
  --s360-profile-tabs-border: var(--s360-color-border-soft-alt);
  --s360-profile-section-card-padding: var(--s360-component-card-padding);
  --s360-profile-section-card-border: var(--s360-color-border-muted);
  --s360-profile-section-card-bg: var(--s360-color-surface-raised);
  --s360-profile-inline-meta-bg: var(--s360-color-bg-subtle);
  --s360-profile-inline-meta-border: var(--s360-color-border-subtle);
  --s360-profile-inline-meta-text: var(--s360-color-text-secondary);
  --s360-profile-panel-divider: var(--s360-color-border-divider);


  --s360-admissions-hero-bg: linear-gradient(180deg, var(--s360-color-surface-raised) 0%, var(--s360-color-bg-soft) 100%);
  --s360-admissions-hero-border: var(--s360-color-border-soft-alt);
  --s360-admissions-panel-bg: var(--s360-color-surface-raised);
  --s360-admissions-panel-muted-bg: var(--s360-color-bg-subtle);
  --s360-admissions-panel-border: var(--s360-color-border-muted);
  --s360-admissions-panel-shadow: var(--s360-shadow-soft);
  --s360-admissions-chip-bg: var(--s360-color-bg-subtle);
  --s360-admissions-chip-text: var(--s360-color-text-secondary);
  --s360-admissions-chip-border: var(--s360-color-border-subtle);
  --s360-admissions-status-strip-bg: linear-gradient(180deg, var(--s360-color-info-surface-alt) 0%, var(--s360-color-surface-raised) 100%);
  --s360-admissions-status-strip-border: var(--s360-color-border-accent-soft);
  --s360-builder-panel-bg: var(--s360-color-surface-raised);
  --s360-builder-panel-muted-bg: var(--s360-color-bg-subtle);
  --s360-builder-panel-border: var(--s360-color-border-muted);
  --s360-builder-panel-shadow: var(--s360-shadow-soft);
  --s360-builder-toolbar-bg: var(--s360-color-bg-soft);
  --s360-builder-toolbar-border: var(--s360-color-border-accent-soft);
  --s360-builder-dropzone-bg: var(--s360-color-info-surface);
  --s360-builder-dropzone-border: var(--s360-color-border-accent);
  --s360-builder-empty-bg: var(--s360-color-surface-contrast);
  --s360-builder-empty-border: var(--s360-color-border-muted);
  --s360-builder-tab-bg: var(--s360-color-surface-raised);
  --s360-builder-tab-active-bg: var(--s360-color-primary-soft);
  --s360-builder-tab-border: var(--s360-color-border-muted);
  --s360-builder-tab-active-border: var(--s360-color-primary-soft-border);
  --s360-builder-tab-active-text: var(--s360-color-primary-chip);
  --s360-builder-modal-backdrop: rgba(15, 23, 42, 0.45);
  --s360-builder-modal-header-bg: linear-gradient(180deg, var(--s360-color-surface-raised) 0%, var(--s360-color-bg-soft) 100%);
  --s360-builder-modal-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  --s360-builder-field-meta: var(--s360-color-text-tertiary);
  --s360-builder-section-gap: var(--s360-space-md);
  --s360-builder-field-gap: var(--s360-space-xs);
  --s360-builder-card-padding: var(--s360-component-card-padding-compact);
  --s360-builder-toolbar-padding: var(--s360-space-sm);
  --s360-admissions-workspace-gap: var(--s360-space-lg);

  --s360-secondary-panel-bg: var(--s360-color-surface-raised);
  --s360-secondary-panel-muted-bg: var(--s360-color-bg-subtle);
  --s360-secondary-panel-border: var(--s360-color-border-muted);
  --s360-secondary-panel-shadow: var(--s360-shadow-soft);
  --s360-secondary-toolbar-bg: linear-gradient(180deg, var(--s360-color-surface-raised) 0%, var(--s360-color-bg-soft) 100%);
  --s360-secondary-toolbar-border: var(--s360-color-border-soft-alt);
  --s360-secondary-tabs-bg: linear-gradient(180deg, var(--s360-color-surface-raised) 0%, var(--s360-color-bg-subtle) 100%);
  --s360-secondary-tabs-border: var(--s360-color-border-soft-alt);
  --s360-secondary-chip-bg: var(--s360-color-neutral-bg);
  --s360-secondary-chip-border: var(--s360-color-border-subtle);
  --s360-secondary-chip-text: var(--s360-color-text-secondary);
  --s360-secondary-code-bg: var(--s360-color-bg-subtle);
  --s360-secondary-code-border: var(--s360-color-border-muted);
  --s360-secondary-callout-bg: var(--s360-color-info-surface);
  --s360-secondary-callout-border: var(--s360-color-border-accent-soft);
  --s360-secondary-callout-text: var(--s360-color-text-secondary);
  --s360-secondary-list-divider: var(--s360-color-border-divider);
  --s360-secondary-stat-bg: linear-gradient(180deg, var(--s360-color-surface-raised) 0%, var(--s360-color-bg-subtle) 100%);
  --s360-secondary-stat-border: var(--s360-color-border-muted);
  --s360-secondary-page-gap: var(--s360-space-lg);
  --s360-secondary-section-gap: var(--s360-space-md);

  --s360-table-toolbar-padding-y: 12px;
  --s360-table-toolbar-padding-x: 14px;
  --s360-table-toolbar-gap: 12px;
  --s360-table-meta-gap-x: 10px;
  --s360-table-meta-gap-y: 8px;
  --s360-table-cell-padding-y: 12px;
  --s360-table-cell-padding-x: 14px;
  --s360-table-cell-padding-compact-y: 10px;
  --s360-table-cell-padding-compact-x: 12px;
  --s360-table-row-min-height: 44px;
  --s360-table-search-min-width: 320px;
  --s360-table-toolbar-search-max-width: 420px;
  --s360-table-actions-gap: 8px;
  --s360-table-filter-gap: 8px;
  --s360-table-border-width: 1px;
  --s360-table-radius: var(--s360-radius-3xl);
  --s360-table-header-bg: var(--s360-color-bg-subtle);
  --s360-table-header-text: var(--s360-color-text-label);
  --s360-table-row-hover-bg: var(--s360-color-bg-soft);
  --s360-table-row-striped-bg: var(--s360-color-surface);
  --s360-table-toolbar-bg: linear-gradient(180deg,var(--s360-color-surface-raised) 0%,var(--s360-color-bg-subtle) 100%);
  --s360-table-shadow: var(--s360-shadow-soft);
  --s360-table-tablenav-bg: var(--s360-color-surface-alt);
  --s360-table-tablenav-border: var(--s360-color-border-muted);
  --s360-table-empty-padding-y: 16px;
  --s360-table-empty-padding-x: 14px;
  --s360-table-empty-text: var(--s360-color-text-tertiary);

  --s360-dashboard-notification-chip-border: rgba(178, 98, 0, 0.24);
  --s360-dashboard-notification-chip-bg: rgba(178, 98, 0, 0.08);
  /* Faza 3: dashboard gapovi konzumiraju jedinstvenu skalu (admin + portal). */
  --s360-dashboard-workspace-gap: var(--s360-unified-gap-section, 16px);
  --s360-dashboard-section-gap: var(--s360-unified-gap-card, 10px);
  --s360-dashboard-compact-gap: var(--s360-unified-gap-section-mobile, 12px);
  --s360-dashboard-top-card-padding-y: 14px;
  --s360-dashboard-top-card-padding-x: 16px;
  --s360-dashboard-stat-card-padding: 16px;
  --s360-dashboard-panel-radius: var(--s360-radius-xl);
  --s360-dashboard-table-max-height: 320px;
  --s360-dashboard-table-max-height-mobile: 280px;
  --s360-dashboard-card-hover-shadow: var(--s360-shadow-floating);

  --s360-motion-fast: 0.12s;
  --s360-motion-base: 0.18s;
  --s360-motion-slow: 0.24s;
  --s360-ease-standard: ease;
  --s360-ease-emphasized: cubic-bezier(.2,.8,.2,1);
  --s360-interactive-outline-offset: 2px;
  --s360-color-focus-outline: var(--s360-color-primary-strong);
  --s360-focus-ring-strong: 0 0 0 3px rgba(29, 78, 216, 0.22);
  --s360-focus-ring-danger: 0 0 0 3px rgba(185, 28, 28, 0.16);
  --s360-color-link: var(--s360-color-primary-strong);
  --s360-color-link-hover: var(--s360-color-primary-hover-strong);
  --s360-color-selection-bg: var(--s360-color-primary-soft-border);
  --s360-color-selection-text: var(--s360-color-text-heading);
  --s360-color-disabled-surface: var(--s360-color-surface-contrast);
  --s360-color-disabled-border: var(--s360-color-border-muted);
  --s360-color-disabled-text: var(--s360-color-text-tertiary);
  --s360-color-readonly-surface: var(--s360-color-bg-subtle);
  --s360-color-readonly-border: var(--s360-color-border-subtle);
  --s360-color-loading-surface: var(--s360-color-neutral-surface);
  --s360-color-loading-stripe: var(--s360-color-border-subtle);
  --s360-color-overlay-scrim: rgba(15, 23, 42, 0.12);
  --s360-touch-target-min: 36px;
  --s360-touch-target-min-mobile: 44px;
  --s360-skip-link-offset: var(--s360-space-sm);
  --s360-content-max-readable: 72ch;
  --s360-overflow-wrap: anywhere;
}

/* UI cleanup bridge legacy color aliases — exact values preserved from extracted inline styles. */
:root {
  --s360-color-warning-accent: #d97706;
  --s360-color-warning-border-legacy: #f0c36d;
  --s360-color-border-info-soft: #dbe3ef;
  --s360-color-neutral-chip-bg: #f0f0f1;
  --s360-color-border-neutral-soft: #e0e0e0;
}



/* =====================================================================
 * UI/IX Phase 03 / A2: semantic color scale.
 * ---------------------------------------------------------------------
 * Contract-only addition for future color consolidation. Existing exact
 * color tokens are NOT redirected in this phase, so current runtime visual
 * output remains unchanged. Future A3 batches may alias exact tokens to
 * this curated semantic palette only after visual approval.
 * ===================================================================== */
:root {
  /* Core surfaces. */
  --s360-color-semantic-surface-page: #f6f7f7;
  --s360-color-semantic-surface-card: #ffffff;
  --s360-color-semantic-surface-raised: #ffffff;
  --s360-color-semantic-surface-muted: #fbfbfc;
  --s360-color-semantic-surface-subtle: #f8fafc;
  --s360-color-semantic-surface-code: #f5f5f5;

  /* Core borders. */
  --s360-color-semantic-border-subtle: #e5e7eb;
  --s360-color-semantic-border-default: #dcdcde;
  --s360-color-semantic-border-strong: #cbd5e1;
  --s360-color-semantic-border-accent: #93c5fd;
  --s360-color-semantic-border-info: #bfdbfe;
  --s360-color-semantic-border-danger: #fecaca;

  /* Core text. */
  --s360-color-semantic-text-heading: #0f172a;
  --s360-color-semantic-text-body: #374151;
  --s360-color-semantic-text-muted: #64748b;
  --s360-color-semantic-text-soft: #50575e;
  --s360-color-semantic-text-inverse: #ffffff;
  --s360-color-semantic-text-link: #1d4ed8;


  /* UI/IX Phase 05 / A3.1: exact-preserving neutral aliases. */
  --s360-color-semantic-neutral-mid: #8c8f94;
  --s360-color-semantic-neutral-muted: #999;


  /* UI/IX Phase 05 / A3.2: exact-preserving surface/border bridge aliases. */
  /* Surface bridge tokens. */
  --s360-color-semantic-surface-bridge-f6f9ff: #f6f9ff;
  --s360-color-semantic-surface-bridge-fbfcff: #fbfcff;
  --s360-color-semantic-surface-bridge-ecfeff: #ecfeff;
  --s360-color-semantic-surface-bridge-eef4ff: #eef4ff;
  --s360-color-semantic-surface-bridge-eef8f1: #eef8f1;
  --s360-color-semantic-surface-bridge-f0f8ee: #f0f8ee;
  --s360-color-semantic-surface-bridge-f4fbf6: #f4fbf6;
  --s360-color-semantic-surface-bridge-f5f8fb: #f5f8fb;
  --s360-color-semantic-surface-bridge-f5f8fd: #f5f8fd;
  --s360-color-semantic-surface-bridge-f6f8fb: #f6f8fb;
  --s360-color-semantic-surface-bridge-f6fbff: #f6fbff;
  --s360-color-semantic-surface-bridge-f7f9ff: #f7f9ff;
  --s360-color-semantic-surface-bridge-f7fbff: #f7fbff;
  --s360-color-semantic-surface-bridge-f8faff: #f8faff;
  --s360-color-semantic-surface-bridge-f9f9fb: #f9f9fb;
  --s360-color-semantic-surface-bridge-fbfcfd: #fbfcfd;
  --s360-color-semantic-surface-bridge-fbfcfe: #fbfcfe;

  /* Border bridge tokens. */
  --s360-color-semantic-border-bridge-d0d7de: #d0d7de;
  --s360-color-semantic-border-bridge-c3c4c7: #c3c4c7;
  --s360-color-semantic-border-bridge-d9e2f2: #d9e2f2;
  --s360-color-semantic-border-bridge-f0f6fc: #f0f6fc;
  --s360-color-semantic-border-bridge-dbe7f3: #dbe7f3;
  --s360-color-semantic-border-bridge-d8dee6: #d8dee6;
  --s360-color-semantic-border-bridge-e0f2fe: #e0f2fe;
  --s360-color-semantic-border-bridge-eef1f4: #eef1f4;
  --s360-color-semantic-border-bridge-fcf0f1: #fcf0f1;
  --s360-color-semantic-border-bridge-cfd8e3: #cfd8e3;
  --s360-color-semantic-border-bridge-d8dee9: #d8dee9;
  --s360-color-semantic-border-bridge-e2e4e7: #e2e4e7;
  --s360-color-semantic-border-bridge-e6ebf2: #e6ebf2;
  --s360-color-semantic-border-bridge-edf0f2: #edf0f2;
  --s360-color-semantic-border-bridge-edf2f7: #edf2f7;
  --s360-color-semantic-border-bridge-eef0f2: #eef0f2;
  --s360-color-semantic-border-bridge-eef2f6: #eef2f6;
  --s360-color-semantic-border-bridge-f1f5f9: #f1f5f9;
  --s360-color-semantic-border-bridge-f3f6f9: #f3f6f9;
  --s360-color-semantic-border-bridge-fff4e5: #fff4e5;
  --s360-color-semantic-border-bridge-c7d2e2: #c7d2e2;
  --s360-color-semantic-border-bridge-c9e4d0: #c9e4d0;
  --s360-color-semantic-border-bridge-cbd7e6: #cbd7e6;
  --s360-color-semantic-border-bridge-cfd8e6: #cfd8e6;
  --s360-color-semantic-border-bridge-cfe6d5: #cfe6d5;
  --s360-color-semantic-border-bridge-d7e1ef: #d7e1ef;
  --s360-color-semantic-border-bridge-d7e2ee: #d7e2ee;
  --s360-color-semantic-border-bridge-d8e2ef: #d8e2ef;
  --s360-color-semantic-border-bridge-d9e1e8: #d9e1e8;
  --s360-color-semantic-border-bridge-dbe5ef: #dbe5ef;
  --s360-color-semantic-border-bridge-dbe6f4: #dbe6f4;
  --s360-color-semantic-border-bridge-dce5f3: #dce5f3;
  --s360-color-semantic-border-bridge-dce8f8: #dce8f8;
  --s360-color-semantic-border-bridge-dfe7f3: #dfe7f3;
  --s360-color-semantic-border-bridge-e0e4e8: #e0e4e8;
  --s360-color-semantic-border-bridge-e1e8f4: #e1e8f4;
  --s360-color-semantic-border-bridge-e5eef8: #e5eef8;
  --s360-color-semantic-border-bridge-e7f5ff: #e7f5ff;
  --s360-color-semantic-border-bridge-e7f7ed: #e7f7ed;
  --s360-color-semantic-border-bridge-eaf6ef: #eaf6ef;
  --s360-color-semantic-border-bridge-edf1f5: #edf1f5;
  --s360-color-semantic-border-bridge-edf9f0: #edf9f0;
  --s360-color-semantic-border-bridge-ddd: #ddd;

  /* Primary brand scale. */
  --s360-color-semantic-primary-50: #eff6ff;
  --s360-color-semantic-primary-100: #dbeafe;
  --s360-color-semantic-primary-200: #bfdbfe;
  --s360-color-semantic-primary-600: #2563eb;
  --s360-color-semantic-primary-700: #1d4ed8;

  /* Status colors. */
  --s360-color-semantic-success-surface: #f0fdf4;
  --s360-color-semantic-success-default: #16a34a;
  --s360-color-semantic-success-strong: #166534;
  --s360-color-semantic-warning-surface: #fffbeb;
  --s360-color-semantic-warning-default: #f59e0b;
  --s360-color-semantic-warning-strong: #92400e;
  --s360-color-semantic-danger-surface: #fef2f2;
  --s360-color-semantic-danger-default: #dc2626;
  --s360-color-semantic-danger-strong: #991b1b;
  --s360-color-semantic-info-surface: #eff6ff;
  --s360-color-semantic-info-default: #0ea5e9;
  --s360-color-semantic-info-strong: #075985;

  /* UI/IX Phase 05 / A3.3: exact-preserving status bridge aliases. */
  /* Info bridge tokens. */
  --s360-color-semantic-info-bridge-0a4b78: #0a4b78;
  --s360-color-semantic-info-bridge-0073aa: #0073aa;
  --s360-color-semantic-info-bridge-0c4a6e: #0c4a6e;
  --s360-color-semantic-info-bridge-155e75: #155e75;
  --s360-color-semantic-info-bridge-2c3338: #2c3338;
  /* Success bridge tokens. */
  --s360-color-semantic-success-bridge-22c55e: #22c55e;
  --s360-color-semantic-success-bridge-008a20: #008a20;
  --s360-color-semantic-success-bridge-059669: #059669;
  --s360-color-semantic-success-bridge-0a6b2b: #0a6b2b;
  --s360-color-semantic-success-bridge-0a7d34: #0a7d34;
  --s360-color-semantic-success-bridge-1e7e34: #1e7e34;
  --s360-color-semantic-success-bridge-1f4f20: #1f4f20;
  --s360-color-semantic-success-bridge-1f6b36: #1f6b36;
  --s360-color-semantic-success-bridge-8ad19b: #8ad19b;
  --s360-color-semantic-success-bridge-8cba80: #8cba80;
  --s360-color-semantic-success-bridge-b8e6c0: #b8e6c0;
  --s360-color-semantic-success-bridge-9ad7aa: #9ad7aa;
  --s360-color-semantic-success-bridge-0a6b2d: #0a6b2d;
  /* Warning bridge tokens. */
  --s360-color-semantic-warning-bridge-fff9e6: #fff9e6;
  --s360-color-semantic-warning-bridge-dba617: #dba617;
  --s360-color-semantic-warning-bridge-8a4b00: #8a4b00;
  --s360-color-semantic-warning-bridge-3c3000: #3c3000;
  --s360-color-semantic-warning-bridge-5f4b00: #5f4b00;
  --s360-color-semantic-warning-bridge-7a4d00: #7a4d00;
  --s360-color-semantic-warning-bridge-b45309: #b45309;
  --s360-color-semantic-warning-bridge-3c2f00: #3c2f00;
  --s360-color-semantic-warning-bridge-5a4a11: #5a4a11;
  --s360-color-semantic-warning-bridge-604600: #604600;
  --s360-color-semantic-warning-bridge-7a4b00: #7a4b00;
  --s360-color-semantic-warning-bridge-935f00: #935f00;
  --s360-color-semantic-warning-bridge-996800: #996800;
  --s360-color-semantic-warning-bridge-f0b849: #f0b849;
  --s360-color-semantic-warning-bridge-f0d28a: #f0d28a;
  --s360-color-semantic-warning-bridge-f1cf7a: #f1cf7a;
  --s360-color-semantic-warning-bridge-f1d39b: #f1d39b;
  --s360-color-semantic-warning-bridge-fdba74: #fdba74;
  --s360-color-semantic-warning-bridge-fff7ed: #fff7ed;
  --s360-color-semantic-warning-bridge-fff8e8: #fff8e8;
  --s360-color-semantic-warning-bridge-fffdf5: #fffdf5;
  --s360-color-semantic-warning-bridge-fcf9e8: #fcf9e8;
  --s360-color-semantic-warning-bridge-674e00: #674e00;
  --s360-color-semantic-warning-bridge-fffdf7: #fffdf7;
  /* Danger bridge tokens. */
  --s360-color-semantic-danger-bridge-d63638: #d63638;
  --s360-color-semantic-danger-bridge-f1aeb5: #f1aeb5;
  --s360-color-semantic-danger-bridge-691c1c: #691c1c;
  --s360-color-semantic-danger-bridge-8a2424: #8a2424;
  --s360-color-semantic-danger-bridge-b42318: #b42318;
  --s360-color-semantic-danger-bridge-f0b8b1: #f0b8b1;
  --s360-color-semantic-danger-bridge-fdecec: #fdecec;
  --s360-color-semantic-danger-bridge-fff1f0: #fff1f0;
  --s360-color-semantic-danger-bridge-f0b7bd: #f0b7bd;
  --s360-color-semantic-danger-bridge-8a242f: #8a242f;

  /* UI/IX Phase 05 / A3.4: exact-preserving primary/accent/text bridge aliases. */
  /* Primary bridge tokens. */
  --s360-color-semantic-primary-bridge-52616f: #52616f;
  --s360-color-semantic-primary-bridge-1f2937: #1f2937;
  --s360-color-semantic-primary-bridge-72aee6: #72aee6;
  --s360-color-semantic-primary-bridge-3c434a: #3c434a;
  --s360-color-semantic-primary-bridge-c3dafe: #c3dafe;
  --s360-color-semantic-primary-bridge-1e40af: #1e40af;
  --s360-color-semantic-primary-bridge-35516f: #35516f;
  --s360-color-semantic-primary-bridge-5f6b7a: #5f6b7a;
  --s360-color-semantic-primary-bridge-667085: #667085;
  --s360-color-semantic-primary-bridge-c5d9ed: #c5d9ed;
  --s360-color-semantic-primary-bridge-0a5fb4: #0a5fb4;
  --s360-color-semantic-primary-bridge-172033: #172033;
  --s360-color-semantic-primary-bridge-1d4f7a: #1d4f7a;
  --s360-color-semantic-primary-bridge-1e293b: #1e293b;
  --s360-color-semantic-primary-bridge-214f9b: #214f9b;
  --s360-color-semantic-primary-bridge-245b8f: #245b8f;
  --s360-color-semantic-primary-bridge-31516d: #31516d;
  --s360-color-semantic-primary-bridge-344054: #344054;
  --s360-color-semantic-primary-bridge-3858e9: #3858e9;
  --s360-color-semantic-primary-bridge-445063: #445063;
  --s360-color-semantic-primary-bridge-4b5563: #4b5563;
  --s360-color-semantic-primary-bridge-4f46e5: #4f46e5;
  --s360-color-semantic-primary-bridge-516071: #516071;
  --s360-color-semantic-primary-bridge-516173: #516173;
  --s360-color-semantic-primary-bridge-526071: #526071;
  --s360-color-semantic-primary-bridge-526276: #526276;
  --s360-color-semantic-primary-bridge-60a5fa: #60a5fa;
  --s360-color-semantic-primary-bridge-80bfff: #80bfff;
  --s360-color-semantic-primary-bridge-8db7e8: #8db7e8;
  --s360-color-semantic-primary-bridge-9fb6cc: #9fb6cc;
  --s360-color-semantic-primary-bridge-b5d0f2: #b5d0f2;
  --s360-color-semantic-primary-bridge-c8def7: #c8def7;
  --s360-color-semantic-primary-bridge-cfe0f2: #cfe0f2;
  --s360-color-semantic-primary-bridge-dbe4ff: #dbe4ff;
  --s360-color-semantic-primary-bridge-dbe7ff: #dbe7ff;
  /* Accent bridge tokens. */
  --s360-color-semantic-accent-bridge-8b5cf6: #8b5cf6;
  /* Text bridge tokens. */
  --s360-color-semantic-text-bridge-555: #555;
}

/* UI/IX Phase 13.8a: exact semantic aliases replacing high-frequency legacy color tokens. */
:root {
  --s360-color-primary-exact-2563eb: var(--s360-color-semantic-primary-600);
  --s360-color-warning-exact-dba617: var(--s360-color-semantic-warning-bridge-dba617);
  --s360-color-primary-exact-52616f: var(--s360-color-semantic-primary-bridge-52616f);
  --s360-color-border-exact-c3c4c7: var(--s360-color-semantic-border-bridge-c3c4c7);
  --s360-color-border-exact-d9e2f2: var(--s360-color-semantic-border-bridge-d9e2f2);
  --s360-color-border-exact-f0f6fc: var(--s360-color-semantic-border-bridge-f0f6fc);
  --s360-color-primary-exact-1f2937: var(--s360-color-semantic-primary-bridge-1f2937);
  --s360-color-primary-exact-72aee6: var(--s360-color-semantic-primary-bridge-72aee6);
  --s360-color-border-exact-dbe7f3: var(--s360-color-semantic-border-bridge-dbe7f3);
  --s360-color-warning-exact-8a4b00: var(--s360-color-semantic-warning-bridge-8a4b00);
  --s360-color-info-exact-075985: var(--s360-color-semantic-info-strong);
  --s360-color-primary-exact-3c434a: var(--s360-color-semantic-primary-bridge-3c434a);
  --s360-color-primary-exact-c3dafe: var(--s360-color-semantic-primary-bridge-c3dafe);
  --s360-color-border-exact-d8dee6: var(--s360-color-semantic-border-bridge-d8dee6);
  --s360-color-border-exact-e0f2fe: var(--s360-color-semantic-border-bridge-e0f2fe);
  --s360-color-border-exact-eef1f4: var(--s360-color-semantic-border-bridge-eef1f4);
  --s360-color-border-exact-fcf0f1: var(--s360-color-semantic-border-bridge-fcf0f1);
  --s360-color-info-exact-0a4b78: var(--s360-color-semantic-info-bridge-0a4b78);
  --s360-color-primary-exact-1e40af: var(--s360-color-semantic-primary-bridge-1e40af);
  --s360-color-success-exact-22c55e: var(--s360-color-semantic-success-bridge-22c55e);
  --s360-color-primary-exact-35516f: var(--s360-color-semantic-primary-bridge-35516f);
  --s360-color-warning-exact-3c3000: var(--s360-color-semantic-warning-bridge-3c3000);
  --s360-color-warning-exact-5f4b00: var(--s360-color-semantic-warning-bridge-5f4b00);
  --s360-color-primary-exact-5f6b7a: var(--s360-color-semantic-primary-bridge-5f6b7a);
  --s360-color-primary-exact-667085: var(--s360-color-semantic-primary-bridge-667085);
  --s360-color-warning-exact-7a4d00: var(--s360-color-semantic-warning-bridge-7a4d00);
  --s360-color-accent-exact-8b5cf6: var(--s360-color-semantic-accent-bridge-8b5cf6);
  --s360-color-neutral-exact-8c8f94: var(--s360-color-semantic-neutral-mid);
  --s360-color-warning-exact-b45309: var(--s360-color-semantic-warning-bridge-b45309);
  --s360-color-primary-exact-c5d9ed: var(--s360-color-semantic-primary-bridge-c5d9ed);
}

/* UI/IX Phase 13.8b: exact semantic aliases replacing legacy color token group 2. */
:root {
  --s360-color-border-exact-cfd8e3: var(--s360-color-semantic-border-bridge-cfd8e3);
  --s360-color-danger-exact-d63638: var(--s360-color-semantic-danger-bridge-d63638);
  --s360-color-border-exact-d8dee9: var(--s360-color-semantic-border-bridge-d8dee9);
  --s360-color-border-exact-e2e4e7: var(--s360-color-semantic-border-bridge-e2e4e7);
  --s360-color-border-exact-e6ebf2: var(--s360-color-semantic-border-bridge-e6ebf2);
  --s360-color-border-exact-edf0f2: var(--s360-color-semantic-border-bridge-edf0f2);
  --s360-color-border-exact-edf2f7: var(--s360-color-semantic-border-bridge-edf2f7);
  --s360-color-border-exact-eef0f2: var(--s360-color-semantic-border-bridge-eef0f2);
  --s360-color-border-exact-eef2f6: var(--s360-color-semantic-border-bridge-eef2f6);
  --s360-color-danger-exact-f1aeb5: var(--s360-color-semantic-danger-bridge-f1aeb5);
  --s360-color-border-exact-f1f5f9: var(--s360-color-semantic-border-bridge-f1f5f9);
  --s360-color-border-exact-f3f6f9: var(--s360-color-semantic-border-bridge-f3f6f9);
  --s360-color-warning-exact-f59e0b: var(--s360-color-semantic-warning-default);
  --s360-color-surface-exact-f6f9ff: var(--s360-color-semantic-surface-bridge-f6f9ff);
  --s360-color-surface-exact-fbfcff: var(--s360-color-semantic-surface-bridge-fbfcff);
  --s360-color-border-exact-fff4e5: var(--s360-color-semantic-border-bridge-fff4e5);
  --s360-color-info-exact-0073aa: var(--s360-color-semantic-info-bridge-0073aa);
  --s360-color-success-exact-008a20: var(--s360-color-semantic-success-bridge-008a20);
  --s360-color-success-exact-059669: var(--s360-color-semantic-success-bridge-059669);
  --s360-color-primary-exact-0a5fb4: var(--s360-color-semantic-primary-bridge-0a5fb4);
  --s360-color-success-exact-0a6b2b: var(--s360-color-semantic-success-bridge-0a6b2b);
  --s360-color-success-exact-0a7d34: var(--s360-color-semantic-success-bridge-0a7d34);
  --s360-color-info-exact-0c4a6e: var(--s360-color-semantic-info-bridge-0c4a6e);
  --s360-color-info-exact-0ea5e9: var(--s360-color-semantic-info-default);
  --s360-color-info-exact-155e75: var(--s360-color-semantic-info-bridge-155e75);
  --s360-color-success-exact-16a34a: var(--s360-color-semantic-success-default);
  --s360-color-primary-exact-172033: var(--s360-color-semantic-primary-bridge-172033);
  --s360-color-primary-exact-1d4f7a: var(--s360-color-semantic-primary-bridge-1d4f7a);
  --s360-color-primary-exact-1e293b: var(--s360-color-semantic-primary-bridge-1e293b);
  --s360-color-success-exact-1e7e34: var(--s360-color-semantic-success-bridge-1e7e34);
}

/* UI/IX Phase 13.8c: exact semantic aliases replacing legacy color token group 3. */
:root {
  --s360-color-success-exact-1f4f20: var(--s360-color-semantic-success-bridge-1f4f20);
  --s360-color-success-exact-1f6b36: var(--s360-color-semantic-success-bridge-1f6b36);
  --s360-color-primary-exact-214f9b: var(--s360-color-semantic-primary-bridge-214f9b);
  --s360-color-primary-exact-245b8f: var(--s360-color-semantic-primary-bridge-245b8f);
  --s360-color-info-exact-2c3338: var(--s360-color-semantic-info-bridge-2c3338);
  --s360-color-primary-exact-31516d: var(--s360-color-semantic-primary-bridge-31516d);
  --s360-color-primary-exact-344054: var(--s360-color-semantic-primary-bridge-344054);
  --s360-color-primary-exact-3858e9: var(--s360-color-semantic-primary-bridge-3858e9);
  --s360-color-warning-exact-3c2f00: var(--s360-color-semantic-warning-bridge-3c2f00);
  --s360-color-primary-exact-445063: var(--s360-color-semantic-primary-bridge-445063);
  --s360-color-primary-exact-4b5563: var(--s360-color-semantic-primary-bridge-4b5563);
  --s360-color-primary-exact-4f46e5: var(--s360-color-semantic-primary-bridge-4f46e5);
  --s360-color-primary-exact-516071: var(--s360-color-semantic-primary-bridge-516071);
  --s360-color-primary-exact-516173: var(--s360-color-semantic-primary-bridge-516173);
  --s360-color-primary-exact-526071: var(--s360-color-semantic-primary-bridge-526071);
  --s360-color-primary-exact-526276: var(--s360-color-semantic-primary-bridge-526276);
  --s360-color-warning-exact-5a4a11: var(--s360-color-semantic-warning-bridge-5a4a11);
  --s360-color-warning-exact-604600: var(--s360-color-semantic-warning-bridge-604600);
  --s360-color-primary-exact-60a5fa: var(--s360-color-semantic-primary-bridge-60a5fa);
  --s360-color-danger-exact-691c1c: var(--s360-color-semantic-danger-bridge-691c1c);
  --s360-color-warning-exact-7a4b00: var(--s360-color-semantic-warning-bridge-7a4b00);
  --s360-color-primary-exact-80bfff: var(--s360-color-semantic-primary-bridge-80bfff);
  --s360-color-danger-exact-8a2424: var(--s360-color-semantic-danger-bridge-8a2424);
  --s360-color-success-exact-8ad19b: var(--s360-color-semantic-success-bridge-8ad19b);
  --s360-color-success-exact-8cba80: var(--s360-color-semantic-success-bridge-8cba80);
  --s360-color-primary-exact-8db7e8: var(--s360-color-semantic-primary-bridge-8db7e8);
  --s360-color-warning-exact-935f00: var(--s360-color-semantic-warning-bridge-935f00);
  --s360-color-warning-exact-996800: var(--s360-color-semantic-warning-bridge-996800);
  --s360-color-primary-exact-9fb6cc: var(--s360-color-semantic-primary-bridge-9fb6cc);
  --s360-color-danger-exact-b42318: var(--s360-color-semantic-danger-bridge-b42318);
}

/* UI/IX Phase 13.8d: exact semantic aliases replacing legacy color token group 4. */
:root {
  --s360-color-primary-exact-b5d0f2: var(--s360-color-semantic-primary-bridge-b5d0f2);
  --s360-color-success-exact-b8e6c0: var(--s360-color-semantic-success-bridge-b8e6c0);
  --s360-color-border-exact-c7d2e2: var(--s360-color-semantic-border-bridge-c7d2e2);
  --s360-color-primary-exact-c8def7: var(--s360-color-semantic-primary-bridge-c8def7);
  --s360-color-border-exact-c9e4d0: var(--s360-color-semantic-border-bridge-c9e4d0);
  --s360-color-border-exact-cbd7e6: var(--s360-color-semantic-border-bridge-cbd7e6);
  --s360-color-border-exact-cfd8e6: var(--s360-color-semantic-border-bridge-cfd8e6);
  --s360-color-primary-exact-cfe0f2: var(--s360-color-semantic-primary-bridge-cfe0f2);
  --s360-color-border-exact-cfe6d5: var(--s360-color-semantic-border-bridge-cfe6d5);
  --s360-color-border-exact-d7e1ef: var(--s360-color-semantic-border-bridge-d7e1ef);
  --s360-color-border-exact-d7e2ee: var(--s360-color-semantic-border-bridge-d7e2ee);
  --s360-color-border-exact-d8e2ef: var(--s360-color-semantic-border-bridge-d8e2ef);
  --s360-color-border-exact-d9e1e8: var(--s360-color-semantic-border-bridge-d9e1e8);
  --s360-color-primary-exact-dbe4ff: var(--s360-color-semantic-primary-bridge-dbe4ff);
  --s360-color-border-exact-dbe5ef: var(--s360-color-semantic-border-bridge-dbe5ef);
  --s360-color-border-exact-dbe6f4: var(--s360-color-semantic-border-bridge-dbe6f4);
  --s360-color-primary-exact-dbe7ff: var(--s360-color-semantic-primary-bridge-dbe7ff);
  --s360-color-danger-exact-dc2626: var(--s360-color-semantic-danger-default);
  --s360-color-border-exact-dce5f3: var(--s360-color-semantic-border-bridge-dce5f3);
  --s360-color-border-exact-dce8f8: var(--s360-color-semantic-border-bridge-dce8f8);
  --s360-color-border-exact-dfe7f3: var(--s360-color-semantic-border-bridge-dfe7f3);
  --s360-color-border-exact-e0e4e8: var(--s360-color-semantic-border-bridge-e0e4e8);
  --s360-color-border-exact-e1e8f4: var(--s360-color-semantic-border-bridge-e1e8f4);
  --s360-color-border-exact-e5eef8: var(--s360-color-semantic-border-bridge-e5eef8);
  --s360-color-border-exact-e7f5ff: var(--s360-color-semantic-border-bridge-e7f5ff);
  --s360-color-border-exact-e7f7ed: var(--s360-color-semantic-border-bridge-e7f7ed);
  --s360-color-border-exact-eaf6ef: var(--s360-color-semantic-border-bridge-eaf6ef);
  --s360-color-surface-exact-ecfeff: var(--s360-color-semantic-surface-bridge-ecfeff);
  --s360-color-border-exact-edf1f5: var(--s360-color-semantic-border-bridge-edf1f5);
  --s360-color-border-exact-edf9f0: var(--s360-color-semantic-border-bridge-edf9f0);
}


/* UI/IX Phase 13.8e: final exact semantic aliases replacing remaining legacy color tokens. */
:root {
  --s360-color-text-exact-555: var(--s360-color-semantic-text-bridge-555);
  --s360-color-neutral-exact-999: var(--s360-color-semantic-neutral-muted);
  --s360-color-border-exact-ddd: var(--s360-color-semantic-border-bridge-ddd);
  --s360-color-surface-exact-eef4ff: var(--s360-color-semantic-surface-bridge-eef4ff);
  --s360-color-surface-exact-eef8f1: var(--s360-color-semantic-surface-bridge-eef8f1);
  --s360-color-warning-exact-f0b849: var(--s360-color-semantic-warning-bridge-f0b849);
  --s360-color-danger-exact-f0b8b1: var(--s360-color-semantic-danger-bridge-f0b8b1);
  --s360-color-warning-exact-f0d28a: var(--s360-color-semantic-warning-bridge-f0d28a);
  --s360-color-surface-exact-f0f8ee: var(--s360-color-semantic-surface-bridge-f0f8ee);
  --s360-color-warning-exact-f1cf7a: var(--s360-color-semantic-warning-bridge-f1cf7a);
  --s360-color-warning-exact-f1d39b: var(--s360-color-semantic-warning-bridge-f1d39b);
  --s360-color-surface-exact-f4fbf6: var(--s360-color-semantic-surface-bridge-f4fbf6);
  --s360-color-surface-exact-f5f8fb: var(--s360-color-semantic-surface-bridge-f5f8fb);
  --s360-color-surface-exact-f5f8fd: var(--s360-color-semantic-surface-bridge-f5f8fd);
  --s360-color-surface-exact-f6f8fb: var(--s360-color-semantic-surface-bridge-f6f8fb);
  --s360-color-surface-exact-f6fbff: var(--s360-color-semantic-surface-bridge-f6fbff);
  --s360-color-surface-exact-f7f9ff: var(--s360-color-semantic-surface-bridge-f7f9ff);
  --s360-color-surface-exact-f7fbff: var(--s360-color-semantic-surface-bridge-f7fbff);
  --s360-color-surface-exact-f8faff: var(--s360-color-semantic-surface-bridge-f8faff);
  --s360-color-surface-exact-f9f9fb: var(--s360-color-semantic-surface-bridge-f9f9fb);
  --s360-color-surface-exact-fbfcfd: var(--s360-color-semantic-surface-bridge-fbfcfd);
  --s360-color-surface-exact-fbfcfe: var(--s360-color-semantic-surface-bridge-fbfcfe);
  --s360-color-warning-exact-fdba74: var(--s360-color-semantic-warning-bridge-fdba74);
  --s360-color-danger-exact-fdecec: var(--s360-color-semantic-danger-bridge-fdecec);
  --s360-color-danger-exact-fff1f0: var(--s360-color-semantic-danger-bridge-fff1f0);
  --s360-color-warning-exact-fff7ed: var(--s360-color-semantic-warning-bridge-fff7ed);
  --s360-color-warning-exact-fff8e8: var(--s360-color-semantic-warning-bridge-fff8e8);
  --s360-color-warning-exact-fffdf5: var(--s360-color-semantic-warning-bridge-fffdf5);
}


/* UI-C2: exact aliases for colors migrated from C1 extracted inline styles.
 * These preserve visual output while allowing future token-driven theming.
 */
:root {
  --s360-color-success-exact-9ad7aa: var(--s360-color-semantic-success-bridge-9ad7aa);
  --s360-color-success-exact-0a6b2d: var(--s360-color-semantic-success-bridge-0a6b2d);
  --s360-color-warning-exact-fcf9e8: var(--s360-color-semantic-warning-bridge-fcf9e8);
  --s360-color-warning-exact-674e00: var(--s360-color-semantic-warning-bridge-674e00);
  --s360-color-warning-exact-fffdf7: var(--s360-color-semantic-warning-bridge-fffdf7);
  --s360-color-danger-exact-f0b7bd: var(--s360-color-semantic-danger-bridge-f0b7bd);
  --s360-color-danger-exact-8a242f: var(--s360-color-semantic-danger-bridge-8a242f);
}


/* Phase 15: visual consistency tokens for shared UI polish. */
:root {
  --s360-component-card-radius: var(--s360-radius-2xl);
  --s360-component-card-shadow: var(--s360-shadow-lg);
  --s360-component-card-shadow-hover: var(--s360-shadow-floating);
  --s360-component-card-border-color: var(--s360-color-border-muted);
  --s360-component-card-heading-gap: 6px;
  --s360-component-card-stack-gap: 12px;
  --s360-component-badge-min-height: 24px;
  --s360-component-badge-font-size: 12px;
  --s360-component-empty-state-min-height: 96px;
  --s360-component-empty-state-radius: var(--s360-radius-2xl);
  --s360-component-toolbar-control-gap: 8px;
  --s360-component-notice-border-width: 1px;
  --s360-component-notice-radius: var(--s360-radius-xl);
  --s360-component-transition-fast: .15s ease;
  --s360-component-transition-medium: .2s ease;
}

/* Phase 14.1: five-family card system semantic tokens. */
:root {
  --s360-card-core-bg: var(--s360-color-surface-raised);
  --s360-card-core-border-color: var(--s360-component-card-border-color);
  --s360-card-core-radius: var(--s360-component-card-radius);
  --s360-card-core-shadow: var(--s360-component-card-shadow);
  --s360-card-core-padding: var(--s360-component-card-padding);

  --s360-ui-section-card-bg: var(--s360-color-surface-raised);
  --s360-ui-section-card-border-color: var(--s360-dashboard-panel-border-color, var(--s360-component-card-border-color));
  --s360-ui-section-card-radius: var(--s360-dashboard-panel-radius, var(--s360-component-card-radius));
  --s360-ui-section-card-shadow: var(--s360-dashboard-panel-soft-shadow, var(--s360-component-card-shadow));
  --s360-ui-section-card-padding: var(--s360-component-card-padding);

  /*
   * ── Canonical stat-card design tokens (single source of truth) ──
   * Change a value here and every stat card — base .s360-ui-stat-card and the
   * academic / students / transport / calendar variants — updates together,
   * because both the base --s360-card-stat-* group and the shared --s360-card-*
   * group below resolve back to these masters.
   */
  --s360-statcard-bg: var(--s360-color-bg-subtle, #f8fafc);
  --s360-statcard-bg-flat: var(--s360-color-bg-subtle, #f8fafc);
  --s360-statcard-border-color: var(--s360-color-border-muted);
  --s360-statcard-border-width: 1px;
  --s360-statcard-radius: var(--s360-radius-xl, 12px);
  --s360-statcard-shadow: none;
  --s360-statcard-padding: 14px 16px;
  --s360-statcard-gap: 8px;
  --s360-statcard-min-height: 76px;
  --s360-statcard-label-size: var(--s360-font-size-xs, 12px);
  --s360-statcard-label-weight: 700;
  --s360-statcard-value-size: 24px;
  --s360-statcard-value-weight: 800;
  --s360-statcard-meta-size: var(--s360-font-size-xs, 12px);
  --s360-statcard-line-height: 1.2;
  --s360-statcard-icon-width: 52px;
  --s360-statcard-icon-height: 34px;
  --s360-statcard-icon-gap: 28px;
  --s360-statcard-icon-inline-offset: 14px;
  --s360-statcard-mobile-min-height: 70px;
  --s360-statcard-mobile-icon-width: 44px;
  --s360-statcard-mobile-icon-height: 30px;

  --s360-card-stat-bg: var(--s360-statcard-bg);
  --s360-card-stat-border-color: var(--s360-statcard-border-color);
  --s360-card-stat-radius: var(--s360-statcard-radius);
  --s360-card-stat-shadow: var(--s360-statcard-shadow);
  --s360-card-stat-padding: var(--s360-statcard-padding);
  --s360-card-stat-gap: var(--s360-statcard-gap);
  --s360-card-stat-min-height: var(--s360-statcard-min-height);
  --s360-card-stat-warning-bg: linear-gradient(180deg, var(--s360-color-warning-surface) 0%, var(--s360-color-surface-raised) 100%);
  --s360-card-stat-warning-border: var(--s360-color-border-warning);

  --s360-card-utility-bg: linear-gradient(180deg, var(--s360-color-surface-raised) 0%, var(--s360-color-bg-subtle) 100%);
  --s360-card-utility-border-color: var(--s360-color-border-muted);
  --s360-card-utility-radius: var(--s360-dashboard-panel-radius, var(--s360-radius-xl));
  --s360-card-utility-shadow: var(--s360-shadow-sm);
  --s360-card-utility-padding-y: var(--s360-dashboard-top-card-padding-y, 14px);
  --s360-card-utility-padding-x: var(--s360-dashboard-top-card-padding-x, 16px);
  --s360-card-utility-gap: var(--s360-dashboard-compact-gap, var(--s360-space-sm));
  --s360-card-utility-min-height: 58px;
  --s360-card-utility-notification-accent: var(--s360-color-warning);
  --s360-card-utility-school-accent: var(--s360-color-primary);

  --s360-card-action-bg: var(--s360-color-surface-raised);
  --s360-card-action-border-color: var(--s360-component-card-border-color);
  --s360-card-action-border-color-hover: var(--s360-color-primary-soft-border);
  --s360-card-action-radius: var(--s360-component-card-radius);
  --s360-card-action-shadow: var(--s360-shadow-sm);
  --s360-card-action-shadow-hover: var(--s360-component-card-shadow-hover);
  --s360-card-action-padding: var(--s360-component-card-padding-compact);
  --s360-card-action-mobile-padding: var(--s360-component-card-padding-tight);
  --s360-card-action-gap: var(--s360-component-card-stack-gap);
  --s360-card-action-min-height: 96px;
  --s360-card-action-icon-size: 36px;
  --s360-card-action-icon-bg: var(--s360-color-primary-soft);
  --s360-card-action-icon-color: var(--s360-color-primary-chip);
  --s360-card-action-title-size: 14px;
  --s360-card-action-meta-size: 12px;

  --s360-card-mobile-padding: var(--s360-component-card-padding-compact);
}

/* v11.3.1: Datepicker component tokens. */
:root {
  --s360-datepicker-cell-size: 36px;
  --s360-datepicker-highlight: var(--s360-color-primary);
  --s360-datepicker-today-ring: var(--s360-color-primary-soft);
  --s360-datepicker-range-bg: var(--s360-color-primary-soft);
  --s360-datepicker-disabled-text: var(--s360-color-text-tertiary);
  --s360-datepicker-bg: var(--s360-color-surface-raised);
  --s360-datepicker-border: var(--s360-color-border-muted);
  --s360-datepicker-radius: var(--s360-radius-xl);
  --s360-datepicker-shadow: var(--s360-shadow-lg);
}
/* v11.5.2: Tooltip + Skeleton component tokens. */
:root {
  --s360-tooltip-bg: #1d2327;
  --s360-tooltip-text: #ffffff;
  --s360-tooltip-radius: var(--s360-radius-md, 8px);
  --s360-tooltip-max-width: 240px;
  --s360-tooltip-shadow: var(--s360-shadow-md, 0 8px 18px rgba(0, 0, 0, 0.18));
  --s360-tooltip-arrow-size: 6px;
  --s360-tooltip-padding: var(--s360-space-xs, 8px) var(--s360-space-sm, 12px);

  --s360-skeleton-bg: var(--s360-color-bg-subtle, #f1f5f9);
  --s360-skeleton-shimmer-color: rgba(255, 255, 255, 0.6);
  --s360-skeleton-radius: var(--s360-radius-md, 8px);
  --s360-skeleton-animation-duration: 1.5s;
}

/* UI-D1: module visual consistency tokens.
 * These tokens provide a shared language for module headers, toolbars,
 * filters and table/action areas without changing business workflows.
 */
:root {
  --s360-module-stack-gap: var(--s360-space-lg, 24px);
  --s360-module-section-gap: var(--s360-space-lg, 24px);
  --s360-module-page-header-margin-bottom: var(--s360-space-md, 16px);
  --s360-module-heading-gap: var(--s360-space-xs, 8px);
  --s360-module-toolbar-gap: var(--s360-space-sm, 12px);
  --s360-module-toolbar-control-gap: var(--s360-space-xs, 8px);
  --s360-module-toolbar-padding-y: var(--s360-space-sm, 12px);
  --s360-module-toolbar-padding-x: var(--s360-space-md, 16px);
  --s360-module-toolbar-bg: var(--s360-color-surface-raised, #fff);
  --s360-module-toolbar-border-color: var(--s360-color-border-muted, #e2e8f0);
  --s360-module-toolbar-radius: var(--s360-radius-xl, 12px);
  --s360-module-toolbar-shadow: var(--s360-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
  --s360-module-title-size: var(--s360-font-size-lg, 16px);
  --s360-module-subtitle-size: var(--s360-font-size-sm, 13px);
  --s360-module-filter-min: 180px;
  --s360-module-filter-wide-min: 240px;
}

/* UI-F1: final QA token aliases.
 * These aliases intentionally mirror existing fallback values that were already
 * used across the UI stack. They reduce undefined custom-property noise without
 * changing the established visual design or workflow behavior.
 */
:root {
  --s360-card-action-value-size: 22px;
  --s360-card-core-padding-compact: var(--s360-component-card-padding-compact, 16px);
  --s360-card-stat-value-size: var(--s360-statcard-value-size, 24px);
  --s360-color-danger-surface: var(--s360-color-danger-bg, #fef2f2);
  --s360-color-form-bg: var(--s360-color-input-bg, var(--s360-color-surface-raised, #fff));
  --s360-color-form-border: var(--s360-color-input-border, var(--s360-color-border-muted, #e2e8f0));
  --s360-color-heading: var(--s360-color-text-heading, #0f172a);
  --s360-color-muted: var(--s360-color-text-tertiary, #64748b);
  --s360-dashboard-panel-border-color: var(--s360-component-card-border-color, var(--s360-color-border-muted, #e2e8f0));
  --s360-dashboard-panel-soft-shadow: var(--s360-component-card-shadow, var(--s360-shadow-lg, 0 10px 24px rgba(15, 23, 42, 0.08)));
  --s360-form-control-height: 40px;
  --s360-page-header-bg: var(--s360-color-surface-raised, #fff);
  --s360-page-header-border: var(--s360-color-border-muted, #d9e2ec);
  --s360-page-header-description: var(--s360-color-text-secondary, #475569);
  --s360-page-header-title: var(--s360-color-text-heading, #0f172a);
  --s360-portal-card-max-width: 920px;
  --s360-shadow-card: 0 10px 28px rgba(15, 23, 42, 0.08);
  --s360-shadow-xs: var(--s360-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
  --s360-skeleton-columns: 4;
}

/* UI-D4: module component polish tokens.
 * These aliases give recurring module surfaces the same spacing, radius and
 * containment language after the canonical wrapper backfill. They intentionally
 * mirror existing School 360 component tokens to avoid introducing a new visual
 * direction.
 */
:root {
  --s360-module-component-gap: var(--s360-space-md, 16px);
  --s360-module-component-gap-sm: var(--s360-space-sm, 12px);
  --s360-module-component-gap-xs: var(--s360-space-xs, 8px);
  --s360-module-card-header-gap: var(--s360-space-xs, 8px);
  --s360-module-card-body-gap: var(--s360-space-sm, 12px);
  --s360-module-card-radius: var(--s360-component-card-radius, var(--s360-radius-2xl, 16px));
  --s360-module-card-border: var(--s360-component-card-border-color, var(--s360-color-border-muted, #e2e8f0));
  --s360-module-card-bg: var(--s360-color-surface-raised, #fff);
  --s360-module-card-shadow: var(--s360-component-card-shadow, var(--s360-shadow-lg, 0 10px 24px rgba(15, 23, 42, 0.08)));
  --s360-module-filter-bg: var(--s360-module-toolbar-bg, var(--s360-color-surface-raised, #fff));
  --s360-module-filter-border: var(--s360-module-toolbar-border-color, var(--s360-color-border-muted, #e2e8f0));
  --s360-module-filter-radius: var(--s360-module-toolbar-radius, var(--s360-radius-xl, 12px));
  --s360-module-filter-padding: var(--s360-module-toolbar-padding-y, 12px) var(--s360-module-toolbar-padding-x, 16px);
  --s360-module-empty-state-bg: var(--s360-color-bg-subtle, #f8fafc);
  --s360-module-empty-state-border: var(--s360-color-border-muted, #e2e8f0);
  --s360-module-empty-state-text: var(--s360-color-text-secondary, #475569);
  --s360-module-empty-state-title: var(--s360-color-text-heading, #0f172a);
  --s360-module-empty-state-padding: var(--s360-space-lg, 24px);
  --s360-module-empty-state-min-height: var(--s360-component-empty-state-min-height, 96px);
  --s360-module-badge-gap: 6px;
  --s360-module-badge-padding-y: 3px;
  --s360-module-badge-padding-x: 8px;
  --s360-module-table-radius: var(--s360-radius-xl, 12px);
  --s360-module-table-scrollbar-gutter: stable both-edges;
}

/* =====================================================================
 * UNIFIED SPACING SYSTEM — single source of truth (Faza 1)
 * ---------------------------------------------------------------------
 * Cilj: cijeli plugin (admin + portal) koristi JEDNU kompaktnu spacing
 * skalu. Ovi tokeni su jedino mjesto gdje se vrijednost definira.
 * Buduce faze preusmjeravaju postojece layout/density/module tokene da
 * konzumiraju ove vrijednosti umjesto da svaki nosi svoju.
 *
 * Density: KOMPAKTNA (10px gap), odobreno.
 * Runtime impact u Fazi 1: NONE (samo definicije; nista jos ne cita ove
 * tokene). Vizualne promjene dolaze tek u Fazi 2+ uz zasebno odobrenje.
 * ===================================================================== */
:root {
  /* Razmak IZMEDU kartica / unutar grida i stackova. */
  --s360-unified-gap-card: 10px;
  --s360-unified-gap-card-mobile: var(--s360-space-xs, 8px);

  /* Razmak izmedu vecih sekcija / workspace blokova. */
  --s360-unified-gap-section: var(--s360-space-md, 16px);
  --s360-unified-gap-section-mobile: var(--s360-space-sm, 12px);

  /* Vertikalni stack ritam stranice (sekcija -> sekcija). */
  --s360-unified-stack-gap: 14px;
  --s360-unified-stack-gap-mobile: var(--s360-space-sm, 12px);

  /* Sitni interni ritam (npr. label -> value u KPI/stat karticama). */
  --s360-unified-gap-stat: var(--s360-space-2xs, 4px);
  --s360-unified-gap-tight: var(--s360-space-xs, 8px);

  /* Interni padding kartica/panela. */
  --s360-unified-card-padding-y: var(--s360-component-card-padding-tight, 14px);
  --s360-unified-card-padding-x: var(--s360-component-card-padding-compact, 16px);
  --s360-unified-card-padding-mobile: var(--s360-space-sm, 12px);

  /* Stat/KPI kartica padding. */
  --s360-unified-stat-padding-y: var(--s360-space-sm, 12px);
  --s360-unified-stat-padding-x: var(--s360-component-card-padding-tight, 14px);
  --s360-unified-stat-padding-mobile-y: 10px;
  --s360-unified-stat-padding-mobile-x: var(--s360-space-sm, 12px);

  /* Sub-navigation tabs: jedinstveni vanjski margin za sve module/stranice.
   * 14px gore (stack-gap) / 0 strane / 16px dolje (gap-section). */
  --s360-tabs-sub-margin: var(--s360-unified-stack-gap, 14px) 0 var(--s360-unified-gap-section, 16px);

  /* Main-navigation tabs: jedinstveni vanjski margin za sve module/stranice
   * (ukljucujuci Admin Dashboard). Isti standard kao sub-tabs. */
  --s360-tabs-main-margin: var(--s360-unified-stack-gap, 14px) 0 var(--s360-unified-gap-section, 16px);
}

/* =====================================================================
 * UI/IX Phase 5: canonical spacing contract.
 * ---------------------------------------------------------------------
 * These aliases define the approved spacing language for admin UI layers.
 * Existing module-owned CSS can keep its historical declarations until
 * cleanup phases, but new shared CSS must consume these tokens instead of
 * hardcoding margin/padding/gap values.
 * ===================================================================== */
:root {
  --s360-ui-space-0: 0;
  --s360-ui-space-2xs: var(--s360-space-2xs, 4px);
  --s360-ui-space-xs: var(--s360-space-xs, 8px);
  --s360-ui-space-sm: var(--s360-space-sm, 12px);
  --s360-ui-space-md: var(--s360-space-md, 16px);
  --s360-ui-space-lg: var(--s360-space-lg, 24px);
  --s360-ui-space-xl: var(--s360-space-xl, 32px);
  --s360-ui-space-2xl: var(--s360-space-2xl, 48px);

  --s360-ui-gap-tight: var(--s360-unified-gap-tight, var(--s360-ui-space-xs));
  --s360-ui-gap-control: var(--s360-ui-space-xs);
  --s360-ui-gap-component: var(--s360-ui-space-sm);
  --s360-ui-gap-card: var(--s360-unified-gap-card, var(--s360-ui-space-sm));
  --s360-ui-gap-section: var(--s360-unified-gap-section, var(--s360-ui-space-md));
  --s360-ui-gap-page: var(--s360-unified-stack-gap, var(--s360-ui-space-sm));
  --s360-ui-gap-workspace: var(--s360-ui-space-lg);

  --s360-ui-padding-control-y: var(--s360-ui-space-xs);
  --s360-ui-padding-control-x: var(--s360-ui-space-sm);
  --s360-ui-padding-compact-y: var(--s360-ui-space-xs);
  --s360-ui-padding-compact-x: var(--s360-ui-space-sm);
  --s360-ui-padding-card-y: var(--s360-unified-card-padding-y, var(--s360-ui-space-md));
  --s360-ui-padding-card-x: var(--s360-unified-card-padding-x, 16px);
  --s360-ui-padding-panel-y: var(--s360-ui-space-md);
  --s360-ui-padding-panel-x: var(--s360-ui-space-md);
  --s360-ui-padding-section-y: var(--s360-ui-space-lg);
  --s360-ui-padding-section-x: var(--s360-ui-space-lg);

  --s360-ui-margin-page-block-start: var(--s360-ui-space-xs);
  --s360-ui-margin-page-block-end: 0;
  --s360-ui-margin-section-block: var(--s360-ui-gap-section);
  --s360-ui-margin-heading-block-end: var(--s360-ui-gap-tight);

  --s360-ui-nav-main-margin: var(--s360-ui-gap-page) 0 var(--s360-ui-gap-section);
  --s360-ui-nav-sub-margin: var(--s360-ui-gap-page) 0 var(--s360-ui-gap-section);
  --s360-ui-nav-main-padding: var(--s360-ui-space-xs);
  --s360-ui-nav-sub-padding: var(--s360-ui-space-xs);
  --s360-ui-nav-main-item-padding: var(--s360-ui-space-xs) var(--s360-ui-space-sm);
  --s360-ui-nav-sub-item-padding: var(--s360-ui-space-xs) var(--s360-ui-space-sm);

  --s360-ui-form-row-gap: var(--s360-ui-gap-component);
  --s360-ui-form-control-gap: var(--s360-ui-gap-tight);
  --s360-ui-toolbar-gap: var(--s360-ui-gap-control);
  --s360-ui-grid-gap: var(--s360-ui-gap-card);
  --s360-ui-stack-gap: var(--s360-ui-gap-page);
}

@media (max-width: 782px) {
  :root {
    --s360-ui-gap-card: var(--s360-unified-gap-card-mobile, var(--s360-ui-space-xs));
    --s360-ui-gap-section: var(--s360-unified-gap-section-mobile, var(--s360-ui-space-sm));
    --s360-ui-gap-page: var(--s360-unified-stack-gap-mobile, var(--s360-ui-space-sm));
    --s360-ui-padding-card-y: var(--s360-unified-card-padding-mobile, var(--s360-ui-space-sm));
    --s360-ui-padding-card-x: var(--s360-unified-card-padding-mobile, var(--s360-ui-space-sm));
    --s360-ui-padding-panel-y: var(--s360-ui-space-sm);
    --s360-ui-padding-panel-x: var(--s360-ui-space-sm);
    --s360-ui-nav-main-margin: var(--s360-ui-gap-page) 0 var(--s360-ui-gap-section);
    --s360-ui-nav-sub-margin: var(--s360-ui-gap-page) 0 var(--s360-ui-gap-section);
  }
}


:root {
  /* Teacher Workbench hero/context tokens aligned with Admin Dashboard Overview Landing. */
  --s360-teacher-workbench-hero-bg-start: var(--s360-dashboard-color-brand-surface-soft, var(--s360-color-info-bg, rgb(238 247 250)));
  --s360-teacher-workbench-hero-bg-end: var(--s360-dashboard-color-brand-border-soft, var(--s360-color-border-info-soft, rgb(223 239 244)));
  --s360-teacher-workbench-hero-border: rgba(45, 109, 131, 0.18);
  --s360-teacher-workbench-hero-accent: var(--s360-dashboard-color-brand-teal, rgb(45 109 131));
  --s360-teacher-workbench-hero-heading: var(--s360-color-text-heading, var(--s360-dashboard-color-ink-strong, #0f172a));
  --s360-teacher-workbench-hero-muted: var(--s360-color-text-muted, var(--s360-dashboard-color-text-muted, #475569));
  --s360-teacher-workbench-hero-chip-bg: rgba(45, 109, 131, 0.10);
  --s360-teacher-workbench-hero-chip-border: rgba(45, 109, 131, 0.18);
}