/* =========================================================
   Design System for AdminLTE (Enterprise Backoffice)
   Author: You (now upgraded 😄)
   ========================================================= */

/* =========================
   1. Design Tokens
   ========================= */
:root {

  /* Font */
  --font-family-base: "Microsoft JhengHei", "PingFang TC",
    system-ui, -apple-system, "Segoe UI", Roboto, Arial;

  /* Font Size Scale */
  --fs-xs: 0.75rem;   /* 10.5px */
  --fs-sm: 0.85rem;   /* 12px */
  --fs-md: 0.9rem;    /* 12.6px */
  --fs-lg: 1rem;      /* 14px */
  --fs-xl: 1.1rem;

  /* Colors */
  --color-primary: #007bff;
  --color-text: #343a40;
  --color-muted: #6c757d;
  --color-border: #dee2e6;
  --color-bg-light: #f8f9fa;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;

  /* Radius */
  --radius-sm: 4px;
}

/* =========================
   2. Base
   ========================= */
html {
  font-size: 14px; /* 🔥 Global control */
}

body {
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: #f4f6f9; /* AdminLTE background */
}

/* Compatibility aliases (some pages already use ds-* vars) */
:root {
  --ds-font-family: var(--font-family-base);
  --ds-font-size-base: 14px; /* compact (A) */
}

/* =========================
   3. Typography
   ========================= */
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }

/* Titles */
.page-title {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.section-title {
  font-size: var(--fs-md);
  font-weight: 600;
}

/* Labels */
.form-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 4px;
}

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

/* =========================
   4. Table System
   ========================= */
.table {
  margin-bottom: 0;
}

.table thead th {
  font-size: var(--fs-sm);
  /* CJK-first UI: avoid forced uppercase + wide tracking */
  text-transform: none;
  letter-spacing: normal;
  border-top: none;
  border-bottom: 2px solid var(--color-border);
  vertical-align: middle;
}

.table tbody td {
  font-size: var(--fs-md);
  vertical-align: middle;
  color: #495057;
}

/* Numeric alignment */
.text-amount {
  font-family: Consolas, Menlo, monospace;
  font-weight: 600;
}

/* =========================
   5. Form System
   ========================= */
.form-control {
  font-size: var(--fs-md);
  border-radius: var(--radius-sm);
}

.form-control-sm {
  font-size: var(--fs-sm);
}

.input-group-text {
  font-size: var(--fs-sm);
}

.custom-file-label {
  font-size: var(--fs-sm);
}

/* =========================
   6. Button System
   ========================= */
.btn {
  font-size: var(--fs-sm);
}

.btn-sm {
  font-size: var(--fs-sm);
  padding: 0.25rem 0.6rem;
}

/* =========================
   7. Modal System
   ========================= */
.modal-title {
  font-size: var(--fs-md);
  font-weight: 600;
}

.modal-body {
  font-size: var(--fs-md);
}

/* =========================
   8. Card / Layout
   ========================= */
.card {
  border-radius: var(--radius-sm);
}

.card-header {
  font-size: var(--fs-md);
  font-weight: 600;
}

/* =========================
   9. Sidebar (AdminLTE override)
   ========================= */
.nav-sidebar .nav-link {
  font-size: var(--fs-sm);
}

.nav-sidebar .nav-treeview .nav-link {
  font-size: var(--fs-xs);
}

/* =========================
   10. Utilities
   ========================= */
.bg-light-custom {
  background-color: var(--color-bg-light);
}

.border-left-primary {
  border-left: 4px solid var(--color-primary) !important;
}

/* =========================
   11. DataTables Fix
   ========================= */
.dataTables_wrapper .dataTables_filter input {
  font-size: var(--fs-sm);
}

.dataTables_wrapper .dataTables_length select {
  font-size: var(--fs-sm);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  font-size: var(--fs-sm);
}

/* DataTables + Bootstrap 4: toolbar rows use .row with negative horizontal margins.
   Inside a flush card (.card-body.p-0) or tight .table-responsive, that exceeds 100%
   width by a few pixels and causes a spurious horizontal scrollbar. */
.card-body.p-0 .dataTables_wrapper > .row {
  margin-left: 0;
  margin-right: 0;
}

/* ================================
   Global font scale (compact mode A)
   ================================ */

html { font-size: var(--ds-font-size-base, 14px); }
body { font-size: 1rem; }

/* Keep key containers consistent */
.content-wrapper,
.main-sidebar,
.card,
.modal,
.table,
.form-control,
.btn { font-size: 1rem; }

small { font-size: 0.85rem; }

.bg-light-custom {
    background-color: #f4f6f9;
}

.card-header h3,
.card-header h6 {
    margin-bottom: 0;
}

.table thead th {
    font-weight: 600;
    color: #495057;
}

.callout {
    border-left: 4px solid #17a2b8;
}

.form-control-sm {
    font-size: 0.9rem;
}

.badge {
    font-size: 0.85rem;
}

.bg-light-custom {
    background-color: #f4f6f9;
}

.input-group-text {
    font-size: 0.85rem;
    font-weight: 600;
}

.table thead th {
    font-weight: 600;
    color: #495057;
}

.card-header h6 {
    margin-bottom: 0;
}

.btn-group .btn {
    font-weight: 500;
}

#dragbar {
    height: 12px;
    width: 100%;
    cursor: row-resize;
    background-color: #eee;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dragbar:hover {
    background-color: #e0e0e0;
}

/* =========================
   12. Print
   ========================= */
@media print {

  body {
    background: #fff !important;
  }

  .no-print,
  .main-footer,
  .btn {
    display: none !important;
  }

  .card {
    border: none !important;
    box-shadow: none !important;
  }

  .table td,
  .table th {
    border: 1px solid #ddd !important;
    padding: 6px !important;
  }

  .text-primary {
    color: #000 !important;
  }
}