/* Сайтын нийтлэг стиль. Tailwind CDN үндсэн стилийг хариуцна. */
html { scroll-behavior: smooth; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* Гар утасны доод цэсний зай */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
@media (min-width: 768px) { body { padding-bottom: 0; } }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== Drawer ===== */
/* Хаалттай үед visibility:hidden — эс тэгвээс shadow нь дэлгэцийн баруун ирмэгт цацарна. */
.drawer { transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.drawer.open { transform: translateX(0); visibility: visible; transition: transform .25s ease, visibility 0s; }

/* ===== Bottom nav ===== */
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
.bnav-item.active { color: #1d4ed8; }
.bnav-item.active .bnav-dot { background: #1d4ed8; }

/* ===== Flash messages ===== */
.flash { transition: opacity .3s ease, transform .3s ease; }
.flash.hide { opacity: 0; transform: translateY(-4px); }

/* =====================================================================
   Нийтлэг компонентууд — бүх хуудас эдгээрийг ашиглана.
   Өнгө/хэмжээг өөрчлөхдөө зөвхөн энд засна.
   ===================================================================== */
:root {
  --c-primary: #2563eb; --c-primary-h: #1d4ed8;
  --c-danger: #dc2626;  --c-danger-h: #b91c1c;
  --c-success: #16a34a; --c-success-h: #15803d;
  --c-warning: #d97706; --c-warning-h: #b45309;
  --c-dark: #1f2937;    --c-dark-h: #111827;
  --c-border: #e5e7eb;
  --radius: .5rem; --radius-lg: .75rem;
}

/* ----- Хуудасны толгой ----- */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; }
.page-title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #111827; letter-spacing: -.01em; }
@media (min-width: 768px) { .page-title { font-size: 1.75rem; line-height: 2.25rem; } }
.page-subtitle { margin-top: .25rem; font-size: .875rem; color: #6b7280; }
.section-title { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: #1f2937; }

/* ----- Card ----- */
.card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.card-body { padding: 1.25rem; }
.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
a.card:hover, .card-link:hover { border-color: #bfdbfe; box-shadow: 0 4px 12px rgba(16, 24, 40, .08); }

/* ----- Товч ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .5rem 1rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.btn.btn-sm { padding: .3125rem .75rem; font-size: .8125rem; }
.btn.btn-lg { padding: .75rem 1.25rem; font-size: 1rem; }
.btn.btn-primary { background: var(--c-primary); color: #fff; }
.btn.btn-primary:hover:not(:disabled) { background: var(--c-primary-h); }
.btn.btn-danger { background: var(--c-danger); color: #fff; }
.btn.btn-danger:hover:not(:disabled) { background: var(--c-danger-h); }
.btn.btn-success { background: var(--c-success); color: #fff; }
.btn.btn-success:hover:not(:disabled) { background: var(--c-success-h); }
.btn.btn-warning { background: var(--c-warning); color: #fff; }
.btn.btn-warning:hover:not(:disabled) { background: var(--c-warning-h); }
.btn.btn-dark { background: var(--c-dark); color: #fff; }
.btn.btn-dark:hover:not(:disabled) { background: var(--c-dark-h); }
.btn.btn-secondary { background: #fff; color: #374151; border-color: #d1d5db; }
.btn.btn-secondary:hover:not(:disabled) { background: #f9fafb; border-color: #9ca3af; }
.btn.btn-ghost { background: transparent; color: #374151; }
.btn.btn-ghost:hover:not(:disabled) { background: #f3f4f6; }

/* ----- Форм ----- */
.form-label { display: block; font-size: .875rem; font-weight: 500; color: #374151; margin-bottom: .25rem; }
.form-control {
  width: 100%; padding: .5rem .75rem; font-size: .875rem; line-height: 1.25rem; color: #111827;
  background: #fff; border: 1px solid #d1d5db; border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .2); }
.form-hint { margin-top: .25rem; font-size: .75rem; color: #6b7280; }

/* ----- Жижиг тэмдэглэгээ ----- */
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; font-size: .75rem; font-weight: 500; border-radius: 9999px; background: #f3f4f6; color: #374151; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-yellow { background: #fef3c7; color: #92400e; }

/* ----- Хоосон төлөв ----- */
.empty-state { padding: 2.5rem 1rem; text-align: center; color: #6b7280; font-size: .875rem; }

/* ===== DataTable ===== */
.dt-table thead tr:first-child th { background: #f9fafb; font-weight: 600; color: #374151; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.dt-table tbody tr { border-top: 1px solid #e5e7eb; }
.dt-table tbody tr:hover { background: #f9fafb; }
.dt-sortable:hover { background: #f3f4f6; }
td.dt-actions { white-space: nowrap; padding: 6px 12px; }
td.dt-actions > * { display: inline-flex; align-items: center; }
td.dt-actions > * + * { margin-left: 10px; }
td.dt-actions a, td.dt-actions button { vertical-align: middle; }

/* ----- Icon-ий өнгөт дэвсгэр (stat_card, action_tile) ----- */
.tone-blue { background: #dbeafe; color: #1d4ed8; }
.tone-sky { background: #e0f2fe; color: #0369a1; }
.tone-indigo { background: #e0e7ff; color: #4338ca; }
.tone-purple { background: #f3e8ff; color: #7e22ce; }
.tone-green { background: #dcfce7; color: #15803d; }
.tone-teal { background: #ccfbf1; color: #0f766e; }
.tone-amber { background: #fef3c7; color: #b45309; }
.tone-rose { background: #ffe4e6; color: #be123c; }
.tone-red { background: #fee2e2; color: #b91c1c; }
.tone-gray { background: #f3f4f6; color: #374151; }

/* Мөр доторх устгах товч — хэт хашгирахгүй, гэхдээ аюултай гэдэг нь тод */
.btn.btn-outline-danger { background: #fff; color: var(--c-danger); border-color: #fca5a5; }
.btn.btn-outline-danger:hover:not(:disabled) { background: #fef2f2; border-color: var(--c-danger); }

/* Файл сонгох товчийг бусад товчтой нийцүүлэх */
input[type="file"] { font-size: .875rem; color: #4b5563; }
input[type="file"]::file-selector-button {
  margin-right: .75rem; padding: .375rem .75rem; font-size: .8125rem; font-weight: 500;
  color: #374151; background: #fff; border: 1px solid #d1d5db; border-radius: var(--radius); cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
input[type="file"]::file-selector-button:hover { background: #f9fafb; border-color: #9ca3af; }