/* ============================================================================
   DESIGN SYSTEM — COMPONENTS  (Stage 1)
   ----------------------------------------------------------------------------
   Re-skins the existing AdminLTE / Bootstrap 4 component classes so they
   consume the design tokens. No markup changes — every .card, .btn, .table,
   .form-control, .modal, etc. across all 442 pages picks these up.

   Loaded LAST, so same-specificity selectors win the cascade over AdminLTE
   and Bootstrap without needing !important. Semantic hues (info/success/
   warning/danger) are preserved for familiarity; only shape, elevation and
   interaction are modernized, with the enterprise-blue --primary unifying
   primary actions and active states.
   ========================================================================= */

/* ------------------------------------------------------------------------- *
 * Page content entrance — subtle, GPU-friendly fade on navigation
 * ------------------------------------------------------------------------- */
.content-wrapper {
  animation: fadeIn var(--animation-speed) var(--ease) both;
}

/* ------------------------------------------------------------------------- *
 * Cards
 * ------------------------------------------------------------------------- */
.card {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--animation-speed) var(--ease);
}
.card:hover {
  box-shadow: var(--shadow-md);
}
.card-header {
  background-color: var(--surface);
  border-bottom: var(--border-width) solid var(--border-color);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.card-header .card-title {
  font-weight: var(--font-weight-semibold);
  color: inherit;   /* follow the header's color (gold on charcoal, dark on light) */
}
.card-footer {
  background-color: var(--surface-2);
  border-top: var(--border-width) solid var(--border-color);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
/* Keep AdminLTE's colored card accents crisp with the new radius */
/* Professional card headers (gold-ERP): replace AdminLTE's solid saturated
   header bars (teal/gray/blue…) with a premium charcoal header + gold title,
   so every page reads consistently high-end and matches the sidebar.
   GHC43 (body.ghc43-page) keeps its own bespoke section styling — excluded. */
/* Only SOLID colored cards get the charcoal+gold bar. Outline cards keep their
   light header + colored top border; plain cards keep the default light header
   — so pages like ORD11/ORD12 (all card-*-outline) stay clean. Title, icons and
   tools inherit the header's gold-light color, so no per-child rules needed. */
body:not(.ghc43-page) .card-primary:not(.card-outline) > .card-header,
body:not(.ghc43-page) .card-secondary:not(.card-outline) > .card-header,
body:not(.ghc43-page) .card-info:not(.card-outline) > .card-header,
body:not(.ghc43-page) .card-success:not(.card-outline) > .card-header,
body:not(.ghc43-page) .card-warning:not(.card-outline) > .card-header,
body:not(.ghc43-page) .card-danger:not(.card-outline) > .card-header,
body:not(.ghc43-page) .card-dark:not(.card-outline) > .card-header,
body:not(.ghc43-page) .card-navy:not(.card-outline) > .card-header,
body:not(.ghc43-page) .card-teal:not(.card-outline) > .card-header,
body:not(.ghc43-page) .card-olive:not(.card-outline) > .card-header {
  background: linear-gradient(180deg, #23262c 0%, #1b1d21 100%) !important;
  color: var(--gold-light) !important;
  border-bottom: 2px solid var(--gold-dark);
  box-shadow: none;
  font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------------------------- *
 * Buttons
 * ------------------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease,
              background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus, .btn.focus { box-shadow: var(--shadow-focus); }
.btn:disabled, .btn.disabled { transform: none; box-shadow: none; filter: none; opacity: 0.65; }

/* Soft, premium elevation for solid buttons; subtle brighten on hover. */
.btn-primary, .btn-info, .btn-success, .btn-warning,
.btn-danger, .btn-secondary, .btn-dark {
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.10);
}
.btn-primary:hover, .btn-info:hover, .btn-success:hover, .btn-warning:hover,
.btn-danger:hover, .btn-secondary:hover, .btn-dark:hover {
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.18);
  filter: brightness(1.03);
}

/* Primary + Info = the gold-ERP signature CTA (gold gradient, dark text).
   btn-info is the app's most common action button (1000+ uses: Save, استعلام,
   بدايه جرد…), so both share the gold treatment for a consistent premium look. */
.btn-primary,
.btn-info {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
  border-color: var(--gold-dark);
  color: #1b1d21;
  font-weight: var(--font-weight-bold);
}
.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active,
.btn-info:hover, .btn-info:not(:disabled):not(.disabled):active {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-dark) 100%);
  border-color: var(--gold-dark);
  color: #1b1d21;
  box-shadow: 0 8px 20px rgba(200, 162, 74, 0.35);
}
.btn-primary:focus, .btn-primary.focus,
.btn-info:focus, .btn-info.focus { box-shadow: 0 0 0 3px rgba(200, 162, 74, 0.35); }

/* Success / Warning / Danger — semantic hues preserved, refined. */
.btn-success { background-color: var(--success); border-color: var(--success); }
.btn-success:hover, .btn-success:not(:disabled):not(.disabled):active { background-color: #138a3f; border-color: #138a3f; }
.btn-success:focus, .btn-success.focus { box-shadow: 0 0 0 3px var(--success-soft); }
.btn-warning { background-color: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover, .btn-warning:not(:disabled):not(.disabled):active { background-color: #b96405; border-color: #b96405; color: #fff; }
.btn-warning:focus, .btn-warning.focus { box-shadow: 0 0 0 3px var(--warning-soft); }
.btn-danger  { background-color: var(--danger); border-color: var(--danger); }
.btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active { background-color: #b91c1c; border-color: #b91c1c; }
.btn-danger:focus, .btn-danger.focus { box-shadow: 0 0 0 3px var(--danger-soft); }

/* Dark — premium charcoal (matches the sidebar & card headers). */
.btn-dark { background-color: #23262c; border-color: #23262c; }
.btn-dark:hover, .btn-dark:not(:disabled):not(.disabled):active { background-color: #16181c; border-color: #16181c; }

/* Outline + secondary (outline-primary becomes a gold outline). */
.btn-outline-primary { color: var(--gold-dark); border-color: var(--gold); }
.btn-outline-primary:hover { background: var(--gold); border-color: var(--gold); color: #1b1d21; }
.btn-secondary { background-color: var(--secondary); border-color: var(--secondary); }
.btn-secondary:hover, .btn-secondary:not(:disabled):not(.disabled):active { background-color: var(--secondary-hover); border-color: var(--secondary-hover); }

/* Sizing keeps token radius. */
.btn-sm { border-radius: var(--radius-sm); }
.btn-lg { border-radius: var(--radius-md); }

/* ------------------------------------------------------------------------- *
 * Forms — inputs / selects / textareas
 * ------------------------------------------------------------------------- */
.form-control,
.custom-select,
textarea.form-control {
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-color);
  color: var(--text-primary);
  background-color: var(--surface);
  transition: var(--transition-colors);
}
.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:disabled,
.form-control[readonly] { background-color: var(--surface-2); }

label { font-weight: var(--font-weight-medium); color: var(--text-primary); }

/* Input groups */
.input-group-text {
  background-color: var(--surface-2);
  border: var(--border-width) solid var(--border-color);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
}
.input-group-sm > .form-control,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .input-group-text { border-radius: var(--radius-sm); }

/* ------------------------------------------------------------------------- *
 * Tables
 * ------------------------------------------------------------------------- */
.table {
  color: var(--text-primary);
}
.table thead th {
  background-color: var(--surface-2);
  color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
  border-bottom: 2px solid var(--border-color);
  border-top: none;
  letter-spacing: 0.01em;
}
.table td, .table th {
  border-top: var(--border-width) solid var(--border-color);
  vertical-align: middle;
}
.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--border-color); }
.table-hover tbody tr {
  transition: background-color var(--animation-speed-fast) var(--ease);
}
.table-hover tbody tr:hover {
  background-color: var(--surface-hover);
}

/* ------------------------------------------------------------------------- *
 * Dashboard stat boxes (AdminLTE small-box / info-box)
 * ------------------------------------------------------------------------- */
.small-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--animation-speed) var(--ease),
              box-shadow var(--animation-speed) var(--ease);
}
.small-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.info-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background-color: var(--surface);
}

/* ------------------------------------------------------------------------- *
 * Modals
 * ------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background-color: var(--surface);
  animation: fadeInScale var(--animation-speed) var(--ease-out) both;
}
.modal-header {
  border-bottom: var(--border-width) solid var(--border-color);
}
.modal-footer {
  border-top: var(--border-width) solid var(--border-color);
}

/* ------------------------------------------------------------------------- *
 * Dropdowns
 * ------------------------------------------------------------------------- */
.dropdown-menu {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1) 0;
  background-color: var(--surface);
  animation: fadeInUp var(--animation-speed-fast) var(--ease-out) both;
}
.dropdown-item {
  color: var(--text-primary);
  transition: background-color var(--animation-speed-fast) var(--ease);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--surface-hover);
  color: var(--text-primary);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary);
  color: var(--primary-contrast);
}
.dropdown-divider { border-top-color: var(--border-color); }

/* ------------------------------------------------------------------------- *
 * Pagination
 * ------------------------------------------------------------------------- */
.pagination { gap: 2px; }
.page-link {
  color: var(--primary);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
}
.page-link:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-color-strong);
  color: var(--primary-hover);
}
.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
}
.page-item.disabled .page-link { color: var(--text-muted); }

/* ------------------------------------------------------------------------- *
 * Badges
 * ------------------------------------------------------------------------- */
.badge {
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-medium);
  padding: 0.35em 0.7em;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------------- *
 * Alerts
 * ------------------------------------------------------------------------- */
.alert {
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
}
.alert-success { background-color: var(--success-soft); border-color: var(--success); color: #0f5c2b; }
.alert-info    { background-color: var(--info-soft);    border-color: var(--info);    color: #0a5e68; }
.alert-warning { background-color: var(--warning-soft); border-color: var(--warning); color: #8a4d04; }
.alert-danger  { background-color: var(--danger-soft);  border-color: var(--danger);  color: #971a1a; }

/* ------------------------------------------------------------------------- *
 * Breadcrumbs
 * ------------------------------------------------------------------------- */
.breadcrumb {
  background-color: var(--surface-2);
  border-radius: var(--radius-md);
}
.breadcrumb-item.active { color: var(--text-secondary); }

/* ------------------------------------------------------------------------- *
 * Nav pills / tabs (content area, not the sidebar)
 * ------------------------------------------------------------------------- */
.content-wrapper .nav-pills .nav-link.active {
  background-color: var(--primary);
  color: var(--primary-contrast);
  border-radius: var(--radius-md);
}
.nav-tabs .nav-link.active {
  color: var(--primary);
  border-bottom-color: transparent;
}

/* ------------------------------------------------------------------------- *
 * Top navbar (header bar only — sidebar redesign is held for its own stage)
 * ------------------------------------------------------------------------- */
.main-header.navbar {
  border-bottom: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
.navbar-white {
  background-color: var(--surface);
}