/* rc4.1 modern-telecom = exact Zydex LIGHT skin.
   Page: emerald-50. Sidebar: dark emerald-950. Topbar: white.
   Cards: white rounded-2xl. Active nav: solid emerald pill. */
.template-modern-telecom {
    color-scheme: light;
    --bg: #ecfdf5;
    --surface: #ffffff;
    --surface-strong: #d1fae5;
    --text: #022c22;
    --muted: #065f46;
    --line: #a7f3d0;
    --shadow: 0 10px 30px -12px rgba(2, 44, 34, 0.18);
}

.template-modern-telecom.app-shell-body,
.template-modern-telecom.center-body {
    background: var(--bg) !important;
}

/* Sidebar: dark emerald-950 like the real Zydex light portal */
.template-modern-telecom .app-sidebar {
    background: #03241a !important;
    border-right: 1px solid rgba(52, 211, 153, 0.28) !important;
    color: #a7f3d0;
}

.template-modern-telecom .sidebar-brand {
    background: transparent !important;
    color: #ecfdf5 !important;
    font-weight: 800;
}

.template-modern-telecom .sidebar-group {
    color: rgba(52, 211, 153, 0.7) !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.template-modern-telecom .sidebar-nav a,
.template-modern-telecom .sidebar-logout button {
    color: #a7f3d0 !important;
}

.template-modern-telecom .sidebar-nav a:hover,
.template-modern-telecom .sidebar-logout button:hover {
    background: rgba(6, 95, 70, 0.5) !important;
    color: #ecfdf5 !important;
}

.template-modern-telecom .sidebar-nav a.is-active {
    background: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

/* Topbar: white with emerald hairline */
.template-modern-telecom .topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #bbf7d0 !important;
}

.template-modern-telecom .topbar-title strong {
    color: var(--text);
}

/* Cards: white, rounded-2xl, soft shadow */
.template-modern-telecom .panel,
.template-modern-telecom .login-panel {
    background: #ffffff;
    border-color: #bbf7d0;
    border-radius: 16px !important;
    box-shadow: var(--shadow);
}

.template-modern-telecom .panel:hover {
    box-shadow: 0 24px 50px -12px rgba(2, 44, 34, 0.22) !important;
}

/* Requirement rows, steps, tickets, choice cards */
.template-modern-telecom .requirement-row,
.template-modern-telecom .summary-list > div,
.template-modern-telecom .checklist-item,
.template-modern-telecom .step,
.template-modern-telecom .ticket-message {
    background: #ffffff;
    border-color: var(--line);
    border-radius: 12px !important;
}

.template-modern-telecom .choice,
.template-modern-telecom .requirement-row.is-active,
.template-modern-telecom .step.is-active {
    border-color: var(--primary-line, #059669);
    background: #d1fae5;
    color: #022c22;
}

/* Forms */
.template-modern-telecom input,
.template-modern-telecom textarea,
.template-modern-telecom select {
    border-color: #a7f3d0;
    border-radius: 12px;
    background: #ffffff;
}

.template-modern-telecom input:focus,
.template-modern-telecom textarea:focus,
.template-modern-telecom select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
}

/* Tables */
.template-modern-telecom .data-table th {
    background: #d1fae5;
    color: #065f46;
}

.template-modern-telecom .data-table td {
    border-bottom-color: #bbf7d0;
}

.template-modern-telecom .data-table tr:hover td {
    background: #f0fdf8;
}

/* Typography */
.template-modern-telecom h1,
.template-modern-telecom h2,
.template-modern-telecom h3 {
    color: #022c22;
}

.template-modern-telecom .eyebrow {
    color: #047857;
}

/* Buttons */
.template-modern-telecom .button-secondary {
    background: #ffffff;
    border-color: #a7f3d0;
    color: #065f46;
}

.template-modern-telecom .button-secondary:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #022c22;
}

/* Login panel polish */
.template-modern-telecom .login-panel {
    border-radius: 16px !important;
    border-color: var(--line);
    box-shadow: 0 20px 50px -20px rgba(2, 44, 34, 0.28);
}

.template-modern-telecom .login-logo {
    max-height: 56px;
    margin: 0 auto 1rem auto;
    display: block;
}