:root {
    --primary: #0b57ff; /* vivid blue accent */
    --primary-dark: #0837b3;
    --primary-light: #60a5fa;
    --secondary: #0b57ff;
    --accent: #0b57ff;
    --bg: #ffffff; /* main page background stays white */
    --bg-light: #f8fafc; /* subtle off-white */
    --bg-lighter: #eef2f6;
    --card-bg: #ffffff; /* white cards */
    --card-light: #f1f5f9;
    --border: #e2e8f0; /* subtle light border */
    --text: #0f172a; /* dark text */
    --text-muted: #475569;
    --text-light: #64748b;
    --blue: #0b57ff;
    --blue-light: #60a5fa;
    --green: #10b981;
    --green-light: #047857;
    --orange: #f59e0b;
    --orange-light: #b45309;
    --red: #ef4444;
    --red-light: #991b1b;
    --shadow-sm: 0 2px 6px 0 rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 18px -6px rgba(15, 23, 42, 0.08), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 14px 32px -8px rgba(15, 23, 42, 0.12), 0 6px 12px -6px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 30px 70px -20px rgba(15, 23, 42, 0.14), 0 12px 20px -8px rgba(15, 23, 42, 0.1);
    --shadow-3d: 0 30px 60px -15px rgba(15, 23, 42, 0.18);
}

* { 
    box-sizing: border-box;
}

html, body {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, sans-serif;
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-light) 100%);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
}

a { 
    text-decoration: none; 
    color: inherit;
    transition: all 0.3s ease;
}

/* ===== Layout ===== */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    perspective: 1000px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(248,250,252,0.85) 100%);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border);
    padding: 14px 28px;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--shadow-md);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-badge {
    width: 116px;
    height: 38px;
    display: block;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateZ(20px);
}

.brand-badge:hover {
    transform: translateZ(30px) scale(1.04);
}

.brand-text .system-name {
    font-weight: 700;
    font-size: 16px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.brand-text .company-name {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 2px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.notification-menu {
    position: relative;
}

.notification-menu summary {
    list-style: none;
}

.notification-menu summary::-webkit-details-marker {
    display: none;
}

.notification-button {
    width: 42px;
    height: 42px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.notification-button:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.notification-icon {
    font-size: 18px;
    line-height: 1;
}

.notification-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid #fff;
}

.notification-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(360px, calc(100vw - 32px));
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 30;
}

.notification-menu[open] .notification-dropdown {
    display: block;
}

.notification-header {
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.notification-item {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: rgba(11, 87, 255, 0.06);
}

.notification-item.unread {
    background: rgba(239, 68, 68, 0.08);
}

.notification-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
}

.notification-meta,
.notification-time {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.notification-empty {
    padding: 18px 14px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.user-info {
    text-align: right;
    line-height: 1.2;
}

.user-info .user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.user-info .user-role {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255,255,255,0.03);
    box-shadow: 0 8px 16px rgba(11,87,255,0.08), inset -1px -1px 2px rgba(255,255,255,0.04);
}

.user-avatar:hover {
    transform: scale(1.1) rotateY(10deg);
    box-shadow: 0 12px 24px rgba(11, 87, 255, 0.5), inset -1px -1px 2px rgba(0,0,0,0.45);
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#logout-form {
    all: unset;
}

.logout-link {
    font-size: 14px;
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 8px 14px;
    white-space: nowrap;
    background: var(--card-bg);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    transform: translateZ(10px);
    box-shadow: var(--shadow-sm);
}

.logout-link:hover { 
    background: linear-gradient(90deg, rgba(11,87,255,0.06), rgba(11,87,255,0.03));
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateZ(15px) translateY(-2px);
}

/* ===== Body: sidebar + content ===== */
.body-shell {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 260px;
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg) 100%);
    border-right: 1px solid var(--border);
    padding: 20px 12px;
    flex-shrink: 0;
    overflow-y: auto;
    backdrop-filter: blur(4px);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    transform: translateZ(5px);
}

.nav-item:hover { 
    background: rgba(11, 87, 255, 0.06);
    color: var(--primary);
    padding-left: 16px;
    transform: translateZ(8px);
    box-shadow: 0 4px 12px rgba(11, 87, 255, 0.06);
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(11,87,255,0.08) 0%, rgba(11,87,255,0.04) 100%);
    color: var(--text);
    box-shadow: 0 6px 16px rgba(11,87,255,0.06), inset 0 1px 2px rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--primary);
    padding-left: 11px;
    transform: translateZ(10px) translateX(2px);
}

.nav-item .nav-icon {
    width: 18px;
    text-align: center;
    font-size: 16px;
}

.nav-badge {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(11,87,255,0.5), rgba(11,87,255,0.25));
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(11,87,255,0.24);
}

.nav-item.active .nav-badge {
    background: rgba(255, 255, 255, 0.3);
    color: #f1f5f9;
}

.nav-divider {
    border-top: 1px solid var(--border);
    margin: 14px 0;
}

.nav-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-light);
    padding: 10px 14px 6px;
    font-weight: 700;
}

.content {
    flex: 1;
    padding: 32px 40px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.page-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.page-subtitle {
    color: var(--text-muted);
    margin: 0 0 32px;
    font-size: 15px;
}

/* ===== Cards / stats ===== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

@media (max-width: 1000px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .stat-grid { grid-template-columns: 1fr; }
}

.stat-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(246,249,252,0.98) 100%);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md), inset 0 1px 2px rgba(255, 255, 255, 0.6);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    transform: translateZ(10px);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.stat-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(11,87,255,0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-card:hover {
    border-color: rgba(11,87,255,0.5);
    box-shadow: 0 12px 32px rgba(11,87,255,0.18), inset 0 1px 2px rgba(255, 255, 255, 0.02);
    transform: translateZ(20px) translateY(-4px);
}

.stat-card:hover::after {
    opacity: 1;
}

.stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    box-shadow: var(--shadow-md), inset 0 1px 2px rgba(255, 255, 255, 0.6);
    transform: translateZ(10px);
}

.stat-icon.blue { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
.stat-icon.lightblue { background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%); }
.stat-icon.green { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
.stat-icon.black { background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(7,17,41,0.9) 100%); }

.stat-delta {
    font-size: 12px;
    font-weight: 700;
}
.stat-delta.up { color: #10b981; }
.stat-delta.down { color: #ef4444; }

.stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}

.stat-label {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 6px;
    font-weight: 500;
}

/* ===== Generic card / panel ===== */
.panel {
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(246,249,252,0.98) 100%);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 24px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-md), inset 0 1px 2px rgba(255, 255, 255, 0.6);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateZ(5px);
}

.panel:hover {
    border-color: rgba(11,87,255,0.12);
    box-shadow: 0 12px 32px rgba(11,87,255,0.06), inset 0 1px 2px rgba(255, 255, 255, 0.02);
    transform: translateZ(10px) translateY(-2px);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.panel-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.view-all-link {
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.view-all-link:hover {
    color: var(--primary-light);
}

/* ===== Table ===== */
table.tickets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.tickets-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 16px;
    border-bottom: 2px solid var(--border);
    background: rgba(255,255,255,0.02);
}

table.tickets-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

table.tickets-table tr:last-child td { border-bottom: none; }

table.tickets-table tbody tr {
    transition: all 0.3s ease;
    transform: translateZ(2px);
}

table.tickets-table tbody tr:hover { 
    background: rgba(11,87,255,0.06);
    box-shadow: inset 0 0 8px rgba(11,87,255,0.04);
}

/* ===== Badges ===== */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.badge-open { 
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-in_progress { 
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-open { 
    background: rgba(11,87,255,0.12);
    color: #60a5fa;
    border: 1px solid rgba(11,87,255,0.22);
}
.badge-in_progress { 
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.22);
}
.badge-resolved { 
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.22);
}
.badge-closed { 
    background: rgba(255,255,255,0.02);
    color: #a0aec0;
    border: 1px solid rgba(255,255,255,0.03);
}
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

@media (max-width: 700px) {
    .form-grid { grid-template-columns: 1fr; }
}

.form-group label,
.field-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text);
}

.form-input, .form-select, .form-textarea,
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], select, textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    background: var(--card-bg);
    color: var(--text);
    font-family: inherit;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-sm);
}

.form-input::placeholder, textarea::placeholder {
    color: var(--text-light);
}

.form-input:focus, .form-select:focus, .form-textarea:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 6px rgba(11,87,255,0.08), inset 0 0 8px rgba(11,87,255,0.04);
    background: var(--card-bg);
    transform: translateZ(10px);
}

.form-textarea { 
    resize: vertical;
    min-height: 120px;
}

.file-drop {
    border: 2px dashed var(--border);
    border-radius: 12px;
    text-align: center;
    padding: 40px 24px;
    color: var(--text-muted);
    font-size: 14px;
    background: var(--card-bg);
    transition: all 0.3s ease;
}

.file-drop:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.file-drop strong { 
    color: #6366f1;
    font-weight: 700;
}

.file-drop input[type=file] {
    border: none;
    margin-top: 12px;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-transform: none;
    transform: translateZ(5px);
}

.btn-primary { 
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(11, 87, 255, 0.38), inset 0 1px 2px rgba(255, 255, 255, 0.04);
}

.btn-primary:hover { 
    box-shadow: 0 8px 28px rgba(11, 87, 255, 0.48), inset 0 1px 2px rgba(255, 255, 255, 0.04);
    transform: translateZ(10px) translateY(-3px);
}

.btn-primary:active {
    transform: translateZ(5px) translateY(-1px);
}

.btn-outline { 
    background: var(--card-bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.btn-outline:hover { 
    background: rgba(11, 87, 255, 0.06);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateZ(8px) translateY(-2px);
}

.btn-sm { 
    padding: 6px 14px; 
    font-size: 13px; 
}

/* ===== Search / filter bar ===== */
.search-bar {
    display: flex;
    gap: 14px;
    margin-bottom: 24px;
}

.search-bar input[type=text] { 
    flex: 1;
}

/* ===== Ticket list cards (My Tickets) ===== */
.ticket-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(246,249,252,0.98) 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-sm);
    transform: translateZ(5px);
}

.ticket-card:hover {
    border-color: rgba(99, 102, 241, 0.12);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.06), inset 0 1px 2px rgba(255, 255, 255, 0.6);
    transform: translateZ(15px) translateX(4px);
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(246,249,252,0.98) 100%);
}

.ticket-card-main { 
    flex: 1; 
    min-width: 0; 
}

.ticket-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.ticket-card-id { 
    font-weight: 700; 
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.2);
    padding: 2px 8px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.ticket-card-subject {
    font-size: 16px;
    font-weight: 600;
    margin: 6px 0;
    color: var(--text);
}

.ticket-card-meta {
    font-size: 13px;
    color: var(--text-muted);
}

.ticket-card-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.comment-count {
    background: rgba(99, 102, 241, 0.06);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* ===== Login page: Paper -> Digital Transformation ===== */
.login-page {
    overflow: hidden;
    background: #06111f;
}

.login-wrapper {
    --pointer-x: 50%;
    --pointer-y: 50%;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 460px);
    align-items: center;
    gap: clamp(24px, 5vw, 90px);
    padding: 42px clamp(28px, 6vw, 110px);
    color: #eaf2ff;
    background:
        radial-gradient(circle at 18% 28%, rgba(19, 101, 255, .22), transparent 31%),
        radial-gradient(circle at 82% 78%, rgba(0, 210, 173, .12), transparent 30%),
        linear-gradient(135deg, #06111f 0%, #08192b 48%, #06111f 100%);
}

.login-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(51, 132, 255, .10), transparent 20%),
        linear-gradient(90deg, rgba(255,255,255,.012), transparent 25%, transparent 75%, rgba(255,255,255,.012));
}

.login-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .31;
    background-image:
        linear-gradient(rgba(137,176,223,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(137,176,223,.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 25%, transparent 85%);
}

.login-scanline {
    position: absolute;
    left: 0;
    right: 0;
    top: -3px;
    height: 2px;
    z-index: 1;
    opacity: .22;
    background: linear-gradient(90deg, transparent, #49a7ff, #44e0c1, transparent);
    box-shadow: 0 0 22px rgba(73,167,255,.55);
    animation: loginScan 8s linear infinite 4s;
}

@keyframes loginScan {
    from { transform: translateY(-10px); }
    to { transform: translateY(105vh); }
}

.login-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: .88;
}

.login-ambient {
    position: absolute;
    width: 38vw;
    height: 38vw;
    min-width: 420px;
    min-height: 420px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .13;
    z-index: 0;
    pointer-events: none;
    animation: loginAmbientDrift 18s ease-in-out infinite alternate 4s;
}

.login-ambient-one { left: -18vw; top: -22vw; background: #0b57ff; }
.login-ambient-two { right: -20vw; bottom: -26vw; background: #10b981; animation-delay: -7s; }

@keyframes loginAmbientDrift {
    from { transform: translate3d(-2%, -2%, 0) scale(.96); }
    to { transform: translate3d(6%, 5%, 0) scale(1.08); }
}

/* Transformation story */
.digital-story {
    position: relative;
    z-index: 2;
    width: min(100%, 760px);
    min-height: 520px;
    justify-self: center;
}

.paper-zone {
    position: absolute;
    left: 1%;
    top: 44%;
    width: 150px;
    transform: translateY(-50%);
    animation: paperZoneExit .75s cubic-bezier(.65,.05,.36,1) 1.55s forwards;
}

.paper-stack { position: relative; width: 112px; height: 148px; margin: 0 auto; }
.paper-sheet {
    position: absolute;
    inset: 0;
    border-radius: 7px;
    border: 1px solid rgba(151,175,205,.72);
    background: linear-gradient(145deg, #f9fbff, #dbe5f1);
    box-shadow: 0 18px 38px rgba(0,0,0,.32);
}
.paper-sheet-back { transform: translate(-15px, 12px) rotate(-8deg); opacity: .66; }
.paper-sheet-mid { transform: translate(-7px, 5px) rotate(-3deg); opacity: .84; }
.paper-sheet-front { overflow: hidden; animation: paperToGateway 1.35s cubic-bezier(.45,.05,.25,1) .55s forwards; }
.paper-fold {
    position: absolute; right: 0; top: 0; width: 28px; height: 28px;
    background: linear-gradient(225deg, #b9cadc 50%, transparent 51%);
}
.paper-line { position:absolute; left:17px; height:4px; border-radius:6px; background:#8ba0b7; opacity:.72; }
.paper-line-1 { top:48px; width:72px; }
.paper-line-2 { top:62px; width:63px; }
.paper-line-3 { top:76px; width:76px; }
.paper-stamp {
    position:absolute; left:18px; bottom:20px; padding:5px 8px; border:1px solid #7289a5;
    border-radius:4px; color:#61758d; font-size:9px; font-weight:800; letter-spacing:1.4px;
}
.story-caption { margin-top: 15px; text-align:center; color:#9db0c7; font-size:12px; letter-spacing:.7px; text-transform:uppercase; }

@keyframes paperToGateway {
    0% { transform: translate3d(0,0,0) rotate(0) scale(1); opacity:1; filter:none; }
    70% { transform: translate3d(177px,0,0) rotate(1deg) scale(.72); opacity:.9; filter: brightness(1.1); }
    100% { transform: translate3d(218px,0,0) rotate(2deg) scale(.12); opacity:0; filter: blur(5px) brightness(1.8); }
}
@keyframes paperZoneExit { to { opacity:.18; transform: translateY(-50%) translateX(38px) scale(.86); } }

.digital-gateway {
    position:absolute; left:36%; top:44%; width:132px; height:132px; transform:translate(-50%,-50%);
    display:grid; place-items:center;
}
.gateway-ring {
    position:absolute; border-radius:50%; border:1px solid rgba(78,164,255,.55);
    box-shadow: inset 0 0 30px rgba(17,101,255,.08), 0 0 22px rgba(17,101,255,.12);
}
.gateway-ring-one { inset:0; animation: gatewayPulse 2.4s ease-in-out infinite; }
.gateway-ring-two { inset:17px; border-color:rgba(72,224,193,.55); animation: gatewaySpin 8s linear infinite; border-style:dashed; }
.gateway-core {
    width:56px; height:56px; border-radius:17px; display:grid; place-items:center;
    background:linear-gradient(145deg, rgba(22,107,255,.38), rgba(18,214,174,.22));
    border:1px solid rgba(125,194,255,.55); box-shadow:0 0 30px rgba(29,126,255,.28);
    animation: gatewayIgnite .55s ease .95s both;
}
.gateway-core svg { width:25px; fill:none; stroke:#dff4ff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gateway-label { position:absolute; top:145px; white-space:nowrap; color:#69b8ff; font-size:10px; font-weight:800; letter-spacing:1.8px; }
@keyframes gatewayPulse { 50% { transform:scale(1.08); opacity:.58; box-shadow:0 0 40px rgba(26,122,255,.25); } }
@keyframes gatewaySpin { to { transform:rotate(360deg); } }
@keyframes gatewayIgnite { from { transform:scale(.45); opacity:.2; } to { transform:scale(1); opacity:1; } }

.data-stream {
    position:absolute; left:42%; right:26%; top:44%; height:4px; transform:translateY(-50%);
}
.data-stream::before {
    content:''; position:absolute; left:0; right:0; top:1px; height:1px;
    background:linear-gradient(90deg, rgba(50,151,255,.1), #46a9ff, #49e3bd, rgba(73,227,189,.1));
    transform:scaleX(0); transform-origin:left; animation:dataLineGrow 1.05s ease 1.65s forwards;
    box-shadow:0 0 12px rgba(65,183,255,.45);
}
.data-bit {
    --delay: calc(1.6s + (var(--i) * .045s));
    position:absolute; left:0; top:50%; width:5px; height:5px; border-radius:1px;
    background:#72c7ff; box-shadow:0 0 9px rgba(91,196,255,.8);
    opacity:0; animation:dataBitFly 1.15s linear var(--delay) forwards;
}
.data-bit:nth-child(3n) { background:#55e6bf; }
.data-bit:nth-child(4n) { width:3px; height:8px; }
@keyframes dataLineGrow { to { transform:scaleX(1); } }
@keyframes dataBitFly {
    0% { opacity:0; transform:translate(0, calc((var(--i) - 8) * 2px)) scale(.4); }
    15% { opacity:1; }
    100% { opacity:0; transform:translate(calc(22vw + 30px), calc((var(--i) - 8) * -1.5px)) scale(1.05); }
}

.digital-modules {
    position:absolute; right:0; top:44%; width:260px; height:300px; transform:translateY(-50%);
}
.module-node, .module-hub {
    position:absolute; display:flex; align-items:center; justify-content:center; border:1px solid rgba(104,166,225,.30);
    background:rgba(7,30,50,.68); backdrop-filter:blur(8px); box-shadow:0 10px 28px rgba(0,0,0,.22);
    opacity:0; transform:scale(.55); animation:moduleAppear .46s cubic-bezier(.2,.9,.25,1.15) forwards;
}
.module-node { width:64px; height:64px; border-radius:18px; flex-direction:column; gap:4px; }
.module-node > span { color:#cde8ff; font-size:12px; font-weight:850; letter-spacing:.4px; }
.module-node small { color:#7696b6; font-size:8px; }
.module-hub {
    left:94px; top:114px; width:86px; height:86px; border-radius:26px; flex-direction:column; gap:2px;
    border-color:rgba(78,205,190,.45); background:linear-gradient(145deg, rgba(12,71,118,.82), rgba(8,74,76,.72));
    animation-delay:2.83s; box-shadow:0 0 34px rgba(44,172,208,.18), 0 15px 34px rgba(0,0,0,.28);
}
.module-hub-logo { width:56px; height:24px; object-fit:contain; filter:brightness(0) invert(1); opacity:.9; }
.module-hub strong { color:#fff; font-size:11px; letter-spacing:2px; }
.module-documents { left:8px; top:18px; animation-delay:2.08s; }
.module-workflow { left:98px; top:0; animation-delay:2.18s; }
.module-erp { right:0; top:38px; animation-delay:2.28s; }
.module-crm { right:2px; top:130px; animation-delay:2.38s; }
.module-projects { right:25px; bottom:11px; animation-delay:2.48s; }
.module-tickets { left:82px; bottom:0; animation-delay:2.58s; }
.module-analytics { left:0; bottom:48px; animation-delay:2.68s; }
@keyframes moduleAppear { to { opacity:1; transform:scale(1); } }

.transformation-label {
    position:absolute; left:8%; right:8%; bottom:12px; display:flex; align-items:center; justify-content:center; gap:10px;
    color:#6f8daa; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    opacity:0; animation:fadeInSoft .7s ease 2.8s forwards;
}
.transformation-label i { width:34px; height:1px; background:linear-gradient(90deg, #2f6c9d, #3abca4); }

.login-brand-message {
    position:absolute; left:clamp(28px, 6vw, 110px); bottom:clamp(28px, 7vh, 70px); z-index:3;
    opacity:0; transform:translateY(10px); animation:brandMessageIn .7s ease 3.05s forwards;
}
.brand-kicker { color:#6fb8f0; font-size:10px; font-weight:800; letter-spacing:1.8px; margin-bottom:9px; }
.login-brand-message h2 { margin:0; color:#f5f9ff; font-size:clamp(25px,2.2vw,36px); line-height:1.08; letter-spacing:-.8px; }
.login-brand-message h2 span { color:#4bd7b9; }
.login-brand-message p { margin:10px 0 0; color:#829bb5; font-size:13px; }
@keyframes brandMessageIn { to { opacity:1; transform:translateY(0); } }
@keyframes fadeInSoft { to { opacity:1; } }

/* Login card */
.login-card {
    width:min(100%, 432px);
    justify-self:end;
    background:linear-gradient(160deg, rgba(255,255,255,.965), rgba(242,247,253,.92));
    border:1px solid rgba(163,190,218,.48);
    border-radius:26px;
    padding:38px 38px 28px;
    box-shadow:0 36px 90px -34px rgba(0,0,0,.72), 0 12px 35px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.96);
    position:relative; z-index:4;
    backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
    opacity:0; transform:translateX(24px) scale(.98);
    animation:loginCardReveal .72s cubic-bezier(.2,.8,.2,1) 3.05s forwards;
}
.login-card::before {
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(49,132,255,.22), rgba(80,220,189,.13));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
@keyframes loginCardReveal { to { opacity:1; transform:translateX(0) scale(1); } }

.login-brand-wrap { display:flex; justify-content:center; margin-bottom:19px; }
.login-card .brand-badge { width:188px; height:61px; margin:0; filter:drop-shadow(0 8px 16px rgba(15,23,42,.08)); }
.login-heading { text-align:center; margin-bottom:28px; }
.login-title { margin:0; font-size:27px; font-weight:750; letter-spacing:-.7px; color:#0f172a; line-height:1.2; }
.login-subtitle { color:#64748b; font-size:14px; margin:7px 0 0; }
.login-form .form-group { margin-bottom:17px !important; }
.login-card label { display:block; margin-bottom:7px; color:#1e293b; font-size:13px; font-weight:650; }
.login-input-shell { position:relative; }
.login-input-shell > svg {
    position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); fill:none; stroke:#94a3b8;
    stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; transition:stroke .2s ease; z-index:1;
}
.login-card .form-input {
    width:100%; min-height:50px; padding:12px 14px 12px 44px; background:rgba(255,255,255,.92); border:1px solid #d8e1ec;
    border-radius:12px; color:#0f172a; font-size:15px; box-shadow:0 4px 12px rgba(15,23,42,.045),inset 0 1px 0 rgba(255,255,255,.7);
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.login-card .form-input::placeholder { color:#94a3b8; }
.login-card .form-input:hover { border-color:#b8c6d8; }
.login-card .form-input:focus { outline:none; transform:none; border-color:rgba(11,87,255,.72); background:#fff; box-shadow:0 0 0 4px rgba(11,87,255,.09),0 7px 18px rgba(15,23,42,.06); }
.login-input-shell:focus-within > svg { stroke:#0b57ff; }
.login-submit {
    width:100%; min-height:52px; justify-content:center; gap:9px; padding:13px 16px; margin-top:8px; border-radius:12px; border:0;
    background:linear-gradient(135deg,#2463ff 0%,#0b57ff 48%,#0837b3 100%); box-shadow:0 13px 26px -12px rgba(11,87,255,.72),inset 0 1px 0 rgba(255,255,255,.22);
    position:relative; overflow:hidden;
}
.login-submit::before { content:''; position:absolute; top:0; bottom:0; left:-45%; width:34%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-20deg); transition:left .55s ease; }
.login-submit:hover::before { left:120%; }
.login-submit:hover { transform:translateY(-1px); box-shadow:0 16px 30px -13px rgba(11,87,255,.85); }
.login-submit:active { transform:translateY(0); }
.login-submit svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.login-submit:hover svg { transform:translateX(3px); }
.login-status { margin-top:22px; padding-top:18px; border-top:1px solid rgba(226,232,240,.88); display:flex; align-items:center; justify-content:center; gap:8px; color:#64748b; font-size:12px; letter-spacing:.1px; }
.login-card .alert-error { color:#991b1b; background:rgba(254,226,226,.88); border-color:rgba(239,68,68,.28); }
.login-status-dot { width:7px; height:7px; border-radius:50%; background:#10b981; box-shadow:0 0 0 4px rgba(16,185,129,.10),0 0 12px rgba(16,185,129,.35); }

.errorlist { color:#991b1b; list-style:none; padding:10px; background:rgba(239,68,68,.08); border-radius:8px; font-size:13px; margin:8px 0 16px; border:1px solid rgba(239,68,68,.18); }

@media (max-width: 1100px) {
    .login-wrapper { grid-template-columns:1fr 420px; padding-left:32px; padding-right:32px; gap:26px; }
    .digital-story { transform:scale(.88); transform-origin:center; }
    .login-brand-message { left:32px; }
}

@media (max-width: 860px) {
    .login-wrapper { grid-template-columns:1fr; place-items:center; padding:22px 16px; }
    .digital-story { position:absolute; inset:0; width:100%; min-height:100%; transform:none; opacity:.28; }
    .paper-zone { left:5%; }
    .digital-gateway { left:40%; }
    .digital-modules { right:3%; }
    .transformation-label, .login-brand-message { display:none; }
    .login-card { justify-self:center; width:min(100%,430px); animation-delay:1.2s; }
}

@media (max-width: 640px) {
    .login-wrapper { padding:16px 14px; }
    .login-card { padding:30px 22px 24px; border-radius:20px; }
    .login-card .brand-badge { width:164px; height:54px; }
    .login-title { font-size:24px; }
    .login-grid { background-size:40px 40px; }
    .paper-zone { left:-25px; transform:translateY(-50%) scale(.72); }
    .digital-gateway { left:34%; transform:translate(-50%,-50%) scale(.72); }
    .digital-modules { right:-58px; transform:translateY(-50%) scale(.72); }
}

@media (prefers-reduced-motion: reduce) {
    .paper-zone, .paper-sheet-front, .gateway-ring, .gateway-core, .data-stream::before, .data-bit,
    .module-node, .module-hub, .transformation-label, .login-brand-message, .login-card, .login-ambient, .login-scanline {
        animation:none !important;
    }
    .paper-zone { opacity:.18; }
    .paper-sheet-front { opacity:.35; transform:translateX(180px) scale(.3); }
    .data-stream::before { transform:scaleX(1); }
    .module-node, .module-hub, .transformation-label, .login-brand-message, .login-card { opacity:1; transform:none; }
    .login-submit::before { display:none; }
}

/* ===== Alerts ===== */
.alert {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 14px;
    border-left: 4px solid;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.alert-success { 
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-left-color: #10b981;
}

.alert-error { 
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-left-color: #ef4444;
}

/* ===== Reports ===== */
.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 900px) {
    .chart-grid { grid-template-columns: 1fr; }
}

.category-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 14px;
}

.category-row .cat-label { 
    width: 160px; 
    flex-shrink: 0;
    font-weight: 500;
    color: var(--text);
}

.bar-track {
    flex: 1;
    height: 10px;
    background: var(--border);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 5px;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 8px rgba(11, 87, 255, 0.36);
}

.cat-count { 
    width: 60px; 
    text-align: right; 
    color: var(--text-muted); 
    flex-shrink: 0;
    font-weight: 700;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .topbar {
        padding: 12px 16px;
    }
    
    .topbar-right {
        gap: 12px;
    }
    
    .sidebar {
        width: 240px;
        padding: 16px 8px;
    }
    
    .content {
        padding: 24px 20px;
    }
    
    .stat-grid {
        grid-template-columns: 1fr;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .topbar-right {
        gap: 8px;
    }
    
    .user-info {
        display: none;
    }
    
    .brand-text .system-name {
        font-size: 14px;
    }

}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(15,23,42,0.03);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(11, 87, 255, 0.32);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%);
}

/* ===== Ticket detail ===== */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.attachment-preview img {
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-top: 12px;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
}

.attachment-preview img:hover {
    box-shadow: 0 12px 32px rgba(11, 87, 255, 0.28);
    transform: scale(1.02) translateZ(10px);
}

.comment {
    padding: 16px;
    margin-bottom: 12px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 10px;
    border-left: 3px solid #6366f1;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.comment:hover {
    background: rgba(99, 102, 241, 0.12);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    transform: translateX(2px) translateZ(5px);
}

.comment:last-child { 
    margin-bottom: 0;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.comment-author { 
    font-weight: 700; 
    color: #60a5fa;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comment-body {
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ===== Additional modern styles ===== */
.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

select, .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cbd5e1' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

/* Button group */
.btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Status indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.status-indicator.active {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.status-indicator.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.status-indicator.inactive {
    background: rgba(75, 85, 99, 0.2);
    color: #a0aec0;
}

/* Link styling */
a.link {
    color: var(--primary);
    font-weight: 600;
    transition: all 0.3s ease;
}

a.link:hover {
    color: var(--primary-light);
    text-decoration: underline;
}

/* Text utilities */
.text-muted {
    color: var(--text-muted);
}

.text-light {
    color: var(--text-light);
}

.text-error {
    color: #ef4444;
}

.text-success {
    color: #10b981;
}

/* Divider */
hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

/* Animation for transitions */
.fade-in {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* ===== Create Ticket Dropdown ===== */

.sidebar-dropdown {
    width: 100%;
    margin: 0;
    padding: 0;
}

.sidebar-dropdown > summary {
    list-style: none;
}

.sidebar-dropdown > summary::-webkit-details-marker {
    display: none;
}

.sidebar-dropdown .dropdown-toggle {
    width: 100%;
}

.dropdown-arrow {
    margin-left: auto;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.sidebar-dropdown[open] .dropdown-arrow {
    transform: rotate(180deg);
}

.sidebar-submenu {
    display: flex;
    flex-direction: column;
    margin: -2px 0 8px 32px;
    padding: 4px 0 4px 14px;
    border-left: 1px solid var(--border);
}

.submenu-item {
    display: block;
    padding: 9px 12px;
    margin: 2px 0;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.25s ease;
}

.submenu-item:hover {
    color: var(--primary);
    background: rgba(11, 87, 255, 0.06);
    padding-left: 15px;
}

.submenu-item.active {
    color: var(--primary);
    background: rgba(11, 87, 255, 0.09);
    font-weight: 700;
}

/* Submenu icons */
.submenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.submenu-icon {
    width: 18px;
    min-width: 18px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
}


/* ===== Leave Request Form ===== */
.leave-page { max-width: 1050px; margin: 0 auto; direction: rtl; }
.leave-form-card { background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-md); overflow:hidden; }
.leave-form-header { display:grid; grid-template-columns:220px 1fr 240px; min-height:120px; border-bottom:1px solid var(--border); direction:ltr; }
.leave-form-header > div { display:flex; align-items:center; justify-content:center; padding:20px; border-right:1px solid var(--border); text-align:center; }
.leave-form-header > div:last-child { border-right:none; }
.leave-form-logo img { max-width:150px; max-height:70px; }
.leave-form-title { color:var(--primary); font-weight:800; font-size:24px; direction:rtl; }
.leave-company { direction:rtl; font-weight:800; line-height:1.8; }
.leave-blue-line { height:14px; background:linear-gradient(90deg,var(--primary),var(--primary-light)); }
.leave-section { display:grid; grid-template-columns:1fr 145px; border-bottom:1px solid var(--border); }
.leave-section:last-of-type { border-bottom:none; }
.leave-section-body { padding:24px; }
.leave-section-label { border-right:1px solid var(--border); display:flex; align-items:center; justify-content:center; text-align:center; font-weight:800; padding:14px; background:var(--bg-light); }
.leave-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.leave-field-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.leave-field { display:flex; flex-direction:column; gap:7px; }
.leave-field.full { grid-column:1/-1; }
.leave-field label { font-weight:700; font-size:14px; }
.leave-field input,.leave-field select,.leave-field textarea { direction:rtl; }
.leave-types { display:grid; grid-template-columns:repeat(6,minmax(100px,1fr)); gap:10px; margin:18px 0; }
.leave-type-option { border:1px solid var(--border); border-radius:10px; padding:12px 8px; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; background:#fff; }
.leave-type-option:has(input:checked) { border-color:var(--primary); background:rgba(11,87,255,.06); color:var(--primary); font-weight:700; }
.leave-type-option input { width:auto; box-shadow:none; }
.leave-actions { display:flex; gap:12px; justify-content:flex-start; padding:22px 24px; background:var(--bg-light); }
.temporal-fields[hidden],.date-fields[hidden] { display:none !important; }
.leave-note { color:var(--text-muted); font-size:13px; margin-top:8px; }
@media(max-width:800px){
 .leave-form-header{grid-template-columns:1fr}.leave-form-header>div{border-right:none;border-bottom:1px solid var(--border)}
 .leave-section{grid-template-columns:1fr}.leave-section-label{order:-1;border-right:none;border-bottom:1px solid var(--border)}
 .leave-field-grid,.leave-field-grid.three{grid-template-columns:1fr}.leave-types{grid-template-columns:repeat(2,1fr)}
}

/* Read-only values loaded from the employee profile database */
.database-value {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 600;
    cursor: not-allowed;
}

/* Leave form without side-use labels */
.leave-section.no-side-label {
    display: block;
}

.leave-section.no-side-label .leave-section-body {
    width: 100%;
}

.leave-note-top {
    margin: 20px 0 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(11, 87, 255, 0.06);
    color: var(--text-muted);
}

/* Leave request attachments */
.leave-file-input {
    cursor: pointer;
}

.leave-file-help {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 12px;
}

#attachment-client-error {
    margin-top: 6px;
    font-size: 13px;
}


/* Leave request: optional and read-only manager approval */
.optional-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.readonly-select:disabled {
    opacity: 1;
    color: var(--text);
    background-color: var(--bg-light);
    cursor: not-allowed;
}

.leave-readonly-help {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 12px;
}


/* ===== Professional My Work / Leave Workflow ===== */
.work-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px;padding:6px;background:var(--bg-light);border:1px solid var(--border);border-radius:12px}
.work-tab{padding:10px 16px;border-radius:9px;font-weight:700;font-size:14px;color:var(--text-muted)}
.work-tab:hover,.work-tab.active{background:#fff;color:var(--primary);box-shadow:var(--shadow-sm)}
.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-inline-start:6px;padding:0 6px;border-radius:20px;background:var(--red);color:#fff;font-size:11px}
.empty-state{text-align:center;color:var(--text-muted);padding:28px}
.leave-work-card{border-inline-start:4px solid var(--primary)}
.leave-detail-page{max-width:1100px;margin:0 auto}
.workflow-strip{display:flex;align-items:center;justify-content:center;margin:0 0 24px;padding:18px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm)}
.workflow-step{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:120px;text-align:center;color:var(--text-muted)}
.workflow-step span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--border);font-weight:800}
.workflow-step.done span{background:var(--green);color:#fff}.workflow-step.current span{background:var(--orange);color:#fff}
.workflow-step small{font-size:11px}.workflow-line{height:3px;flex:1;max-width:130px;background:var(--border)}.workflow-line.done{background:var(--green)}
.leave-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:1px;background:var(--border);overflow:hidden}
.leave-detail-grid>div{display:flex;flex-direction:column;gap:6px;padding:16px;background:#fff}.leave-detail-grid .full{grid-column:1/-1}.detail-label{font-size:12px;color:var(--text-muted);font-weight:700}
.approval-panel{border-top:4px solid var(--primary)}.danger-zone{border-inline-start:4px solid var(--red)}.danger-button{border-color:var(--red)!important;color:var(--red)!important}
.attachment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:18px}.attachment-grid a{display:flex;flex-direction:column;gap:7px}.attachment-grid img{width:100%;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.confirm-delete{max-width:650px;margin:50px auto}
@media(max-width:760px){.workflow-strip{overflow-x:auto;justify-content:flex-start}.leave-detail-grid{grid-template-columns:1fr}.leave-detail-grid .full{grid-column:auto}.work-tabs{flex-direction:column}.work-tab{width:100%}}


/* Native date/time picker usability */
.date-picker-field,
.time-picker-field {
    cursor: pointer;
}

.field-format-hint {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
}

/* ===== EMS v2.0 Phase 1 ===== */
.brand-link { display:flex; align-items:center; gap:14px; }
.brand-copy { display:flex; flex-direction:column; line-height:1.2; }
.brand-copy strong { font-size:15px; color:var(--text); }
.brand-copy span { font-size:11px; color:var(--text-muted); }
.page-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.phase-badge { border:1px solid rgba(11,87,255,.22); background:rgba(11,87,255,.07); color:var(--primary); border-radius:999px; padding:7px 12px; font-size:12px; font-weight:700; white-space:nowrap; }
.stat-link { color:inherit; display:block; }
.stat-link:hover { color:inherit; }
.quick-action-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.quick-action { display:flex; flex-direction:column; gap:3px; padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--card-bg); }
.quick-action:hover { border-color:rgba(11,87,255,.35); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.quick-action > span { font-size:24px; }
.quick-action strong { color:var(--text); }
.quick-action small { color:var(--text-muted); line-height:1.4; }
.dashboard-two-column { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:24px; }
.empty-cell { text-align:center; color:var(--text-muted); padding:24px !important; }
.work-list-item { display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--border); }
.work-list-item:last-child { border-bottom:0; }
.work-list-item:hover strong { color:var(--primary); }
.work-list-item span:last-child { display:flex; flex-direction:column; min-width:0; }
.work-list-item small { color:var(--text-muted); }
.work-list-icon { width:34px; height:34px; border-radius:9px; background:rgba(11,87,255,.08); display:flex; align-items:center; justify-content:center; }
.mini-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mini-stat-row div { padding:14px; border:1px solid var(--border); border-radius:10px; display:flex; flex-direction:column; }
.mini-stat-row strong { font-size:24px; color:var(--text); }
.mini-stat-row span { font-size:12px; color:var(--text-muted); }
.module-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-bottom:24px; }
.module-card { display:flex; gap:16px; padding:20px; background:var(--card-bg); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); }
.module-link:hover { border-color:rgba(11,87,255,.35); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.module-icon { width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(11,87,255,.08); font-size:22px; }
.module-body { min-width:0; flex:1; }
.module-body h2 { margin:0 0 6px; font-size:16px; color:var(--text); }
.module-body p { margin:0; color:var(--text-muted); font-size:13px; line-height:1.5; }
.module-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.module-status { display:inline-flex; margin-top:8px; padding:3px 8px; border-radius:999px; background:var(--bg-lighter); color:var(--text-muted); font-size:10px; font-weight:700; }
.workflow-strip { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:18px 0 8px; }
.workflow-strip span { padding:8px 12px; border-radius:8px; background:rgba(11,87,255,.07); color:var(--text); font-size:12px; font-weight:700; }
.ems-footer { margin-top:40px; padding-top:18px; border-top:1px solid var(--border); color:var(--text-light); font-size:11px; text-align:center; }
@media (max-width:900px) { .dashboard-two-column { grid-template-columns:1fr; } .mini-stat-row { grid-template-columns:repeat(2,1fr); } .brand-copy { display:none; } }
@media (max-width:640px) { .page-heading-row { flex-direction:column; } .mini-stat-row { grid-template-columns:1fr 1fr; } }
.channel-list { display:flex; flex-direction:column; }
.channel-row { display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid var(--border); }
.channel-row:last-child { border-bottom:0; }
.channel-row b { font-size:11px; color:var(--green-light); }
.channel-row.muted { color:var(--text-muted); }
.channel-row.muted b { color:var(--text-light); }
.badge-sent { background:rgba(16,185,129,.12); color:#047857; }
.badge-failed { background:rgba(239,68,68,.12); color:#991b1b; }
.badge-skipped { background:rgba(100,116,139,.12); color:#475569; }

/* ===== EMS Phase 2: Unified My Work & Audit ===== */
.work-summary-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.work-summary-pills span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 12px;
    box-shadow: var(--shadow-sm);
}
.work-summary-pills strong { color: var(--primary); font-size: 13px; }
.panel-kicker { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; }
.unified-work-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.unified-work-card:hover {
    transform: translateY(-1px);
    border-color: rgba(11,87,255,.30);
    box-shadow: var(--shadow-md);
}
.work-type-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    background: rgba(11,87,255,.08);
}
.work-type-icon.task { background: rgba(16,185,129,.12); color: #047857; }
.work-type-icon.complete { background: rgba(16,185,129,.16); color: #047857; }
.work-card-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.work-card-body strong { color: var(--text); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-card-body small { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.work-progress-chip, .audit-reference {
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(11,87,255,.08);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
}
.work-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.work-section-heading::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.empty-state.compact { padding: 14px; }
.audit-timeline { display: flex; flex-direction: column; }
.audit-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--border);
}
.audit-entry:last-child { border-bottom: none; }
.audit-entry > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.audit-entry strong { font-size: 13px; color: var(--text); }
.audit-entry small { margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.audit-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(11,87,255,.09); }
.audit-dot.action-approve, .audit-dot.action-complete { background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.10); }
.audit-dot.action-reject, .audit-dot.action-delete { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.10); }
@media (max-width: 800px) {
    .page-heading-row { align-items: flex-start; }
    .work-summary-pills { justify-content: flex-start; }
    .work-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }
    .work-tab { white-space: nowrap; }
}

/* ===== EMS Phase 3: Unified Notification Center ===== */
.notification-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.notification-sidebar { padding: 12px; position: sticky; top: 92px; }
.notification-tab {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 12px; border-radius: 9px;
    color: var(--text-muted); font-size: 14px; font-weight: 600;
}
.notification-tab:hover, .notification-tab.active { background: rgba(11,87,255,.08); color: var(--primary); }
.notification-tab b { font-size: 11px; background: var(--bg-lighter); padding: 2px 7px; border-radius: 999px; }
.notification-filter-title { margin: 16px 10px 6px; color: var(--text-light); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.notification-main { min-width: 0; }
.notification-toolbar { padding: 14px; margin-bottom: 14px; }
.notification-search { display: flex; gap: 10px; }
.notification-search input { flex: 1; }
.notification-inbox-panel { padding: 0; overflow: hidden; }
.notification-card { display: flex; border-bottom: 1px solid var(--border); background: #fff; }
.notification-card:last-child { border-bottom: 0; }
.notification-card.unread { background: rgba(11,87,255,.035); box-shadow: inset 3px 0 0 var(--primary); }
.notification-card-main { display: flex; align-items: flex-start; gap: 14px; flex: 1; padding: 16px 18px; min-width: 0; }
.notification-card-main:hover { background: rgba(11,87,255,.035); }
.notification-module-icon { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bg-light); font-size: 17px; }
.notification-card-copy { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.notification-card-title { font-weight: 750; color: var(--text); }
.notification-card-message { color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.notification-card-meta { color: var(--text-light); font-size: 11px; }
.notification-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); margin: 8px 0 0 auto; flex: 0 0 9px; }
.notification-card-action { display: flex; align-items: center; padding: 10px 12px; }
.icon-button { border: 0; background: transparent; cursor: pointer; padding: 8px; border-radius: 8px; }
.icon-button:hover { background: var(--bg-lighter); }
.preference-form { display: grid; gap: 10px; }
.preference-form label { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; }
.preference-form input[type=checkbox] { width: 18px; height: 18px; }
.preference-form small { color: var(--text-light); margin-left: 5px; }
.notification-bottom-grid { margin-top: 20px; }
.status-ok { color: var(--green-light); }
.badge-sent { background: rgba(16,185,129,.12); color: #047857; border: 1px solid rgba(16,185,129,.2); }
.badge-failed { background: rgba(239,68,68,.12); color: #991b1b; border: 1px solid rgba(239,68,68,.2); }
.badge-skipped { background: rgba(245,158,11,.12); color: #92400e; border: 1px solid rgba(245,158,11,.2); }
.badge-queued { background: rgba(59,130,246,.12); color: #1d4ed8; border: 1px solid rgba(59,130,246,.2); }
.table-responsive { overflow-x: auto; }
@media (max-width: 900px) {
    .notification-layout { grid-template-columns: 1fr; }
    .notification-sidebar { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
    .notification-filter-title { width: 100%; }
    .notification-tab { flex: 1 1 140px; }
}

/* ===== EMS Phase 5: Unified Reports ===== */
.report-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
}
.report-filter-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}
.report-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.report-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 22px;
}
.report-tab {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}
.report-tab:hover,
.report-tab.active {
    color: var(--primary);
    border-color: rgba(11, 87, 255, 0.35);
    background: rgba(11, 87, 255, 0.08);
}
.metric-list,
.dashboard-insight-list {
    display: grid;
    gap: 10px;
}
.metric-list > div,
.dashboard-insight-list > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.75);
}
.dashboard-insight-list > a:hover {
    border-color: rgba(11, 87, 255, 0.35);
    background: rgba(11, 87, 255, 0.06);
    color: var(--primary);
}
.chart-narrow {
    max-width: 760px;
}
.stat-card small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
}
@media (max-width: 900px) {
    .report-filter-bar { grid-template-columns: 1fr 1fr; }
    .report-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .report-filter-bar { grid-template-columns: 1fr; }
    .report-filter-actions { grid-column: auto; }
}

/* ===== EMS Phase 6: Workflow Tasks & Activity Timeline ===== */
.workflow-filter-bar select { width: auto; min-width: 160px; }
.workflow-task-list { padding: 12px; }
.workflow-task-card { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; border:1px solid var(--border); border-radius:12px; margin-bottom:10px; background:var(--card-bg); }
.workflow-task-card:hover { border-color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.workflow-task-card h3 { margin:5px 0 3px; font-size:16px; }
.workflow-task-card small { color:var(--text-muted); }
.workflow-task-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.module-pill { display:inline-block; font-size:10px; letter-spacing:.08em; font-weight:800; color:var(--primary); background:rgba(11,87,255,.08); padding:3px 7px; border-radius:999px; margin-right:8px; }
.priority-text { font-size:12px; color:var(--text-muted); }
.activity-timeline { position:relative; margin-top:16px; }
.activity-entry { position:relative; margin-left:18px; padding:0 0 18px 24px; border-left:2px solid var(--border); }
.activity-entry:last-child { border-left-color:transparent; }
.activity-entry::before { content:''; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--primary); border:3px solid #fff; box-shadow:0 0 0 1px var(--border); }
.activity-entry strong { display:block; font-size:14px; }
.activity-entry p { margin:3px 0; color:var(--text-muted); }
.activity-entry small { color:var(--text-light); }
@media (max-width:640px){ .workflow-task-card{align-items:flex-start;flex-direction:column}.workflow-task-side{align-items:flex-start}.workflow-filter-bar{flex-wrap:wrap}.workflow-filter-bar>*{width:100%!important} }

/* ===== EMS Phase 7: Access Control Foundation & Global Search ===== */
.global-search-form {
    flex: 1;
    max-width: 520px;
    margin: 0 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.92);
    box-shadow: var(--shadow-sm);
}
.global-search-form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(11,87,255,.08); }
.global-search-form input[type="search"] { border: 0; box-shadow: none; padding: 6px 4px; background: transparent; min-width: 0; }
.global-search-form input[type="search"]:focus { box-shadow: none; transform: none; }
.global-search-form button { border: 0; border-radius: 8px; padding: 7px 12px; background: var(--primary); color: white; cursor: pointer; font-weight: 700; }
.global-search-icon { color: var(--text-light); font-size: 18px; }
.global-search-main { display: grid; grid-template-columns: minmax(240px,1fr) 200px auto; gap: 12px; align-items: center; }
.search-results-panel { padding: 12px; }
.search-result-card { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--card-bg); }
.search-result-card:hover { border-color: rgba(11,87,255,.35); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.search-result-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: rgba(11,87,255,.08); font-size: 20px; }
.search-result-body { min-width: 0; }
.search-result-body h3 { margin: 4px 0 2px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-body p { margin: 0; color: var(--text-muted); font-size: 13px; }
.search-result-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.search-result-time { color: var(--text-light); font-size: 12px; white-space: nowrap; }
.empty-search-state { text-align: center; padding: 48px 20px; }
.empty-search-state .module-icon { margin: auto; }
@media (max-width: 980px) { .global-search-form { max-width: 360px; margin: 0 12px; } .global-search-form button { display:none; } }
@media (max-width: 760px) { .global-search-form { display:none; } .global-search-main { grid-template-columns: 1fr; } .search-result-card { grid-template-columns: 42px minmax(0,1fr); } .search-result-time { grid-column: 2; } }

/* ===== EMS Phase 9: Responsive UX, accessibility and dark mode ===== */
:root {
    color-scheme: light;
    --topbar-height: 64px;
    --sidebar-width: 260px;
    --focus-ring: 0 0 0 4px rgba(11, 87, 255, .18);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1220;
    --bg-light: #111a2c;
    --bg-lighter: #182338;
    --card-bg: #111a2c;
    --card-light: #182338;
    --border: #26354d;
    --text: #e8eef8;
    --text-muted: #b2bfd1;
    --text-light: #8fa0b7;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .24);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .28);
    --shadow-lg: 0 18px 42px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar {
    background: var(--bg);
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .ticket-card,
html[data-theme="dark"] .notification-card,
html[data-theme="dark"] .workflow-task-card,
html[data-theme="dark"] .search-result-card,
html[data-theme="dark"] .global-search-form,
html[data-theme="dark"] .notification-dropdown,
html[data-theme="dark"] .notification-item,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--card-bg);
    color: var(--text);
}
html[data-theme="dark"] .panel-title {
    -webkit-text-fill-color: var(--text);
    color: var(--text);
}

.skip-link {
    position: fixed;
    left: 12px;
    top: -80px;
    z-index: 9999;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}
.skip-link:focus { top: 12px; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.mobile-menu-button,
.theme-toggle {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.mobile-menu-button { display: none; padding: 10px; }
.mobile-menu-button span {
    display: block;
    height: 2px;
    margin: 4px 0;
    border-radius: 2px;
    background: currentColor;
}
.theme-toggle { display: inline-grid; place-items: center; font-size: 18px; }
.theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-icon-dark { display: inline; }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: var(--topbar-height) 0 0;
    z-index: 39;
    border: 0;
    background: rgba(2, 6, 23, .5);
    backdrop-filter: blur(2px);
}

.auto-table-wrapper { width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.table-responsive table { min-width: 720px; }

img, video, canvas, svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
.content { min-width: 0; }
.panel, .stat-card, .ticket-card { min-width: 0; }

@media (max-width: 1100px) {
    .content { padding: 26px 24px; }
    .sidebar { width: 230px; }
    .global-search-form { max-width: 330px; margin-inline: 14px; }
}

@media (max-width: 900px) {
    body.sidebar-open { overflow: hidden; }
    .topbar {
        min-height: var(--topbar-height);
        padding: 12px 14px;
        gap: 10px;
    }
    .mobile-menu-button { display: block; }
    .brand-badge { width: 92px; }
    .brand-copy { display: none; }
    .global-search-form { display: none; }
    .user-info { display: none; }
    .logout-link { padding: 8px 10px; font-size: 0; }
    .logout-link::after { content: "↪"; font-size: 18px; }
    .topbar-right { margin-left: auto; gap: 8px; }

    .sidebar {
        position: fixed;
        left: 0;
        top: var(--topbar-height);
        bottom: 0;
        z-index: 40;
        width: min(86vw, 310px);
        padding: 16px 12px 28px;
        transform: translateX(-105%);
        transition: transform .24s ease;
        box-shadow: var(--shadow-lg);
        overflow-y: auto;
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop { display: block; }

    .body-shell { display: block; }
    .content { width: 100%; max-width: none; padding: 22px 16px; }
    .page-title { font-size: clamp(25px, 7vw, 32px); }
    .page-subtitle { margin-bottom: 22px; }
    .panel { padding: 18px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-grid, .dashboard-two-column { grid-template-columns: 1fr; }
    .search-bar, .btn-group, .panel-header { flex-wrap: wrap; }
    .search-bar > *, .panel-header > * { min-width: 0; }
}

@media (max-width: 640px) {
    .topbar-left { min-width: 0; }
    .brand-badge { width: 78px; height: 32px; }
    .notification-button, .theme-toggle, .mobile-menu-button { width: 40px; height: 40px; flex-basis: 40px; }
    .user-avatar { width: 40px; height: 40px; }
    .notification-dropdown { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-height) + 8px); width: auto; max-height: 70vh; overflow-y: auto; }
    .content { padding: 18px 12px; }
    .stat-grid, .mini-stat-row { grid-template-columns: 1fr; }
    .stat-card { padding: 18px; }
    .ticket-card { align-items: flex-start; flex-direction: column; padding: 16px; }
    .ticket-card-side { width: 100%; justify-content: space-between; flex-wrap: wrap; }
    .form-grid { grid-template-columns: 1fr !important; gap: 14px; }
    .btn { width: 100%; }
    .btn-group .btn { flex: 1 1 100%; }
    .report-tabs, .work-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
    .report-tab, .work-tab { flex: 0 0 auto; white-space: nowrap; }
    .notification-card { align-items: flex-start; }
    .notification-card-main { padding: 14px 12px; }
    .notification-card-action { padding: 8px 5px; }
    .search-result-card { padding: 12px; }
    .ems-footer { font-size: 11px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ===== EMS v2.0 Final: health, backup and operations ===== */
.health-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.health-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
}

.health-check strong,
.health-check small {
    display: block;
}

.health-check small {
    margin-top: 3px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.health-dot {
    width: 11px;
    height: 11px;
    margin-top: 5px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.health-ok .health-dot { background: var(--green); box-shadow: 0 0 0 5px rgba(16,185,129,.12); }
.health-fail .health-dot { background: var(--red); box-shadow: 0 0 0 5px rgba(239,68,68,.12); }

.command-block {
    overflow-x: auto;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-light);
    color: var(--text);
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.7;
}


/* EMS 0.9.0 - Global Search */
.ems-global-search {
    display: flex;
    align-items: center;
    width: min(420px, 34vw);
    margin-left: auto;
    margin-right: 18px;
}
.ems-global-search input {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 1px solid var(--border-color, #d9e1ee);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    padding: 0 14px;
    background: var(--panel-bg, #fff);
    color: inherit;
}
.ems-global-search button {
    height: 40px;
    min-width: 44px;
    border: 1px solid var(--border-color, #d9e1ee);
    border-radius: 0 10px 10px 0;
    background: var(--primary, #2458e6);
    color: #fff;
    cursor: pointer;
}
@media (max-width: 980px) {
    .ems-global-search { display: none; }
}


/* EMS 1.0.0 */
.executive-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.metric-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #e5eaf2}
.timeline-item{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:0 0 20px}
.timeline-dot{width:14px;height:14px;margin-top:4px;border-radius:50%;background:#2458e6}
.floating-create{position:fixed;right:28px;bottom:28px;z-index:1200}
.floating-create-button{width:54px;height:54px;border:0;border-radius:50%;background:#2458e6;color:#fff;font-size:28px;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.floating-create-menu{display:none;position:absolute;right:0;bottom:66px;width:210px;border:1px solid #dfe6f0;border-radius:12px;background:#fff;box-shadow:0 18px 45px rgba(0,0,0,.18)}
.floating-create:hover .floating-create-menu,.floating-create:focus-within .floating-create-menu{display:grid}
.floating-create-menu a{padding:12px 16px;color:inherit;text-decoration:none;border-bottom:1px solid #edf0f5}


/* EMS 1.1.0 - Calendar */
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between}
.company-calendar{overflow-x:auto}
.calendar-weekdays,.calendar-week{display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));min-width:1050px}
.calendar-weekdays>div{padding:12px;font-weight:700;text-align:center;border-bottom:1px solid #dfe6f0}
.calendar-day{min-height:150px;padding:10px;border-right:1px solid #e6ebf2;border-bottom:1px solid #e6ebf2;background:var(--panel-bg,#fff)}
.calendar-day.outside-month{opacity:.45}
.calendar-day.today{box-shadow:inset 0 0 0 2px #2458e6}
.calendar-date{font-weight:700;margin-bottom:8px}
.calendar-items{display:grid;gap:6px}
.calendar-item{display:grid;padding:7px 8px;border-radius:8px;text-decoration:none;color:inherit;background:#eef3ff;font-size:12px}
.calendar-item small{margin-top:2px}
.calendar-holiday{background:#fff2d9}
.calendar-leave{background:#e8f8ef}
.calendar-project{background:#f3ebff}
.calendar-task{background:#ffeaea}
.calendar-event{background:#eaf1ff}

/* EMS 2.1.0 */
.app-launcher-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* EMS PWA v2.14.0 */
.pwa-install-button{border:1px solid var(--primary,#0b57ff);background:transparent;color:var(--primary,#0b57ff);border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;white-space:nowrap}.pwa-install-button:hover{background:var(--primary,#0b57ff);color:#fff}@media(max-width:900px){.pwa-install-button{font-size:0;padding:9px;width:38px;height:38px}.pwa-install-button::before{content:"⇩";font-size:20px}}

/* EMS RC4.5 - Security Monitoring */
.security-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:18px}.security-critical-card{border-color:rgba(220,38,38,.4);box-shadow:inset 0 3px 0 #dc2626}.security-filter-bar{display:flex;flex-wrap:wrap;gap:10px}.security-filter-bar input,.security-filter-bar select{min-width:150px}.security-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}.security-bar-chart{height:220px;display:flex;align-items:flex-end;gap:12px;padding-top:28px}.security-bar-column{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:30px}.security-bar-track{height:150px;width:min(38px,80%);display:flex;align-items:flex-end;border-radius:8px 8px 3px 3px;background:var(--bg-light,#eef2f7);overflow:hidden}.security-bar-track span{display:block;width:100%;min-height:2px;background:var(--primary,#0b57ff);border-radius:8px 8px 0 0}.security-bar-value{font-weight:700;margin-bottom:6px}.security-bar-column small{margin-top:7px;color:var(--text-muted,#687386)}.security-summary-list{display:grid}.security-summary-list>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--border,#e4e9f0)}.security-summary-list>div small{color:var(--text-muted,#687386)}.security-summary-list>div span:last-child{font-weight:800}.security-severity-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.severity-info{background:#2563eb}.severity-notice{background:#0891b2}.severity-warning{background:#d97706}.severity-critical{background:#dc2626}.security-severity-badge{display:inline-flex;padding:4px 9px;border-radius:999px;color:#fff;font-size:12px;font-weight:700}.security-hour-chart{height:180px;display:grid;grid-template-columns:repeat(24,1fr);align-items:end;gap:4px;padding-top:20px}.security-hour-chart>div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.security-hour-chart span{display:block;width:100%;min-height:2px;background:var(--primary,#0b57ff);border-radius:4px 4px 0 0;opacity:.82}.security-hour-chart small{height:18px;margin-top:6px;color:var(--text-muted,#687386);font-size:10px}.security-pagination{margin-top:18px;display:flex;gap:8px;align-items:center}@media(max-width:1000px){.security-dashboard-grid{grid-template-columns:1fr}.security-hour-chart{gap:2px}.security-filter-bar input,.security-filter-bar select{flex:1 1 180px}}@media(max-width:640px){.security-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.security-bar-chart{gap:6px}.security-hour-chart small{font-size:8px}}

/* EMS RC5 - Unified Enterprise Operations Center */
.operations-heading{align-items:flex-start}.operations-scope{min-width:230px;padding:12px 16px;border:1px solid var(--border,#e4e9f0);border-radius:12px;background:var(--card-bg,#fff)}.operations-scope small,.operations-scope strong{display:block}.operations-scope small{color:var(--text-muted,#687386);margin-bottom:4px}.operations-tabs{display:flex;gap:6px;overflow-x:auto;margin:18px 0;padding:5px;border:1px solid var(--border,#e4e9f0);border-radius:14px;background:var(--card-bg,#fff)}.operations-tabs a{padding:10px 15px;border-radius:10px;text-decoration:none;color:inherit;white-space:nowrap;font-weight:700}.operations-tabs a:hover,.operations-tabs a.active{background:var(--primary,#0b57ff);color:#fff}.operations-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:18px}.operations-kpi-grid.compact{margin-top:18px}.operations-critical{border-color:rgba(220,38,38,.4);box-shadow:inset 0 3px 0 #dc2626}.operations-grid{display:grid;gap:18px;margin-bottom:18px}.operations-grid.two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-trend{height:190px;display:grid;grid-template-columns:repeat(auto-fit,minmax(8px,1fr));align-items:end;gap:4px;padding-top:18px}.operations-trend.large{height:280px}.operations-trend>div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.operations-trend span{width:100%;min-height:2px;border-radius:5px 5px 0 0;background:var(--primary,#0b57ff);opacity:.85}.operations-trend small{height:24px;margin-top:6px;font-size:9px;color:var(--text-muted,#687386);white-space:nowrap}.operations-list{display:grid;margin-bottom:16px}.operations-list>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--border,#e4e9f0)}.operations-list>div span small{display:block;margin-top:4px;color:var(--text-muted,#687386)}.operations-filter-panel{padding:14px}.operations-filter-bar{display:flex;flex-wrap:wrap;gap:9px}.operations-filter-bar input,.operations-filter-bar select{min-width:145px;flex:1 1 145px}.operations-table-wrap{overflow-x:auto}.operations-export-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.operations-export-form label{display:block;font-weight:700;margin-bottom:6px}.operations-export-form fieldset{grid-column:1/-1;border:1px solid var(--border,#e4e9f0);border-radius:12px;padding:16px}.operations-column-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.operations-column-grid label{font-weight:500}.operations-export-form button{width:max-content}@media(max-width:900px){.operations-grid.two-columns{grid-template-columns:1fr}.operations-heading{display:grid;gap:12px}.operations-scope{width:100%}.operations-export-form{grid-template-columns:1fr}.operations-filter-bar input,.operations-filter-bar select{flex-basis:180px}}@media(max-width:640px){.operations-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-tabs{border-radius:10px}.operations-tabs a{padding:9px 12px;font-size:13px}}

/* ===== RC5.1 Enterprise Resource Planning — compact service catalog ===== */
.erp-sidebar-label { min-width: 0; white-space: nowrap; font-size: 13px; line-height: 1.2; }
.erp-request-builder { max-width: 1080px; padding: 16px 18px; }
.erp-builder-section + .erp-builder-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color, #e5e7eb); scroll-margin-top: 110px; }
.erp-compact-header { margin-bottom: 10px; }
.erp-compact-header .panel-title { margin: 0; }
.erp-catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.erp-catalog-card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px 16px; border: 1px solid #dce3f0; border-radius: 13px; background: #fff; color: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.erp-catalog-card:hover { transform: translateY(-1px); border-color: #7c9cff; box-shadow: 0 7px 18px rgba(37, 86, 235, .09); }
.erp-catalog-card.is-selected { border: 2px solid #2857e8; padding: 13px 15px; background: #eef4ff; box-shadow: 0 8px 20px rgba(37, 86, 235, .14); }
.erp-catalog-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: #eef3ff; font-size: 20px; }
.erp-catalog-card strong { display: block; margin: 0; font-size: 16px; line-height: 1.25; font-weight: 700; }
.erp-catalog-card small { display: none !important; }
.erp-native-catalog-field[hidden] { display: none !important; }
.erp-catalog-error { margin-top: 10px; }
.erp-builder-actions { display: flex; gap: 10px; margin-top: 16px; }
.erp-request-builder .form-grid { gap: 11px 13px; }
.erp-request-builder .form-group { margin-bottom: 0; }
[data-catalog-field][hidden] { display: none !important; }
@media (max-width: 900px) { .erp-sidebar-label { white-space: normal; } }
@media (max-width: 720px) { .erp-request-builder { padding: 14px; } .erp-catalog-grid { grid-template-columns: 1fr; } .erp-catalog-card { min-height: 70px; } }

/* ===== RC5.2 Enterprise Management Center ===== */
.enterprise-management-heading { align-items: flex-start; margin-bottom: 18px; }
.enterprise-module-count { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid var(--border, #dfe4ec); border-radius:999px; background:var(--surface, #fff); color:var(--text-muted, #667085); font-size:.82rem; font-weight:700; white-space:nowrap; }
.enterprise-hub-section { margin-bottom: 18px; }
.enterprise-hub-section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:9px; }
.enterprise-hub-section-head h2 { margin:2px 0 0; font-size:1.04rem; }
.enterprise-section-kicker { display:block; color:var(--primary); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.enterprise-hub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:10px; }
.enterprise-hub-card { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:74px; padding:12px 14px; border:1px solid var(--border, #dfe4ec); border-radius:14px; background:var(--surface, #fff); color:inherit; text-decoration:none; box-shadow:0 3px 12px rgba(16,24,40,.045); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.enterprise-hub-card:hover { transform:translateY(-2px); border-color:var(--primary); box-shadow:0 8px 20px rgba(16,24,40,.09); }
.enterprise-hub-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:color-mix(in srgb,var(--primary) 10%,transparent); font-size:1.05rem; font-weight:800; }
.enterprise-hub-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.enterprise-hub-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.94rem; }
.enterprise-hub-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted, #667085); font-size:.76rem; }
.enterprise-hub-value { min-width:34px; text-align:right; color:var(--primary); font-size:1.2rem; font-weight:800; }
.enterprise-hub-value-text { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.enterprise-hub-insights { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-top:4px; }
.enterprise-insight-panel { margin:0; min-width:0; }
.enterprise-management-menu .submenu-section-label { display:block; padding:9px 14px 4px; color:var(--text-muted, #7a8494); font-size:.65rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.enterprise-management-menu .submenu-text-icon { display:inline-flex; min-width:20px; font-size:.68rem; font-weight:900; }
@media (max-width: 720px) {
  .enterprise-management-heading { gap:10px; }
  .enterprise-module-count { display:none; }
  .enterprise-hub-grid { grid-template-columns:1fr; }
  .enterprise-hub-card { min-height:68px; }
}

/* ===== RC5.3 Global Enterprise Architecture ===== */
.domain-heading{margin-bottom:16px}.domain-layout{display:grid;gap:14px}.domain-section{margin:0;padding:16px}.domain-section-header{margin-bottom:10px}.domain-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.domain-card{display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:12px;min-height:82px;padding:13px 14px;border:1px solid var(--border,#dfe4ec);border-radius:14px;background:var(--surface,#fff);color:inherit;text-decoration:none;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.domain-card:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 8px 20px rgba(16,24,40,.08)}.domain-card-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:color-mix(in srgb,var(--primary) 10%,transparent);font-weight:850;font-size:1rem}.domain-card-copy{min-width:0;display:grid;gap:3px}.domain-card-copy strong{font-size:.95rem}.domain-card-copy small{color:var(--text-muted,#667085);font-size:.76rem;line-height:1.35}.domain-card-arrow{font-size:1.45rem;color:var(--text-muted,#98a2b3)}@media(max-width:720px){.domain-card-grid{grid-template-columns:1fr}.domain-section{padding:13px}.domain-card{min-height:74px}}


/* RC5.3.1 — Branding and header refresh */
.brand-copy span { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.brand-version { display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border-radius:999px; background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary); font-size:10px; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
@media (min-width:901px) { .topbar { min-height:64px; padding:9px 24px; } }
/* RC6 built-in notification menu */
.notification-menu{position:relative}.notification-button{position:relative;border:0;background:transparent;font-size:20px;cursor:pointer;padding:8px}.notification-button span{position:absolute;right:0;top:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#dc2626;color:#fff;font-size:10px;line-height:17px;font-weight:800}.notification-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:360px;max-height:430px;overflow:auto;background:#fff;border:1px solid #dfe7f1;border-radius:13px;box-shadow:0 18px 50px rgba(15,23,42,.18);z-index:200}.notification-dropdown-header{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid #edf2f7}.notification-dropdown-item{display:block;padding:12px 15px;border-bottom:1px solid #edf2f7;text-decoration:none}.notification-dropdown-item strong,.notification-dropdown-item small{display:block}.notification-dropdown-item small{color:#64748b;margin-top:4px}.notification-dropdown-item.is-unread{background:#f4f8ff;border-left:3px solid var(--primary)}.notification-dropdown-empty{padding:20px;text-align:center;color:#64748b}@media(max-width:650px){.notification-dropdown{position:fixed;left:12px;right:12px;top:68px;width:auto}}

/* ===== RC6.1.3 Enterprise Visual Refresh ===== */
:root {
    --primary: #1457d9;
    --primary-dark: #0b3ea8;
    --primary-light: #4f8df7;
    --secondary: #6d5dfc;
    --accent: #0ea5a4;
    --bg: #f4f7fb;
    --bg-light: #eef3f9;
    --bg-lighter: #e8eef7;
    --card-bg: #ffffff;
    --card-light: #f8fafc;
    --border: #d6e0ec;
    --text: #142033;
    --text-muted: #52627a;
    --text-light: #6b7b91;
    --blue: #1457d9;
    --blue-light: #4f8df7;
    --green: #059669;
    --green-light: #10b981;
    --orange: #d97706;
    --orange-light: #f59e0b;
    --red: #dc2626;
    --red-light: #ef4444;
    --shadow-sm: 0 2px 8px rgba(20, 32, 51, .08);
    --shadow-md: 0 8px 24px rgba(20, 32, 51, .10);
    --shadow-lg: 0 18px 42px rgba(20, 32, 51, .14);
}

html:not([data-theme="dark"]) body {
    background:
        radial-gradient(circle at 8% 0%, rgba(20,87,217,.08), transparent 28%),
        radial-gradient(circle at 92% 4%, rgba(14,165,164,.06), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, #f2f6fb 48%, #edf3f9 100%);
    color: var(--text);
}

html:not([data-theme="dark"]) .topbar {
    background: rgba(255,255,255,.94);
    border-bottom-color: #d5dfeb;
    box-shadow: 0 5px 20px rgba(20,32,51,.08);
}

html:not([data-theme="dark"]) .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border-right-color: #d7e1ed;
}

html:not([data-theme="dark"]) .nav-item {
    color: #34445c;
    font-weight: 650;
}

html:not([data-theme="dark"]) .nav-item:hover {
    color: #0b3ea8;
    background: #eaf2ff;
}

html:not([data-theme="dark"]) .nav-item.active {
    color: #ffffff;
    background: linear-gradient(135deg, #1457d9 0%, #3b7bf0 100%);
    box-shadow: 0 8px 20px rgba(20,87,217,.24);
}

html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .stat-card,
html:not([data-theme="dark"]) .ticket-card,
html:not([data-theme="dark"]) .notification-card,
html:not([data-theme="dark"]) .workflow-task-card,
html:not([data-theme="dark"]) .search-result-card {
    background: rgba(255,255,255,.98);
    border: 1px solid #d8e2ee;
    box-shadow: 0 8px 24px rgba(20,32,51,.08);
}

html:not([data-theme="dark"]) .panel:hover,
html:not([data-theme="dark"]) .stat-card:hover,
html:not([data-theme="dark"]) .ticket-card:hover {
    border-color: #b9cae0;
    box-shadow: 0 14px 34px rgba(20,32,51,.12);
}

html:not([data-theme="dark"]) .page-title,
html:not([data-theme="dark"]) .panel-title {
    color: #142033;
}

html:not([data-theme="dark"]) .page-subtitle,
html:not([data-theme="dark"]) .panel-kicker,
html:not([data-theme="dark"]) small {
    color: #5c6d84;
}

html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea {
    background: #ffffff;
    color: #142033;
    border-color: #cbd8e7;
}

html:not([data-theme="dark"]) input:focus,
html:not([data-theme="dark"]) select:focus,
html:not([data-theme="dark"]) textarea:focus {
    border-color: #3b7bf0;
    box-shadow: 0 0 0 4px rgba(59,123,240,.14);
}

html:not([data-theme="dark"]) table th {
    color: #203149;
    background: #edf4ff;
}

html:not([data-theme="dark"]) table tbody tr:hover {
    background: #f2f7ff;
}

html:not([data-theme="dark"]) .btn-primary {
    background: linear-gradient(135deg, #1457d9 0%, #3b7bf0 100%);
    border-color: #1457d9;
    box-shadow: 0 7px 18px rgba(20,87,217,.22);
}

html:not([data-theme="dark"]) .btn-primary:hover {
    background: linear-gradient(135deg, #0b3ea8 0%, #2e68d8 100%);
    box-shadow: 0 10px 24px rgba(20,87,217,.28);
}

html:not([data-theme="dark"]) .empty-state,
html:not([data-theme="dark"]) .empty-cell {
    color: #61738a;
    background: #f7faff;
    border-color: #d8e3f0;
}

/* RC6.2.3 Operations Center UX consolidation */
.operations-hero{padding:4px 0 8px}.operations-eyebrow,.operations-section-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.11em;color:var(--primary,#0b57ff);margin-bottom:5px}.operations-live-dot{display:block;margin-top:8px;font-size:11px;color:var(--text-muted,#687386)}.operations-live-dot:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#16a34a;margin-right:6px}.operations-tabs-compact{max-width:640px}.operations-tabs-compact a{flex:1;text-align:center}.operations-kpi-premium .stat-card{position:relative;overflow:hidden}.operations-kpi-link{display:block;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.operations-kpi-link:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.09);border-color:rgba(37,99,235,.35)}.operations-kpi-link small{display:block;margin-top:7px;color:var(--text-muted,#687386);font-size:11px}.operations-health-value{font-size:24px!important}.operations-feature-panel{position:relative}.operations-section-kicker{color:var(--text-muted,#687386)}.operations-summary-list{margin-top:10px}.operations-mini-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.operations-mini-kpis.two{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-mini-kpis>div{padding:14px;border:1px solid var(--border,#e4e9f0);border-radius:12px;background:var(--bg-soft,#f8fafc)}.operations-mini-kpis strong,.operations-mini-kpis span{display:block}.operations-mini-kpis strong{font-size:22px}.operations-mini-kpis span{margin-top:4px;font-size:12px;color:var(--text-muted,#687386)}.operations-health-banner{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.2);margin:12px 0}.operations-health-banner strong,.operations-health-banner small{display:block}.operations-health-banner small{color:var(--text-muted,#687386);margin-top:3px}.operations-health-indicator{width:12px;height:12px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 5px rgba(22,163,74,.12)}.operations-result{display:inline-block;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}.operations-result.is-success{background:rgba(22,163,74,.1);color:#15803d}.operations-result.is-failed{background:rgba(220,38,38,.1);color:#b91c1c}.operations-system-strip{margin-bottom:18px}.operations-export-premium{margin-top:18px}@media(max-width:900px){.operations-mini-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.operations-tabs-compact{max-width:none}.operations-tabs-compact a{font-size:12px;padding:9px 7px}.operations-mini-kpis{grid-template-columns:1fr 1fr}}

/* RC6.2.3 Notification Center refresh */
.notification-menu.is-open .notification-dropdown { display: block; }
.notification-dropdown[hidden] { display: none !important; }
.notification-dropdown { width: min(410px, calc(100vw - 28px)); z-index: 120; }
.notification-dropdown-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border-bottom:1px solid var(--border); }
.notification-dropdown-header > div { display:flex; flex-direction:column; gap:2px; }
.notification-dropdown-header span { font-size:11px; color:var(--text-muted); font-weight:500; }
.notification-dropdown-header a, .notification-dropdown-footer a { color:var(--primary); font-size:12px; font-weight:700; }
.notification-dropdown-list { max-height:360px; overflow:auto; }
.notification-dropdown-item { display:flex; flex-direction:column; gap:4px; padding:12px 16px; border-bottom:1px solid var(--border); color:var(--text); background:var(--card-bg); }
.notification-dropdown-item:hover { background:rgba(37,99,235,.06); }
.notification-dropdown-item.is-unread { background:rgba(37,99,235,.09); box-shadow:inset 3px 0 0 var(--primary); }
.notification-dropdown-item strong { font-size:13px; }
.notification-dropdown-item small, .notification-dropdown-item time { color:var(--text-muted); font-size:11px; line-height:1.45; }
.notification-dropdown-empty { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--text-muted); text-align:center; }
.notification-dropdown-empty > span { font-size:28px; }
.notification-dropdown-empty strong { color:var(--text); }
.notification-dropdown-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 14px; background:rgba(127,127,127,.04); }
.notification-dropdown-footer form { margin:0; }
.notification-dropdown-footer button { border:0; background:none; color:var(--text-muted); font-size:12px; cursor:pointer; padding:0; }
.notification-dropdown-footer button:hover { color:var(--primary); }
.notification-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.notification-actions form { margin:0; }
.notification-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.notification-stat-card { background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:17px 18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:4px; }
.notification-stat-card > span { color:var(--text-muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.notification-stat-card strong { font-size:28px; line-height:1.1; color:var(--text); }
.notification-stat-card small { color:var(--text-muted); }
.notification-panel-header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.notification-tabs { display:flex; gap:8px; }
.notification-channel-summary { color:var(--text-muted); font-size:12px; }
.notification-feed-item { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:13px; align-items:start; padding:15px 16px; border-top:1px solid var(--border); color:var(--text); transition:.18s ease; }
.notification-feed-item:hover { background:rgba(37,99,235,.045); }
.notification-feed-item.is-unread { background:rgba(37,99,235,.065); }
.notification-feed-icon { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(37,99,235,.1); color:var(--primary); font-weight:800; }
.notification-feed-icon.level-error { background:rgba(239,68,68,.1); color:#dc2626; }
.notification-feed-icon.level-success { background:rgba(22,163,74,.1); color:#16a34a; }
.notification-feed-icon.level-warning { background:rgba(245,158,11,.12); color:#d97706; }
.notification-feed-content { min-width:0; display:flex; flex-direction:column; gap:4px; }
.notification-feed-title { font-weight:750; }
.notification-feed-meta { color:var(--text-muted); font-size:11px; }
.notification-feed-message { color:var(--text-light); font-size:13px; line-height:1.5; }
.notification-empty-state { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--text-muted); }
.notification-empty-state strong { color:var(--text); font-size:16px; }
.notification-empty-icon { font-size:38px; opacity:.7; }
.notification-form-panel { max-width:860px; }
.notification-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.notification-form-actions { margin-top:22px; }
.notification-check-field input[type="checkbox"], .channel-toggle input[type="checkbox"] { width:auto; min-height:0; }
.notification-user-table .channel-status { display:inline-flex; padding:5px 8px; border-radius:999px; font-size:11px; font-weight:700; background:rgba(107,114,128,.12); color:var(--text-muted); white-space:nowrap; }
.notification-user-table .channel-status.is-configured { background:rgba(22,163,74,.1); color:#15803d; }
.channel-enabled-count { font-size:11px; color:var(--text-muted); }
.notification-user-hero { display:flex; align-items:center; gap:14px; }
.notification-user-avatar { width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center; color:white; background:linear-gradient(135deg,var(--primary),#4338ca); font-weight:800; }
.notification-user-hero > div:nth-child(2) { display:flex; flex-direction:column; gap:3px; }
.notification-user-hero > div:nth-child(2) span { color:var(--text-muted); font-size:12px; }
.notification-security-note { margin-left:auto; max-width:460px; padding:10px 13px; border:1px solid var(--border); border-radius:11px; display:flex; flex-direction:column; gap:2px; }
.notification-security-note strong { font-size:12px; }
.notification-security-note span { color:var(--text-muted); font-size:11px; }
.notification-channel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.notification-channel-card { margin:0; display:flex; flex-direction:column; gap:15px; }
.channel-card-header { display:flex; align-items:center; gap:11px; }
.channel-card-header h3 { margin:0 0 2px; font-size:16px; }
.channel-card-header span { color:var(--text-muted); font-size:11px; }
.channel-symbol { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(37,99,235,.09); color:var(--primary); font-weight:850; }
.channel-toggle { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:650; }
.provider-note { color:var(--text-muted); font-size:11px; }
.notification-advanced-panel { margin-top:16px; }
.notification-save-bar { position:sticky; bottom:12px; z-index:20; margin-top:16px; background:var(--card-bg); border:1px solid var(--border); box-shadow:var(--shadow-lg); border-radius:14px; padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:15px; }
.notification-save-bar > div { display:flex; flex-direction:column; gap:2px; }
.notification-save-bar span { font-size:11px; color:var(--text-muted); }
@media (max-width: 900px) {
  .notification-stat-grid, .notification-channel-grid, .notification-form-grid { grid-template-columns:1fr; }
  .notification-security-note { margin-left:0; }
  .notification-user-hero { align-items:flex-start; flex-wrap:wrap; }
  .notification-panel-header { align-items:flex-start; flex-direction:column; }
}