:root{
    --ui-font-family:"FF Shamel Family Sans One Book","Dubai","Segoe UI",Tahoma,Arial,sans-serif;
}

body{
    font-family:var(--ui-font-family);
    background:#f6f7fb;
    margin:0;
    padding:0;
    color:#111827;
}

.topbar{
    position:sticky;
    top:0;
    z-index:120;
    background:#0f172a;
    color:#fff;
    min-height:62px;
    box-sizing:border-box;
    padding:10px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
}

.topbar-main{display:flex;align-items:center;gap:12px;min-width:0;}
.topbar-title{font-size:18px;font-weight:bold;line-height:1.35;}
.topbar-subtitle{font-size:12px;color:#cbd5e1;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px;}
.topbar-menu-button{
    width:38px;
    height:38px;
    min-width:38px;
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:8px;
    cursor:pointer;
}
.topbar-menu-button span{
    width:18px;
    height:2px;
    border-radius:999px;
    background:#fff;
    display:block;
}
.topbar-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.topbar-links a{
    color:#fff;
    text-decoration:none;
    padding:4px 2px;
    border-radius:0;
    background:transparent;
    border-bottom:2px solid transparent;
    transition:.15s;
}
.topbar-links a:hover{background:transparent;border-bottom-color:rgba(255,255,255,.65);}
.topbar-nav-menu{position:relative;}
.topbar-nav-menu summary{
    list-style:none;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    color:#fff;
    background:transparent;
    border:0;
    border-bottom:2px solid transparent;
    border-radius:0;
    padding:4px 2px;
    line-height:1.4;
    user-select:none;
}
.topbar-nav-menu summary::marker{content:"";display:none;}
.topbar-nav-menu summary::-webkit-details-marker{display:none;}
.topbar-nav-menu summary:hover{background:transparent;border-bottom-color:rgba(255,255,255,.65);}
.topbar-nav-menu-list{
    position:absolute;
    top:calc(100% + 8px);
    inset-inline-end:0;
    z-index:60;
    min-width:210px;
    background:#fff;
    color:#111827;
    border:1px solid #e5e7eb;
    border-radius:8px;
    box-shadow:0 12px 28px rgba(15,23,42,.18);
    padding:6px;
}
.topbar-nav-menu-list a{
    display:block;
    color:#111827;
    background:transparent;
    border-radius:6px;
    padding:10px 11px;
}
.topbar-nav-menu-list a:hover{background:#f1f5f9;color:#0b74de;}
.topbar-account{position:relative;}
.topbar-account summary{
    list-style:none;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    color:#fff;
    background:transparent;
    border:0;
    border-bottom:2px solid transparent;
    border-radius:0;
    padding:4px 2px;
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    line-height:1.4;
    user-select:none;
}
.topbar-account summary::marker{content:"";display:none;}
.topbar-account summary::-webkit-details-marker{display:none;}
.topbar-account summary:hover{background:transparent;border-bottom-color:rgba(255,255,255,.65);}
.topbar-account-icon{
    width:22px;
    height:22px;
    min-width:22px;
    max-width:22px;
    min-height:22px;
    max-height:22px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#0f172a;
    background:#e5e7eb;
    overflow:hidden;
    flex:0 0 auto;
}
.topbar-account .topbar-account-icon img{
    width:22px;
    height:22px;
    min-width:22px;
    max-width:22px;
    min-height:22px;
    max-height:22px;
    object-fit:cover;
    display:block;
    border-radius:50%;
}
.topbar-account .topbar-account-icon svg{
    width:18px;
    height:18px;
    flex:0 0 auto;
}
.topbar-account-menu{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    z-index:50;
    min-width:190px;
    background:#fff;
    color:#111827;
    border:1px solid #e5e7eb;
    border-radius:8px;
    box-shadow:0 12px 28px rgba(15,23,42,.18);
    padding:6px;
}
.topbar-account-menu a{
    display:block;
    color:#111827;
    background:transparent;
    border-radius:6px;
    padding:9px 10px;
}
.topbar-account-menu a:hover{background:#f1f5f9;}
.topbar-account-meta{
    color:#64748b;
    font-size:12px;
    padding:7px 10px 6px;
    border-bottom:1px solid #eef2f7;
    margin-bottom:4px;
}
.layout-nav-toggle{position:absolute;opacity:0;pointer-events:none;}
.layout-sidebar{
    position:fixed;
    top:62px;
    right:0;
    bottom:0;
    z-index:90;
    width:252px;
    background:#ffffff;
    border-left:1px solid #e5e7eb;
    box-shadow:-4px 0 16px rgba(15,23,42,.06);
    overflow:auto;
    transition:width .18s ease, transform .18s ease;
}
.layout-sidebar-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:14px 14px 10px;
    border-bottom:1px solid #eef2f7;
}
.layout-sidebar-title{font-weight:bold;color:#0f172a;}
.layout-sidebar-subtitle{font-size:12px;color:#64748b;line-height:1.6;margin-top:2px;}
.layout-sidebar-close{
    width:30px;
    height:30px;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    color:#0f172a;
    background:#f1f5f9;
    cursor:pointer;
    font-size:20px;
    line-height:1;
}
.layout-sidebar-nav{padding:8px 8px 18px;}
.layout-nav-group{padding:6px 0;border-bottom:1px solid #f1f5f9;}
.layout-nav-group:last-child{border-bottom:0;}
.layout-nav-group-title{
    padding:8px 10px 6px;
    color:#64748b;
    font-size:12px;
    font-weight:bold;
}
.layout-nav-group a{
    min-height:38px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px 10px;
    color:#111827;
    text-decoration:none;
    border-radius:8px;
    box-sizing:border-box;
}
.layout-nav-group a:hover{background:#f1f5f9;color:#0b74de;}
.layout-nav-group a.is-active{background:#e8f1ff;color:#0f62c9;font-weight:bold;}
.layout-nav-icon{
    width:24px;
    height:24px;
    min-width:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:#eef2f7;
    color:#334155;
    font-size:12px;
    font-weight:bold;
}
.layout-nav-group a.is-active .layout-nav-icon{background:#0b74de;color:#fff;}
.layout-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.layout-nav-backdrop{display:none;}
.layout-nav-toggle:checked ~ .layout-sidebar{width:76px;}
.layout-nav-toggle:checked ~ .page-container.has-sidebar{margin-right:76px;}
.layout-nav-toggle:checked ~ .layout-sidebar .layout-sidebar-head{justify-content:center;padding-inline:8px;}
.layout-nav-toggle:checked ~ .layout-sidebar .layout-sidebar-title,
.layout-nav-toggle:checked ~ .layout-sidebar .layout-sidebar-subtitle,
.layout-nav-toggle:checked ~ .layout-sidebar .layout-nav-group-title,
.layout-nav-toggle:checked ~ .layout-sidebar .layout-nav-label{display:none;}
.layout-nav-toggle:checked ~ .layout-sidebar .layout-nav-group a{justify-content:center;padding-inline:8px;}
.layout-page-tools{
    max-width:1300px;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}
.breadcrumb{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
    color:#64748b;
    font-size:13px;
    line-height:1.7;
}
.breadcrumb a{color:#0f62c9;text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb span:last-child{color:#111827;font-weight:bold;}
.breadcrumb-separator{color:#94a3b8;font-weight:normal!important;}
.context-links{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.context-links a{
    color:#0f62c9;
    background:#eef6ff;
    border:1px solid #dbeafe;
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    text-decoration:none;
    min-height:30px;
    box-sizing:border-box;
}
.context-links a:hover{background:#dbeafe;}
.account-profile-box{
    display:flex;
    align-items:center;
    gap:18px;
    padding:18px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#f8fafc;
    margin-bottom:18px;
}
.account-profile-form{
    display:flex;
    align-items:center;
    gap:18px;
    width:100%;
}
.account-profile-input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}
.account-profile-avatar{
    position:relative;
    width:112px;
    height:112px;
    border-radius:50%;
    overflow:visible;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e5e7eb;
    color:#64748b;
    border:3px solid #fff;
    box-shadow:0 8px 20px rgba(15,23,42,.16);
    cursor:pointer;
    flex:0 0 auto;
}
.account-profile-avatar img,
.account-profile-fallback{
    width:100%;
    height:100%;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    object-fit:cover;
}
.account-profile-avatar img{display:block;}
.account-profile-avatar:hover .account-profile-camera{transform:scale(1.06);}
.account-profile-camera{
    position:absolute;
    left:2px;
    bottom:7px;
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:#0f172a;
    border:2px solid #fff;
    box-shadow:0 6px 14px rgba(15,23,42,.22);
    transition:.15s;
}
.account-profile-copy{
    flex:1;
    min-width:240px;
}
.account-profile-copy h2{margin:0 0 6px;font-size:18px;}
.page-container{padding:24px;}
.page-container.has-sidebar{margin-right:252px;}

.container{max-width:1300px;margin:0 auto;}
.container.narrow{max-width:850px;}
.card,.form-card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    padding:20px;
    margin-bottom:16px;
}
.form-card{max-width:850px;margin:0 auto;}
.form-card.narrow{max-width:650px;}
.card h1,.form-card h1{margin-top:0;}

.page-head,.top,.top-actions{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:18px;
}
.page-head h1,.top-actions h1{margin:0 0 8px 0;}
.meta,.help,.hint,.small,.muted{color:#64748b;line-height:1.7;}
.small,.small-link{font-size:12px;}
.small-link{color:#0b74de;text-decoration:none;}

.grid,.grid-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    margin-bottom:16px;
}
.grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.service,.stat{
    background:#fafafa;
    border:1px solid #eee;
    border-radius:12px;
    padding:14px;
}
.service{padding:18px;}
.service h3{margin-top:0;margin-bottom:8px;}
.service p{color:#666;line-height:1.7;margin-top:0;}
.stat-title{color:#6b7280;font-size:13px;margin-bottom:6px;}
.stat-value,.stat b{font-size:24px;font-weight:bold;direction:ltr;text-align:left;display:block;margin-top:4px;}

.filter-box,.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:end;
    margin-bottom:16px;
}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-row{margin-bottom:14px;}
label{display:block;margin:12px 0 6px;font-weight:bold;}
.form-line{
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    gap:12px;
    align-items:start;
    margin-bottom:14px;
}
.form-line > label:first-child{margin:10px 0 0;}
.form-line input,
.form-line select,
.form-line textarea{min-width:0;}
.check-label{
    display:flex;
    align-items:center;
    gap:8px;
    margin:8px 0 0;
    font-weight:normal;
}
.is-hidden{display:none!important;}

input[type="text"],input[type="password"],input[type="datetime-local"],input[type="number"],
input[type="date"],select,textarea{
    width:100%;
    box-sizing:border-box;
    padding:10px 12px;
    border:1px solid #d1d5db;
    border-radius:8px;
    font-family:var(--ui-font-family);
    font-size:14px;
    background:#fff;
}
.filter-box input,.filter-box select{min-width:145px;}
.filter-count{
    margin-inline-start:auto;
    align-self:center;
    color:#475569;
    white-space:nowrap;
}
textarea{min-height:90px;resize:vertical;}
input[readonly],input[disabled]{background:#f8fafc;color:#475569;}

.btn,button{
    display:inline-block;
    text-decoration:none;
    border:none;
    border-radius:8px;
    padding:10px 14px;
    cursor:pointer;
    font-size:14px;
    font-family:var(--ui-font-family);
    background:#0b74de;
    color:#fff;
}
.btn-primary{background:#0b74de;color:#fff;}
.btn-secondary{background:#edf2f7;color:#222;}
.btn-danger{background:#dc2626;color:#fff;}
.btn-warning,.btn-warn{background:#f59e0b;color:#111;}
.btn-dark{background:#0f172a;color:#fff;}
.btn-ok{background:#16a34a;color:#fff;}

.table-wrap{overflow:auto;}
table{width:100%;border-collapse:collapse;background:#fff;}
th,td{padding:10px;border-bottom:1px solid #eee;text-align:right;vertical-align:top;}
th{background:#fafafa;white-space:nowrap;}
.sort-link{
    color:#111827;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.sort-link span{
    color:#0b74de;
    font-size:13px;
}
.data-sticky-panel{
    position:sticky;
    top:64px;
    z-index:30;
    background:#f6f7fb;
    padding:0 0 10px;
    margin-bottom:10px;
}
.data-sticky-panel .grid-stats{margin-bottom:10px;}
.data-filter-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:10px;
    align-items:end;
    margin-bottom:0;
}
.data-filter-grid .form-group{margin:0;}
.data-filter-grid label{margin:0 0 6px;}
.data-filter-grid input,
.data-filter-grid select{
    width:100%;
    min-width:0;
    height:38px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    box-sizing:border-box;
}
.data-filter-grid select[multiple],
.report-multi-select,
.analytics-multi-select{
    height:38px;
    min-height:38px;
    max-height:38px;
    overflow:hidden;
    vertical-align:top;
}
.multi-select-native{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    min-height:1px!important;
    max-height:1px!important;
    padding:0!important;
    opacity:0!important;
    pointer-events:none!important;
}
.multi-select-control{
    width:100%;
    height:38px;
    min-height:38px;
    max-height:38px;
    position:relative;
    overflow:visible;
    border:1px solid #cbd5e1;
    border-radius:8px;
    background:#fff;
    box-sizing:border-box;
    cursor:text;
}
.multi-select-control.is-open{border-color:#7c6df2;box-shadow:0 0 0 1px rgba(124,109,242,.18);}
.multi-select-tags{
    height:36px;
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:nowrap;
    overflow:hidden;
    padding:3px 7px;
    box-sizing:border-box;
}
.multi-select-tag{
    max-width:160px;
    display:inline-flex;
    align-items:center;
    gap:2px;
    height:22px;
    padding:0 7px 0 3px;
    border-radius:6px;
    background:#6f63ee;
    color:#fff;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:0 0 auto;
}
.multi-select-tag-remove{
    width:16px;
    height:16px;
    min-width:16px;
    padding:0;
    border-radius:50%;
    background:transparent;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    line-height:1;
}
.multi-select-tag-remove:hover{background:rgba(255,255,255,.18);}
.multi-select-search{
    min-width:44px!important;
    width:100%!important;
    height:28px!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    flex:1 1 44px;
    background:transparent!important;
}
.multi-select-dropdown{
    position:absolute;
    top:calc(100% + 2px);
    right:0;
    left:0;
    z-index:80;
    max-height:230px;
    overflow:auto;
    background:#fff;
    border:1px solid #cbd5e1;
    border-radius:0 0 8px 8px;
    box-shadow:0 12px 28px rgba(15,23,42,.14);
    padding:4px 0;
}
.multi-select-option{
    width:100%;
    display:block;
    padding:8px 12px;
    border-radius:0;
    background:#fff;
    color:#4b5563;
    text-align:right;
    font-size:14px;
}
.multi-select-option:hover,
.multi-select-option.is-selected{
    background:#7467ef;
    color:#fff;
}
.multi-select-empty{padding:10px 12px;color:#64748b;font-size:13px;}
.data-filter-grid .multi-select-control .selected-items,
.data-filter-grid .multi-select-control .choices__list--multiple{
    min-height:28px;
    max-height:28px;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:nowrap;
}
.data-filter-action{
    height:38px;
    width:44px;
    min-width:44px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    align-self:end;
    border-radius:8px;
    font-size:18px;
    line-height:1;
}
.data-filter-clear{background:#edf2f7;color:#0f172a;}
.data-filter-clear:hover{background:#dbe4ee;}
.data-results-card{display:flex;flex-direction:column;}
.data-table-wrap{
    overflow-y:auto;
    overflow-x:hidden;
    margin-top:8px;
    max-height:calc(100vh - 270px);
}
.data-table{
    width:100%;
    min-width:0 !important;
    table-layout:fixed;
}
.data-table th,
.data-table td{
    vertical-align:middle;
    text-align:right;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
}
.data-table thead th{
    position:sticky;
    top:0;
    z-index:5;
    box-shadow:0 1px 0 #e5e7eb;
}
.data-table .cell-center{text-align:center;}
.data-table .cell-ltr{direction:ltr;text-align:left;}
.data-table .cell-ltr-center{direction:ltr;text-align:center;}
.data-table .cell-truncate{overflow:hidden;text-overflow:ellipsis;white-space:normal;}
.data-empty{text-align:center;color:#64748b;padding:22px;}
.data-row-link{color:#0f62c9;font-weight:700;text-decoration:none;}
.data-row-link:hover{text-decoration:underline;}
.audit-filters{grid-template-columns:repeat(6,minmax(140px,1fr)) 44px 44px;}
.audit-table{min-width:1080px;}
.audit-table .col-id{width:70px;text-align:center;}
.audit-table .col-time{width:175px;}
.audit-table .col-event{width:230px;}
.audit-table .col-status{width:90px;text-align:center;}
.audit-table .col-device{width:120px;text-align:center;}
.audit-table .col-role{width:95px;text-align:center;}
.audit-table .col-table{width:145px;text-align:center;}
.audit-table .col-guid{width:170px;}
.audit-table .col-details{width:90px;text-align:center;}
.actions,.nowrap{white-space:nowrap;}
.row-menu{position:relative;display:inline-block;}
.row-menu summary{
    list-style:none;
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#edf2f7;
    cursor:pointer;
    font-size:20px;
    line-height:1;
}
.row-menu summary::-webkit-details-marker{display:none;}
.row-menu-list{
    position:absolute;
    inset-inline-end:0;
    top:38px;
    z-index:20;
    min-width:150px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    box-shadow:0 8px 24px rgba(15,23,42,.14);
    padding:6px;
}
.row-menu-list a{
    display:block;
    padding:9px 10px;
    color:#111827;
    text-decoration:none;
    border-radius:6px;
}
.row-menu-list form{
    display:block;
    margin:0;
}
.row-menu-list button,
.row-menu-list .btn,
.row-menu-list .small{
    display:block;
    width:100%;
    padding:9px 10px;
    border:0;
    background:transparent;
    color:#111827;
    text-align:right;
    text-decoration:none;
    border-radius:6px;
    font:inherit;
    line-height:1.35;
    cursor:pointer;
}
.row-menu-list .small{
    color:#64748b;
    cursor:default;
}
.row-menu-list a:hover,
.row-menu-list button:hover,
.row-menu-list .btn:hover{background:#f3f4f6;}
.inline-form{display:inline;}
.wa-retry-form input[type="password"]{
    width:120px;
    padding:7px 8px;
    font-size:12px;
    margin-inline-start:6px;
}
.wa-retry-form button{
    padding:7px 9px;
    font-size:12px;
}
.ltr{direction:ltr;text-align:left;unicode-bidi:plaintext;}
.reason,.details,.err-text{max-width:360px;white-space:normal;}
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0}
.pager-text{margin:0}
.pager-text a{color:#0f172a;text-decoration:none;padding:2px 6px;border-radius:6px}
.pager-text a:hover{background:#edf2f7}
.pager-text .is-current{font-weight:bold;background:#0f172a;color:#fff}
.pager-gap{padding:0 4px;color:#64748b}
.err-text{color:#991b1b;}

.devices-monitor-page .card{overflow:visible;}
.devices-monitor-page .data-table-wrap{
    overflow:visible;
    max-height:none;
}
.devices-monitor-page .monitor-table{
    font-size:12px;
}
.devices-monitor-page .monitor-table th,
.devices-monitor-page .monitor-table td{
    padding:7px 6px;
}
.devices-monitor-page .monitor-devices-table th:nth-child(1),
.devices-monitor-page .monitor-devices-table td:nth-child(1){width:14%;}
.devices-monitor-page .monitor-devices-table th:nth-child(2),
.devices-monitor-page .monitor-devices-table td:nth-child(2){width:8%;}
.devices-monitor-page .monitor-devices-table th:nth-child(3),
.devices-monitor-page .monitor-devices-table td:nth-child(3){width:12%;}
.devices-monitor-page .monitor-devices-table th:nth-child(4),
.devices-monitor-page .monitor-devices-table td:nth-child(4){width:11%;}
.devices-monitor-page .monitor-devices-table th:nth-child(5),
.devices-monitor-page .monitor-devices-table td:nth-child(5){width:12%;}
.devices-monitor-page .monitor-devices-table th:nth-child(6),
.devices-monitor-page .monitor-devices-table td:nth-child(6){width:10%;}
.devices-monitor-page .monitor-devices-table th:nth-child(7),
.devices-monitor-page .monitor-devices-table td:nth-child(7){width:9%;}
.devices-monitor-page .monitor-devices-table th:nth-child(8),
.devices-monitor-page .monitor-devices-table td:nth-child(8){width:11%;}
.devices-monitor-page .monitor-devices-table th:nth-child(9),
.devices-monitor-page .monitor-devices-table td:nth-child(9){width:9%;}
.devices-monitor-page .monitor-devices-table th:nth-child(10),
.devices-monitor-page .monitor-devices-table td:nth-child(10){width:4%;text-align:center;}
.devices-monitor-page .monitor-logs-table th,
.devices-monitor-page .monitor-logs-table td{
    overflow-wrap:anywhere;
}
.devices-monitor-page .monitor-table tr.needs-warning td{
    background:#fffbeb;
}
.devices-monitor-page .monitor-table tr.needs-attention td{
    background:#fff1f2;
}
.devices-monitor-page .monitor-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:4px 0 12px;
}
.devices-monitor-page .monitor-filters{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}
.devices-monitor-page .monitor-filter{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:7px 10px;
    border-radius:8px;
    background:#edf2f7;
    color:#0f172a;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}
.devices-monitor-page .monitor-filter:hover{
    background:#e2e8f0;
}
.devices-monitor-page .monitor-filter.is-active{
    background:#0b74de;
    color:#fff;
}
.devices-monitor-page .monitor-legend{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:center;
    margin:0 0 12px;
    color:#475569;
    font-size:12px;
}
.devices-monitor-page .monitor-legend span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.devices-monitor-page .legend-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    display:inline-block;
    border:1px solid #cbd5e1;
}
.devices-monitor-page .legend-ok{background:#fff;}
.devices-monitor-page .legend-warning{background:#fffbeb;border-color:#fde68a;}
.devices-monitor-page .legend-attention{background:#fff1f2;border-color:#fecdd3;}
.devices-monitor-page .metric-link{
    display:inline-block;
    min-width:22px;
    padding:1px 5px;
    border-radius:6px;
    color:#0f172a;
    font-weight:700;
    text-decoration:none;
}
.devices-monitor-page .metric-link:hover{
    background:#e2e8f0;
}
.devices-monitor-page .metric-link.is-hot{
    background:#fde68a;
    color:#92400e;
}
.devices-monitor-page tr.needs-attention .metric-link.is-hot{
    background:#fecdd3;
    color:#991b1b;
}
.device-actions{
    text-align:center;
    margin-bottom:0;
}
.device-actions form{
    display:block;
    margin:0;
}
.device-actions .btn,
.device-actions button{
    white-space:normal;
}
.device-actions .row-menu summary{
    width:30px;
    height:30px;
    font-size:18px;
}
.device-row-menu-list{
    min-width:190px;
}

.badge{
    display:inline-block;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    white-space:nowrap;
}
.badge.ok,.badge.g,.badge-ok,.ok{background:#e8f7ea;color:#166534;}
.badge.danger,.badge.r,.badge-off,.danger{background:#fdeaea;color:#991b1b;}
.badge.warn,.badge.y,.warn{background:#fff7db;color:#92400e;}
.badge.info,.info{background:#e8f1ff;color:#1d4ed8;}
.badge.muted,.muted-badge{background:#f3f4f6;color:#4b5563;}
.badge.dark{background:#0f172a;color:#fff;}

.alert,.msg,.err{
    border-radius:10px;
    padding:12px;
    margin:12px 0;
    line-height:1.7;
}
.alert-success,.msg{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}
.alert-error,.err{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3;}
.alert-warning{background:#fffbeb;color:#92400e;border:1px solid #fde68a;}
.key-box,.key{
    direction:ltr;
    text-align:left;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:8px;
    padding:12px;
    font-family:Consolas,monospace;
    word-break:break-all;
    margin-top:10px;
}
.api-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.api-row input{flex:1;min-width:260px;}
.tenants-box{border:1px solid #e5e7eb;border-radius:8px;padding:12px;max-height:260px;overflow:auto;background:#fafafa;}
.tenant-item{margin-bottom:8px;}
.notice{
    padding:14px;
    border-radius:10px;
    margin-top:20px;
}
.notice-warning{background:#fff3cd;color:#856404;}
.is-disabled{opacity:.65;cursor:not-allowed;}
.login-card{margin-top:40px;}
.inline-input-action{
    display:flex;
    gap:8px;
    align-items:center;
}
.flex-fill{flex:1;}
.section-title{margin:0 0 6px;}

@media(max-width:900px){
    .page-container{padding:14px;}
    .page-container.has-sidebar{margin-right:0;}
    .topbar{padding:9px 12px;min-height:58px;}
    .topbar-title{font-size:16px;}
    .topbar-subtitle{max-width:170px;}
    .topbar-links{gap:8px;}
    .topbar-links > a:not(:first-child){display:none;}
    .layout-sidebar{
        top:58px;
        width:min(86vw,310px);
        transform:translateX(105%);
        box-shadow:-12px 0 32px rgba(15,23,42,.24);
    }
    .layout-nav-toggle:checked ~ .layout-sidebar{width:min(86vw,310px);}
    .layout-nav-toggle:checked ~ .page-container.has-sidebar{margin-right:0;}
    .layout-nav-toggle:checked ~ .layout-sidebar .layout-sidebar-head{justify-content:space-between;padding:14px 14px 10px;}
    .layout-nav-toggle:checked ~ .layout-sidebar .layout-sidebar-title,
    .layout-nav-toggle:checked ~ .layout-sidebar .layout-sidebar-subtitle,
    .layout-nav-toggle:checked ~ .layout-sidebar .layout-nav-group-title,
    .layout-nav-toggle:checked ~ .layout-sidebar .layout-nav-label{display:block;}
    .layout-nav-toggle:checked ~ .layout-sidebar .layout-nav-group a{justify-content:flex-start;padding:8px 10px;}
    .layout-nav-toggle:checked ~ .layout-sidebar{transform:translateX(0);}
    .layout-nav-toggle:checked ~ .layout-nav-backdrop{
        display:block;
        position:fixed;
        top:58px;
        right:0;
        left:0;
        bottom:0;
        z-index:80;
        background:rgba(15,23,42,.38);
    }
    .layout-sidebar-close{display:flex;}
    .layout-page-tools{align-items:flex-start;display:block;}
    .context-links{margin-top:8px;}
    .data-sticky-panel{top:56px;}
    .audit-filters{grid-template-columns:repeat(2,minmax(0,1fr));}
    .data-filter-action{width:100%;}
    table{font-size:12px;}
    .form-line{grid-template-columns:1fr;gap:6px;}
    .form-line > label:first-child{margin:0;}
    .hide-sm{display:none;}
}

@media(max-width:700px){
    .data-sticky-panel{position:static;padding-bottom:0;}
    .data-filter-grid{grid-template-columns:1fr;}
    .data-table-wrap{max-width:100%;max-height:none;border:1px solid #eef2f7;border-radius:8px;}
}