/* =========================================================
   Huberr Worklog Design System
   File: custom.css
   Purpose:
   - Unified design tokens
   - Global base styles
   - Bootstrap-friendly component layer
   - Backward compatible with current project markup
   ========================================================= */


/* =========================================================
   1) Font Faces
   ========================================================= */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Regular.woff2') format('woff2'),
       url('/assets/fonts/Vazirmatn-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Medium.woff2') format('woff2'),
       url('/assets/fonts/Vazirmatn-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-SemiBold.woff2') format('woff2'),
       url('/assets/fonts/Vazirmatn-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('/assets/fonts/Vazirmatn-Bold.woff2') format('woff2'),
       url('/assets/fonts/Vazirmatn-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html,
body {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
}


/* =========================================================
   2) Design Tokens
   ========================================================= */
:root {
  /* Brand */
  --brand-dark: #0f3d3e;
  --brand-mid: #1d5c5d;
  --brand-light: #e8f4f4;
  --brand-soft: #f2fbfb;
  --brand-border: #cfe4e4;

  /* Primary */
  --primary: #0f766e;
  --primary-hover: #0b5d57;
  --primary-active: #094c47;
  --primary-soft: #dff4f2;

  /* Semantic */
  --success: #198754;
  --success-soft: #d1f1df;
  --warning: #d97706;
  --warning-soft: #fff1d6;
  --danger: #dc3545;
  --danger-soft: #ffe0e4;
  --info: #0ea5e9;
  --info-soft: #dff4ff;

  /* Neutrals */
  --white: #ffffff;
  --black: #111827;
  --text-color: #1f2937;
  --text-muted: #6b7280;
  --text-soft: #94a3b8;
  --text-on-dark: #f8fafc;

  --body-bg: #f5f7fb;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --surface-soft: #f9fbfc;

  --border-color: #e5e7eb;
  --border-color-strong: #d1d5db;
  --divider: #eef2f7;

  /* Radius */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;

  /* Typography */
  --font-family-base: 'Vazirmatn', Tahoma, Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;

  --line-height-tight: 1.5;
  --line-height-base: 1.8;
  --line-height-loose: 2;

  /* Transition */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.28s ease;
  --transition-slow: 0.38s ease;

  /* Layout */
  --container-max-width: 1400px;
  --navbar-height: 72px;

  /* Focus */
  --focus-ring: 0 0 0 0.22rem rgba(15, 118, 110, 0.16);
}


/* =========================================================
   3) Reset / Base
   ========================================================= */
html {
  direction: rtl;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  direction: rtl;
  text-align: right;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background-color: var(--body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  background: rgba(15, 118, 110, 0.18);
  color: var(--brand-dark);
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
  color: var(--primary-hover);
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

hr {
  border: 0;
  border-top: 1px solid var(--divider);
  opacity: 1;
  margin: var(--space-24) 0;
}

small,
.small {
  font-size: var(--font-size-sm);
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-soft {
  color: var(--text-soft) !important;
}

.container,
.container-fluid {
  position: relative;
}

.container {
  max-width: var(--container-max-width);
}


/* =========================================================
   4) Typography
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1.5;
  margin-bottom: var(--space-12);
}

h1, .h1 { font-size: var(--font-size-3xl); }
h2, .h2 { font-size: 24px; }
h3, .h3 { font-size: 20px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 16px; }
h6, .h6 { font-size: 15px; }

p {
  margin-top: 0;
  margin-bottom: var(--space-16);
  color: var(--text-color);
}

.lead {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 2;
}

.page-title,
.section-title {
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: var(--space-8);
}

.page-subtitle,
.section-subtitle {
  color: var(--text-muted);
  margin-bottom: 0;
}


/* =========================================================
   5) Bootstrap Compatibility Enhancements
   ========================================================= */
.row {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.25rem;
}

.bg-white {
  background-color: var(--white) !important;
}

.bg-light {
  background-color: var(--surface-muted) !important;
}

.bg-dark {
  background-color: var(--brand-dark) !important;
  color: var(--text-on-dark) !important;
}

.bg-brand,
.bg-brand-mid {
  background-color: var(--brand-mid) !important;
  color: var(--text-on-dark) !important;
}

.bg-brand-dark {
  background-color: var(--brand-dark) !important;
  color: var(--text-on-dark) !important;
}

.bg-brand-light {
  background-color: var(--brand-light) !important;
  color: var(--brand-dark) !important;
}

.border-soft {
  border-color: var(--divider) !important;
}

.rounded-4xl {
  border-radius: var(--radius-xl) !important;
}


/* =========================================================
   6) Navbar
   Current project already has navbar styles and uses them.
   ========================================================= */
.navbar {
  min-height: var(--navbar-height);
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-brand {
  color: var(--text-on-dark) !important;
  font-weight: 700;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.navbar-brand:hover {
  opacity: 0.92;
}

.navbar .navbar-nav .nav-link {
  color: rgba(248, 250, 252, 0.9) !important;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
  color: var(--white) !important;
  background-color: rgba(255, 255, 255, 0.08);
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none !important;
}

.navbar-toggler:focus {
  box-shadow: var(--focus-ring) !important;
}


/* =========================================================
   7) Top Banner / Hero Blocks
   ========================================================= */
.top-banner {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
  color: var(--text-on-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-24);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-24);
  position: relative;
  overflow: hidden;
}

.top-banner::before {
  content: "";
  position: absolute;
  inset: auto -60px -60px auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.top-banner h1,
.top-banner h2,
.top-banner h3,
.top-banner h4,
.top-banner h5,
.top-banner h6,
.top-banner .page-title {
  color: var(--text-on-dark);
  margin-bottom: var(--space-8);
}

.top-banner p,
.top-banner .text-muted,
.top-banner .page-subtitle {
  color: rgba(248, 250, 252, 0.82) !important;
}


/* =========================================================
   8) Cards
   Existing pages use .card heavily, especially dashboard.
   ========================================================= */
.card {
  direction: rtl;
  text-align: right;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-normal),
    border-color var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: #dbe3ea;
}

.card-header {
  background: linear-gradient(140deg, #103025 0%, #1d5c5d 100%);
  border-bottom: 1px solid var(--divider);
  padding: 16px 20px;
  font-weight: 700;
  color: var(--brand-dark);
}

.card-body {
  padding: 20px;
}

.card-footer {
  background-color: #fcfdff;
  border-top: 1px solid var(--divider);
  padding: 14px 20px;
}

.card-title {
  color: var(--brand-dark);
  margin-bottom: 6px;
  font-weight: 700;
}

.card-subtitle {
  color: var(--text-muted);
  margin-bottom: 0;
}

.card .text-muted {
  color: var(--text-muted) !important;
}


/* Dashboard-oriented stat cards */
.stat-card,
.stats-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.stat-card::after,
.stats-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--brand-mid));
}

.stat-card .stat-label,
.stats-card .stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

.stat-card .stat-value,
.stats-card .stat-value {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--brand-dark);
}

.stat-card .stat-meta,
.stats-card .stat-meta {
  margin-top: var(--space-8);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}


/* =========================================================
   9) Filter Box / Toolbars
   Pages my_reports/admin_reports already use .filter-box
   ========================================================= */
.filter-box {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: var(--space-24);
}

.filter-box .form-label {
  margin-bottom: 8px;
}

.filter-box .btn {
  min-width: 120px;
}

.filter-box .row {
  --bs-gutter-y: 1rem;
}

.filter-box .form-control,
.filter-box .form-select {
  background-color: #fff;
}

.toolbar,
.action-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-bottom: var(--space-20);
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
}


/* =========================================================
   10) Forms
   Current pages use .form-label .form-control .form-select
   ========================================================= */
label,
.form-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--brand-dark);
}

.form-group {
  margin-bottom: var(--space-18);
}

.form-control,
.form-select,
textarea.form-control {
  min-height: 46px;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-md);
  background-color: var(--white);
  color: var(--text-color);
  font-size: var(--font-size-md);
  padding: 10px 14px;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
  box-shadow: none;
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
  line-height: var(--line-height-base);
}

.form-control::placeholder,
.form-select::placeholder {
  color: #9ca3af;
}

.form-control:hover,
.form-select:hover {
  border-color: #c8d1da;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: var(--primary);
  background-color: #fff;
  box-shadow: var(--focus-ring);
  color: var(--text-color);
}

.form-control:disabled,
.form-select:disabled,
textarea.form-control:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.form-text {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-top: 6px;
}

.form-check-input {
  float: none;
  margin-left: 0;
  margin-right: 0;
  border-color: var(--border-color-strong);
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.input-group-text {
  background-color: #f8fafc;
  border-color: var(--border-color-strong);
  color: var(--text-muted);
  border-radius: var(--radius-md);
}


/* =========================================================
   11) Buttons
   Existing pages use .btn .btn-primary .btn-outline-secondary
   Also old CSS had qty-circle support
   ========================================================= */
.btn {
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  padding: 10px 18px;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus,
.btn:focus-visible {
  box-shadow: var(--focus-ring) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--brand-mid));
  border-color: var(--primary);
  color: var(--white);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--primary-hover), var(--brand-dark));
  border-color: var(--primary-hover);
  color: var(--white);
}

.btn-primary:active {
  background: var(--primary-active) !important;
  border-color: var(--primary-active) !important;
  color: var(--white) !important;
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.btn-outline-secondary {
  color: var(--brand-dark);
  border-color: var(--border-color-strong);
  background-color: var(--white);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--brand-dark);
  border-color: #b9c3cf;
  background-color: #f8fafc;
}

.btn-secondary {
  background-color: #e9eef3;
  border-color: #d7dee7;
  color: var(--brand-dark);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #dde6ef;
  border-color: #cfd8e2;
  color: var(--brand-dark);
}

.btn-success {
  background-color: var(--success);
  border-color: var(--success);
}

.btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: #fff;
}

.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
}

.btn-light {
  background-color: #f8fafc;
  border-color: var(--border-color);
  color: var(--brand-dark);
}

.btn-light:hover {
  background-color: #eef2f7;
  border-color: #dbe3ea;
  color: var(--brand-dark);
}

.btn-sm {
  padding: 8px 14px;
  font-size: 12px;
}

.btn-lg {
  padding: 12px 22px;
  font-size: 15px;
}

.qty-circle {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}


/* =========================================================
   12) Tables
   Existing pages use .table-wrapper and .table
   ========================================================= */
.table-wrapper {
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-24);
}

.table-responsive.table-wrapper {
  overflow: auto;
  max-height: 70vh;
}

.table {
  margin-bottom: 0;
  color: var(--text-color);
  vertical-align: middle;
  border-color: var(--divider);
}

.table > :not(caption) > * > * {
  padding: 14px 16px;
  text-align: right !important;
  vertical-align: middle;
  border-bottom-width: 1px;
  border-color: var(--divider);
}

.table thead th {
  background: linear-gradient(180deg, #f8fafc 0%, #f3f6fa 100%);
  color: var(--brand-dark);
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 2;
}

.table-responsive .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #f8fafc 0%, #f3f6fa 100%);
}

.table tbody tr {
  transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
  background-color: #fbfdfd;
}

.table tbody td {
  color: var(--text-color);
}

.table tfoot th,
.table tfoot td {
  background-color: #fafcfd;
  font-weight: 600;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(15, 23, 42, 0.015);
  color: inherit;
}

.table-responsive {
  border-radius: inherit;
  -webkit-overflow-scrolling: touch;
  max-height: 70vh;
  overflow-y: auto;
}

/* Ensure tables inside cards scroll horizontally */
.card-body .table-responsive > .table {
  min-width: 700px;
}

.card-body .table-responsive > .table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-body .table-responsive > .table td.text-wrap-cell,
.card-body .table-responsive > .table td.report-desc-col {
  white-space: normal;
  word-break: break-word;
}

.table .actions-cell,
.table td.actions-cell,
.table th.actions-cell {
  white-space: nowrap;
}

.table-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
}

table.table-responsive-cards {
  border-collapse: separate;
  border-spacing: 0;
}

/* --- Column Width Utilities --- */
.col-num { width: 50px; min-width: 40px; max-width: 60px; }
.col-id { width: 60px; min-width: 50px; max-width: 70px; }
.col-date { width: 110px; min-width: 95px; max-width: 130px; }
.col-datetime { width: 140px; min-width: 120px; max-width: 160px; }
.col-status { width: 100px; min-width: 80px; max-width: 120px; }
.col-actions { width: 140px; min-width: 100px; max-width: 200px; }
.col-actions-lg { width: 200px; min-width: 160px; max-width: 260px; }
.col-badge { width: 100px; min-width: 80px; max-width: 130px; }
.col-code { width: 130px; min-width: 100px; max-width: 160px; }
.col-duration { width: 100px; min-width: 80px; max-width: 120px; }

/* --- Text Overflow Handling --- */
.table td.text-truncate-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table td.text-wrap-cell {
  max-width: 250px;
  white-space: normal;
  word-break: break-word;
}

/* --- Action Buttons in Single Row --- */
.table .actions-cell .btn,
.table td.actions-cell .btn {
  white-space: nowrap;
}

.table .btn-group-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  direction: ltr;
}

.table .btn-group-actions .btn {
  flex-shrink: 0;
}

.table thead.bg-brand-mid th {
    background-color: var(--brand-mid) !important;
    color: #fff !important;
}

.table thead.bg-brand-mid th a {
    color: #0f3d3e !important;
}


/* =========================================================
   13) Badges / Statuses
   Pages already use .badge + bg-success/bg-warning/bg-danger
   ========================================================= */
.badge {
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.bg-success,
.badge.bg-success {
  background-color: var(--success-soft) !important;
  color: #0f6b41 !important;
}

.bg-warning,
.badge.bg-warning {
  background-color: var(--warning-soft) !important;
  color: #9a5a05 !important;
}

.bg-danger,
.badge.bg-danger {
  background-color: var(--danger-soft) !important;
  color: #b42334 !important;
}

.bg-info,
.badge.bg-info {
  background-color: var(--info-soft) !important;
  color: #036f9c !important;
}

.bg-primary,
.badge.bg-primary {
  background-color: var(--primary-soft) !important;
  color: var(--primary-hover) !important;
}

.status-badge,
.badge-soft {
  border: 1px solid transparent;
}


/* =========================================================
   14) Alerts
   ========================================================= */
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
}

.alert-success {
  background-color: #ecfdf3;
  border-color: #b7efcc;
  color: #0f6b41;
}

.alert-danger {
  background-color: #fff1f3;
  border-color: #ffc7d0;
  color: #b42334;
}

.alert-warning {
  background-color: #fff7e6;
  border-color: #ffe0a6;
  color: #9a5a05;
}

.alert-info {
  background-color: #eff8ff;
  border-color: #c7ebff;
  color: #036f9c;
}





/* =========================================================
   15) Pagination
   ========================================================= */
.pagination {
  gap: 6px;
}

.page-link {
  color: var(--brand-dark);
  border: 1px solid var(--border-color);
  border-radius: 12px !important;
  padding: 8px 12px;
  box-shadow: none !important;
}

.page-link:hover {
  color: var(--primary-hover);
  background-color: #f8fafc;
  border-color: #dbe3ea;
}

.page-item.active .page-link {
  color: var(--white);
  background-color: var(--primary);
  border-color: var(--primary);
}

.page-item.disabled .page-link {
  color: #9ca3af;
  background-color: #f3f4f6;
  border-color: #e5e7eb;
}


/* =========================================================
   16) Dropdowns / Menus
   ========================================================= */
.dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  text-align: right;
}

.dropdown-item {
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text-color);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--surface-muted);
  color: var(--brand-dark);
}


/* =========================================================
   17) Modal
   ========================================================= */
.modal-content {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--divider);
  background-color: #fcfdff;
  padding: 16px 20px;
}

.modal-title {
  font-weight: 700;
  color: var(--brand-dark);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  border-top: 1px solid var(--divider);
  background-color: #fcfdff;
  padding: 14px 20px;
}


/* =========================================================
   18) Footer
   Existing project has footer styles
   ========================================================= */
footer,
.site-footer {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-mid));
  color: var(--text-on-dark);
  padding: 18px 0;
  margin-top: var(--space-32);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.05);
}

footer p,
footer small,
footer span,
.site-footer p,
.site-footer small,
.site-footer span {
  color: rgba(248, 250, 252, 0.88);
  margin-bottom: 0;
}

footer a,
.site-footer a {
  color: var(--white);
}

footer a:hover,
.site-footer a:hover {
  color: #dff4f2;
}


/* =========================================================
   19) Helper Layout Classes
   ========================================================= */
.section-block {
  margin-bottom: var(--space-24);
}

.surface-box {
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.page-shell {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-bottom: var(--space-20);
}

.page-header__content {
  min-width: 0;
}

.page-header__title {
  margin-bottom: var(--space-6);
  color: var(--brand-dark);
  font-weight: 700;
}

.page-header__meta {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  flex-wrap: wrap;
}


/* =========================================================
   20) Utility Classes
   ========================================================= */
.u-text-muted { color: var(--text-muted) !important; }
.u-text-soft { color: var(--text-soft) !important; }
.u-text-dark { color: var(--brand-dark) !important; }
.u-text-primary { color: var(--primary) !important; }
.u-text-success { color: var(--success) !important; }
.u-text-warning { color: var(--warning) !important; }
.u-text-danger { color: var(--danger) !important; }
.u-text-white { color: var(--white) !important; }

.u-bg-white { background-color: var(--white) !important; }
.u-bg-soft { background-color: var(--surface-muted) !important; }
.u-bg-brand-light { background-color: var(--brand-light) !important; }
.u-bg-brand-dark { background-color: var(--brand-dark) !important; color: var(--white) !important; }

.u-border { border: 1px solid var(--border-color) !important; }
.u-border-0 { border: 0 !important; }

.u-shadow-xs { box-shadow: var(--shadow-xs) !important; }
.u-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.u-shadow-md { box-shadow: var(--shadow-md) !important; }
.u-shadow-lg { box-shadow: var(--shadow-lg) !important; }

.u-rounded-sm { border-radius: var(--radius-sm) !important; }
.u-rounded-md { border-radius: var(--radius-md) !important; }
.u-rounded-lg { border-radius: var(--radius-lg) !important; }
.u-rounded-xl { border-radius: var(--radius-xl) !important; }
.u-rounded-pill { border-radius: var(--radius-pill) !important; }

.u-p-0 { padding: 0 !important; }
.u-p-8 { padding: var(--space-8) !important; }
.u-p-12 { padding: var(--space-12) !important; }
.u-p-16 { padding: var(--space-16) !important; }
.u-p-20 { padding: var(--space-20) !important; }
.u-p-24 { padding: var(--space-24) !important; }

.u-px-16 { padding-right: var(--space-16) !important; padding-left: var(--space-16) !important; }
.u-px-24 { padding-right: var(--space-24) !important; padding-left: var(--space-24) !important; }

.u-py-12 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
.u-py-16 { padding-top: var(--space-16) !important; padding-bottom: var(--space-16) !important; }
.u-py-24 { padding-top: var(--space-24) !important; padding-bottom: var(--space-24) !important; }

.u-m-0 { margin: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; color: #ffffff !important;}
.u-mb-8 { margin-bottom: var(--space-8) !important; }
.u-mb-12 { margin-bottom: var(--space-12) !important; }
.u-mb-16 { margin-bottom: var(--space-16) !important; }
.u-mb-20 { margin-bottom: var(--space-20) !important; }
.u-mb-24 { margin-bottom: var(--space-24) !important; }
.u-mb-32 { margin-bottom: var(--space-32) !important; }

.u-mt-0 { margin-top: 0 !important; }
.u-mt-8 { margin-top: var(--space-8) !important; }
.u-mt-12 { margin-top: var(--space-12) !important; }
.u-mt-16 { margin-top: var(--space-16) !important; }
.u-mt-20 { margin-top: var(--space-20) !important; }
.u-mt-24 { margin-top: var(--space-24) !important; }
.u-mt-32 { margin-top: var(--space-32) !important; }

.u-w-100 { width: 100% !important; }
.u-h-100 { height: 100% !important; }

.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-items-center { align-items: center !important; }
.u-items-start { align-items: flex-start !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-center { justify-content: center !important; }
.u-gap-8 { gap: var(--space-8) !important; }
.u-gap-12 { gap: var(--space-12) !important; }
.u-gap-16 { gap: var(--space-16) !important; }

.u-overflow-hidden { overflow: hidden !important; }
.u-nowrap { white-space: nowrap !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }


/* =========================================================
   21) Responsive Tables
   Consolidated mobile card-like table pattern
   ========================================================= */
@media (max-width: 991.98px) {
  .page-header {
    align-items: flex-start;
  }

  .page-header__actions,
  .toolbar,
  .action-toolbar {
    width: 100%;
  }

  .filter-box {
    padding: 16px;
  }

  .card-body,
  .card-header,
  .card-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 767.98px) {
  .navbar {
    min-height: auto;
  }

  .top-banner {
    padding: 18px;
    border-radius: var(--radius-lg);
  }

  .btn {
    width: 100%;
  }

  .btn-sm,
  .btn-lg {
    width: 100%;
  }

  .toolbar-group {
    width: 100%;
  }

  .badge {
    white-space: nowrap;
    font-size: 10px;
    padding: 4px 8px;
  }

  .d-none-mobile {
    display: none !important;
  }

  /* Datepicker - small centered popup */
  .datepicker-plot-area {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 280px !important;
    max-width: 90vw !important;
    z-index: 9999 !important;
    margin: 0 !important;
  }

  .datepicker-plot-area .btn,
  .datepicker-plot-area .pwt-btn,
  .datepicker-plot-area button {
    width: auto !important;
  }
}

@media (max-width: 575.98px) {
  body {
    font-size: 13px;
  }

  .card,
  .filter-box,
  .table-wrapper,
  .surface-box,
  .top-banner {
    border-radius: var(--radius-md);
  }

  .top-banner,
  .filter-box,
  .card-body,
  .surface-box {
    padding: 14px;
  }

  .page-header__title {
    font-size: 20px;
  }
}



/* --- Header Additions --- */
.brand-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.1);
    padding: 3px;
}

.user-panel {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    background: rgba(255, 255, 255, 0.06);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
}

.user-meta span {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
}

.user-meta small {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.logout-link {
    color: #fca5a5 !important;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: rgba(220, 38, 38, 0.1);
}

.logout-link:hover {
    background: #dc2626;
    color: #fff !important;
}

@media (max-width: 991px) {
    .user-panel {
        margin-top: 1rem;
        justify-content: center;
    }
}