@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');



/**

 * Optional UI themes (cookie tk_theme). Base tokens: foxpro-ui.css :root

 * indigo — classic default (no override block; uses :root)

 * navy | plum | stone | ember — bold business palettes (dark title + dark grid header, light row bands)

 */



/* ── Navy Trust ── */

html[data-theme="navy"] {

  color-scheme: light;

  --tk-font: 'Plus Jakarta Sans', system-ui, sans-serif;

  --tk-primary: #1e3a5f;

  --tk-primary-hover: #132238;

  --tk-primary-light: #3b5f8f;

  --tk-primary-lighter: #f5f7fa;

  --tk-primary-dark: #0f2847;

  --tk-accent: #d97706;

  --tk-ink: #0f172a;

  --tk-ink-soft: #1e293b;

  --tk-bg: #e8ecf0;

  --tk-bg-page: linear-gradient(180deg, #f0f4fa 0%, #e8ecf0 100%);

  --tk-surface: #ffffff;

  --tk-surface-alt: #faf8f3;

  --tk-border: rgba(19, 34, 56, 0.12);

  --tk-border-light: rgba(19, 34, 56, 0.08);

  --tk-border-strong: rgba(19, 34, 56, 0.2);

  --tk-text: #0f172a;

  --tk-text-secondary: #475569;

  --tk-muted: #64748b;

  --tk-titlebar-gradient: #132238;

  --tk-titlebar-color: #f8fafc;

  --tk-titlebar-accent: #e8c872;

  --tk-titlebar-border: 4px solid #e8c872;

  --tk-titlebar-weight: 800;

  --tk-app-titlebar-gradient: linear-gradient(135deg, #132238 0%, #1e3a5f 100%);

  --tk-app-titlebar-color: #f8fafc;

  --tk-grid-header: #1e3a5f;

  --tk-on-grid-header: #f8fafc;

  --tk-grid-accent: #e8c872;

  --tk-grid-head-border: 3px solid #e8c872;

  --tk-grid-row-hover: #f5f0e8;

  --tk-menu-strip-bg: #f0f4fa;

  --tk-submenu-bg-solid: #ffffff;

  --tk-portal-topbar-bg: linear-gradient(135deg, #132238 0%, #1e3a5f 100%);

  --tk-portal-topbar-fg: #f8fafc;

  --tk-portal-user-link: #f5ecd8;

  --tk-portal-nav-bg: #f0f4fa;

  --tk-scanner-topbar-bg: linear-gradient(135deg, #132238 0%, #b45309 100%);

}



/* ── Plum Corporate ── */

html[data-theme="plum"] {

  color-scheme: light;

  --tk-font: 'Plus Jakarta Sans', system-ui, sans-serif;

  --tk-primary: #5c4d7d;

  --tk-primary-hover: #4a3d66;

  --tk-primary-light: #7c6b9e;

  --tk-primary-lighter: #ede9f4;

  --tk-primary-dark: #3d3258;

  --tk-accent: #0891b2;

  --tk-ink: #1e1b24;

  --tk-ink-soft: #3d3258;

  --tk-bg: #f5f0ff;

  --tk-bg-page: linear-gradient(180deg, #f5f0ff 0%, #ecfeff 100%);

  --tk-surface: #ffffff;

  --tk-surface-alt: #a5f3fc;

  --tk-border: rgba(74, 61, 102, 0.12);

  --tk-border-light: rgba(74, 61, 102, 0.08);

  --tk-border-strong: rgba(74, 61, 102, 0.2);

  --tk-text: #1e1b24;

  --tk-text-secondary: #4a3d66;

  --tk-muted: #6b6578;

  --tk-titlebar-gradient: #4a3d66;

  --tk-titlebar-color: #faf5ff;

  --tk-titlebar-accent: #06b6d4;

  --tk-titlebar-border: 4px solid #06b6d4;

  --tk-titlebar-weight: 800;

  --tk-app-titlebar-gradient: linear-gradient(135deg, #4a3d66 0%, #0891b2 100%);

  --tk-app-titlebar-color: #faf5ff;

  --tk-grid-header: #3d3258;

  --tk-on-grid-header: #ecfeff;

  --tk-grid-accent: #06b6d4;

  --tk-grid-head-border: 3px solid #06b6d4;

  --tk-grid-row-hover: #67e8f9;

  --tk-menu-strip-bg: #f5f0ff;

  --tk-submenu-bg-solid: #ffffff;

  --tk-portal-topbar-bg: linear-gradient(135deg, #4a3d66 0%, #0891b2 100%);

  --tk-portal-topbar-fg: #faf5ff;

  --tk-portal-user-link: #a5f3fc;

  --tk-portal-nav-bg: #f5f0ff;

  --tk-scanner-topbar-bg: linear-gradient(135deg, #4a3d66 0%, #0891b2 100%);

}



/* ── Warm Graphite ── */

html[data-theme="stone"] {

  color-scheme: light;

  --tk-font: 'Plus Jakarta Sans', system-ui, sans-serif;

  --tk-primary: #44403c;

  --tk-primary-hover: #292524;

  --tk-primary-light: #57534e;

  --tk-primary-lighter: #e7e5e4;

  --tk-primary-dark: #1c1917;

  --tk-accent: #0d9488;

  --tk-ink: #1c1917;

  --tk-ink-soft: #292524;

  --tk-bg: #f5f5f4;

  --tk-bg-page: linear-gradient(180deg, #fafaf9 0%, #f0fdfa 100%);

  --tk-surface: #ffffff;

  --tk-surface-alt: #5eead4;

  --tk-border: rgba(41, 37, 36, 0.12);

  --tk-border-light: rgba(41, 37, 36, 0.08);

  --tk-border-strong: rgba(41, 37, 36, 0.2);

  --tk-text: #1c1917;

  --tk-text-secondary: #44403c;

  --tk-muted: #78716c;

  --tk-titlebar-gradient: #292524;

  --tk-titlebar-color: #fafaf9;

  --tk-titlebar-accent: #14b8a6;

  --tk-titlebar-border: 4px solid #14b8a6;

  --tk-titlebar-weight: 800;

  --tk-app-titlebar-gradient: linear-gradient(135deg, #292524 0%, #0d9488 100%);

  --tk-app-titlebar-color: #fafaf9;

  --tk-grid-header: #115e59;

  --tk-on-grid-header: #ccfbf1;

  --tk-grid-accent: #14b8a6;

  --tk-grid-head-border: 3px solid #14b8a6;

  --tk-grid-row-hover: #99f6e4;

  --tk-menu-strip-bg: #fafaf9;

  --tk-submenu-bg-solid: #ffffff;

  --tk-portal-topbar-bg: linear-gradient(135deg, #292524 0%, #0d9488 100%);

  --tk-portal-topbar-fg: #fafaf9;

  --tk-portal-user-link: #5eead4;

  --tk-portal-nav-bg: #fafaf9;

  --tk-scanner-topbar-bg: linear-gradient(135deg, #292524 0%, #0d9488 100%);

}



/* ── Ember Pulse ── */

html[data-theme="ember"] {

  color-scheme: light;

  --tk-font: 'Plus Jakarta Sans', system-ui, sans-serif;

  --tk-primary: #c2410c;

  --tk-primary-hover: #9a3412;

  --tk-primary-light: #ea580c;

  --tk-primary-lighter: #ffedd5;

  --tk-primary-dark: #7f1d1d;

  --tk-accent: #fbbf24;

  --tk-ink: #431407;

  --tk-ink-soft: #7f1d1d;

  --tk-bg: #fff7ed;

  --tk-bg-page: linear-gradient(180deg, #fff7ed 0%, #fffbeb 100%);

  --tk-surface: #ffffff;

  --tk-surface-alt: #ffedd5;

  --tk-border: rgba(153, 27, 27, 0.12);

  --tk-border-light: rgba(153, 27, 27, 0.08);

  --tk-border-strong: rgba(153, 27, 27, 0.22);

  --tk-text: #431407;

  --tk-text-secondary: #9a3412;

  --tk-muted: #c2410c;

  --tk-titlebar-gradient: #991b1b;

  --tk-titlebar-color: #fff7ed;

  --tk-titlebar-accent: #fbbf24;

  --tk-titlebar-border: 4px solid #fbbf24;

  --tk-titlebar-weight: 800;

  --tk-app-titlebar-gradient: linear-gradient(135deg, #991b1b 0%, #ea580c 100%);

  --tk-app-titlebar-color: #fff7ed;

  --tk-grid-header: #9a3412;

  --tk-on-grid-header: #ffedd5;

  --tk-grid-accent: #fbbf24;

  --tk-grid-head-border: 3px solid #fbbf24;

  --tk-grid-row-hover: #fed7aa;

  --tk-menu-strip-bg: #fff7ed;

  --tk-submenu-bg-solid: #ffffff;

  --tk-portal-topbar-bg: linear-gradient(135deg, #991b1b 0%, #ea580c 100%);

  --tk-portal-topbar-fg: #fff7ed;

  --tk-portal-user-link: #fde68a;

  --tk-portal-nav-bg: #fff7ed;

  --tk-scanner-topbar-bg: linear-gradient(135deg, #991b1b 0%, #ea580c 100%);

}



/* Business themes — bold chrome */

html[data-theme="navy"] .fox-window .window-titlebar,

html[data-theme="navy"] .fox-title-bar,

html[data-theme="plum"] .fox-window .window-titlebar,

html[data-theme="plum"] .fox-title-bar,

html[data-theme="stone"] .fox-window .window-titlebar,

html[data-theme="stone"] .fox-title-bar,

html[data-theme="ember"] .fox-window .window-titlebar,

html[data-theme="ember"] .fox-title-bar {

  border-bottom: var(--tk-titlebar-border, 4px solid var(--tk-titlebar-accent, var(--tk-grid-accent)));

  font-weight: var(--tk-titlebar-weight, 800);

}



html[data-theme="navy"] .fox-grid th,

html[data-theme="plum"] .fox-grid th,

html[data-theme="stone"] .fox-grid th,

html[data-theme="ember"] .fox-grid th,

html[data-theme="navy"] #phTable thead th,

html[data-theme="plum"] #phTable thead th,

html[data-theme="stone"] #phTable thead th,

html[data-theme="ember"] #phTable thead th {

  border-bottom: var(--tk-grid-head-border, 3px solid var(--tk-grid-accent));

  font-weight: 800;

}



html[data-theme="navy"] .toykar-topbar,

html[data-theme="plum"] .toykar-topbar,

html[data-theme="stone"] .toykar-topbar,

html[data-theme="ember"] .toykar-topbar {

  background: var(--tk-titlebar-gradient);

  color: var(--tk-titlebar-color);

  border-bottom: none;

  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.14);

}

html[data-theme="navy"] .toykar-topbar::after,

html[data-theme="plum"] .toykar-topbar::after,

html[data-theme="stone"] .toykar-topbar::after,

html[data-theme="ember"] .toykar-topbar::after {

  height: 3px;

  opacity: 1;

  background: var(--tk-titlebar-accent, var(--tk-grid-accent));

}

html[data-theme="navy"] .toykar-system-title,

html[data-theme="navy"] .toykar-hello,

html[data-theme="navy"] .toykar-date,

html[data-theme="plum"] .toykar-system-title,

html[data-theme="plum"] .toykar-hello,

html[data-theme="plum"] .toykar-date,

html[data-theme="stone"] .toykar-system-title,

html[data-theme="stone"] .toykar-hello,

html[data-theme="stone"] .toykar-date,

html[data-theme="ember"] .toykar-system-title,

html[data-theme="ember"] .toykar-hello,

html[data-theme="ember"] .toykar-date {

  color: var(--tk-titlebar-color);

}

html[data-theme="navy"] .toykar-system-title:hover,

html[data-theme="plum"] .toykar-system-title:hover,

html[data-theme="stone"] .toykar-system-title:hover,

html[data-theme="ember"] .toykar-system-title:hover {

  color: #fff;

}



html[data-theme="navy"] .toykar-menu,

html[data-theme="plum"] .toykar-menu,

html[data-theme="stone"] .toykar-menu,

html[data-theme="ember"] .toykar-menu {

  background: var(--tk-menu-strip-bg) !important;

  border-bottom: 2px solid var(--tk-border-strong) !important;

}



html[data-theme="navy"] .toykar-footer,

html[data-theme="plum"] .toykar-footer,

html[data-theme="stone"] .toykar-footer,

html[data-theme="ember"] .toykar-footer {

  background: var(--tk-surface);

  border-top-color: var(--tk-border);

}



html[data-theme="navy"] .portal-topbar,

html[data-theme="plum"] .portal-topbar,

html[data-theme="stone"] .portal-topbar,

html[data-theme="ember"] .portal-topbar {

  background: var(--tk-portal-topbar-bg) !important;

  color: var(--tk-portal-topbar-fg) !important;

  border-bottom: none !important;

}

html[data-theme="navy"] .portal-title,

html[data-theme="plum"] .portal-title,

html[data-theme="stone"] .portal-title,

html[data-theme="ember"] .portal-title {

  color: var(--tk-portal-topbar-fg) !important;

}

html[data-theme="navy"] .portal-user,

html[data-theme="plum"] .portal-user,

html[data-theme="stone"] .portal-user,

html[data-theme="ember"] .portal-user {

  color: rgba(255, 255, 255, 0.9) !important;

}

html[data-theme="navy"] .portal-user a,

html[data-theme="plum"] .portal-user a,

html[data-theme="stone"] .portal-user a,

html[data-theme="ember"] .portal-user a {

  color: var(--tk-portal-user-link) !important;

}



html[data-theme="navy"] .portal-nav,

html[data-theme="plum"] .portal-nav,

html[data-theme="stone"] .portal-nav,

html[data-theme="ember"] .portal-nav {

  background: var(--tk-portal-nav-bg) !important;

  border-bottom-color: var(--tk-border-strong) !important;

}



html[data-theme="navy"] a.btn-cmd.btn-primary,

html[data-theme="plum"] a.btn-cmd.btn-primary,

html[data-theme="stone"] a.btn-cmd.btn-primary,

html[data-theme="ember"] a.btn-cmd.btn-primary,

html[data-theme="navy"] .btn-cmd.btn-primary,

html[data-theme="plum"] .btn-cmd.btn-primary,

html[data-theme="stone"] .btn-cmd.btn-primary,

html[data-theme="ember"] .btn-cmd.btn-primary {

  background: linear-gradient(135deg, var(--tk-titlebar-gradient) 0%, var(--tk-primary-light) 100%) !important;

  border-color: var(--tk-primary-dark) !important;

  color: #fff !important;

}



/* Theme switcher */

.tk-theme-bar {

  display: inline-flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px 10px;

  margin-top: 10px;

  justify-content: center;

}

.tk-layout-bar {

  display: inline-flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px 10px;

  margin-top: 8px;

}

.tk-theme-label {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--tk-muted);

  margin-right: 4px;

}

a.tk-theme-pill {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 6px 14px;

  font-size: 12px;

  font-weight: 600;

  text-decoration: none;

  border-radius: 999px;

  border: 1px solid var(--tk-border-strong);

  color: var(--tk-text-secondary);

  background: var(--tk-surface-alt);

  transition: background var(--tk-transition), color var(--tk-transition), border-color var(--tk-transition), box-shadow var(--tk-transition);

}

a.tk-theme-pill:hover {

  border-color: var(--tk-primary-light);

  color: var(--tk-primary-hover);

  background: var(--tk-primary-lighter);

}

a.tk-theme-pill.active {

  border-color: var(--tk-primary);

  color: #fff;

  background: linear-gradient(135deg, var(--tk-primary) 0%, var(--tk-primary-light) 100%);

  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.25);

}

html[data-theme="navy"] a.tk-theme-pill.active {

  background: linear-gradient(135deg, #132238 0%, #b45309 100%);

  box-shadow: 0 2px 14px rgba(30, 58, 95, 0.3);

}

html[data-theme="plum"] a.tk-theme-pill.active {

  background: linear-gradient(135deg, #4a3d66 0%, #0891b2 100%);

  box-shadow: 0 2px 14px rgba(92, 77, 125, 0.3);

}

html[data-theme="stone"] a.tk-theme-pill.active {

  background: linear-gradient(135deg, #292524 0%, #0d9488 100%);

  box-shadow: 0 2px 14px rgba(68, 64, 60, 0.3);

}

html[data-theme="ember"] a.tk-theme-pill.active {

  background: linear-gradient(135deg, #991b1b 0%, #ea580c 100%);

  box-shadow: 0 4px 20px rgba(234, 88, 12, 0.32);

}



/* Login cards (standalone pages) */

html[data-theme="navy"] .login-box .title {

  background: #132238;

  color: #f8fafc;

  border-bottom: 4px solid #f59e0b;

}

html[data-theme="plum"] .login-box .title {

  background: #4a3d66;

  color: #faf5ff;

  border-bottom: 4px solid #06b6d4;

}

html[data-theme="stone"] .login-box .title {

  background: #292524;

  color: #fafaf9;

  border-bottom: 4px solid #14b8a6;

}

html[data-theme="ember"] .login-box .title {

  background: #991b1b;

  color: #fff7ed;

  border-bottom: 4px solid #fbbf24;

}

html[data-theme="navy"] .login-form .btn-submit {

  background: linear-gradient(135deg, #132238 0%, #b45309 100%);

  box-shadow: 0 4px 18px rgba(30, 58, 95, 0.3);

}

html[data-theme="plum"] .login-form .btn-submit {

  background: linear-gradient(135deg, #4a3d66 0%, #0891b2 100%);

  box-shadow: 0 4px 18px rgba(92, 77, 125, 0.3);

}

html[data-theme="stone"] .login-form .btn-submit {

  background: linear-gradient(135deg, #292524 0%, #0d9488 100%);

  box-shadow: 0 4px 18px rgba(68, 64, 60, 0.3);

}

html[data-theme="ember"] .login-form .btn-submit {

  background: linear-gradient(135deg, #991b1b 0%, #ea580c 100%);

  box-shadow: 0 6px 24px rgba(234, 88, 12, 0.35);

}



@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

  }

  .fox-card:hover {

    transform: none !important;

  }

}



@media print {

  html {

    color-scheme: light !important;

  }

  body.toykar-body {

    background: #ffffff !important;

    color: #111111 !important;

  }

  .toykar-topbar,

  .toykar-menu,

  .toykar-menu-toggle,

  .toykar-menu-close,

  .toykar-footer,

  .toykar-footer-dock,

  .toykar-footer-dock__hit,

  .tk-theme-bar,

  .tk-layout-bar,

  .tk-gr-topbar,

  .tk-gr-rail,

  .tk-gr-scrim,

  .tk-gr-fab-stack,

  .tk-gr-mobile-stock-strip,

  .tk-mas-appbar,

  .tk-mas-tabbar,

  .tk-mas-sheet,

  .tk-mas-scrim,

  .tk-mas-fab,

  .portal-topbar,

  .portal-nav {

    display: none !important;

  }

  .toykar-content,

  .portal-main {

    background: #ffffff !important;

    color: #111111 !important;

    padding: 0 !important;

    animation: none !important;

    opacity: 1 !important;

  }

  .fox-window,

  .fox-window .window-body,

  .fox-body {

    background: #ffffff !important;

    color: #111111 !important;

    box-shadow: none !important;

  }

}