:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --panel-soft: #f8faff;
    --text: #172033;
    --muted: #65738a;
    --line: #dbe4f0;
    --primary: #2855d9;
    --primary-2: #6d46d9;
    --success: #138a54;
    --danger: #c23b4a;
    --warning: #a66a00;
    --shadow: 0 18px 42px rgba(31, 47, 84, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

.admin-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 264px;
    background: #11182b;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 5px;
}

.brand strong,
.brand span {
    display: block;
}

.brand strong {
    font-size: 16px;
}

.brand span {
    margin-top: 3px;
    color: #9faccc;
    font-size: 12px;
}

.nav-menu {
    display: grid;
    gap: 8px;
    margin-top: 24px;
    padding-bottom: 16px;
}

.nav-menu a,
.logout-link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #b9c5df;
    font-size: 14px;
    transition: background 0.18s ease, color 0.18s ease;
}

.nav-menu a .nav-icon,
.logout-link .nav-icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 10px;
    font-weight: 700;
}

.nav-menu a .nav-label,
.logout-link .nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-icon svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-menu a.active,
.nav-menu a:hover {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
}

.logout-link {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #ef4458 0%, #c32134 100%);
    box-shadow: 0 10px 18px rgba(194, 59, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(0);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.logout-link .nav-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

.logout-link:hover {
    background: linear-gradient(180deg, #ff5266 0%, #b91f31 100%);
    color: #fff;
    box-shadow: 0 16px 26px rgba(194, 59, 74, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.26);
    transform: translateY(-2px);
}

.logout-link:active {
    box-shadow: 0 7px 14px rgba(194, 59, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(0);
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    position: sticky;
    bottom: -22px;
    background: #11182b;
    padding-bottom: 4px;
}

.main-panel {
    width: 100%;
    margin-left: 264px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 26px;
    background: rgba(244, 247, 251, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.topbar h1 {
    margin: 3px 0 0;
    font-size: 24px;
    line-height: 1.2;
}

.eyebrow {
    margin: 0;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.admin-profile img,
.admin-avatar-fallback {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.admin-profile img {
    object-fit: cover;
}

.admin-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    font-weight: 700;
}

.admin-profile strong,
.admin-profile span {
    display: block;
    white-space: nowrap;
}

.admin-profile span {
    color: var(--muted);
    font-size: 12px;
}

.content {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px 26px 34px;
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric-card,
.panel,
.filter-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(31, 47, 84, 0.07);
}

.metric-card {
    min-height: 126px;
    padding: 18px;
}

.metric-card span {
    color: var(--muted);
    font-size: 13px;
}

.metric-card strong {
    display: block;
    margin-top: 10px;
    font-size: 30px;
    line-height: 1.1;
}

.metric-card small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
}

.section-grid {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.report-card {
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(31, 47, 84, 0.07);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.helpdesk-summary-cards {
    margin-top: 18px;
}

.helpdesk-summary-message {
    margin-top: 18px;
}

.helpdesk-dashboard-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.settings-card {
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(31, 47, 84, 0.07);
}

.admin-form {
    padding: 18px;
}

.form-grid-admin {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.field-wide {
    grid-column: 1 / -1;
}

.narrow-form {
    max-width: 760px;
}

.change-password-grid {
    grid-template-columns: 1fr;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.locked-input {
    background: #eef3fb !important;
    color: var(--muted) !important;
    cursor: not-allowed;
}

.admin-avatar-sm,
.admin-avatar-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    font-weight: 700;
}

.admin-avatar-sm {
    width: 38px;
    height: 38px;
}

.admin-avatar-lg {
    width: 72px;
    height: 72px;
}

.admin-edit-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.admin-edit-head strong,
.admin-edit-head span {
    display: block;
}

.admin-edit-head span {
    margin-top: 4px;
    color: var(--muted);
}

.photo-upload-control {
    width: 100%;
}

.upload-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.upload-dropzone {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    border: 1px dashed #9fb2d4;
    border-radius: 8px;
    padding: 13px;
    background: #f7faff;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.upload-dropzone:hover,
.upload-dropzone:focus,
.upload-dropzone.is-dragover {
    border-color: var(--primary);
    background: #eef5ff;
    box-shadow: 0 0 0 3px rgba(43, 102, 213, 0.1);
    outline: none;
}

.upload-preview-wrap {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    font-weight: 700;
}

.upload-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-preview-image.is-hidden,
.upload-preview-fallback.is-hidden {
    display: none;
}

.upload-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.upload-copy strong,
.upload-copy span,
.upload-copy em {
    display: block;
    overflow-wrap: anywhere;
}

.upload-copy strong {
    color: var(--text);
    font-size: 13px;
}

.upload-copy span {
    color: var(--muted);
    font-size: 12px;
}

.upload-copy em {
    color: var(--primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.upload-message {
    min-height: 18px;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}

.upload-message.is-error {
    color: #9c2634;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-actions form {
    margin: 0;
}

.admins-table {
    min-width: 1180px;
}

.settings-body {
    padding: 16px;
}

.settings-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.form-grid {
    grid-template-columns: minmax(180px, 1fr) auto;
    align-items: end;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.warning-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    color: #8a4d06;
    background: #fff0d8;
    font-size: 13px;
}

.token-reveal {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid #b9d7ff;
    border-radius: 8px;
    background: #edf5ff;
}

.token-reveal strong {
    display: block;
    margin-bottom: 10px;
    color: #0b5f96;
}

.token-reveal pre,
.log-viewer {
    overflow: auto;
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background: #0d1424;
    color: #d8e4ff;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.log-viewer {
    max-height: 420px;
    border-radius: 0 0 8px 8px;
}

.report-card .filters {
    padding: 16px;
}

.summary-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.summary-list div {
    min-height: 76px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.summary-list span {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.summary-list strong {
    display: block;
    margin-top: 8px;
    font-size: 24px;
}

.export-actions,
.filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}

.export-actions {
    padding: 0 16px 16px;
}

.panel {
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--line);
}

.panel-header h2 {
    margin: 0;
    font-size: 17px;
}

.panel-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.table-wrap,
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.data-table,
table {
    width: 100%;
    border-collapse: collapse;
}

.data-table {
    min-width: 860px;
}

.data-table th,
.data-table td,
th,
td {
    padding: 11px 13px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-size: 13px;
    line-height: 1.35;
}

.data-table th,
th {
    background: var(--panel-soft);
    color: #4e5b70;
    font-size: 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table tr:last-child td,
tr:last-child td {
    border-bottom: 0;
}

.changes-table {
    min-width: 980px;
}

.usb-table {
    min-width: 900px;
}

.compact-table {
    min-width: 420px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.badge-online,
.badge-inserted {
    color: #0b6a3f;
    background: #ddf8eb;
}

.badge-offline,
.badge-removed {
    color: #9c2634;
    background: #ffe3e8;
}

.badge-neutral,
.badge-seen {
    color: #526071;
    background: #edf2f7;
}

.badge-category {
    text-transform: capitalize;
}

.badge-category-hardware {
    color: #2855d9;
    background: #e4ecff;
}

.badge-category-network {
    color: #0f6f7d;
    background: #dcf7fb;
}

.badge-category-identity {
    color: #5c3fb7;
    background: #eee8ff;
}

.badge-category-software {
    color: #8a4d06;
    background: #fff0d8;
}

.badge-category-usb {
    color: #7a2aa6;
    background: #f5e3ff;
}

.badge-category-os {
    color: #0b5f96;
    background: #e2f2ff;
}

.badge-category-security {
    color: #a22f43;
    background: #ffe4ea;
}

.badge-category-other {
    color: #526071;
    background: #edf2f7;
}

.badge-event-inserted {
    color: #0b6a3f;
    background: #ddf8eb;
}

.badge-event-removed {
    color: #9c2634;
    background: #ffe3e8;
}

.badge-event-seen {
    color: #526071;
    background: #edf2f7;
}

.helpdesk-ticket-table {
    min-width: 1180px;
}

.helpdesk-ticket-filters {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.helpdesk-report-filter-panel {
    margin-bottom: 18px;
}

.helpdesk-report-filters {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.helpdesk-report-actions {
    align-items: end;
}

.report-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    grid-column: 1 / -1;
}

.export-btn {
    border-color: #5c3fb7;
    background: #5c3fb7;
    color: #fff;
}

.export-btn:hover {
    border-color: #49309c;
    background: #49309c;
}

.helpdesk-report-summary {
    margin-bottom: 18px;
}

.report-metric {
    min-height: 118px;
}

.helpdesk-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.report-panel {
    margin-bottom: 18px;
}

.helpdesk-report-grid .report-panel {
    margin-bottom: 0;
}

.report-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.report-mini-card {
    min-height: 96px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fbff, #f3f0ff);
}

.report-mini-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.report-mini-card strong {
    display: block;
    margin-top: 10px;
    font-size: 28px;
    line-height: 1.1;
}

.report-table {
    min-width: 760px;
}

.compact-report-table {
    min-width: 420px;
}

.technician-report-table,
.resolved-report-table {
    min-width: 980px;
}

.date-report-table {
    min-width: 720px;
}

.helpdesk-status,
.helpdesk-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.helpdesk-status.status-pending {
    color: #9a4a00;
    background: #fff0d8;
}

.helpdesk-status.status-assigned {
    color: #0b5f96;
    background: #e2f2ff;
}

.helpdesk-status.status-ongoing {
    color: #5c3fb7;
    background: #eee8ff;
}

.helpdesk-status.status-solved {
    color: #0b6a3f;
    background: #ddf8eb;
}

.helpdesk-status.status-closed {
    color: #526071;
    background: #edf2f7;
}

.helpdesk-status.status-cancelled {
    color: #9c2634;
    background: #ffe3e8;
}

.helpdesk-priority.priority-low {
    color: #526071;
    background: #edf2f7;
}

.helpdesk-priority.priority-normal {
    color: #2855d9;
    background: #e4ecff;
}

.helpdesk-priority.priority-high {
    color: #8a4d06;
    background: #fff0d8;
}

.helpdesk-priority.priority-urgent {
    color: #9c2634;
    background: #ffe3e8;
}

.helpdesk-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
}

.helpdesk-badge-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.helpdesk-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
}

.helpdesk-detail-grid div {
    min-height: 74px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.helpdesk-detail-grid span,
.helpdesk-description span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.helpdesk-detail-grid strong,
.helpdesk-detail-grid small {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.helpdesk-detail-grid small {
    color: var(--muted);
}

.helpdesk-description {
    margin: 0 18px 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.helpdesk-description p {
    margin: 8px 0 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.helpdesk-action-stack {
    display: grid;
    gap: 18px;
    align-content: start;
}

.action-panel .admin-form {
    display: grid;
    gap: 12px;
}

.action-panel textarea {
    min-height: 96px;
    resize: vertical;
}

.helpdesk-timeline-panel {
    margin-top: 18px;
}

.helpdesk-timeline {
    padding: 18px;
}

.helpdesk-timeline-item {
    position: relative;
    margin-left: 10px;
    padding: 0 0 18px 22px;
    border-left: 2px solid var(--line);
}

.helpdesk-timeline-item:last-child {
    padding-bottom: 0;
}

.helpdesk-timeline-item::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
}

.helpdesk-timeline-item strong,
.helpdesk-timeline-item span,
.helpdesk-timeline-item p {
    display: block;
}

.helpdesk-timeline-item span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.helpdesk-timeline-item p {
    margin: 8px 0 0;
    overflow-wrap: anywhere;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.btn.primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.btn.danger {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
}

.btn-secondary {
    color: #4e5b70;
    background: var(--panel-soft);
}

.empty-state {
    padding: 22px 18px;
    color: var(--muted);
    font-size: 14px;
}

.filter-panel {
    margin-bottom: 18px;
    padding: 16px;
}

.filters,
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    align-items: end;
}

.filter-card {
    position: relative;
}

.field label {
    display: block;
    margin-bottom: 6px;
    color: #48566b;
    font-size: 12px;
    font-weight: 700;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 8px 10px;
    color: var(--text);
    background: #fff;
}

.field textarea {
    min-height: 88px;
    resize: vertical;
}

.organization-form {
    display: grid;
    gap: 18px;
}

.organization-section {
    overflow: hidden;
}

.organization-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    align-items: start;
}

.organization-upload .upload-preview-wrap {
    width: 132px;
    height: 82px;
    flex-basis: 132px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 6px;
}

.organization-upload .upload-preview-image {
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 70px;
    object-fit: contain;
}

.organization-upload .upload-preview-fallback {
    color: var(--primary);
}

.organization-upload-squarelogo .upload-preview-wrap,
.organization-upload-fevicon .upload-preview-wrap {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
}

.organization-upload-squarelogo .upload-preview-image,
.organization-upload-fevicon .upload-preview-image {
    max-width: 70px;
    max-height: 70px;
}

.readonly-value {
    min-height: 38px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--panel-soft);
    color: var(--text);
    overflow-wrap: anywhere;
}

.secret-hint {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
}

.organization-actions {
    margin-top: 0;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
}

.pagination a,
.pagination span {
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--muted);
    font-size: 13px;
}

.pagination .active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 18px;
}

.detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
}

.detail-cards .detail-item {
    min-height: 74px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
}

.detail-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.detail-item strong {
    display: block;
    overflow-wrap: anywhere;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 14px;
}

.tab-button {
    border: 1px solid var(--line);
    border-radius: 7px;
    min-height: 38px;
    padding: 8px 12px;
    background: #fff;
    color: var(--muted);
    font-weight: 700;
    cursor: pointer;
}

.tab-button.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.code-block {
    max-height: 560px;
    overflow: auto;
    margin: 0;
    padding: 16px;
    background: #0d1424;
    color: #d8e4ff;
    border-radius: 0 0 8px 8px;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.details-panel,
details.snapshot {
    border-bottom: 1px solid var(--line);
}

.details-panel:last-child,
details.snapshot:last-child {
    border-bottom: 0;
}

.details-panel summary,
details.snapshot summary {
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 700;
}

.details-panel[open] summary,
details.snapshot[open] summary {
    border-bottom: 1px solid var(--line);
}

.device-name {
    display: block;
    overflow-wrap: anywhere;
}

.muted {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.mono {
    font-family: Consolas, "Courier New", monospace;
}

.nowrap {
    white-space: nowrap;
}

.wrap-anywhere,
.field-path {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.field-path {
    display: inline-block;
    max-width: 260px;
    color: #2f3f57;
}

.value-preview {
    display: block;
    max-width: 320px;
    color: #344258;
    overflow-wrap: anywhere;
}

.value-details {
    min-width: 84px;
}

.value-details summary {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--primary);
    background: #fff;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.value-details[open] summary {
    margin-bottom: 10px;
}

.value-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 10px;
    min-width: 520px;
}

.value-detail-grid span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.value-detail-grid pre {
    max-height: 280px;
    overflow: auto;
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background: #0d1424;
    color: #d8e4ff;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.os-pill {
    display: inline-block;
    max-width: 150px;
    overflow-wrap: anywhere;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #edf4ff 0%, #f7f4ff 55%, #eef8fb 100%);
}

.login-card {
    width: min(420px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 28px;
}

.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.login-logo img {
    max-width: 150px;
    height: auto;
}

.login-card h1 {
    margin: 0;
    text-align: center;
    font-size: 24px;
}

.login-card p {
    margin: 8px 0 22px;
    color: var(--muted);
    text-align: center;
}

.login-card .field {
    margin-bottom: 14px;
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap input {
    padding-right: 86px;
}

.password-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    border-radius: 6px;
    padding: 5px 8px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus {
    background: var(--panel-soft);
    color: var(--primary);
    outline: none;
}

.password-toggle-icon,
.password-toggle svg {
    width: 16px;
    height: 16px;
}

.password-toggle svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-toggle .icon-eye-off,
.password-toggle.is-visible .icon-eye {
    display: none;
}

.password-toggle.is-visible .icon-eye-off {
    display: block;
}

.remember-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

.alert {
    margin: 14px 0;
    padding: 11px 12px;
    border-radius: 7px;
    font-size: 13px;
}

.alert-error {
    color: #9c2634;
    background: #ffe3e8;
}

.alert-success {
    color: #0b6a3f;
    background: #ddf8eb;
}

.login-footer {
    margin-top: 18px;
    color: var(--muted);
    text-align: center;
    font-size: 12px;
}

.sidebar-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    padding: 9px;
}

.sidebar-toggle span {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: var(--text);
}

.sidebar-backdrop {
    display: none;
}

.confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(13, 20, 36, 0.55);
}

.confirm-backdrop[hidden] {
    display: none;
}

.confirm-dialog {
    width: min(420px, 100%);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(13, 20, 36, 0.28);
    padding: 24px;
    text-align: center;
}

.confirm-dialog h2 {
    margin: 0;
    color: var(--text);
    font-size: 24px;
}

.confirm-dialog p {
    margin: 10px 0 22px;
    color: var(--muted);
    line-height: 1.5;
}

.confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

@media (max-width: 1180px) {
    .grid-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .report-grid {
        grid-template-columns: 1fr;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-admin {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .organization-grid {
        grid-template-columns: 1fr;
    }

    .summary-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .helpdesk-detail-layout {
        grid-template-columns: 1fr;
    }

    .helpdesk-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .helpdesk-report-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 20;
        background: rgba(13, 20, 36, 0.45);
    }

    .main-panel {
        margin-left: 0;
    }

    .sidebar-toggle {
        display: inline-block;
    }

    .topbar {
        align-items: flex-start;
        padding: 14px 16px;
    }

    .admin-profile {
        display: none;
    }

    .content {
        padding: 18px 16px 28px;
    }

    .grid-cards,
    .filters,
    .filter-grid,
    .summary-list,
    .detail-list {
        grid-template-columns: 1fr;
    }

    .value-detail-grid {
        grid-template-columns: 1fr;
        min-width: 280px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-admin {
        grid-template-columns: 1fr;
    }

    .upload-dropzone {
        align-items: flex-start;
    }

    .helpdesk-detail-grid {
        grid-template-columns: 1fr;
    }

    .helpdesk-badge-stack {
        justify-content: flex-start;
    }

    .report-mini-grid,
    .helpdesk-dashboard-links {
        grid-template-columns: 1fr;
    }

    .helpdesk-dashboard-links,
    .report-presets {
        align-items: stretch;
        flex-direction: column;
    }

    .helpdesk-dashboard-links .btn,
    .report-presets .btn,
    .helpdesk-report-actions .btn {
        width: 100%;
    }
}