/* Tối ưu điện thoại (admin) — nạp SAU style.css. Mọi luật đặt trong @media khổ hẹp; desktop không đổi. */

/* ==========================================================================
   NGƯỜI DÙNG · NHẬT KÝ · CÀI ĐẶT · MODAL TÀI KHOẢN — khổ điện thoại (≤760px)
   Chỉ ghi đè hiển thị; không đổi id/class JS dùng. Selector đều bắt đầu bằng
   #page-users / #page-logs / #page-settings / #modal nên không lan sang trang khác.
   ========================================================================== */

@media (max-width:760px){

  /* =====================================================================
     NGƯỜI DÙNG — mỗi user là một thẻ lưới 4 cột:
       [STT] [avatar tên] ..................... [trạng thái]
             email
       [Cookie] [Live] [Video] [Credit/ngày]      (ô số liệu)
       [Luồng        ] [Proxy riêng   ]
       [Job hôm nay  ] [Vai trò       ]
       ───────────────────────────────────
       [↪ Đăng nhập hộ] [🔒 Khoá] / [⇅ Đổi vai trò] [🗑 Xoá]
     Thứ tự cột (thead): 1 STT · 2 User · 3 Email · 4 Vai trò · 5 Cookie ·
     6 Live · 7 Video · 8 Credit/ngày · 9 Luồng · 10 Proxy riêng ·
     11 Job hôm nay · 12 Trạng thái · 13 thao tác
     ===================================================================== */
  #page-users #users-note{margin:0 0 12px;padding:10px 12px;border-radius:10px;
    background:var(--bg2);border:1px solid var(--line);font-size:12.5px;line-height:1.55}
  #page-users #users-note:empty{display:none}

  #page-users #tbl-users tbody tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;align-items:start;padding:12px;margin:0 0 12px;border-radius:14px}
  #page-users #tbl-users tbody tr:last-child{margin-bottom:0}
  #page-users #tbl-users tbody td{grid-column:1/-1;position:static;min-width:0;min-height:0;
    padding:0;border:0;line-height:1.4;font-size:13.5px}
  #page-users #tbl-users tbody td::before{position:static;display:block;width:auto;top:auto;
    margin:0 0 4px;font-size:11.5px;line-height:15px;font-weight:500;letter-spacing:0;
    text-transform:none;color:var(--muted)}

  /* thẻ của user đang bị khoá: viền đỏ nhạt để nhận ra ngay khi lướt */
  #page-users #tbl-users tbody tr:has(> td:nth-child(12) .b-die){border-color:rgba(255,92,108,.4)}

  /* --- hàng đầu: STT + tên (chồng chung một ô lưới) + vai trò dạt phải --- */
  #page-users #tbl-users tbody td:nth-child(1),
  #page-users #tbl-users tbody td:nth-child(2),
  #page-users #tbl-users tbody td:nth-child(4){grid-row:1;align-self:center}
  #page-users #tbl-users tbody td:nth-child(1)::before,
  #page-users #tbl-users tbody td:nth-child(2)::before,
  #page-users #tbl-users tbody td:nth-child(3)::before,
  #page-users #tbl-users tbody td:nth-child(4)::before,
  #page-users #tbl-users tbody td:nth-child(13)::before{display:none}
  #page-users #tbl-users tbody td:nth-child(1){justify-self:start;line-height:0}
  #page-users #tbl-users tbody td:nth-child(2){display:flex;align-items:center;min-height:32px;
    padding:0 62px 0 34px}
  #page-users #tbl-users tbody td:nth-child(2) .u-cell{gap:10px;min-width:0;font-size:15px;
    font-weight:600;line-height:1.3;color:var(--txt)}
  #page-users #tbl-users tbody td:nth-child(2) .u-dot{flex:0 0 auto;width:32px;height:32px;
    border-radius:10px;font-size:12px}
  #page-users #tbl-users tbody td:nth-child(4){grid-column:1/-1;justify-self:end;line-height:1}
  #page-users #tbl-users tbody td:nth-child(4) .role-pill{display:inline-block;padding:4px 8px;border-radius:999px;
    background:var(--cyan-soft);font-size:10.5px;line-height:12px}

  /* --- email ngay dưới tên, thẳng mép chữ của tên --- */
  #page-users #tbl-users tbody td:nth-child(3){grid-row:2;padding-left:76px;margin-top:1px;
    font-size:12.5px;line-height:1.4}

  /* --- dải 4 ô số liệu liền một khối, vạch ngăn dọc --- */
  #page-users #tbl-users tbody td:nth-child(5){grid-column:1;grid-row:3}
  #page-users #tbl-users tbody td:nth-child(6){grid-column:2;grid-row:3}
  #page-users #tbl-users tbody td:nth-child(7){grid-column:3;grid-row:3}
  #page-users #tbl-users tbody td:nth-child(8){grid-column:4;grid-row:3}
  #page-users #tbl-users tbody td:is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8)){
    align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;align-items:center;
    margin-top:12px;padding:8px 3px;text-align:center;background:var(--panel);
    border:1px solid var(--line);border-right:0;
    font-size:15px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
  #page-users #tbl-users tbody td:nth-child(5){border-radius:10px 0 0 10px}
  #page-users #tbl-users tbody td:nth-child(8){border-right:1px solid var(--line);border-radius:0 10px 10px 0}
  #page-users #tbl-users tbody td:is(:nth-child(5),:nth-child(6),:nth-child(7),:nth-child(8))::before{
    max-width:100%;margin-bottom:5px;font-size:10.5px;line-height:14px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
  #page-users #tbl-users tbody td:nth-child(6) .badge{padding:0;gap:5px;background:none;font-size:15px}
  #page-users #tbl-users tbody td:nth-child(6) .badge::before{width:6px;height:6px}
  #page-users #tbl-users tbody td:nth-child(8) .credit-chip{font-size:14px}

  /* --- chi tiết 2 cột: nhãn trên, giá trị dưới --- */
  #page-users #tbl-users tbody td:nth-child(9){grid-column:1/3;grid-row:4;padding-right:6px}
  #page-users #tbl-users tbody td:nth-child(10){grid-column:3/5;grid-row:4;padding-left:6px}
  #page-users #tbl-users tbody td:nth-child(11){grid-column:1/3;grid-row:5;padding-right:6px}
  #page-users #tbl-users tbody td:nth-child(12){grid-column:3/5;grid-row:5;padding-left:6px}
  #page-users #tbl-users tbody td:is(:nth-child(9),:nth-child(10),:nth-child(11),:nth-child(12)){margin-top:12px}
  #page-users #tbl-users tbody td:nth-child(9) .btn{min-height:36px;padding:6px 12px;font-variant-numeric:tabular-nums}
  #page-users #tbl-users tbody td:nth-child(11) .credit-chip{font-size:13.5px}

  /* --- thao tác: lưới 2 cột nút đều, có chữ (không có hover để đọc title) --- */
  #page-users #tbl-users tbody td:nth-child(13){grid-row:6;margin-top:12px;padding-top:12px;
    border-top:1px solid var(--line)}
  #page-users #tbl-users tbody td:nth-child(13) .row-actions{display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #page-users #tbl-users tbody td:nth-child(13) .btn-icon{width:100%;min-width:0;min-height:42px;
    gap:6px;padding:8px 6px;border-radius:10px;font-size:15px;line-height:1.2;color:var(--txt)}
  #page-users #tbl-users tbody td:nth-child(13) .btn-icon::after{font-size:13.5px;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* số nút lẻ (user đang khoá: không có ↪) -> nút đầu trải hết hàng */
  #page-users #tbl-users tbody td:nth-child(13) .btn-icon:first-child:nth-last-child(odd){grid-column:1/-1}
  #page-users #tbl-users tbody td:nth-child(13) .btn-icon[title^="Đăng nhập"]::after{content:"Đăng nhập hộ"}
  #page-users #tbl-users tbody td:nth-child(13) .btn-icon[title="Khoá"]::after{content:"Khoá"}
  #page-users #tbl-users tbody td:nth-child(13) .btn-icon[title="Mở khoá"]::after{content:"Mở khoá"}
  #page-users #tbl-users tbody td:nth-child(13) .btn-icon[title="Đổi vai trò"]::after{content:"Đổi vai trò"}
  #page-users #tbl-users tbody td:nth-child(13) .btn-icon[title="Xoá"]::after{content:"Xoá"}
  #page-users #tbl-users tbody td:nth-child(13) .btn-icon[title^="Đăng nhập"]{
    background:var(--brand-soft);border-color:rgba(139,123,255,.38);color:var(--brand2)}
  #page-users #tbl-users tbody td:nth-child(13) .btn-icon[title="Xoá"]{
    color:var(--red);border-color:rgba(255,92,108,.3)}

  /* =====================================================================
     NHẬT KÝ — bộ lọc lưới 3×2 (thấy đủ 6 mục), dòng log: giờ nhỏ ở trên,
     nội dung dưới trải hết bề ngang, chuỗi mã/cookie dài tự ngắt.
     ===================================================================== */
  #page-logs .panel-head{flex-wrap:wrap}
  #page-logs #log-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;
    width:100%;margin:0;padding:4px;overflow:visible;
    -webkit-mask-image:none;mask-image:none;animation:none}
  #page-logs #log-filters .seg-btn{justify-content:center;min-width:0;min-height:38px;
    padding:6px 4px;font-size:13px;white-space:nowrap}

  #page-logs .log-feed{gap:0}
  #page-logs .log-item{display:grid;grid-template-columns:3px minmax(0,1fr);column-gap:11px;row-gap:3px;
    padding:10px 2px;border-radius:0;border-bottom:1px solid var(--line)}
  #page-logs .log-item:last-child{border-bottom:0}
  #page-logs .log-item:hover{background:none}
  #page-logs .log-item .lb{grid-column:1;grid-row:1/3;width:3px;border-radius:3px}
  #page-logs .log-item .lt{grid-column:2;grid-row:1;margin:0;padding:0;font-size:11.5px;line-height:15px;
    font-variant-numeric:tabular-nums}
  #page-logs .log-item > div:not(.lb):not(.lt){grid-column:2;grid-row:2;min-width:0;font-size:13.5px;
    line-height:1.5;overflow-wrap:anywhere;word-break:break-word}
  #page-logs .log-item.error > div:not(.lb):not(.lt){color:#ffc2c8}

  /* =====================================================================
     CÀI ĐẶT
     ===================================================================== */
  /* thẻ trạng thái: gọn hơn, bỏ khoảng trống thừa đáy panel */
  #page-settings #st-cards{gap:8px;margin-bottom:0}
  #page-settings #st-cards .stat{padding:11px 12px}
  #page-settings #st-cards .s-val{font-size:19px}
  #page-settings #st-cards .s-sub{font-size:11.5px}
  #page-settings .panel-head > .muted{font-size:12.5px;line-height:1.45;min-width:0;overflow-wrap:anywhere}

  /* nhóm cấu hình: tiêu đề chạm dễ, nhãn trên – ô dưới – mô tả nhỏ */
  #page-settings .set-group{border-radius:12px}
  #page-settings .set-group>summary{min-height:48px;padding:12px 14px;font-size:14.5px}
  #page-settings .set-items{padding:0 14px 4px}
  #page-settings .set-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0;border-bottom-style:solid}
  #page-settings .set-label strong{font-size:14px;line-height:1.35;margin-bottom:2px}
  #page-settings .set-label code{font-size:11px;overflow-wrap:anywhere}
  #page-settings .set-label .tagx{margin:3px 0 0 2px}
  #page-settings .set-label .set-hint{font-size:12.5px;line-height:1.5;margin-top:4px}
  #page-settings .set-field{padding-top:0;min-width:0}
  /* chữ 16px: iOS không tự phóng to khi chạm vào ô JSON */
  #page-settings .set-field textarea{font-size:16px;min-height:72px}

  /* công tắc bật/tắt: nằm bên phải nhãn như màn cài đặt điện thoại */
  /* (công tắc neo góc phải hàng tên; mã + mô tả bên dưới vẫn trải hết bề ngang) */
  #page-settings .set-row:has(> .set-field > .switch){position:relative}
  #page-settings .set-row:has(> .set-field > .switch) > .set-field{position:absolute;top:10px;right:0}
  #page-settings .set-row:has(> .set-field > .switch) .set-label strong{padding-right:60px}
  #page-settings .set-field > .switch{padding:1px 0}

  /* nút Lưu / Bỏ: chia đều; khi có thay đổi thì dính đáy màn hình */
  #page-settings #settings-form > .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;margin:12px 0 0;padding:0}
  #page-settings #btn-reset-settings{grid-column:1;grid-row:2}
  #page-settings #btn-save-settings{grid-column:2;grid-row:2}
  #page-settings #settings-dirty{grid-column:1/-1;grid-row:1;text-align:center;font-size:12.5px;
    line-height:16px;font-variant-numeric:tabular-nums}
  #page-settings #settings-dirty:empty{display:none}
  /* bottom âm = bù padding đáy của .content (sticky tính theo mép trong padding) để thanh chạm đáy màn */
  #page-settings #settings-form > .toolbar:has(#btn-reset-settings:enabled){position:sticky;z-index:3;
    bottom:calc(-1 * (var(--pady, 14px) + var(--sab, 0px)));
    margin:12px -14px 0;background:var(--panel);
    /* !important: thanh này có style="padding:0" viết thẳng trong features.js */
    padding:10px 14px calc(10px + var(--sab, 0px)) !important;
    border-top:1px solid var(--line);box-shadow:0 -10px 24px rgba(0,0,0,.35)}

  /* bảng sao lưu: thẻ 2 dòng — thời điểm / "8 file · 1.8 MB" — nút Phục hồi bên phải */
  #page-settings #tbl-backups tbody tr{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
    column-gap:6px;row-gap:2px;align-items:center;padding:10px 12px;margin:0 0 8px}
  #page-settings #tbl-backups tbody tr:last-child{margin-bottom:0}
  #page-settings #tbl-backups tbody td{position:static;min-width:0;min-height:0;padding:0;border:0;
    font-variant-numeric:tabular-nums}
  #page-settings #tbl-backups tbody td::before{display:none}
  #page-settings #tbl-backups tbody td:nth-child(1){grid-column:1/4;grid-row:1;font-size:14px;font-weight:600}
  #page-settings #tbl-backups tbody td:nth-child(2){grid-column:1;grid-row:2;font-size:12.5px;color:var(--muted)}
  #page-settings #tbl-backups tbody td:nth-child(2)::after{content:" file"}
  #page-settings #tbl-backups tbody td:nth-child(3){grid-column:2;grid-row:2;font-size:12.5px;color:var(--muted)}
  #page-settings #tbl-backups tbody td:nth-child(3)::before{display:inline;position:static;content:"·";
    margin-right:6px;width:auto;color:var(--muted2);font-size:12.5px}
  #page-settings #tbl-backups tbody td:nth-child(4){grid-column:4;grid-row:1/3}
  #page-settings #tbl-backups tbody td:nth-child(4) .btn{min-height:40px;padding:8px 14px}
  #page-settings #tbl-backups tbody td[colspan]{grid-column:1/-1;grid-row:auto}

  /* =====================================================================
     MODAL TÀI KHOẢN — khối danh tính gọn đầu sheet
     ===================================================================== */
  #modal .acct-head{display:flex;flex-direction:column;gap:2px;margin:0 0 4px;padding:12px 14px;
    border-radius:12px;background:var(--bg2);border:1px solid var(--line);line-height:1.45}
  #modal .acct-head strong{font-size:15px}
  #modal .acct-head .role-pill{margin-left:6px}
  #modal .acct-head .muted{font-size:13px;overflow-wrap:anywhere}
}