/* ===========================================================================
 * web.css — phan BO SUNG cho style.css (chep nguyen tu app Tauri).
 * style.css lo mau sac / bien CSS / .btn-action / .clamp-cell; file nay lo
 * nhung thu app desktop khong can: thanh tab, bang cuon ngang tren dien thoai,
 * trang dang nhap, trang thai rong.
 *
 * Nguyen tac: KHONG sua style.css. Doi bang cach them o day, de sau nay chep
 * lai style.css tu Tauri van khong mat gi.
 * =========================================================================== */

body {
    margin: 0;
    padding: 0;
    background: var(--bg-primary, #16161e);
    color: var(--text-primary, #e5e7eb);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* --- Thanh tren: dieu huong + thoat ------------------------------------- */
.tw-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 12px;
    background: var(--bg-card, #1e1e2a);
    border-bottom: 1px solid var(--border, #2d2d3d);
    position: sticky; top: 0; z-index: 20;
}
.tw-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tw-tab {
    padding: 8px 14px; border-radius: 6px; text-decoration: none; font-size: 14px;
    color: var(--text-secondary, #9ca3af); background: transparent;
    border: 1px solid var(--border, #2d2d3d);
}
.tw-tab.active { background: var(--accent, #6366f1); color: #fff; border-color: var(--accent, #6366f1); }
.tw-logout { color: var(--text-secondary, #9ca3af); text-decoration: none; font-size: 13px; white-space: nowrap; }
.tw-logout:hover { color: var(--error, #ef4444); }

/* --- Dong moc thoi gian -------------------------------------------------- */
.tw-meta {
    padding: 6px 12px; font-size: 12px;
    color: var(--text-secondary, #9ca3af);
    border-bottom: 1px solid var(--border, #2d2d3d);
}
/* Du lieu cu = service co the da chet -> phai noi bat, khong chi la chu xam. */
.tw-meta.stale {
    background: rgba(245, 158, 11, .15);
    color: var(--warning, #f59e0b);
    font-weight: 600;
}
.tw-offline {
    display: none; margin: 8px 12px; padding: 8px 12px; border-radius: 6px;
    background: rgba(239, 68, 68, .15); color: var(--error, #ef4444); font-size: 13px;
}

.tw-body { padding: 12px; }

/* --- Thanh cong cu (chi con combo Mode) --------------------------------- */
.tw-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tw-modeform { display: flex; align-items: center; gap: 8px; }
.tw-modeform label { font-size: 13px; color: var(--text-secondary, #9ca3af); }
.tw-modeform select {
    background: var(--bg-card, #1e1e2a); color: var(--text-primary, #e5e7eb);
    border: 1px solid var(--border, #2d2d3d); border-radius: 6px;
    padding: 7px 10px; font-size: 14px; min-height: 38px;   /* du lon de cham tren dien thoai */
}
.tw-modehint { font-size: 12px; color: var(--text-secondary, #9ca3af); }

/* --- Nhom theo PIC (trang Update Ticket) -------------------------------- */
.tw-group { margin-bottom: 20px; }
.tw-group-title { font-size: 15px; margin: 0 0 8px; color: var(--text-primary, #e5e7eb); }
.tw-count { font-size: 12px; color: var(--text-secondary, #9ca3af); font-weight: 400; }

/* --- Bang: giu dang bang nhu app, cho cuon ngang tren man hep -----------
 * Co y KHONG doi sang the "card" tren mobile: yeu cau la giong app, va 11-13 cot
 * ep thanh card se khac han thu nguoi dung quen nhin tren may ban.
 * ------------------------------------------------------------------------ */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border, #2d2d3d);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-card, #1e1e2a);
}
table.tw-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 13px; }
table.tw-table th {
    padding: 8px; text-align: left; font-weight: 600; font-size: 12px;
    color: var(--text-secondary, #9ca3af);
    border-bottom: 1px solid var(--border, #2d2d3d);
    background: var(--bg-card, #1e1e2a);
    position: sticky; top: 0; z-index: 2;   /* tieu de dinh khi cuon doc */
    white-space: nowrap;
}
table.tw-table td {
    padding: 8px; vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
table.tw-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
td.nowrap, th.nowrap { white-space: nowrap; }
td.malsy-cell { white-space: pre; }          /* giu xuong dong giua Test/Main */
td.files-cell { white-space: pre; font-size: 12px; max-width: 260px; overflow: hidden; }

/* Mau dong theo client (app goc: MainForm.cs:569-579). Dung mau trong suot cho
   hop nen toi, thay vi mau dac cua WinForms. */
tr.row-sh2 { background: rgba(59, 130, 246, .12); }
tr.row-jp  { background: rgba(249, 115, 22, .12); }

/* --- Nhan trang thai ----------------------------------------------------- */
.tw-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px;
    background: rgba(255, 255, 255, .08); color: var(--text-primary, #e5e7eb); white-space: nowrap;
}
.tw-badge.ok  { background: rgba(34, 197, 94, .18);  color: var(--success, #22c55e); }
.tw-badge.bad { background: rgba(239, 68, 68, .18);  color: var(--error, #ef4444); }
.tw-dash { color: var(--text-secondary, #9ca3af); }

/* --- Trang thai rong ----------------------------------------------------- */
.tw-empty {
    padding: 32px 16px; text-align: center;
    background: var(--bg-card, #1e1e2a);
    border: 1px solid var(--border, #2d2d3d);
    border-radius: var(--radius-md, 8px);
}
.tw-empty h2 { margin: 0 0 8px; font-size: 16px; }
.tw-empty p  { margin: 4px 0; font-size: 13px; color: var(--text-secondary, #9ca3af); }

/* --- Dang nhap ----------------------------------------------------------- */
.tw-login-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.tw-login {
    width: 100%; max-width: 340px; padding: 24px;
    background: var(--bg-card, #1e1e2a);
    border: 1px solid var(--border, #2d2d3d);
    border-radius: var(--radius-md, 8px);
}
.tw-login h1 { margin: 0 0 4px; font-size: 20px; }
.tw-login-sub { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary, #9ca3af); }
.tw-login input[type=password] {
    width: 100%; box-sizing: border-box; padding: 12px;
    margin-bottom: 12px; font-size: 16px;      /* >=16px de iOS khong tu phong to trang */
    background: var(--bg-primary, #16161e); color: var(--text-primary, #e5e7eb);
    border: 1px solid var(--border, #2d2d3d); border-radius: 6px;
}
.tw-login button { width: 100%; padding: 12px; font-size: 15px; }
.tw-login-error {
    padding: 8px 12px; margin-bottom: 12px; border-radius: 6px; font-size: 13px;
    background: rgba(239, 68, 68, .15); color: var(--error, #ef4444);
}

/* --- Man hinh hep -------------------------------------------------------- */
@media (max-width: 768px) {
    .tw-body { padding: 8px; }
    .tw-topbar { padding: 8px; }
    .tw-tab { padding: 7px 10px; font-size: 13px; }
    table.tw-table { font-size: 12px; }
    table.tw-table th, table.tw-table td { padding: 6px; }
    /* 20ch cua .clamp-inner (style.css) qua rong tren dien thoai */
    .clamp-inner { width: 14ch !important; }
    td.files-cell { max-width: 160px; }
}