/* ============================================================================
   style.css — Template ADMIN Teltonika
   Override theme AP10 (input toi) cho khu admin/login -> nen sang, hien dai.
   Base .list/.button/.row tu OS.css shared; day chi phu + override.
   ============================================================================ */
:root {
    --tel-primary: #1976d2;
    --tel-primary-dark: #1257a0;
    --tel-dark: #0b1f33;
    --tel-border: #dfe4ea;
    --tel-text: #2b3440;
    --tel-muted: #8a94a0;
    --tel-bg: #eef1f5;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "SVN-Circular", "Segoe UI", Arial, sans-serif; background: var(--tel-bg); color: var(--tel-text); }

/* ---------- Header + menu co dinh ---------- */
.az-header { background: var(--tel-dark); box-shadow: 0 2px 8px rgba(0,0,0,.18); position: sticky; top: 0; z-index: 100; }
.az-header-inner { display: flex; align-items: center; gap: 24px; max-width: 1440px; margin: 0 auto; padding: 0 20px; height: 56px; }
.az-logo { color: #fff; text-decoration: none; font-size: 17px; white-space: nowrap; letter-spacing: .3px; }
.az-logo b { color: #4fc3f7; }
.az-logo span { color: #9fb3c8; font-size: 12px; margin-left: 6px; }
.az-menu { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; flex: 1; }
.az-menu a { display: block; color: #c3d3e2; text-decoration: none; padding: 8px 14px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all .15s; }
.az-menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
.az-menu a.active { background: var(--tel-primary); color: #fff; box-shadow: 0 2px 6px rgba(25,118,210,.4); }
.az-header-right { display: flex; align-items: center; gap: 14px; }
.az-person { color: #c3d3e2; font-size: 13px; }
.az-logout { color: #ff8a80; text-decoration: none; font-size: 13px; cursor: pointer; padding: 5px 10px; border-radius: 5px; }
.az-logout:hover { background: rgba(255,138,128,.15); }

/* ---------- Vung noi dung ---------- */
.az-main { max-width: 1440px; margin: 20px auto; padding: 0 20px; }
.az-main .main { background: #fff; border-radius: 10px; padding: 18px; box-shadow: 0 2px 10px rgba(20,40,70,.06); }
.az-frame { max-width: 100%; margin: 0; padding: 16px; }
.az-main h1 { font-size: 18px; margin: 0 0 16px; color: var(--tel-text); }
.az-home-empty { text-align: center; color: var(--tel-muted); padding: 40px; }

/* Search bar */
.az-main .search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--tel-border); }
.az-main .search .right { margin-left: auto; }

/* Inputs/selects — OVERRIDE dark theme -> sang */
.az-main input[type="text"], .az-main input[type="number"], .az-main input[type="password"],
.az-main select, .az-main textarea {
    background: #fff !important; color: var(--tel-text) !important;
    border: 1px solid var(--tel-border) !important; border-radius: 6px !important;
    padding: 8px 10px !important; font-size: 14px; outline: none; height: auto; min-height: 36px;
}
.az-main input:focus, .az-main select:focus, .az-main textarea:focus { border-color: var(--tel-primary) !important; box-shadow: 0 0 0 3px rgba(25,118,210,.12) !important; }
.az-main label { font-size: 13px; color: var(--tel-muted); }
.az-main .row { margin-bottom: 12px; }
.az-main .row.label180 > label { display: inline-block; width: 180px; vertical-align: middle; }
.az-main .checkbox { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 14px; color: var(--tel-text); }
.az-main .ib { display: inline-block; }
.az-main .red { color: #d32f2f; }

/* Buttons */
.az-main button {
    background: var(--tel-primary); color: #fff; border: none; border-radius: 6px;
    padding: 9px 18px; font-size: 14px; cursor: pointer; transition: background .15s;
}
.az-main button:hover { background: var(--tel-primary-dark); }
.button.mini { display: inline-block; padding: 4px 10px; border-radius: 5px; background: #eef1f5; color: var(--tel-text); font-size: 12px; text-decoration: none; border: 1px solid var(--tel-border); cursor: pointer; line-height: 1.4; }
.button.mini:hover { background: #e3e8ef; }
.button.mini.green { background: #2e7d32; color: #fff; border-color: #2e7d32; }

/* Table */
.az-main table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
.az-main table.list thead th { background: var(--tel-primary); color: #fff; text-align: left; padding: 10px; font-weight: 500; font-size: 13px; white-space: nowrap; }
.az-main table.list thead th:first-child { border-radius: 6px 0 0 0; }
.az-main table.list thead th:last-child { border-radius: 0 6px 0 0; }
.az-main table.list tbody td { padding: 8px 10px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
.az-main table.list tbody tr:hover { background: #f7fafd; }
.az-main table.list tbody tr.deleted { opacity: .5; }
.az-main .small { font-size: 12px; color: var(--tel-muted); }
.az-main .center { text-align: center; }
.az-main code { background: #f0f3f7; padding: 2px 6px; border-radius: 4px; font-size: 12px; color: #b5372f; }

/* Paging */
.az-main .paging { margin-top: 14px; text-align: center; }
.az-main .paging a { margin: 0 2px; }
.az-main .paging a.active { background: var(--tel-primary); color: #fff; border-color: var(--tel-primary); }

/* ---------- Login page ---------- */
.az-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0b1f33 0%, #12395f 55%, #1e5fa8 130%); padding: 20px; }
.az-login-box { background: #fff; border-radius: 14px; padding: 30px 34px; width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.az-login-brand { text-align: center; font-size: 22px; margin-bottom: 4px; }
.az-login-brand b { color: var(--tel-primary); }
.az-login-brand span { color: var(--tel-muted); font-size: 14px; }

/* PersonLogin (.az-login.AZPersonLogin > .form) — override */
.az-login-box .form h2 { color: var(--tel-text) !important; font-size: 15px; text-align: left; margin: 20px 0 14px; letter-spacing: 1px; font-weight: 600; border-bottom: 2px solid #eef1f5; padding-bottom: 10px; }
.az-login-box .form input {
    width: 100%; margin-bottom: 14px; background: #fff !important; color: var(--tel-text) !important;
    border: 1px solid var(--tel-border) !important; border-radius: 8px !important; padding: 11px 12px !important; font-size: 15px; outline: none;
}
.az-login-box .form input:focus { border-color: var(--tel-primary) !important; box-shadow: 0 0 0 3px rgba(25,118,210,.12) !important; }
.az-login-box .password-wrap { position: relative; }
.az-login-box .password-wrap input { padding-right: 40px !important; }
.az-login-box .password-toggle { position: absolute; right: 12px; top: 12px; color: var(--tel-muted); cursor: pointer; }
.az-login-box .form button[name="Submit"], .az-login-box .az-btn { width: 100%; background: var(--tel-primary); color: #fff; border: none; border-radius: 8px; padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; }
.az-login-box .form button[name="Submit"]:hover, .az-login-box .az-btn:hover { background: var(--tel-primary-dark); }
.az-login-box .forgot { display: inline-block; margin-top: 12px; color: var(--tel-muted); text-decoration: none; font-size: 13px; }
.az-login-box .forgot:hover { color: var(--tel-primary); }
/* Admin khong can dang ky/trang chu */
.az-login-box .reg { display: none; }

/* Flash live update (DeviceState) */
.az-flash { animation: azflash 1s ease; }
@keyframes azflash { 0% { background: #fff59d; } 100% { background: transparent; } }