/**
 * Farouk Ops — Design System
 * Semantic tokens for Ultimate POS UI redesign.
 * Does not alter business logic; visual layer only.
 */

/* -------------------------------------------------------------------------- */
/* Fonts                                                                      */
/* -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

/* -------------------------------------------------------------------------- */
/* Tokens — base (default accent = teal, not indigo)                          */
/* -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --color-bg: #f2f4f6;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-muted: #f7f8fa;
  --color-border: #e3e7eb;
  --color-border-strong: #cfd6de;
  --color-overlay: rgba(15, 23, 32, 0.45);

  /* Text */
  --color-text: #12181f;
  --color-text-secondary: #4b5563;
  --color-text-muted: #8b95a1;
  --color-text-inverse: #ffffff;

  /* Brand accent (overridden by [data-theme]) */
  --color-primary: #0f6b6b;
  --color-primary-hover: #0c5757;
  --color-primary-soft: rgba(15, 107, 107, 0.1);
  --color-primary-muted: rgba(15, 107, 107, 0.16);
  --color-on-primary: #ffffff;

  /* Semantic status */
  --color-success: #1a7f4b;
  --color-success-soft: rgba(26, 127, 75, 0.12);
  --color-warning: #b7791f;
  --color-warning-soft: rgba(183, 121, 31, 0.12);
  --color-danger: #c0392b;
  --color-danger-soft: rgba(192, 57, 43, 0.12);
  --color-info: #1f6f8b;
  --color-info-soft: rgba(31, 111, 139, 0.12);

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(18, 24, 31, 0.04);
  --shadow-sm: 0 1px 3px rgba(18, 24, 31, 0.06);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Layout */
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 0px;
  --header-height: 52px;
  --content-pad: var(--space-5);

  /* Typography */
  --font-sans: 'Manrope', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Manrope', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display: 1.75rem;
  --text-h1: 1.375rem;
  --text-h2: 1.125rem;
  --text-h3: 1rem;
  --text-page: 1.125rem;
  --text-section: 0.9375rem;
  --text-body: 0.875rem;
  --text-small: 0.8125rem;
  --text-caption: 0.75rem;

  --leading-tight: 1.25;
  --leading-body: 1.45;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --focus-ring: 0 0 0 3px var(--color-primary-soft);
  --transition-fast: 120ms ease;
}

/* Theme accents from business.theme_color */
[data-theme='primary'] {
  --color-primary: #0f6b6b;
  --color-primary-hover: #0c5757;
  --color-primary-soft: rgba(15, 107, 107, 0.1);
  --color-primary-muted: rgba(15, 107, 107, 0.16);
}
[data-theme='green'] {
  --color-primary: #1a7a4c;
  --color-primary-hover: #14633d;
  --color-primary-soft: rgba(26, 122, 76, 0.1);
  --color-primary-muted: rgba(26, 122, 76, 0.16);
}
[data-theme='sky'] {
  --color-primary: #1a6f8f;
  --color-primary-hover: #155a74;
  --color-primary-soft: rgba(26, 111, 143, 0.1);
  --color-primary-muted: rgba(26, 111, 143, 0.16);
}
[data-theme='orange'] {
  --color-primary: #c45c1a;
  --color-primary-hover: #a34c15;
  --color-primary-soft: rgba(196, 92, 26, 0.1);
  --color-primary-muted: rgba(196, 92, 26, 0.16);
}
[data-theme='yellow'] {
  --color-primary: #a67c00;
  --color-primary-hover: #866400;
  --color-primary-soft: rgba(166, 124, 0, 0.12);
  --color-primary-muted: rgba(166, 124, 0, 0.18);
}
[data-theme='red'] {
  --color-primary: #b33a2e;
  --color-primary-hover: #932f25;
  --color-primary-soft: rgba(179, 58, 46, 0.1);
  --color-primary-muted: rgba(179, 58, 46, 0.16);
}
[data-theme='purple'] {
  --color-primary: #5b4a8a;
  --color-primary-hover: #4a3c70;
  --color-primary-soft: rgba(91, 74, 138, 0.1);
  --color-primary-muted: rgba(91, 74, 138, 0.16);
}

html[dir='rtl'] {
  --font-sans: 'IBM Plex Sans Arabic', 'Manrope', system-ui, sans-serif;
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */
html.fg-app,
body.fg-app {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fg-app .tw-bg-gray-100,
.fg-app main.tw-bg-gray-100 {
  background-color: var(--color-bg) !important;
}

.fg-numeric,
.fg-app .display_currency,
.fg-app .display_currency_if_num,
.fg-app table.dataTable td.sorting_1,
.fg-app .table td.text-right,
.fg-app .table th.text-right {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.fg-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- */
/* Shell — Sidebar                                                            */
/* -------------------------------------------------------------------------- */
.fg-sidebar.side-bar {
  width: var(--sidebar-width) !important;
  background: var(--color-surface) !important;
  border-inline-end: 1px solid var(--color-border);
  box-shadow: none !important;
  z-index: 40;
}

.fg-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-height);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none !important;
  background: var(--color-surface);
  flex-shrink: 0;
}

.fg-sidebar-brand:hover {
  text-decoration: none !important;
}

.fg-sidebar-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.fg-sidebar-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.fg-sidebar-brand-text {
  min-width: 0;
  flex: 1;
}

.fg-sidebar-brand-name {
  margin: 0;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fg-sidebar-brand-meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.fg-online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}

#side-bar {
  padding: var(--space-3) var(--space-2) !important;
  border-inline-end: none !important;
  background: var(--color-surface);
}

.fg-nav-link,
#side-bar > a,
#side-bar .drop_down {
  display: flex !important;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 10px !important;
  margin: 1px 0;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-small) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--color-text-secondary) !important;
  background: transparent !important;
  letter-spacing: 0 !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.fg-nav-link:hover,
#side-bar > a:hover,
#side-bar .drop_down:hover {
  background: var(--color-surface-muted) !important;
  color: var(--color-text) !important;
}

.fg-nav-link.is-active,
#side-bar > a.tw-bg-gray-200,
#side-bar .fg-nav-active,
#side-bar > div.fg-nav-group-active > .drop_down {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

#side-bar .fg-nav-active,
#side-bar > a.tw-text-primary-700 {
  color: var(--color-primary) !important;
}

#side-bar i,
#side-bar svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

#side-bar .chiled {
  margin-top: var(--space-1) !important;
  margin-bottom: var(--space-2) !important;
  padding-inline-start: 28px !important;
  border-inline-start: 1px solid var(--color-border);
  margin-inline-start: 18px;
}

#side-bar .chiled .tw-absolute {
  display: none !important;
}

#side-bar .chiled a {
  display: block;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), background var(--transition-fast);
}

#side-bar .chiled a:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

#side-bar .chiled a.tw-text-primary-700,
#side-bar .chiled a.is-active {
  color: var(--color-primary) !important;
  font-weight: var(--weight-semibold);
}

#side-bar .fg-nav-header,
#side-bar > div.tw-px-3.tw-py-2 {
  padding: var(--space-4) 10px var(--space-2) !important;
  font-size: 10px !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

body.sidebar-collapse .fg-sidebar.side-bar {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  border: none;
}

body.sidebar-collapse .fg-sidebar-brand-text,
body.sidebar-collapse #side-bar span {
  /* collapse handled by width 0 */
}

.small-view-side-active.fg-sidebar,
.side-bar.small-view-side-active {
  display: flex !important;
  flex-direction: column;
  position: fixed !important;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1000;
  width: var(--sidebar-width) !important;
  box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------------------- */
/* Shell — Header                                                             */
/* -------------------------------------------------------------------------- */
.fg-header {
  height: var(--header-height);
  min-height: var(--header-height);
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  flex-shrink: 0;
}

.fg-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-4);
}

.fg-header-left,
.fg-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.fg-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.fg-icon-btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
  border-color: var(--color-border-strong);
  text-decoration: none;
}

.fg-header-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.fg-header-chip:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.fg-header-chip--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary) !important;
}

.fg-header-chip--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary) !important;
}

.fg-header-date {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  border-color: transparent;
  background: transparent;
}

.fg-header details > summary {
  list-style: none;
}

.fg-header details > summary::-webkit-details-marker {
  display: none;
}

.fg-dropdown-panel {
  position: absolute;
  inset-inline-end: 0;
  margin-top: var(--space-2);
  min-width: 200px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  z-index: 50;
}

.fg-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.fg-dropdown-item:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

/* -------------------------------------------------------------------------- */
/* Content area                                                               */
/* -------------------------------------------------------------------------- */
.fg-main {
  background: var(--color-bg) !important;
}

.fg-content {
  padding: var(--content-pad);
}

#scrollable-container {
  background: var(--color-bg);
}

.fg-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.fg-page-title {
  margin: 0;
  font-size: var(--text-page);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.fg-page-subtitle {
  margin: 4px 0 0;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.fg-footer {
  padding: var(--space-4) var(--content-pad) var(--space-6);
  border-top: 1px solid transparent;
}

.fg-footer p {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Cards / Widget                                                             */
/* -------------------------------------------------------------------------- */
.fg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  margin-bottom: var(--space-4);
  transition: none;
}

.fg-card:hover {
  box-shadow: none !important;
  transform: none !important;
}

.fg-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.fg-card-title,
.fg-card .box-title {
  margin: 0 !important;
  font-size: var(--text-section) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--color-text) !important;
  line-height: var(--leading-tight);
}

.fg-card-body {
  padding: var(--space-4);
}

.fg-card .box-header {
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1px solid var(--color-border);
  margin: 0 !important;
  background: transparent !important;
}

.fg-card .box-body {
  padding: var(--space-4) !important;
}

/* Kill old AdminLTE box look when present */
.fg-app .box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  background: var(--color-surface);
}

.fg-app .box.box-solid,
.fg-app .box.box-primary,
.fg-app .box.box-info,
.fg-app .box.box-success,
.fg-app .box.box-warning,
.fg-app .box.box-danger {
  border-top: 1px solid var(--color-border);
}

.fg-app .box-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
}

.fg-app .box-body {
  padding: var(--space-4);
}

/* -------------------------------------------------------------------------- */
/* Filters                                                                    */
/* -------------------------------------------------------------------------- */
.fg-filters {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.fg-filters-header,
.fg-filters .box-header {
  padding: 10px var(--space-4) !important;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  background: var(--color-surface) !important;
  margin: 0 !important;
}

.fg-filters-title,
.fg-filters .box-title {
  margin: 0 !important;
  font-size: var(--text-small) !important;
  font-weight: var(--weight-semibold) !important;
}

.fg-filters-header a,
.fg-filters .box-header a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.fg-filters-header a:hover,
.fg-filters .box-header a:hover {
  color: var(--color-text);
}

.fg-filters-body,
.fg-filters .box-body {
  padding: var(--space-3) var(--space-4) var(--space-4) !important;
  border-top: 1px solid var(--color-border);
}

.fg-filters .form-group {
  margin-bottom: var(--space-3);
}

.fg-filters .form-group > label {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.fg-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fg-card-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.fg-card-help {
  padding: 0 var(--space-4) 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.fg-card.box-primary,
.fg-card.box-solid,
.fg-card.box-info,
.fg-card.box-success,
.fg-card.box-warning,
.fg-card.box-danger {
  border-top: 1px solid var(--color-border) !important;
  border-color: var(--color-border) !important;
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */
.fg-btn,
.fg-app .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: 1px solid transparent;
  box-shadow: none !important;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.fg-app .btn-xs,
.fg-app .btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: var(--text-caption);
}

.fg-app .btn-lg,
.fg-app .btn-big {
  height: 40px;
  padding: 0 18px;
  font-size: var(--text-body);
}

.fg-app .btn-primary,
.fg-app .btn-info,
.fg-btn--primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

.fg-app .btn-primary:hover,
.fg-app .btn-info:hover,
.fg-btn--primary:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: var(--color-on-primary) !important;
}

.fg-app .btn-default,
.fg-app .btn-secondary,
.fg-btn--secondary {
  background: var(--color-surface) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text) !important;
}

.fg-app .btn-default:hover,
.fg-btn--secondary:hover {
  background: var(--color-surface-muted) !important;
}

.fg-btn--ghost,
.fg-app .btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--color-text-secondary) !important;
  box-shadow: none !important;
}

.fg-app .btn-success {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #fff !important;
}

.fg-app .btn-danger,
.fg-app .btn-warning {
  background: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: #fff !important;
}

.fg-app .btn-warning {
  background: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}

.fg-app .btn:disabled,
.fg-app .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* DaisyUI-style action buttons in tables */
.fg-app .tw-dw-btn {
  border-radius: var(--radius-sm) !important;
  font-weight: var(--weight-medium) !important;
}

.fg-app .tw-dw-btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */
.fg-app label:not(.btn):not(.tw-dw-label):not(.tw-dw-cursor-pointer) {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.fg-app .form-control,
.fg-app select.form-control,
.fg-app textarea.form-control,
.fg-app .select2-container--default .select2-selection--single {
  height: 34px !important;
  min-height: 34px;
  padding: 6px 10px !important;
  font-size: var(--text-small) !important;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.fg-app textarea.form-control {
  height: auto !important;
  min-height: 80px;
}

.fg-app .form-control:focus,
.fg-app .select2-container--default.select2-container--focus .select2-selection--single,
.fg-app .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none;
}

.fg-app .form-control:disabled,
.fg-app .form-control[readonly] {
  background: var(--color-surface-muted) !important;
  color: var(--color-text-muted);
}

.fg-app .has-error .form-control,
.fg-app .has-error .select2-selection {
  border-color: var(--color-danger) !important;
}

.fg-app .help-block,
.fg-app .text-danger {
  font-size: var(--text-caption);
}

.fg-app .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 32px !important;
  padding-left: 0 !important;
  color: var(--color-text);
}

.fg-app .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px !important;
}

.fg-app .select2-dropdown {
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------------------- */
/* Modals (Bootstrap 3 — visual only)                                         */
/* -------------------------------------------------------------------------- */
.fg-app .modal-content {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.fg-app .modal-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.fg-app .modal-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.fg-app .modal-header .close {
  opacity: 0.55;
  font-weight: var(--weight-regular);
  text-shadow: none;
}

.fg-app .modal-header .close:hover {
  opacity: 1;
}

.fg-app .modal-body {
  padding: var(--space-5);
  background: var(--color-surface);
}

.fg-app .modal-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

/* -------------------------------------------------------------------------- */
/* Tables / DataTables                                                        */
/* -------------------------------------------------------------------------- */
.fg-app .table > thead > tr > th,
.fg-app table.dataTable thead th {
  background: var(--color-surface-muted) !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 10px 12px !important;
  white-space: nowrap;
}

.fg-app .table > tbody > tr > td,
.fg-app table.dataTable tbody td {
  padding: 9px 12px !important;
  font-size: var(--text-small);
  color: var(--color-text);
  border-top: 1px solid var(--color-border) !important;
  vertical-align: middle !important;
}

.fg-app .table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--color-surface) !important;
}

.fg-app .table-hover > tbody > tr:hover {
  background: var(--color-surface-muted) !important;
}

.fg-app .dataTables_wrapper .dataTables_filter input,
.fg-app .dataTables_wrapper .dataTables_length select {
  height: 32px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  font-size: var(--text-small);
}

.fg-app .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
}

.fg-app .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--color-primary-soft) !important;
  border-color: var(--color-primary-muted) !important;
  color: var(--color-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* Alerts / badges                                                            */
/* -------------------------------------------------------------------------- */
.fg-app .alert {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--text-small);
  padding: 10px 14px;
}

.fg-app .alert-success {
  background: var(--color-success-soft);
  border-color: transparent;
  color: var(--color-success);
}

.fg-app .alert-danger {
  background: var(--color-danger-soft);
  border-color: transparent;
  color: var(--color-danger);
}

.fg-app .alert-warning {
  background: var(--color-warning-soft);
  border-color: transparent;
  color: var(--color-warning);
}

.fg-app .alert-info {
  background: var(--color-info-soft);
  border-color: transparent;
  color: var(--color-info);
}

.fg-app .label,
.fg-app .badge {
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
  font-size: 11px;
  padding: 3px 7px;
}

/* -------------------------------------------------------------------------- */
/* Content wrappers (common page padding)                                     */
/* -------------------------------------------------------------------------- */
.fg-app .content-wrapper,
.fg-app .content {
  background: transparent !important;
}

.fg-app .content-header > h1,
.fg-app .content-header h1 {
  font-size: var(--text-page);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

/* Soften leftover AdminLTE skins */
.fg-app.skin-blue-light,
.fg-app.skin-blue,
.fg-app[class*='skin-'] {
  background: var(--color-bg) !important;
}

.fg-app .hold-transition {
  /* no-op visual */
}

/* Overlay for mobile sidebar */
.fg-app .overlay {
  background: var(--color-overlay) !important;
}

/* -------------------------------------------------------------------------- */
/* Auth — Farouk Group corporate identity + product workspace entry           */
/* LOGIN uses Farouk brand DNA; APP shell keeps business theme_color tokens   */
/* Brand refs from faroukgroup.com: #fd9b5f #ff3656 #fdf1ef #1e3a8a #000      */
/* -------------------------------------------------------------------------- */

html.fg-auth-html[data-brand='farouk'],
body.fg-auth-body {
  --fg-corp-orange: #fd9b5f;
  --fg-corp-orange-hover: #e8894a;
  --fg-corp-coral: #ff3656;
  --fg-corp-soft: #fdf1ef;
  --fg-corp-soft-deep: #f7e4de;
  --fg-corp-navy: #1e3a8a;
  --fg-corp-ink: #121212;
  --fg-corp-muted: #5c5c5c;
  --fg-corp-line: rgba(18, 18, 18, 0.1);
  --fg-corp-top: #0a0a0a;
  --color-primary: var(--fg-corp-orange);
  --color-primary-hover: var(--fg-corp-orange-hover);
  --color-primary-soft: rgba(253, 155, 95, 0.16);
  --color-primary-muted: rgba(253, 155, 95, 0.28);
  --color-on-primary: #121212;
  --focus-ring: 0 0 0 3px rgba(253, 155, 95, 0.28);
}

html.fg-auth-html,
body.fg-auth-body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  font-family: var(--font-sans);
  color: var(--fg-corp-ink);
  background: var(--fg-corp-soft) !important;
  background-image: none !important;
  -webkit-font-smoothing: antialiased;
}

body.fg-auth-body h1,
body.fg-auth-body h2 {
  color: inherit;
}

.fg-corp {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fg-corp-soft);
}

/* Dark provider bar — Farouk logo designed for black */
.fg-corp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 8px 28px;
  background: var(--fg-corp-top);
  border-bottom: 1px solid rgba(253, 155, 95, 0.85);
  flex-shrink: 0;
}

.fg-corp-provider {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
}

.fg-corp-provider-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: inline-start center;
}

.fg-corp-provider-text {
  color: #f0f0f0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fg-corp-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.fg-corp-top .fg-header-chip {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  color: #e8e8e8;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
}

.fg-corp-top .fg-header-chip:hover {
  border-color: var(--fg-corp-orange);
  color: #fff;
}

.fg-corp-top .fg-dropdown-panel {
  background: #111;
  border-color: rgba(255, 255, 255, 0.12);
}

.fg-corp-top .fg-dropdown-item {
  color: #ddd;
}

.fg-corp-top .fg-dropdown-item:hover {
  background: rgba(253, 155, 95, 0.15);
  color: #fff;
}

.fg-corp-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.fg-corp-links a {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  padding: 4px 8px;
}

.fg-corp-links a:not(:last-child)::after {
  content: '·';
  margin-inline-start: 8px;
  color: rgba(255, 255, 255, 0.28);
}

.fg-corp-links a:hover {
  color: var(--fg-corp-orange);
}

/* Stage — workspace entry, not a marketing landing */
.fg-corp-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vh, 40px) clamp(16px, 4vw, 48px);
}

.fg-corp-workspace {
  width: 100%;
  max-width: 920px;
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(300px, 1.15fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

/* Quiet product identity */
.fg-corp-identity {
  padding: 8px 4px;
  min-width: 0;
}

.fg-corp-identity-logo {
  margin-bottom: 20px;
}

.fg-corp-identity-logo img {
  display: block;
  max-width: 168px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: inline-start center;
}

.fg-corp-identity-name {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--fg-corp-ink);
  word-break: break-word;
}

.fg-corp-identity-role {
  margin: 0 0 28px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg-corp-muted);
}

.fg-corp-identity-provider {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 18px;
  border-top: 1px solid var(--fg-corp-line);
  max-width: 220px;
}

.fg-corp-identity-provider-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-corp-muted);
}

.fg-corp-identity-provider-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-corp-ink);
}

/* Secure entry — focal console */
.fg-corp-entry {
  background: #fff;
  border: 1px solid var(--fg-corp-line);
  border-radius: 10px;
  padding: clamp(24px, 3.5vw, 36px);
  box-shadow: 0 1px 0 rgba(18, 18, 18, 0.03);
}

.fg-signin {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.fg-signin-head {
  margin-bottom: 22px;
}

.fg-signin-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-corp-ink);
}

.fg-signin-sub {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-corp-muted);
}

.fg-signin-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.fg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.fg-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-corp-muted);
}

.fg-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fg-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(18, 18, 18, 0.14);
  border-radius: 6px;
  background: #faf8f6;
  color: var(--fg-corp-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.fg-input:hover { background: #fff; }

.fg-input:focus {
  background: #fff;
  border-color: var(--fg-corp-orange);
  box-shadow: var(--focus-ring);
}

.fg-field.is-invalid .fg-input {
  border-color: var(--fg-corp-coral);
  background: rgba(255, 54, 86, 0.05);
}

.fg-field-error {
  margin: 0;
  font-size: 12px;
  color: var(--fg-corp-coral);
}

.fg-input-password { position: relative; }

.fg-input-password .fg-input {
  padding-inline-end: 42px;
}

.fg-password-toggle {
  position: absolute;
  top: 50%;
  inset-inline-end: 4px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--fg-corp-muted);
  cursor: pointer;
}

.fg-password-toggle:hover,
.fg-password-toggle:focus-visible {
  color: var(--fg-corp-ink);
  background: var(--fg-corp-soft);
  outline: none;
}

.fg-signin-meta {
  display: flex;
  align-items: center;
}

.fg-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-corp-muted);
  cursor: pointer;
  user-select: none;
}

.fg-check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--fg-corp-orange);
}

.fg-signin-submit,
.fg-login-submit {
  position: relative;
  width: 100%;
  height: 44px;
  margin-top: 2px;
  border: none;
  border-radius: 6px;
  background: var(--fg-corp-orange) !important;
  background-image: none !important;
  color: #121212 !important;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease;
}

.fg-signin-submit:hover:not(:disabled) {
  background: var(--fg-corp-orange-hover) !important;
}

.fg-signin-submit:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.fg-signin-submit.is-loading,
.fg-signin-submit:disabled {
  cursor: wait;
  opacity: 0.88;
  pointer-events: none;
}

.fg-login-submit-loading {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.fg-signin-submit.is-loading .fg-login-submit-label { visibility: hidden; }
.fg-signin-submit.is-loading .fg-login-submit-loading { display: flex; }

.fg-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(18, 18, 18, 0.25);
  border-top-color: #121212;
  border-radius: 50%;
  animation: fg-spin 0.7s linear infinite;
}

@keyframes fg-spin {
  to { transform: rotate(360deg); }
}

.fg-auth-link {
  color: var(--fg-corp-navy) !important;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.fg-auth-link:hover {
  color: var(--fg-corp-coral) !important;
  text-decoration: underline;
}

.fg-signin-foot {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--fg-corp-muted);
}

.fg-auth-alert {
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: 6px;
  font-size: 13px;
}

.fg-auth-alert--danger {
  background: rgba(255, 54, 86, 0.1);
  color: #c41f3a;
}

.fg-auth-alert--info {
  background: rgba(30, 58, 138, 0.08);
  color: var(--fg-corp-navy);
}

.fg-corp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  padding: 12px 20px 18px;
  font-size: 12px;
  color: var(--fg-corp-muted);
  flex-shrink: 0;
}

.fg-corp-foot-sep { opacity: 0.4; }

.fg-corp-foot-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.fg-corp-foot-links a {
  color: var(--fg-corp-muted);
  text-decoration: none;
  font-weight: 500;
}

.fg-corp-foot-links a:hover {
  color: var(--fg-corp-navy);
}

.fg-demo-panel {
  margin-top: 16px;
  border: 1px solid var(--fg-corp-line);
  border-radius: 6px;
  background: var(--fg-corp-soft);
}

.fg-demo-panel > summary {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}

.fg-demo-panel > summary::-webkit-details-marker { display: none; }

.fg-demo-panel-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--fg-corp-line);
}

.fg-demo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
}

.fg-demo-chip {
  display: inline-flex;
  height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--fg-corp-line);
  border-radius: 4px;
  background: #fff;
  color: var(--fg-corp-muted);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none !important;
}

.fg-demo-chip:hover {
  border-color: var(--fg-corp-orange);
  color: var(--fg-corp-ink);
}

@media (max-width: 860px) {
  .fg-corp-workspace {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 420px;
  }

  .fg-corp-identity {
    text-align: center;
    padding: 0;
  }

  .fg-corp-identity-logo {
    display: flex;
    justify-content: center;
  }

  .fg-corp-identity-logo img {
    object-position: center;
  }

  .fg-corp-identity-role {
    margin-bottom: 16px;
  }

  .fg-corp-identity-provider {
    margin-inline: auto;
    align-items: center;
    text-align: center;
    max-width: none;
  }
}

@media (max-width: 720px) {
  .fg-corp-top {
    padding: 8px 14px;
  }

  .fg-corp-provider-logo {
    height: 34px;
    max-width: 140px;
  }

  .fg-corp-stage {
    padding: 16px 14px 8px;
    align-items: flex-start;
  }

  .fg-corp-entry {
    padding: 22px 18px;
  }
}

/* -------------------------------------------------------------------------- */
/* Print safety                                                               */
/* -------------------------------------------------------------------------- */
@media print {
  .fg-sidebar,
  .fg-header,
  .fg-footer,
  .no-print {
    display: none !important;
  }

  .fg-app,
  .fg-main,
  #scrollable-container {
    background: #fff !important;
    overflow: visible !important;
    height: auto !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  :root {
    --content-pad: var(--space-3);
  }

  .fg-header-date {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Phase 2 — Page pattern, KPI, panels, tables, tabs                          */
/* -------------------------------------------------------------------------- */

.fg-page {
  padding: var(--space-5) var(--space-6);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.fg-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.fg-page-header-text {
  min-width: 0;
  flex: 1 1 200px;
}

.fg-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.fg-page-actions .btn,
.fg-page-actions .fg-btn,
.fg-page-actions a.tw-dw-btn {
  border-radius: var(--radius-md) !important;
  height: 34px;
  padding: 0 14px !important;
  font-size: var(--text-small) !important;
  font-weight: var(--weight-semibold) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  box-shadow: none !important;
}

.fg-page-actions a.fg-btn--primary,
.fg-page-actions .fg-btn--primary,
.fg-btn.fg-btn--primary {
  background: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  background-image: none !important;
}

.fg-page-actions a.fg-btn--secondary,
.fg-btn.fg-btn--secondary {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border-strong) !important;
  color: var(--color-text) !important;
  background-image: none !important;
}

/* Kill indigo gradient CTA leftovers on migrated pages */
.fg-page .tw-from-indigo-600,
.fg-page a.tw-bg-gradient-to-r.tw-from-indigo-600 {
  background-image: none !important;
  background: var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
}

/* KPI cards — neutral enterprise surfaces */
.fg-kpi-grid,
.fg-cc-kpi-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .fg-kpi-grid,
  .fg-cc-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .fg-kpi-grid,
  .fg-cc-kpi-row--primary,
  .fg-cc-kpi-row--secondary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fg-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-height: 0;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fg-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.fg-kpi-label {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  line-height: var(--leading-tight);
}

.fg-kpi-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
}

.fg-kpi-icon svg {
  display: block;
}

.fg-kpi-value {
  margin: 8px 0 0;
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  line-height: 1.2;
  letter-spacing: -0.02em;
  min-height: 1.35em;
  word-break: break-word;
}

.fg-kpi--primary .fg-kpi-value {
  font-size: 1.375rem;
}

.fg-kpi--secondary {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  box-shadow: none;
}

.fg-kpi--secondary .fg-kpi-value {
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
}

.fg-kpi-value:empty::after {
  content: '—';
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

.fg-kpi--accent-warning {
  border-inline-start: 2px solid var(--color-warning);
}

.fg-kpi--accent-danger {
  border-inline-start: 2px solid var(--color-danger);
}

.fg-kpi--accent-success {
  border-inline-start: 2px solid var(--color-success);
}

.fg-kpi--accent-info {
  border-inline-start: 2px solid var(--color-info);
}

.fg-kpi-meta {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Command Center dashboard                                                   */
/* -------------------------------------------------------------------------- */
.fg-cc,
.fg-dashboard {
  padding: var(--space-5) var(--space-6);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.fg-cc-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.fg-cc-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.fg-cc-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.fg-cc-subtitle {
  margin: 6px 0 0;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.fg-cc-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-border-strong);
  display: inline-block;
}

.fg-cc-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.fg-cc-control {
  min-width: 160px;
  max-width: 220px;
}

.fg-cc-date-btn,
.fg-dashboard-date-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}

.fg-cc-date-btn:hover,
.fg-dashboard-date-btn:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.fg-cc-section {
  margin-bottom: var(--space-5);
}

.fg-cc-section-label {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.fg-cc-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Insight: chart primary + secondary */
.fg-cc-insight {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

@media (min-width: 1100px) {
  .fg-cc-insight {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.fg-cc-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.fg-cc-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.fg-cc-chart-title {
  margin: 0;
  font-size: var(--text-section);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.fg-cc-chart-ctx {
  margin: 2px 0 0;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

.fg-cc-chart-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  height: 260px;
  max-height: 260px;
  overflow: hidden;
  position: relative;
}

.fg-cc-chart-body--compact {
  height: 260px;
}

.fg-cc-chart-body > *,
.fg-cc-chart-body .charts {
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
}

.fg-cc-chart-body canvas,
.fg-cc-chart-body svg {
  max-width: 100% !important;
}

/* Attention + ops grids */
.fg-cc-grid,
.fg-cc-ops,
.fg-ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

@media (min-width: 992px) {
  .fg-cc-grid,
  .fg-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fg-cc-grid .fg-span-2,
.fg-cc-ops .fg-span-2,
.fg-ops-grid .fg-span-2,
.fg-panel.fg-span-2 {
  grid-column: 1 / -1;
}

.fg-cc-ops {
  margin-top: 0;
}

/* Panel */
.fg-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.fg-panel--attention {
  border-color: var(--color-border);
}

.fg-panel--attention .fg-panel-header {
  background: linear-gradient(180deg, #fbfcfd 0%, var(--color-surface) 100%);
}

.fg-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.fg-panel-title-wrap {
  min-width: 0;
  flex: 1;
}

.fg-panel-title {
  margin: 0;
  font-size: var(--text-section);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.fg-panel-subtitle {
  margin: 3px 0 0;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.35;
  max-width: 42ch;
}

.fg-panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 220px;
}

.fg-panel-toolbar .form-control,
.fg-panel-toolbar .select2-container {
  min-width: 140px;
  max-width: 220px;
}

.fg-panel-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  min-width: 0;
}

.fg-panel-body .fg-table-wrap {
  margin: 0;
}

.fg-chart-frame {
  width: 100%;
  height: 240px;
  min-height: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0;
  overflow: hidden;
}

/* Tables — eliminate BS3/AdminLTE feel */
.fg-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fg-app .fg-table-wrap .table,
.fg-app table.dataTable,
.fg-app .fg-panel .table,
.fg-page .table.table-bordered,
.fg-dashboard .table.table-bordered,
.fg-cc .table.table-bordered {
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background: var(--color-surface);
}

.fg-app .fg-table-wrap .table > thead > tr > th,
.fg-app .fg-panel .table > thead > tr > th,
.fg-app .fg-dashboard .table > thead > tr > th,
.fg-app .fg-cc .table > thead > tr > th,
.fg-app .fg-page .table > thead > tr > th,
.fg-app table.dataTable thead th,
.fg-app table.dataTable thead td {
  background: var(--color-surface-muted) !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-muted) !important;
  font-size: 11px !important;
  font-weight: var(--weight-semibold) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px !important;
  white-space: nowrap;
}

.fg-app .fg-table-wrap .table > tbody > tr > td,
.fg-app .fg-panel .table > tbody > tr > td,
.fg-app .fg-dashboard .table > tbody > tr > td,
.fg-app .fg-cc .table > tbody > tr > td,
.fg-app .fg-page .table > tbody > tr > td,
.fg-app table.dataTable tbody td {
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 10px 12px !important;
  font-size: var(--text-small) !important;
  color: var(--color-text);
  vertical-align: middle !important;
  background: transparent !important;
}

.fg-app .fg-table-wrap .table-striped > tbody > tr:nth-of-type(odd),
.fg-app .fg-page .table-striped > tbody > tr:nth-of-type(odd),
.fg-app .fg-dashboard .table-striped > tbody > tr:nth-of-type(odd),
.fg-app .fg-cc .table-striped > tbody > tr:nth-of-type(odd),
.fg-app table.dataTable.stripe tbody tr.odd,
.fg-app table.dataTable.display tbody tr.odd {
  background: var(--color-surface) !important;
}

.fg-app .fg-table-wrap .table-hover > tbody > tr:hover,
.fg-app .fg-page .table-hover > tbody > tr:hover,
.fg-app .fg-cc .table-hover > tbody > tr:hover,
.fg-app table.dataTable tbody tr:hover {
  background: var(--color-surface-muted) !important;
}

.fg-app .fg-page .table > tfoot > tr > td,
.fg-app .fg-page .footer-total td,
.fg-app .bg-gray.footer-total {
  background: var(--color-surface-muted) !important;
  border-top: 1px solid var(--color-border-strong) !important;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

/* DataTables chrome */
.fg-app .dataTables_wrapper {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  max-width: 100%;
}

.fg-app .dataTables_wrapper .dataTables_scroll {
  max-width: 100%;
}

.fg-app .dataTables_wrapper .dataTables_length,
.fg-app .dataTables_wrapper .dataTables_filter,
.fg-app .dataTables_wrapper .dataTables_info,
.fg-app .dataTables_wrapper .dataTables_paginate {
  padding: var(--space-2) 0;
}

.fg-app .dataTables_wrapper .dataTables_filter input {
  margin-inline-start: 8px;
  height: 32px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  background: var(--color-surface);
}

.fg-app .dataTables_wrapper .dataTables_length select {
  height: 32px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 2px 8px;
  background: var(--color-surface);
}

.fg-app .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
}

.fg-app .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.fg-app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--color-primary-soft) !important;
  border-color: var(--color-primary-muted) !important;
  color: var(--color-primary) !important;
}

.fg-app .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--color-surface-muted) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

.fg-app .dataTables_processing {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-text-secondary) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Status labels in tables */
.fg-app .fg-page .label,
.fg-app .fg-dashboard .label,
.fg-app .fg-cc .label,
.fg-app .fg-table-wrap .label {
  border-radius: 999px;
  font-weight: var(--weight-medium);
  font-size: 10px;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  text-transform: uppercase;
}

/* Tabs (products) */
.fg-tabs.nav-tabs-custom,
.fg-page .nav-tabs-custom {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none !important;
  margin-bottom: var(--space-4);
}

.fg-page .nav-tabs-custom > .nav-tabs {
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: 0;
}

.fg-page .nav-tabs-custom > .nav-tabs > li {
  margin: 0;
  border: none;
}

.fg-page .nav-tabs-custom > .nav-tabs > li > a {
  border: none !important;
  border-radius: 0 !important;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  padding: 12px 16px;
}

.fg-page .nav-tabs-custom > .nav-tabs > li.active > a,
.fg-page .nav-tabs-custom > .nav-tabs > li.active > a:hover {
  background: var(--color-surface) !important;
  color: var(--color-primary) !important;
  border-bottom: 2px solid var(--color-primary) !important;
}

.fg-page .nav-tabs-custom > .tab-content {
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.fg-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Neutralize AdminLTE content-header on migrated pages */
.fg-page > .content-header,
.fg-page section.content-header {
  display: none;
}

.fg-app section.content {
  padding: 0 !important;
}

html[dir='rtl'] .fg-kpi--accent-warning,
html[dir='rtl'] .fg-kpi--accent-danger,
html[dir='rtl'] .fg-kpi--accent-success,
html[dir='rtl'] .fg-kpi--accent-info {
  border-inline-start-width: 2px;
}

@media (max-width: 767px) {
  .fg-cc,
  .fg-dashboard {
    padding: var(--space-4);
  }

  .fg-cc-title {
    font-size: 1.25rem;
  }

  .fg-kpi--primary .fg-kpi-value {
    font-size: 1.2rem;
  }

  .fg-panel-body {
    padding: var(--space-3);
  }

  .fg-cc-chart-body,
  .fg-cc-chart-body--compact {
    height: 220px;
  }
}

.fg-panel-inner {
  padding: var(--space-4);
}

.fg-table-scroll,
.fg-table-inner {
  width: 100%;
  overflow-x: auto;
}

.fg-app .fg-data-table,
.fg-dashboard .fg-data-table,
.fg-cc .fg-data-table {
  border: none !important;
}

/* Legacy dashboard aliases kept for safety */
.fg-dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.fg-dashboard-welcome {
  margin: 0;
  font-size: var(--text-h1);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.fg-dashboard-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.fg-dashboard-section-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- */
/* Phase 3 — Forms, badges, empty, modals, page shell                         */
/* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .fg-page {
    padding: var(--space-4);
  }
}

.fg-page .content,
.fg-page section.content {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.fg-page .row {
  margin-left: -8px;
  margin-right: -8px;
}

.fg-page .row > [class*='col-'] {
  padding-left: 8px;
  padding-right: 8px;
}

/* Forms — normalize Bootstrap 3 inputs inside app shell */
.fg-app .form-control,
.fg-app .select2-container--default .select2-selection--single,
.fg-app .select2-container--default .select2-selection--multiple {
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  min-height: 34px;
}

.fg-app .form-control:focus,
.fg-app .select2-container--default.select2-container--focus .select2-selection--single,
.fg-app .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary) !important;
  box-shadow: var(--focus-ring) !important;
}

.fg-app .form-group > label,
.fg-app label:not(.btn) {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.fg-app .help-block,
.fg-app .text-muted.help-block {
  font-size: 11px;
  color: var(--color-text-muted);
}

.fg-app .input-group .input-group-addon {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
}

/* Semantic status badges */
.fg-badge,
.fg-app .label,
.fg-app .badge,
.fg-page .label,
.fg-cc .label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px !important;
  font-weight: var(--weight-medium) !important;
  font-size: 10px !important;
  letter-spacing: 0.03em;
  padding: 3px 8px !important;
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid transparent;
}

.fg-app .label-success,
.fg-app .bg-green,
.fg-badge--success {
  background: var(--color-success-soft) !important;
  color: var(--color-success) !important;
  border-color: transparent !important;
}

.fg-app .label-warning,
.fg-app .bg-yellow,
.fg-badge--warning {
  background: var(--color-warning-soft) !important;
  color: var(--color-warning) !important;
}

.fg-app .label-danger,
.fg-app .bg-red,
.fg-badge--danger {
  background: var(--color-danger-soft) !important;
  color: var(--color-danger) !important;
}

.fg-app .label-info,
.fg-app .bg-aqua,
.fg-app .bg-blue,
.fg-badge--info {
  background: var(--color-info-soft) !important;
  color: var(--color-info) !important;
}

.fg-app .label-default,
.fg-badge--neutral {
  background: var(--color-surface-muted) !important;
  color: var(--color-text-secondary) !important;
}

/* Empty states */
.fg-empty {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-text-secondary);
}

.fg-empty-title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.fg-empty-message {
  margin: 8px auto 0;
  max-width: 36ch;
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.fg-empty-actions {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

/* Modals — visual polish without replacing Bootstrap JS */
.fg-app .modal-content {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
}

.fg-app .modal-header {
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: var(--space-4) !important;
}

.fg-app .modal-title {
  font-family: var(--font-sans);
  font-size: var(--text-section);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.fg-app .modal-body {
  padding: var(--space-4) !important;
  background: var(--color-surface);
}

.fg-app .modal-footer {
  background: var(--color-surface-muted) !important;
  border-top: 1px solid var(--color-border) !important;
  padding: var(--space-3) var(--space-4) !important;
}

/* Kill gradient pill CTAs globally inside app shell */
.fg-app a.tw-dw-btn.tw-bg-gradient-to-r,
.fg-app button.tw-dw-btn.tw-bg-gradient-to-r,
.fg-page .tw-from-indigo-600 {
  background-image: none !important;
  background: var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  font-weight: var(--weight-semibold) !important;
  height: 34px;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.fg-app a.tw-dw-btn.tw-bg-gradient-to-r svg,
.fg-app button.tw-dw-btn.tw-bg-gradient-to-r svg {
  width: 16px;
  height: 16px;
}

/* info-box neutralization (contact show etc.) */
.fg-app .info-box {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none !important;
  min-height: 72px;
}

.fg-app .info-box-icon {
  background: var(--color-surface-muted) !important;
  color: var(--color-text-secondary) !important;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.fg-app .info-box.bg-yellow,
.fg-app .info-box.bg-aqua,
.fg-app .info-box.bg-green,
.fg-app .info-box.bg-red,
.fg-app .info-box.bg-blue {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}

.fg-app .info-box .info-box-number,
.fg-app .info-box .info-box-text {
  color: var(--color-text) !important;
  font-family: var(--font-sans);
}

.fg-app .info-box .info-box-number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Content header legacy pages still using it */
.fg-app .content-header > h1 {
  font-family: var(--font-sans);
  font-size: var(--text-page) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--color-text) !important;
  margin: 0 0 var(--space-4) !important;
}

.fg-app .content-header > h1 > small {
  display: block;
  margin-top: 4px;
  font-size: var(--text-small) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--color-text-muted) !important;
}

.fg-btn--danger {
  background: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: #fff !important;
}

.fg-btn--ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--color-text-secondary) !important;
}

/* -------------------------------------------------------------------------- */
/* Phase 4 — Forms, entity detail, sticky actions                             */
/* -------------------------------------------------------------------------- */
.fg-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: 88px;
}

.fg-form-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  min-width: 0;
}

.fg-form-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.fg-form-section-title {
  margin: 0;
  font-size: var(--text-section);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.fg-form-section-subtitle {
  margin: 3px 0 0;
  font-size: 11px;
  color: var(--color-text-muted);
}

.fg-form-section-body {
  padding: var(--space-4);
}

.fg-form-section-body > .row:first-child {
  margin-top: 0;
}

.fg-form-section-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Sticky form actions */
.fg-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin: var(--space-4) calc(var(--space-6) * -1) calc(var(--space-5) * -1);
  padding: var(--space-3) var(--space-6);
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
}

.fg-page > .fg-form .fg-form-actions,
.fg-form > .fg-form-actions {
  margin-left: calc(var(--space-6) * -1);
  margin-right: calc(var(--space-6) * -1);
}

.fg-form-actions-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.fg-form-actions-primary,
.fg-form-actions-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.fg-form-actions .fg-btn,
.fg-form-actions .submit_product_form,
.fg-form-actions button[type='submit'] {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-image: none !important;
}

.fg-form-actions .fg-btn--primary,
.fg-form-actions .submit_product_form[value='submit'],
.fg-form-actions button.tw-dw-btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

.fg-form-actions .fg-btn--secondary,
.fg-form-actions .submit_product_form:not([value='submit']) {
  background: var(--color-surface) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text) !important;
}

/* Entity detail header */
.fg-entity-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.fg-entity-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.fg-entity-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.fg-entity-subtitle {
  margin: 4px 0 0;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.fg-entity-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fg-entity-header-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 200px;
}

.fg-entity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Summary info grid on detail pages */
.fg-entity-summary {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .fg-entity-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .fg-entity-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fg-entity-summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-width: 0;
}

.fg-entity-summary-card h4,
.fg-entity-summary-card .fg-entity-summary-title {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Detail tabs — denser enterprise nav */
.fg-page .nav-tabs-custom.fg-entity-tabs,
.fg-entity-tabs.nav-tabs-custom {
  box-shadow: none !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  margin-bottom: 0;
}

.fg-entity-tabs > .nav-tabs {
  background: var(--color-surface-muted) !important;
  border-bottom: 1px solid var(--color-border) !important;
  display: flex;
  flex-wrap: wrap;
  margin: 0 !important;
}

.fg-entity-tabs > .nav-tabs > li {
  float: none !important;
  flex: 0 0 auto;
}

.fg-entity-tabs > .nav-tabs > li > a {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  font-size: var(--text-small) !important;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary) !important;
  white-space: nowrap;
}

.fg-entity-tabs > .nav-tabs > li.active > a,
.fg-entity-tabs > .nav-tabs > li.active > a:hover {
  background: var(--color-surface) !important;
  color: var(--color-primary) !important;
  border-bottom: 2px solid var(--color-primary) !important;
}

.fg-entity-tabs > .tab-content {
  padding: var(--space-4);
  background: var(--color-surface);
}

/* Modal form polish */
.fg-app .modal-dialog .modal-content .box,
.fg-app .modal-dialog .box.box-solid,
.fg-app .modal-dialog .box.box-primary {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  background: transparent !important;
}

.fg-app .modal-body .form-group {
  margin-bottom: 12px;
}

.fg-app .modal-footer .btn,
.fg-app .modal-footer .fg-btn {
  height: 34px;
}

/* Transaction line tables inside forms */
.fg-form #pos_table,
.fg-form #purchase_entry_table,
.fg-form .product_row {
  font-size: var(--text-small);
}

.fg-form #pos_table > thead > tr > th,
.fg-form #purchase_entry_table > thead > tr > th {
  background: var(--color-surface-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border) !important;
}

.fg-form .text-danger,
.fg-form #payment_due,
.fg-form #total_payable,
.fg-form #grand_total,
.fg-form #final_total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

@media (max-width: 767px) {
  .fg-form {
    padding-bottom: 120px;
  }

  .fg-form-actions {
    margin-left: calc(var(--space-4) * -1);
    margin-right: calc(var(--space-4) * -1);
    padding: var(--space-3) var(--space-4);
  }

  .fg-form-actions-inner {
    justify-content: stretch;
  }

  .fg-form-actions-primary {
    width: 100%;
  }

  .fg-form-actions-primary .fg-btn,
  .fg-form-actions-primary button {
    flex: 1 1 auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Phase 5 — Settings shell + global consistency                              */
/* -------------------------------------------------------------------------- */

/* Override legacy pos-tab chrome inside Settings only */
.fg-settings .pos-tab-container,
.fg-settings-shell.pos-tab-container {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden;
  margin-bottom: var(--space-4) !important;
  padding: 0 !important;
  z-index: 1;
}

.fg-settings .pos-tab-menu,
.fg-settings-nav.pos-tab-menu {
  padding: var(--space-2) !important;
  background: var(--color-surface-muted);
  border-inline-end: 1px solid var(--color-border);
  min-width: 0;
  float: none !important;
  width: auto !important;
}

.fg-settings .pos-tab-menu .list-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  box-shadow: none;
  border: none;
}

.fg-settings .pos-tab-menu .list-group > a,
.fg-settings .pos-tab-menu .list-group > a.list-group-item {
  position: relative;
  display: block;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  font-size: var(--text-small) !important;
  font-weight: var(--weight-medium) !important;
  text-align: start !important;
  line-height: 1.35;
  box-shadow: none !important;
}

.fg-settings .pos-tab-menu .list-group > a .fa,
.fg-settings .pos-tab-menu .list-group > a .glyphicon {
  color: inherit !important;
}

.fg-settings .pos-tab-menu .list-group > a:hover {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}

.fg-settings .pos-tab-menu .list-group > a.active,
.fg-settings .pos-tab-menu .list-group > a.active .fa,
.fg-settings .pos-tab-menu .list-group > a.active .glyphicon {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  background-image: none !important;
  border-color: transparent !important;
}

.fg-settings .pos-tab-menu .list-group > a.active:after {
  display: none !important;
  content: none !important;
  border: none !important;
}

.fg-settings .pos-tab,
.fg-settings-panels.pos-tab {
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding: 0;
  background: var(--color-surface);
}

.fg-settings .pos-tab-content {
  display: none;
  padding: var(--space-5) !important;
  background: var(--color-surface) !important;
  border: none !important;
}

.fg-settings .pos-tab-content.active {
  display: block;
}

.fg-settings .pos-tab-content h4,
.fg-settings .pos-tab-content .box-title {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-section);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.fg-settings-search {
  min-width: min(320px, 100%);
  max-width: 420px;
}

.fg-settings-search .row,
.fg-settings-search-field .row {
  margin: 0;
}

.fg-settings-search .col-md-8,
.fg-settings-search .col-md-offset-2,
.fg-settings-search [class*='col-'] {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fg-settings-search .input-group,
.fg-settings-search-field .input-group {
  width: 100%;
}

.fg-settings-form {
  padding-bottom: 72px;
}

@media (max-width: 991px) {
  .fg-settings .pos-tab-container,
  .fg-settings-shell.pos-tab-container {
    grid-template-columns: 1fr;
  }

  .fg-settings .pos-tab-menu,
  .fg-settings-nav.pos-tab-menu {
    border-inline-end: none;
    border-bottom: 1px solid var(--color-border);
  }

  .fg-settings .pos-tab-menu .list-group {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding-bottom: 2px;
  }

  .fg-settings .pos-tab-menu .list-group > a {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* Global: bare nav-tabs-custom */
.fg-app .nav-tabs-custom {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none !important;
  overflow: hidden;
}

.fg-app .nav-tabs-custom > .nav-tabs {
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}

.fg-app .nav-tabs-custom > .nav-tabs > li > a {
  border: none !important;
  border-radius: 0 !important;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}

.fg-app .nav-tabs-custom > .nav-tabs > li.active > a {
  background: var(--color-surface) !important;
  color: var(--color-primary) !important;
  border-bottom: 2px solid var(--color-primary) !important;
}

/* Global: table-bordered fallback */
.fg-app .table.table-bordered:not(.fg-data-table) {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.fg-app .table.table-bordered > thead > tr > th {
  background: var(--color-surface-muted);
  border-color: var(--color-border) !important;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

.fg-app .table.table-bordered > tbody > tr > td {
  border-color: var(--color-border) !important;
  font-size: var(--text-small);
  vertical-align: middle !important;
}

/* Alerts */
.fg-app .alert {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: none;
  font-size: var(--text-small);
}

.fg-app .alert-success {
  background: var(--color-success-soft);
  border-color: transparent;
  color: var(--color-success);
}

.fg-app .alert-danger,
.fg-app .alert-error {
  background: var(--color-danger-soft);
  border-color: transparent;
  color: var(--color-danger);
}

.fg-app .alert-warning {
  background: var(--color-warning-soft);
  border-color: transparent;
  color: var(--color-warning);
}

.fg-app .alert-info {
  background: var(--color-info-soft);
  border-color: transparent;
  color: var(--color-info);
}

/* Daterangepicker / datetime */
.fg-app .daterangepicker {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
}

.fg-app .daterangepicker td.active,
.fg-app .daterangepicker td.active:hover {
  background: var(--color-primary) !important;
}

/* Validation */
.fg-app .has-error .form-control,
.fg-app .form-control.error {
  border-color: var(--color-danger) !important;
}

.fg-app .error,
.fg-app .text-danger.help-block,
.fg-app label.error {
  color: var(--color-danger) !important;
  font-size: 11px;
}

/* Toastr soft alignment */
.fg-app #toast-container > div {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  opacity: 1;
}