/* ==========================================================================
   AWACO — شیوه‌نامهٔ ظاهری
   --------------------------------------------------------------------------
   پالت «اتاق کنترل»: پترول عمیق، برنجی، قرمز سیگنال.
   
   منطق رنگ در این سامانه معنا دارد و تزئینی نیست:
     • قرمز سیگنال  = خروجی فعال / هشدار برقرار
     • سبز عمیق     = خروجی خاموش / وضعیت عادی
     • خاکستری      = نامعلوم، برد در دسترس نیست
     • برنجی        = عملیات نیازمند توجه (ذخیره، ایجاد)
   هرگز قرمز را برای چیزی جز «فعال بودن خروجی» به کار نبرید؛ اپراتور باید
   بتواند از آن‌سوی اتاق فقط با دیدن رنگ، وضعیت را بخواند.

   نسبت به نسخهٔ اول: اشباع رنگ‌ها پایین آمده، سایه‌های رنگی به سایهٔ خنثی
   تبدیل شده، شعاع گوشه‌ها کم شده و انیمیشن جهشی حذف شده است.
   ========================================================================== */

@font-face {
    font-family: 'YekanNewFace';
    src: url('../fonts/YekanNewFaceD4.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'YekanNewFace';
    src: url('../fonts/YekanNewFaceD4.ttf') format('truetype');
    font-weight: bold;
    font-display: swap;
}

:root {
    /* ---------- پالت ---------- */
    --primary:        #1F4E68;   /* پترول عمیق — رنگ اصلی رابط */
    --primary-light:  #2C6A8B;
    --primary-dark:   #123448;
    --primary-bg:     #ECF2F6;

    --accent:         #C08A2E;   /* برنجی — عملیات اصلی */
    --accent-light:   #D8A650;
    --accent-dark:    #96691C;

    --coral:          #B3261E;   /* قرمز سیگنال — خروجی فعال */
    --coral-light:    #CE3F35;
    --coral-dark:     #8A1C16;

    --cream:          #F6F8FA;   /* سطح ورودی‌ها */
    --sky:            #35719B;

    --surface:        #EFF3F6;
    --card:           #FFFFFF;

    --success:        #1C7A55;   /* سبز عمیق — خروجی خاموش */
    --error:          #B3261E;
    --warning:        #A9660C;

    --ink:            #131E26;
    --ink-soft:       #566874;
    --line:           #D6DEE5;

    /* ---------- فاصله (پایه ۸) ---------- */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 12px;
    --sp-lg: 16px;
    --sp-xl: 24px;
    --sp-2xl: 32px;

    /* ---------- شعاع ---------- */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-xl: 14px;
    --r-round: 999px;

    /* ---------- سایه‌ها ----------
       خنثی و کم‌عمق. سایهٔ رنگیِ درخشان به رابط حس «بازی» می‌داد. */
    --sh-sm:     0 1px 2px  rgba(15,30,40,.08);
    --sh-md:     0 2px 6px  rgba(15,30,40,.10);
    --sh-lg:     0 8px 24px rgba(15,30,40,.16);
    --sh-card:   0 1px 3px  rgba(15,30,40,.10);
    --sh-teal:   0 2px 6px  rgba(18,52,72,.28);
    --sh-coral:  0 2px 8px  rgba(179,38,30,.30);
    --sh-accent: 0 2px 8px  rgba(150,105,28,.28);
    --sh-sky:    0 2px 8px  rgba(53,113,155,.25);
    --sh-focus:  0 0 0 3px  rgba(31,78,104,.18);

    /* حرکت آرام و قاطع، بدون جهش */
    --bounce: cubic-bezier(.2,.7,.3,1);
}

/* ========================================================================== */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'YekanNewFace', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
    background: var(--surface);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.8;
    direction: rtl;
}

a { color: var(--primary-dark); text-decoration: none; }
a:hover { color: var(--primary); }

h1, h2, h3, h4 { margin: 0 0 var(--sp-md); font-weight: 800; letter-spacing: -.2px; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }

.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; direction: ltr; unicode-bidi: embed; }

/* ---------------------------- چیدمان ------------------------------------ */

.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-lg); }

.navbar {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #fff;
    box-shadow: var(--sh-teal);
    position: sticky; top: 0; z-index: 50;
}
.navbar .container { display: flex; align-items: center; gap: var(--sp-lg); height: 60px; }
.navbar .brand { display: flex; align-items: center; gap: var(--sp-sm); font-weight: 800; font-size: 17px; color: #fff; }
.navbar .brand .mark {
    width: 32px; height: 32px; border-radius: var(--r-md);
    background: var(--accent); color: var(--primary-dark);
    display: grid; place-items: center; font-size: 18px;
    box-shadow: var(--sh-accent);
}
.navbar nav { display: flex; gap: var(--sp-xs); margin-inline-start: auto; flex-wrap: wrap; }
.navbar nav a {
    color: rgba(255,255,255,.88); padding: 7px 13px; border-radius: var(--r-round);
    font-size: 14px; transition: .18s;
}
.navbar nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.navbar nav a.active { background: var(--accent); color: var(--primary-dark); font-weight: 800; }

.navbar .user { display: flex; align-items: center; gap: var(--sp-sm); font-size: 14px; }
.navbar .avatar {
    width: 34px; height: 34px; border-radius: var(--r-round);
    background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 15px;
}

.main { padding: var(--sp-xl) 0 60px; }

.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-lg); flex-wrap: wrap; margin-bottom: var(--sp-lg);
}
.page-head h1 { margin: 0; }
.page-head .actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }

/* ---------------------------- کارت ------------------------------------- */

.card {
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card);
    overflow: hidden;
    margin-bottom: var(--sp-lg);
}
.card-head {
    background: var(--primary);
    color: #fff;
    padding: var(--sp-md) var(--sp-lg);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
    font-weight: 800;
}
.card-body { padding: var(--sp-lg); }
.card-foot { padding: var(--sp-md) var(--sp-lg); border-top: 1px solid var(--line); background: #F7FAFC; }

/* عنوان بخش با کادر خط‌چین — از دیزاین‌سیستم */
.section-title {
    font-weight: 800; font-size: 15px; color: var(--primary-dark);
    border-bottom: 2px dashed var(--line);
    padding-bottom: var(--sp-sm); margin: var(--sp-xl) 0 var(--sp-md);
    display: flex; align-items: center; gap: var(--sp-sm);
}
.section-title:first-child { margin-top: 0; }

/* ---------------------------- آمار ------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-md); margin-bottom: var(--sp-xl); }
.stat {
    background: var(--card); border-radius: var(--r-lg); padding: var(--sp-lg);
    box-shadow: var(--sh-card); border-inline-start: 5px solid var(--primary-light);
}
.stat .label { font-size: 13px; color: var(--ink-soft); }
.stat .value { font-size: 28px; font-weight: 800; color: var(--primary-dark); line-height: 1.3; }
.stat.is-alarm { border-inline-start-color: var(--coral); }
.stat.is-alarm .value { color: var(--coral-dark); }
.stat.is-online { border-inline-start-color: var(--success); }
.stat.is-accent { border-inline-start-color: var(--accent); }

/* ---------------------------- دکمه‌ها ---------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700;
    padding: 9px 18px; border-radius: var(--r-md); min-height: 40px;
    transition: transform .15s var(--bounce), box-shadow .15s, background .15s;
    background: var(--primary); color: #fff; box-shadow: var(--sh-teal);
    white-space: nowrap;
}
.btn:hover { background: var(--primary-light); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-accent { background: var(--accent); color: #fff; box-shadow: var(--sh-accent); }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }

.btn-danger  { background: var(--coral); box-shadow: var(--sh-coral); }
.btn-danger:hover { background: var(--coral-light); }

.btn-success { background: var(--success); box-shadow: 0 2px 8px rgba(28,122,85,.28); }
.btn-success:hover { background: #22936B; }

.btn-sky { background: var(--sky); box-shadow: var(--sh-sky); }

.btn-ghost {
    background: transparent; color: var(--primary-dark);
    border: 1px solid var(--line); box-shadow: none;
}
.btn-ghost:hover { background: var(--primary-bg); color: var(--primary-dark); border-color: var(--primary-light); }

.btn-sm { padding: 5px 13px; min-height: 32px; font-size: 13px; }
.btn-lg { padding: 12px 28px; min-height: 48px; font-size: 16px; }
.btn-block { width: 100%; }

.btn-icon {
    width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: var(--r-md);
}

/* ---------------------------- جدول ------------------------------------- */

.table-wrap { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
    background: #F1F5F8; color: var(--primary-dark); font-weight: 800;
    text-align: right; padding: 11px var(--sp-md); border-bottom: 2px solid var(--line);
    white-space: nowrap;
}
table.data td { padding: 10px var(--sp-md); border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:hover { background: var(--primary-bg); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data .actions { display: flex; gap: 6px; justify-content: flex-start; }

.empty { padding: 48px var(--sp-lg); text-align: center; color: var(--ink-soft); }
.empty .icon { font-size: 42px; display: block; margin-bottom: var(--sp-sm); opacity: .5; }

/* ---------------------------- نشان‌ها ---------------------------------- */

.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 11px; border-radius: var(--r-round);
    font-size: 12px; font-weight: 700; line-height: 1.7;
}
.badge-on      { background: rgba(179,38,30,.12);  color: var(--coral-dark); }
.badge-off     { background: rgba(28,122,85,.12);  color: #145C42; }
.badge-online  { background: rgba(28,122,85,.12);  color: #145C42; }
.badge-offline { background: rgba(86,104,116,.16); color: #3E4E58; }
.badge-pending { background: rgba(169,102,12,.16); color: #7A4A08; }
.badge-info    { background: rgba(53,113,155,.14); color: #24506E; }
.badge-teal    { background: var(--primary-bg);    color: var(--primary-dark); }
.badge-muted   { background: #EEF2F3;              color: var(--ink-soft); }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-on  { background: var(--coral); box-shadow: 0 0 0 3px rgba(179,38,30,.22); animation: pulse-dot 1.8s infinite; }
.dot-off { background: var(--success); }
.dot-offline { background: #98A6B0; }

@keyframes pulse-dot {
    0%,100% { box-shadow: 0 0 0 3px rgba(179,38,30,.22); }
    50%     { box-shadow: 0 0 0 7px rgba(179,38,30,.04); }
}

/* ---------------------------- فرم‌ها ----------------------------------- */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-lg); }
.form-grid .full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 13px; font-weight: 700; color: var(--primary-dark); }
.field .hint { font-size: 12px; color: var(--ink-soft); line-height: 1.7; }
.field .error { font-size: 12px; color: var(--error); font-weight: 700; }

.input, .select, .textarea {
    font-family: inherit; font-size: 14px; color: var(--ink);
    background: var(--cream);
    border: 2px solid var(--line); border-radius: var(--r-md);
    padding: 9px 12px; width: 100%; transition: .15s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--primary); background: #fff; box-shadow: var(--sh-focus);
}
.input.is-invalid, .select.is-invalid { border-color: var(--error); }
.textarea { min-height: 90px; resize: vertical; }
.input[readonly] { background: #EDF1F4; color: var(--ink-soft); }

.check { display: flex; align-items: center; gap: var(--sp-sm); font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: var(--r-round);
    background: var(--cream); border: 2px solid var(--line);
    font-size: 13px; cursor: pointer; transition: .15s var(--bounce); user-select: none;
}
.chip input { display: none; }
.chip:has(input:checked) {
    background: var(--primary); color: #fff; border-color: var(--primary-dark);
    box-shadow: var(--sh-teal);
}

.form-actions { display: flex; gap: var(--sp-sm); margin-top: var(--sp-xl); flex-wrap: wrap; }

/* نوار فیلتر بالای جدول‌ها */
.filters {
    display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: flex-end;
    padding: var(--sp-md) var(--sp-lg); background: #F7FAFC; border-bottom: 1px solid var(--line);
}
.filters .field { min-width: 150px; flex: 1 1 150px; }
.filters .field > label { font-size: 12px; }

/* ---------------------------- پیام‌ها ---------------------------------- */

.alert {
    padding: var(--sp-md) var(--sp-lg); border-radius: var(--r-md);
    margin-bottom: var(--sp-lg); font-size: 14px; font-weight: 600;
    border-inline-start: 5px solid;
    display: flex; gap: var(--sp-sm); align-items: flex-start;
}
.alert-success { background: rgba(28,122,85,.09);  border-color: var(--success); color: #145C42; }
.alert-error   { background: rgba(179,38,30,.09);  border-color: var(--error);   color: #8A1C16; }
.alert-warning { background: rgba(169,102,12,.12); border-color: var(--warning); color: #7A4A08; }
.alert-info    { background: rgba(53,113,155,.10); border-color: var(--sky);     color: #24506E; }

/* toast شناور برای عملیات هشدار */
#toasts { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 999; display: flex; flex-direction: column; gap: var(--sp-sm); }
.toast {
    background: var(--card); border-radius: var(--r-md); box-shadow: var(--sh-lg);
    padding: var(--sp-md) var(--sp-lg); font-size: 14px; font-weight: 600;
    border-inline-start: 5px solid var(--primary);
    animation: toast-in .3s var(--bounce); max-width: 380px;
}
.toast.ok    { border-color: var(--success); }
.toast.err   { border-color: var(--error); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------- داشبورد هشدار ---------------------------- */

.master-bar {
    display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap;
    margin-bottom: var(--sp-xl);
}

.cat-block { margin-bottom: var(--sp-lg); }

.cat-head {
    background: var(--primary); color: #fff;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: var(--sp-md) var(--sp-lg);
    display: flex; align-items: center; gap: var(--sp-md);
    box-shadow: var(--sh-teal);
}
.cat-head .title { font-weight: 800; font-size: 16px; flex: 1; text-align: center; }
.cat-head .toggle {
    width: 30px; height: 30px; border-radius: var(--r-sm); border: none; cursor: pointer;
    background: rgba(255,255,255,.18); color: #fff; font-size: 18px; line-height: 1;
    display: grid; place-items: center; transition: .15s;
}
.cat-head .toggle:hover { background: rgba(255,255,255,.3); }
.cat-head .group-actions { display: flex; gap: 6px; }
.cat-head .group-actions .btn { min-height: 32px; padding: 4px 12px; box-shadow: none; }

.cat-body { background: var(--card); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--sh-card); overflow: hidden; }
.cat-block.collapsed .cat-body { display: none; }
.cat-block.collapsed .cat-head { border-radius: var(--r-lg); }

.center-row {
    display: grid;
    grid-template-columns: 1.6fr 1.4fr auto auto auto;
    align-items: center; gap: var(--sp-md);
    padding: var(--sp-md) var(--sp-lg);
    border-bottom: 1px solid var(--line);
    transition: background .15s;
}
.center-row:last-child { border-bottom: none; }
.center-row:hover { background: var(--primary-bg); }
.center-row.is-alarm { background: rgba(179,38,30,.05); box-shadow: inset 4px 0 0 var(--coral); }
.center-row .name { font-weight: 700; }
.center-row .loc { color: var(--ink-soft); font-size: 13px; }
.center-row .phone { direction: ltr; text-align: right; font-size: 13px; }

.state-icon {
    width: 40px; height: 34px; border-radius: var(--r-sm);
    display: grid; place-items: center; font-size: 16px; color: #fff;
}
.state-icon.on  { background: var(--coral); box-shadow: var(--sh-coral); }
.state-icon.off { background: var(--success); }
.state-icon.unknown { background: #98A6B0; }

/* ---------------------------- صفحه‌بندی -------------------------------- */

.pagination { display: flex; gap: 5px; list-style: none; padding: var(--sp-md) var(--sp-lg); margin: 0; flex-wrap: wrap; justify-content: center; }
.pagination li a, .pagination li span {
    display: block; padding: 5px 12px; border-radius: var(--r-sm);
    background: var(--cream); border: 1px solid var(--line); font-size: 13px; color: var(--primary-dark);
}
.pagination li.active span { background: var(--primary); color: #fff; border-color: var(--primary-dark); font-weight: 800; }
.pagination li.disabled span { opacity: .45; }

/* ---------------------------- ورود ------------------------------------- */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-lg);
    background: linear-gradient(135deg, var(--primary-bg), var(--surface)); }
.login-card {
    background: var(--card); border-radius: var(--r-xl); box-shadow: var(--sh-lg);
    width: 100%; max-width: 400px; padding: var(--sp-2xl);
}
.login-card .logo { text-align: center; margin-bottom: var(--sp-xl); }
.login-card .logo .mark {
    width: 64px; height: 64px; margin: 0 auto var(--sp-md); border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: grid; place-items: center; font-size: 30px; color: var(--accent);
    box-shadow: var(--sh-teal);
}
.login-card .logo h1 { font-size: 19px; margin: 0; color: var(--primary-dark); }

/* ---------------------------- کد جفت‌سازی ------------------------------ */

.pairing-box {
    background: var(--cream); border: 2px dashed var(--accent-dark);
    border-radius: var(--r-md); padding: var(--sp-lg); margin-top: var(--sp-md);
}
.pairing-box code {
    display: block; direction: ltr; text-align: left; font-size: 13px;
    word-break: break-all; background: #fff; padding: var(--sp-md);
    border-radius: var(--r-sm); border: 1px solid var(--line); margin: var(--sp-sm) 0;
    font-family: ui-monospace, Consolas, monospace;
}

/* ---------------------------- ریسپانسیو ------------------------------- */

@media (max-width: 900px) {
    .center-row { grid-template-columns: 1fr auto auto; }
    .center-row .loc, .center-row .phone { display: none; }
}

@media (max-width: 640px) {
    .navbar .container { height: auto; padding-top: var(--sp-sm); padding-bottom: var(--sp-sm); flex-wrap: wrap; }
    .navbar nav { width: 100%; order: 3; margin-inline-start: 0; }
    .navbar .user .uname { display: none; }
    .master-bar .btn { flex: 1 1 100%; }
    .cat-head .title { text-align: right; font-size: 14px; }
    .page-head { flex-direction: column; align-items: stretch; }
    body { font-size: 14px; }
}

@media print {
    .navbar, .btn, .filters, .pagination, #toasts { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid var(--line); }
}