/* Bổ sung cho giao diện Metronic (demo3): chỉ những thứ bộ CSS đã biên dịch không có sẵn. */

/* Khung trang: không phụ thuộc lớp responsive của Tailwind để chạy tốt ở mọi kích thước màn hình. */
:root { --c360-header: 58px; --c360-sidebar: 58px; }
body.c360-body { margin: 0; background: var(--color-muted, #f9f9f9); height: 100vh; overflow: hidden; }
.c360-header { position: fixed; top: 0; left: 0; right: 0; height: var(--c360-header); display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0 1rem 0 0; background: var(--color-muted, #f9f9f9); z-index: 10; }
.c360-brand { display: flex; align-items: center; min-width: 0; }
.c360-brand .logo { display: flex; align-items: center; padding: 0 0.75rem 0 1rem; flex: none; }
.c360-logo { height: 34px; width: auto; display: block; }
.c360-brand-sep { width: 1px; height: 22px; background: var(--color-input, #dbdfe9); margin-right: 0.75rem; }
.c360-brand h3 { font-size: 1rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c360-sidebar { position: fixed; top: var(--c360-header); bottom: 0; left: 0; width: var(--c360-sidebar); display: flex; flex-direction: column;
  align-items: center; gap: 0.625rem; padding-top: 0.25rem; z-index: 20; }
.c360-content { margin: var(--c360-header) 0.75rem 0.75rem var(--c360-sidebar); height: calc(100vh - var(--c360-header) - 0.75rem); overflow-y: auto;
  border-radius: 0.75rem; border: 1px solid var(--color-input, #dbdfe9); background: var(--color-background, #fff); padding-top: 1.5rem; min-width: 0; }
.c360-content main { min-height: 100%; }
@media (max-width: 640px) { .c360-brand h3 { display: none; } .c360-user { display: none; } }

.c360-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.c360-row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.c360-col { display: flex; flex-direction: column; gap: 0.5rem; }
.c360-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.c360-grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.c360-page { padding: 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.c360-title { font-size: 1.125rem; font-weight: 500; }
.c360-sub { color: var(--color-muted-foreground, #78829d); font-size: 0.8125rem; }
.c360-muted { color: var(--color-muted-foreground, #78829d); }
.c360-grow { flex: 1 1 auto; min-width: 0; }
.c360-narrow { max-width: 28rem; }
.c360-right { margin-left: auto; }
.c360-hidden { display: none !important; }
.c360-wrap { overflow-wrap: anywhere; }
.c360-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.c360-stat { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.c360-stat b { font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
.c360-stat.warn b { color: #f6a000; }
.c360-stat.danger b { color: #f8285a; }
.c360-stat a { text-decoration: none; color: inherit; }

.c360-table-wrap { overflow-x: auto; }
.c360-table-wrap table { width: 100%; }
.c360-table-wrap td, .c360-table-wrap th { vertical-align: top; }

.c360-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--color-border, #e5e7ef); margin: 0 1.25rem; overflow-x: auto; }
.c360-tab { background: none; border: 0; padding: 0.75rem 0; cursor: pointer; font-size: 0.875rem; color: var(--color-secondary-foreground, #4b5675);
  border-bottom: 2px solid transparent; white-space: nowrap; }
.c360-tab.active { color: var(--color-mono, #071437); font-weight: 500; border-bottom-color: var(--color-mono, #071437); }

.c360-dialog { margin: auto; max-height: 90vh; overflow-y: auto; border: 1px solid var(--color-border, #e5e7ef); border-radius: 0.75rem; padding: 0; width: min(36rem, 94vw);
  background: var(--color-background, #fff); color: var(--color-foreground, #071437); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }
.c360-dialog::backdrop { background: rgba(7, 20, 55, 0.45); }
.c360-dialog > form, .c360-dialog > div { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; }
.c360-dialog h3 { font-size: 1rem; font-weight: 600; }
.c360-dialog .actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; }

.c360-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(26rem, 92vw); }
.c360-toast { padding: 0.75rem 1rem; border-radius: 0.5rem; background: #071437; color: #fff; font-size: 0.875rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.c360-toast.error { background: #f8285a; }
.c360-toast.ok { background: #17c653; }

.c360-evidence { font-size: 0.8125rem; color: var(--color-muted-foreground, #78829d); border-left: 3px solid var(--color-border, #e5e7ef); padding-left: 0.625rem; margin-top: 0.25rem; }
.c360-item { display: flex; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--color-border, #e5e7ef); }
.c360-item:last-child { border-bottom: 0; }
.c360-item .body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.c360-empty { padding: 2rem 1.25rem; text-align: center; color: var(--color-muted-foreground, #78829d); }
.c360-banner { padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; background: #fff8dd; color: #8a6100; border: 1px solid #ffe28a; }
.c360-banner.info { background: #e9f3ff; color: #1b5fb0; border-color: #b7d7ff; }
.c360-banner.danger { background: #ffeef3; color: #b3153f; border-color: #ffc2d2; }
.c360-check { display: inline-flex; gap: 0.375rem; align-items: center; font-size: 0.8125rem; }

.c360-matrix td, .c360-matrix th { padding: 0.375rem 0.5rem; white-space: nowrap; }
.c360-matrix select { min-width: 7.5rem; }

.c360-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: var(--color-muted, #f9f9f9); }

[data-loading="true"] { opacity: 0.55; pointer-events: none; }

/* Phân trang */
.c360-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1.25rem; border-top: 1px solid var(--color-border, #e5e7eb); }
.c360-pager-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.c360-pager-btn { min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem;
  border: 1px solid transparent; background: transparent; color: inherit; font-size: 0.8125rem; cursor: pointer; }
.c360-pager-btn:hover:not(:disabled):not(.is-active) { background: var(--color-muted, #f1f1f4); }
.c360-pager-btn.is-active { background: var(--color-primary, #1b84ff); color: #fff; font-weight: 600; cursor: default; }
.c360-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.c360-pager-gap { padding: 0 0.25rem; color: var(--color-muted-foreground, #78829d); }
.c360-pager-size { display: flex; align-items: center; gap: 0.5rem; }
.c360-pager-size select { width: auto; min-width: 4.5rem; }

/* Avatar và menu tài khoản */
.c360-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 9999px; color: #fff; font-weight: 600; letter-spacing: 0.02em; user-select: none; }
.c360-userbadge { display: flex; align-items: center; gap: 0.625rem; min-width: 0; max-width: 18rem; }
.c360-sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 0.625rem; padding-bottom: 1rem; }

.c360-dialog.wide { width: min(60rem, 94vw); max-width: 94vw; }