@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Regular.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #f4f7fb;
    --panel: #ffffff;
    --text: #172033;
    --muted: #6b7280;
    --line: #e5e7eb;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --danger: #dc2626;
    --danger-dark: #b91c1c;
    --sidebar: #0f172a;
    --sidebar-soft: #1e293b;
    --radius: 18px;
    --shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

button,
input,
textarea,
select {
    font: inherit;
}

img,
svg {
    max-width: 100%;
}

.app-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: linear-gradient(180deg, var(--sidebar), var(--sidebar-soft));
    color: #fff;
    padding: 24px 18px;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 34px;
}

.brand strong {
    display: block;
    font-size: 20px;
}

.brand span {
    display: block;
    margin-top: 4px;
    color: #cbd5e1;
    font-size: 13px;
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #38bdf8;
    color: #082f49;
    font-weight: 900;
    font-size: 22px;
    box-shadow: 0 10px 24px rgba(56, 189, 248, 0.24);
}

.brand-mark.large {
    width: 68px;
    height: 68px;
    margin: 0 auto;
    border-radius: 22px;
    font-size: 34px;
}

.nav {
    display: grid;
    gap: 8px;
}

.nav-section {
    color: #94a3b8;
    margin: 18px 10px 6px;
    font-size: 12px;
}

.nav-link {
    display: block;
    padding: 12px 14px;
    border-radius: 14px;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.04);
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav-link.disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

.main {
    min-width: 0;
}

.topbar {
    min-height: 86px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 18px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.topbar h1 {
    margin: 0;
    font-size: 24px;
}

.topbar p {
    margin: 6px 0 0;
    color: var(--muted);
}

.content {
    padding: 28px;
}

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

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
}

.card h2,
.card h3 {
    margin-top: 0;
}

.hero-card {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #ffffff, #eef6ff);
}

.muted-card {
    background: #f8fafc;
}

.info-list {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    margin: 0;
}

.info-list dt {
    color: var(--muted);
}

.info-list dd {
    margin: 0;
    font-weight: 700;
}

.check-list {
    margin: 0;
    padding: 0 20px 0 0;
}

.check-list li {
    margin: 9px 0;
}

.btn {
    border: 0;
    border-radius: 14px;
    padding: 11px 18px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    transition: 0.18s ease;
}

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

.btn-primary:hover {
    background: var(--primary-dark);
}

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

.btn-danger:hover {
    background: var(--danger-dark);
}

.btn.full {
    width: 100%;
}

.login-page {
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.17), transparent 35%),
        radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.22), transparent 35%),
        var(--bg);
}

.login-card {
    width: min(430px, 100%);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 32px;
    box-shadow: var(--shadow);
}

.login-brand {
    text-align: center;
    margin-bottom: 26px;
}

.login-brand h1 {
    margin: 14px 0 4px;
}

.login-brand p,
.login-note {
    color: var(--muted);
    margin: 0;
}

.login-form {
    display: grid;
    gap: 10px;
}

.login-form label {
    font-weight: 800;
    margin-top: 4px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 13px 14px;
    font-family: inherit;
    font-size: 15px;
    background: #fff;
}

.login-form input:focus {
    outline: 3px solid rgba(37, 99, 235, 0.18);
    border-color: var(--primary);
}

.checkbox-row {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--muted);
    font-weight: 500 !important;
    margin: 6px 0 10px;
}

.validation-summary {
    color: var(--danger);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 14px;
    padding: 12px 14px;
}

.validation-summary:empty {
    display: none;
}

.field-validation-error {
    color: var(--danger);
    font-size: 13px;
}

.login-note {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
}

@media (max-width: 860px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

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

    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

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

.page-grid.single {
    grid-template-columns: 1fr;
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 18px;
}

.profile-hero h2,
.page-header-card h2,
.form-card h2 {
    margin: 0 0 8px;
}

.profile-hero p,
.page-header-card p,
.form-card p {
    margin: 0;
    color: var(--muted);
}

.avatar {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 900;
    font-size: 26px;
    flex: 0 0 auto;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.badge.success {
    color: #166534;
    background: #dcfce7;
}

.badge.danger {
    color: #991b1b;
    background: #fee2e2;
}

.muted {
    color: var(--muted);
    font-weight: 500;
}

.info-list.wide {
    grid-template-columns: 190px 1fr;
}

.page-header-card,
.form-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.header-actions,
.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.search-form {
    display: flex;
    gap: 10px;
    width: min(620px, 100%);
}

.search-form input,
.app-form input,
.app-form select,
.app-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    background: #fff;
    color: var(--text);
    outline: none;
}

.search-form input:focus,
.app-form input:focus,
.app-form select:focus,
.app-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.btn-light {
    background: #f1f5f9;
    color: #334155;
}

.btn-light:hover {
    background: #e2e8f0;
}

.btn-small {
    padding: 7px 11px;
    border-radius: 10px;
    font-size: 13px;
}

.table-card {
    padding: 0;
    overflow: hidden;
}

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

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 850px;
}

.data-table th,
.data-table td {
    text-align: right;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
    vertical-align: middle;
}

.data-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.data-table tr:hover td {
    background: #fbfdff;
}

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

.actions-cell {
    white-space: nowrap;
}

.empty-cell {
    text-align: center !important;
    color: var(--muted);
    padding: 34px !important;
}

.alert {
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-weight: 800;
}

.alert.success {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.form-card {
    max-width: 980px;
}

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

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

.form-field {
    display: grid;
    gap: 8px;
}

.form-field label {
    font-weight: 900;
}

.form-field span,
.app-form .field-validation-error {
    color: var(--danger);
    font-size: 13px;
}

.switch-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    color: #334155;
    font-weight: 800;
}

.switch-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

code {
    direction: ltr;
    display: inline-block;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 3px 8px;
    border-radius: 8px;
}

@media (max-width: 860px) {
    .page-grid,
    .page-grid.single,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .page-header-card,
    .form-title-row,
    .profile-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .search-form {
        flex-direction: column;
    }

    .info-list.wide {
        grid-template-columns: 1fr;
    }
}

/* Login/Forgot password refinement - phase 2 */
.compact-auth-page.login-page {
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    padding: clamp(10px, 2vh, 22px);
    background:
        radial-gradient(circle at 9% 14%, rgba(37, 99, 235, 0.22), transparent 29%),
        radial-gradient(circle at 88% 10%, rgba(6, 182, 212, 0.28), transparent 28%),
        radial-gradient(circle at 18% 90%, rgba(16, 185, 129, 0.24), transparent 34%),
        radial-gradient(circle at 72% 82%, rgba(124, 58, 237, 0.12), transparent 28%),
        linear-gradient(135deg, #f7fbff 0%, #eaf7ff 42%, #f3fffb 100%);
}

.compact-auth-page .login-shell {
    width: min(1110px, 100%);
    height: min(720px, calc(100svh - 24px));
    display: grid;
    grid-template-columns: minmax(360px, 0.92fr) minmax(420px, 1.08fr);
    border-radius: 34px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(18px);
}

.compact-auth-page .forgot-shell {
    height: min(700px, calc(100svh - 24px));
}

.compact-auth-page .login-panel-form {
    padding: clamp(18px, 2.6vh, 34px) clamp(22px, 3vw, 42px);
    overflow: auto;
    scrollbar-width: thin;
    background: rgba(255, 255, 255, 0.92);
}

.compact-auth-page .login-panel-form::-webkit-scrollbar {
    width: 6px;
}

.compact-auth-page .login-panel-form::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

.compact-auth-page .login-brand {
    margin-bottom: 16px;
}

.compact-auth-page .compact-brand {
    margin-bottom: 12px;
}

.compact-auth-page .login-logo {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 24px;
    background: #fff;
    padding: 7px;
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.12);
}

.compact-auth-page .login-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 7px 14px;
    border-radius: 999px;
    color: #075985;
    background: linear-gradient(135deg, #e0f2fe, #dbeafe);
    border: 1px solid rgba(14, 165, 233, 0.18);
    font-size: 12px;
    font-weight: 900;
}

.compact-auth-page .login-brand h1 {
    margin: 12px 0 8px;
    font-size: clamp(25px, 3.1vw, 36px);
    line-height: 1.25;
    color: #0f172a;
    letter-spacing: -0.03em;
}

.centered-login-subtitle {
    text-align: center;
    line-height: 1.85;
    color: #64748b;
    margin-inline: auto !important;
    max-width: 440px;
}

.compact-auth-page .premium-login-form {
    gap: 9px;
}

.compact-auth-page .form-field {
    gap: 6px;
}

.compact-auth-page .login-form input[type="text"],
.compact-auth-page .login-form input[type="password"],
.compact-auth-page .login-form input[type="email"] {
    min-height: 48px;
    border-radius: 17px;
    border-color: #d9e4f2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.compact-auth-page .captcha-card {
    display: grid;
    grid-template-columns: 1fr 120px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(240, 253, 250, 0.78));
    border: 1px solid rgba(59, 130, 246, 0.22);
}

.compact-auth-page .compact-captcha {
    padding: 10px 12px;
}

.compact-auth-page .captcha-title {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 3px;
}

.compact-auth-page .captcha-card strong {
    direction: ltr;
    display: inline-block;
    color: #2563eb;
    font-size: 18px;
    letter-spacing: 0.08em;
}

.compact-auth-page .captcha-input-wrap input {
    text-align: center;
    min-height: 44px;
    padding: 10px;
}

.compact-auth-page .login-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 3px 0 2px;
}

.compact-auth-page .forgot-password-link,
.compact-auth-page .back-to-login-link {
    color: #2563eb;
    font-weight: 900;
    font-size: 13px;
}

.compact-auth-page .back-to-login-link {
    text-align: center;
    margin-top: 1px;
}

.compact-auth-page .login-submit {
    min-height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #06b6d4, #10b981);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.22);
}

.compact-auth-page .login-submit:hover {
    filter: saturate(1.12) brightness(0.98);
}

.compact-auth-page .login-visual {
    position: relative;
    overflow: hidden;
    min-height: 0;
    background: #071426;
}

.compact-auth-page .login-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 15, 30, 0.05), rgba(8, 15, 30, 0.48)),
        radial-gradient(circle at 30% 18%, rgba(14, 165, 233, 0.28), transparent 28%),
        radial-gradient(circle at 84% 76%, rgba(16, 185, 129, 0.22), transparent 30%);
}

.compact-auth-page .login-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    filter: saturate(1.04) contrast(1.02);
}

.compact-auth-page.forgot-page .login-visual::after {
    background:
        linear-gradient(180deg, rgba(8, 15, 30, 0.02), rgba(8, 15, 30, 0.42)),
        radial-gradient(circle at 22% 24%, rgba(6, 182, 212, 0.30), transparent 28%),
        radial-gradient(circle at 82% 74%, rgba(99, 102, 241, 0.24), transparent 32%);
}

.compact-auth-page.forgot-page .login-visual img {
    filter: saturate(1.15) contrast(1.05) brightness(1.02);
}

.compact-auth-page .login-visual-overlay {
    position: absolute;
    z-index: 1;
    right: 34px;
    left: 34px;
    bottom: 34px;
    padding: 24px;
    border-radius: 28px;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.compact-auth-page .login-visual-overlay span {
    display: inline-flex;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 900;
    direction: ltr;
}

.compact-auth-page .login-visual-overlay h2 {
    margin: 14px 0 8px;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.35;
}

.compact-auth-page .login-visual-overlay p {
    margin: 0;
    line-height: 1.9;
    color: #e2e8f0;
}

.auth-success-message {
    border: 1px solid #bbf7d0;
    background: #dcfce7;
    color: #166534;
    border-radius: 16px;
    padding: 11px 14px;
    margin-bottom: 12px;
    font-weight: 900;
    text-align: center;
}

.reset-flow-note,
.reset-user-hint {
    border: 1px solid rgba(14, 165, 233, 0.22);
    background: rgba(240, 249, 255, 0.76);
    border-radius: 18px;
    padding: 11px 14px;
    color: #0f172a;
    margin-bottom: 12px;
    line-height: 1.8;
}

.reset-flow-note strong,
.reset-flow-note span,
.reset-flow-note small {
    display: block;
}

.reset-flow-note small {
    color: #64748b;
    font-size: 12px;
}

.tracking-result.compact-tracking {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border: 1px solid #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4, #ecfeff);
    border-radius: 20px;
    padding: 12px;
    margin-bottom: 10px;
}

.tracking-result.compact-tracking div {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    padding: 10px;
    text-align: center;
}

.tracking-result.compact-tracking span {
    display: block;
    color: #15803d;
    font-weight: 900;
    font-size: 12px;
    margin-bottom: 4px;
}

.tracking-result.compact-tracking strong {
    direction: ltr;
    display: block;
    color: #166534;
    font-size: 18px;
    letter-spacing: 0.08em;
}

.tracking-result.compact-tracking p {
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
    color: #166534;
    font-size: 12px;
    line-height: 1.8;
}

.two-line-field input {
    min-height: 44px !important;
}

@media (max-width: 940px) {
    .compact-auth-page.login-page {
        height: auto;
        min-height: 100svh;
        overflow: auto;
    }

    .compact-auth-page .login-shell,
    .compact-auth-page .forgot-shell {
        height: auto;
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .compact-auth-page .login-visual {
        min-height: 320px;
        order: -1;
    }

    .compact-auth-page .login-panel-form {
        overflow: visible;
    }
}

@media (max-height: 760px) and (min-width: 941px) {
    .compact-auth-page .login-brand h1 {
        font-size: 26px;
    }

    .compact-auth-page .login-logo {
        width: 60px;
        height: 60px;
    }

    .compact-auth-page .login-panel-form {
        padding-block: 16px;
    }

    .compact-auth-page .login-visual-overlay {
        padding: 18px;
        bottom: 22px;
    }

    .compact-auth-page .login-visual-overlay h2 {
        font-size: 25px;
    }
}

/* Login recovery action links polish */
.compact-auth-page .auth-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.compact-auth-page .forgot-password-link,
.compact-auth-page .back-to-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 999px;
    color: #1d4ed8;
    font-weight: 900;
    font-size: 13px;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 255, 0.94));
    border: 1px solid rgba(59, 130, 246, 0.22);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.10);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.compact-auth-page .forgot-password-link::before,
.compact-auth-page .back-to-login-link::before {
    content: "↩";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
    font-size: 14px;
    line-height: 1;
}

.compact-auth-page .forgot-password-link::before {
    content: "؟";
    font-family: Vazirmatn, system-ui, sans-serif;
}

.compact-auth-page .forgot-password-link:hover,
.compact-auth-page .back-to-login-link:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.38);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.16);
    background: linear-gradient(135deg, #ffffff, #eff6ff);
}

.compact-auth-page .back-to-login-link {
    width: fit-content;
    min-width: 190px;
    margin: 8px auto 0;
}

.compact-auth-page .login-options-row .forgot-password-link {
    min-height: 34px;
    padding: 7px 12px;
    box-shadow: none;
    background: rgba(239, 246, 255, 0.72);
}


/* Login text cleanup and logo emphasis */
.compact-auth-page .login-kicker {
    display: none !important;
}

.compact-auth-page .login-brand.refined h1 {
    margin-top: 14px;
}

.compact-auth-page .login-logo {
    width: 88px;
    height: 88px;
}

@media (max-height: 760px) and (min-width: 941px) {
    .compact-auth-page .login-logo {
        width: 74px;
        height: 74px;
    }
}

/* Profile + compact modern navigation update */
.modern-shell {
    grid-template-columns: 264px 1fr;
}

.modern-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 18px 14px;
    background:
        radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.18), transparent 28%),
        linear-gradient(180deg, #0b1220 0%, #111827 46%, #0f172a 100%);
}

.modern-brand {
    margin-bottom: 18px;
    padding: 12px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.modern-brand strong {
    font-size: 15px;
    line-height: 1.7;
}

.modern-nav {
    gap: 7px;
}

.modern-nav .nav-link,
.modern-nav .nav-group summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 15px;
    color: #e5edf8;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid transparent;
    font-weight: 850;
    transition: 160ms ease;
}

.modern-nav .nav-link span,
.modern-nav .nav-group summary span {
    width: 25px;
    height: 25px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.13);
    color: #7dd3fc;
    font-size: 13px;
    flex: 0 0 auto;
}

.modern-nav .nav-link:hover,
.modern-nav .nav-group summary:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(-1px);
}

.modern-nav .nav-primary {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.30), rgba(6, 182, 212, 0.18));
    border-color: rgba(125, 211, 252, 0.14);
}

.modern-nav .nav-profile {
    margin-top: 8px;
    background: rgba(16, 185, 129, 0.10);
}

.modern-nav .nav-link.disabled {
    opacity: .45;
    filter: grayscale(.25);
}

.compact-group {
    border-radius: 17px;
    overflow: hidden;
}

.compact-group summary {
    cursor: pointer;
    list-style: none;
}

.compact-group summary::-webkit-details-marker {
    display: none;
}

.compact-group[open] {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding-bottom: 6px;
}

.compact-group[open] summary {
    background: rgba(255, 255, 255, 0.08);
}

.compact-group[open] .nav-link {
    margin: 6px 9px 0 9px;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    color: #dbeafe;
    background: rgba(15, 23, 42, 0.22);
}

.settings-group[open] {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.13), rgba(15, 23, 42, 0.14));
}

.modern-topbar {
    min-height: 78px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.topbar-profile-chip {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #dbeafe;
    font-weight: 900;
}

.modern-content {
    padding: 24px;
}

.alert.danger-soft {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.profile-dashboard {
    display: grid;
    gap: 18px;
}

.profile-cover {
    position: relative;
    display: flex;
    gap: 20px;
    align-items: center;
    overflow: hidden;
    padding: 26px;
    background:
        radial-gradient(circle at 12% 20%, rgba(37, 99, 235, 0.14), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(16, 185, 129, 0.12), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
}

.profile-avatar-wrap {
    width: 96px;
    height: 96px;
    border-radius: 32px;
    padding: 4px;
    background: linear-gradient(135deg, #2563eb, #06b6d4, #10b981);
    box-shadow: 0 20px 42px rgba(37, 99, 235, 0.20);
    flex: 0 0 auto;
}

.profile-avatar-img,
.profile-avatar-letter {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    display: grid;
    place-items: center;
    object-fit: cover;
    background: #fff;
    color: #1d4ed8;
    font-weight: 950;
    font-size: 36px;
}

.profile-cover-info h2 {
    margin: 10px 0 6px;
    font-size: clamp(25px, 2.6vw, 36px);
}

.profile-cover-info p {
    margin: 0;
    color: #64748b;
    font-weight: 800;
}

.profile-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
    font-weight: 900;
    font-size: 12px;
}

.profile-mini-stats {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-mini-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 12px;
}

.profile-mini-stats .ok {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.profile-mini-stats .bad {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}

.profile-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr);
    gap: 18px;
}

.section-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.section-title-row h3 {
    margin: 0 0 7px;
}

.section-title-row p {
    margin: 0;
    color: #64748b;
    line-height: 1.8;
}

.compact-profile-form {
    margin-top: 0;
}

.file-drop-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    border: 1px dashed #93c5fd;
    background: linear-gradient(135deg, #eff6ff, #f0fdfa);
}

.file-drop-zone p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
}

.file-drop-zone input[type=file],
.document-upload-row input[type=file] {
    max-width: 270px;
}

.profile-actions {
    justify-content: space-between;
}

.profile-side-card {
    align-self: start;
}

.profile-info-list {
    grid-template-columns: 120px 1fr;
}

.future-note {
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.future-note strong {
    display: block;
    margin-bottom: 8px;
}

.future-note p {
    margin: 0;
    color: #64748b;
    line-height: 1.9;
}

.document-upload-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 150px minmax(220px, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}

.document-upload-row input,
.document-upload-row select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    padding: 10px 12px;
    background: #fff;
}

.profile-document-list {
    display: grid;
    gap: 10px;
}

.profile-document-item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.profile-document-item p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
}

.doc-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #dbeafe, #dcfce7);
    color: #1d4ed8;
    font-weight: 900;
    font-size: 12px;
}

.doc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.doc-actions form {
    margin: 0;
}

.empty-state.compact {
    border-radius: 18px;
    padding: 18px;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
}

@media (max-width: 980px) {
    .modern-shell {
        grid-template-columns: 1fr;
    }

    .modern-sidebar {
        position: static;
        height: auto;
    }

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

    .compact-group[open] {
        grid-column: 1 / -1;
    }

    .profile-layout-grid,
    .document-upload-row {
        grid-template-columns: 1fr;
    }

    .profile-cover,
    .file-drop-zone,
    .section-title-row,
    .profile-actions,
    .profile-document-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-document-item {
        display: flex;
    }

    .doc-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ARENCRM_NOTES_BACK_BUTTON_FIX_START */
/* Notes page: keep the dashboard-back button separated from hero text. */
main a[href="/Dashboard"],
main a[href="/Dashboard/Index"],
.notes-page a[href="/Dashboard"],
.notes-page a[href="/Dashboard/Index"],
.notes-hero a[href="/Dashboard"],
.notes-hero a[href="/Dashboard/Index"],
.notes-header a[href="/Dashboard"],
.notes-header a[href="/Dashboard/Index"] {
    position: relative;
    z-index: 5;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    min-height: 42px;
    padding: 10px 18px;
    margin-top: 18px;
    margin-inline-start: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .11), rgba(20, 184, 166, .13));
    border: 1px solid rgba(37, 99, 235, .16);
    color: #2563eb !important;
    font-weight: 800;
    line-height: 1.8;
    text-decoration: none !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .07);
    white-space: nowrap;
}

main a[href="/Dashboard"]:hover,
main a[href="/Dashboard/Index"]:hover,
.notes-page a[href="/Dashboard"]:hover,
.notes-page a[href="/Dashboard/Index"]:hover,
.notes-hero a[href="/Dashboard"]:hover,
.notes-hero a[href="/Dashboard/Index"]:hover,
.notes-header a[href="/Dashboard"]:hover,
.notes-header a[href="/Dashboard/Index"]:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(20, 184, 166, .18));
    box-shadow: 0 18px 36px rgba(15, 23, 42, .10);
}

.notes-page .hero-actions,
.notes-page .notes-actions,
.notes-hero .hero-actions,
.notes-header .hero-actions,
.notes-page .page-actions,
.notes-header .page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.notes-page .hero-subtitle,
.notes-page .notes-subtitle,
.notes-hero .hero-subtitle,
.notes-header .hero-subtitle,
.notes-hero p,
.notes-header p {
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    main a[href="/Dashboard"],
    main a[href="/Dashboard/Index"],
    .notes-page a[href="/Dashboard"],
    .notes-page a[href="/Dashboard/Index"] {
        width: 100%;
        max-width: 100%;
        margin-top: 14px;
    }
}
/* ARENCRM_NOTES_BACK_BUTTON_FIX_END */

/* ARENCRM_DASHBOARD_DATE_SIZE_FIX */
.dashboard-clock-card .dashboard-clock-time,
.dashboard-time-card .dashboard-clock-time,
.dashboard-hero-time .dashboard-clock-time,
.dashboard-date-box .dashboard-clock-time,
.dashboard-current-time,
.current-time-value,
.js-dashboard-clock,
#dashboardClock {
    font-size: clamp(2.3rem, 4vw, 4.2rem) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
}
.dashboard-clock-card .dashboard-clock-date,
.dashboard-time-card .dashboard-clock-date,
.dashboard-hero-time .dashboard-clock-date,
.dashboard-date-box .dashboard-clock-date,
.dashboard-current-date,
.current-date-value,
.js-dashboard-date,
#dashboardDate {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
    font-weight: 700 !important;
    opacity: .96 !important;
    margin-top: .55rem !important;
}
@media (max-width: 768px) {
    .dashboard-clock-card .dashboard-clock-time,
    .dashboard-time-card .dashboard-clock-time,
    .dashboard-hero-time .dashboard-clock-time,
    .dashboard-date-box .dashboard-clock-time,
    .dashboard-current-time,
    .current-time-value,
    .js-dashboard-clock,
    #dashboardClock {
        font-size: clamp(2rem, 11vw, 3rem) !important;
    }
}

/* ARENCRM_AUTH_BACK_TO_LOGIN_BUTTON_FIX */
.auth-secondary-button,
.auth-back-login-button,
a.auth-secondary-button,
a.auth-back-login-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    min-height: 46px !important;
    padding: .72rem 1.35rem !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.86) !important;
    color: #2563eb !important;
    border: 1px solid rgba(37,99,235,.16) !important;
    box-shadow: 0 12px 28px rgba(37,99,235,.10) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    margin-top: 1rem !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.auth-secondary-button:hover,
.auth-back-login-button:hover {
    transform: translateY(-1px) !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(37,99,235,.16) !important;
}
.auth-form-actions,
.auth-footer-actions,
.auth-extra-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .8rem !important;
    flex-wrap: wrap !important;
}
@media (max-width: 768px) {
    .auth-secondary-button,
    .auth-back-login-button {
        width: 100% !important;
    }
}

/* imported fix: dashboard-date-visibility-fix */
/* ArenCRM Dashboard quick visual/performance polish - 2026-05-29
   Purpose: make current Persian date/time readable and avoid oversized hero layout shifts. */
.dashboard-clock-card,
.dashboard-date-card,
.dashboard-time-card,
.dashboard-hero-clock,
.ar-dashboard-clock,
.ar-current-date-card {
  min-width: 260px;
}

.dashboard-clock-card .clock-time,
.dashboard-clock-card .dashboard-clock-time,
.dashboard-time-card .clock-time,
.dashboard-hero-clock .clock-time,
.ar-dashboard-clock .clock-time,
.ar-current-date-card .clock-time,
#dashboardClockTime,
#currentClockTime {
  font-size: clamp(2.35rem, 4.5vw, 4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.02em;
  font-weight: 900 !important;
}

.dashboard-clock-card .clock-date,
.dashboard-clock-card .dashboard-clock-date,
.dashboard-time-card .clock-date,
.dashboard-hero-clock .clock-date,
.ar-dashboard-clock .clock-date,
.ar-current-date-card .clock-date,
.dashboard-persian-date,
#dashboardClockDate,
#currentClockDate {
  font-size: clamp(1.05rem, 1.45vw, 1.45rem) !important;
  line-height: 1.9 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  margin-top: 12px !important;
  color: rgba(255,255,255,.96) !important;
}

.dashboard-clock-card .clock-date-secondary,
.dashboard-time-card .clock-date-secondary,
.dashboard-hero-clock .clock-date-secondary,
.ar-dashboard-clock .clock-date-secondary {
  font-size: clamp(.95rem, 1.15vw, 1.15rem) !important;
  line-height: 1.8 !important;
  opacity: .92 !important;
}

/* Reduce expensive visual paint on first dashboard load without killing the design. */
.dashboard-card,
.dashboard-module-card,
.dashboard-note-card,
.dashboard-widget,
.dashboard-panel {
  contain: content;
}

@media (max-width: 768px) {
  .dashboard-clock-card,
  .dashboard-date-card,
  .dashboard-time-card,
  .dashboard-hero-clock,
  .ar-dashboard-clock,
  .ar-current-date-card {
    width: 100% !important;
    min-width: 0;
  }
}

/* ARENCRM_PWA_DARK_REMEMBER_MOBILE_PHASE_START */
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2"), url("../fonts/Vazirmatn-Regular.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html {
    color-scheme: light;
    scrollbar-gutter: stable;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1220;
    --panel: #111827;
    --text: #e5edf8;
    --muted: #9aa7bd;
    --line: rgba(148, 163, 184, .22);
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --danger: #ef4444;
    --danger-dark: #dc2626;
    --sidebar: #07111f;
    --sidebar-soft: #111c31;
    --shadow: 0 18px 46px rgba(0, 0, 0, .34);
}

body.theme-ready {
    background:
        radial-gradient(circle at 12% 8%, rgba(37, 99, 235, .08), transparent 34%),
        radial-gradient(circle at 90% 0%, rgba(20, 184, 166, .08), transparent 32%),
        var(--bg);
    overflow-x: hidden;
    padding-top: env(safe-area-inset-top, 0);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .main,
html[data-theme="dark"] .modern-main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .modern-content,
html[data-theme="dark"] .polished-content {
    background: var(--bg) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .page-header-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .dashboard-module-card,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .customer-card,
html[data-theme="dark"] .sales-doc-card,
html[data-theme="dark"] .opportunity-card,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .details-card {
    background: rgba(17, 24, 39, .92) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .page-header-card,
html[data-theme="dark"] .muted-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, .96), rgba(15, 23, 42, .96)) !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .modern-topbar,
html[data-theme="dark"] .enhanced-topbar,
html[data-theme="dark"] .polished-topbar,
html[data-theme="dark"] .ultra-topbar {
    background: rgba(11, 18, 32, .88) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .global-search,
html[data-theme="dark"] .global-search input,
html[data-theme="dark"] .captcha-card {
    background: rgba(15, 23, 42, .94) !important;
    border-color: rgba(148, 163, 184, .26) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: rgba(203, 213, 225, .62) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
    border-color: rgba(148, 163, 184, .20) !important;
}

html[data-theme="dark"] th,
html[data-theme="dark"] .table-header,
html[data-theme="dark"] .list-header {
    background: rgba(15, 23, 42, .85) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .badge,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .status-badge,
html[data-theme="dark"] .code-badge {
    border-color: rgba(148, 163, 184, .22) !important;
}

html[data-theme="dark"] .login-page,
html[data-theme="dark"] .compact-auth-page.login-page {
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .24), transparent 35%),
        radial-gradient(circle at bottom left, rgba(20, 184, 166, .16), transparent 35%),
        #0b1220 !important;
}

html[data-theme="dark"] .login-panel-form,
html[data-theme="dark"] .compact-auth-page .login-panel-form {
    background: rgba(17, 24, 39, .96) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .login-brand h1,
html[data-theme="dark"] .login-form label,
html[data-theme="dark"] .captcha-card strong {
    color: var(--text) !important;
}

html[data-theme="dark"] .centered-login-subtitle,
html[data-theme="dark"] .login-brand p,
html[data-theme="dark"] .remember-me-note,
html[data-theme="dark"] .topbar p,
html[data-theme="dark"] .muted {
    color: var(--muted) !important;
}

.theme-toggle-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(37, 99, 235, .16);
    background: rgba(255, 255, 255, .78);
    color: #2563eb;
    border-radius: 16px;
    padding: 8px 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(37, 99, 235, .08);
}

.theme-toggle-button:hover {
    transform: translateY(-1px);
}

html[data-theme="dark"] .theme-toggle-button {
    background: rgba(30, 41, 59, .92);
    color: #dbeafe;
    border-color: rgba(147, 197, 253, .20);
}

.remember-me-note {
    margin: -2px 0 6px;
    color: #64748b;
    font-size: .86rem;
    line-height: 1.9;
    text-align: right;
}

@media (display-mode: standalone) {
    body.theme-ready {
        padding-top: max(env(safe-area-inset-top), 8px);
        padding-bottom: max(env(safe-area-inset-bottom), 8px);
    }
}

@media (max-width: 980px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .app-shell,
    .modern-shell,
    .polished-shell,
    .ultra-shell {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 100dvh;
    }

    .sidebar,
    .modern-sidebar,
    .polished-sidebar,
    .ultra-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 0 30px 30px;
        padding: 18px 14px 20px !important;
        position: relative !important;
    }

    .brand,
    .modern-brand,
    .polished-brand,
    .ultra-brand {
        margin-bottom: 18px !important;
        padding: 14px !important;
        border-radius: 22px !important;
    }

    .modern-nav,
    .polished-nav,
    .ultra-nav,
    .nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .nav-link,
    .nav-group summary {
        min-height: 54px !important;
        font-size: 1rem !important;
        border-radius: 18px !important;
    }

    .main,
    .modern-main,
    .polished-main {
        width: 100% !important;
        min-width: 0 !important;
    }

    .topbar,
    .modern-topbar,
    .enhanced-topbar,
    .polished-topbar,
    .ultra-topbar {
        position: static !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 20px 16px !important;
        text-align: center !important;
    }

    .topbar-title-block,
    .title-with-logo,
    .topbar-actions,
    .polished-actions {
        width: 100%;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    .global-search {
        width: 100% !important;
        max-width: 100% !important;
        order: 3;
    }

    .global-search input {
        min-height: 58px !important;
        font-size: 1rem !important;
    }

    .content,
    .modern-content,
    .polished-content {
        padding: 16px 12px 32px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .card,
    .page-header-card,
    .form-card,
    .table-card,
    .dashboard-card,
    .dashboard-module-card,
    .filter-card,
    .details-card {
        border-radius: 24px !important;
        padding: 18px !important;
        max-width: 100% !important;
    }

    .page-actions,
    .filter-row,
    .filters-row,
    .table-actions,
    .form-actions,
    .doc-actions,
    .action-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .btn,
    button,
    .topbar-profile-chip,
    .notification-button,
    .theme-toggle-button {
        min-height: 48px;
    }

    table {
        font-size: .9rem;
    }
}

@media (max-width: 940px) {
    .compact-auth-page.login-page {
        min-height: 100dvh !important;
        padding: 0 !important;
        place-items: stretch !important;
    }

    .compact-auth-page .login-shell,
    .compact-auth-page .forgot-shell {
        width: 100% !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column-reverse !important;
        overflow: visible !important;
        box-shadow: none !important;
    }

    .compact-auth-page .login-visual {
        min-height: 190px !important;
        max-height: 34vh !important;
        border-radius: 0 0 28px 28px !important;
        overflow: hidden !important;
    }

    .compact-auth-page .login-visual-overlay {
        display: none !important;
    }

    .compact-auth-page .auth-media,
    .compact-auth-page .login-visual img,
    .compact-auth-page .login-visual video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .compact-auth-page .login-panel-form {
        width: 100% !important;
        min-height: auto !important;
        padding: 30px 22px max(32px, env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
    }

    .compact-auth-page .login-logo {
        width: 92px !important;
        height: 92px !important;
        border-radius: 26px !important;
    }

    .compact-auth-page .login-brand h1 {
        font-size: clamp(1.55rem, 7vw, 2.2rem) !important;
        line-height: 1.55 !important;
    }

    .compact-auth-page .centered-login-subtitle {
        font-size: 1rem !important;
        line-height: 2 !important;
    }

    .compact-auth-page .login-form input[type="text"],
    .compact-auth-page .login-form input[type="password"],
    .compact-auth-page .login-form input[type="email"],
    .compact-auth-page .captcha-card,
    .compact-auth-page .login-submit {
        min-height: 58px !important;
        border-radius: 18px !important;
    }

    .compact-auth-page .login-options-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .compact-auth-page .login-remember,
    .compact-auth-page .forgot-password-link {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 520px) {
    .topbar h1,
    .page-header-card h1,
    .page-header-card h2,
    .dashboard-hero h1,
    .dashboard-hero-title {
        font-size: clamp(1.55rem, 7vw, 2.15rem) !important;
        line-height: 1.6 !important;
    }

    .brand strong,
    .brand-text-wrap strong {
        font-size: 1.05rem !important;
    }

    .brand span,
    .brand-text-wrap span {
        font-size: .82rem !important;
    }

    .theme-toggle-text {
        display: none;
    }
}
/* ARENCRM_PWA_DARK_REMEMBER_MOBILE_PHASE_END */

/* Phase: refined dark mode and notification routing polish */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #111827;
    --panel: #172033;
    --surface: #1f293f;
    --surface-soft: #243149;
    --text: #eef4ff;
    --muted: #b8c4d7;
    --line: rgba(203, 213, 225, .18);
    --primary: #60a5fa;
    --primary-dark: #3b82f6;
    --sidebar: #0f172a;
    --sidebar-soft: #1e293b;
    --shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] body.theme-ready {
    background:
        radial-gradient(circle at 18% 0%, rgba(59, 130, 246, .18), transparent 36%),
        radial-gradient(circle at 85% 4%, rgba(20, 184, 166, .12), transparent 34%),
        linear-gradient(180deg, #111827 0%, #172033 100%) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .modern-shell,
html[data-theme="dark"] .polished-shell,
html[data-theme="dark"] .ultra-shell,
html[data-theme="dark"] .main,
html[data-theme="dark"] .modern-main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .modern-content,
html[data-theme="dark"] .polished-content,
html[data-theme="dark"] .aren-dashboard {
    background: transparent !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .polished-content,
html[data-theme="dark"] .modern-content,
html[data-theme="dark"] .content {
    background: linear-gradient(180deg, rgba(30, 41, 59, .52), rgba(17, 24, 39, .82)) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .page-header-card,
html[data-theme="dark"] .dashboard-section-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .dashboard-module-card,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .dashboard-note-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .details-card,
html[data-theme="dark"] .customer-card,
html[data-theme="dark"] .sales-doc-card,
html[data-theme="dark"] .opportunity-card,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .list-card {
    background: rgba(31, 41, 63, .96) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .page-header-card,
html[data-theme="dark"] .dashboard-hero-card {
    background: linear-gradient(135deg, rgba(37, 99, 235, .30), rgba(14, 165, 233, .18), rgba(31, 41, 63, .92)) !important;
    border-color: rgba(147, 197, 253, .20) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .dashboard-hero-card h1,
html[data-theme="dark"] .dashboard-hero-card strong,
html[data-theme="dark"] .page-header-card h1,
html[data-theme="dark"] .page-hero h1,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
    color: #f8fbff !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .page-header-card p,
html[data-theme="dark"] .dashboard-section-card p,
html[data-theme="dark"] .card-subtitle,
html[data-theme="dark"] .section-subtitle {
    color: var(--muted) !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .modern-topbar,
html[data-theme="dark"] .enhanced-topbar,
html[data-theme="dark"] .polished-topbar,
html[data-theme="dark"] .ultra-topbar {
    background: rgba(31, 41, 63, .88) !important;
    border-color: rgba(203, 213, 225, .16) !important;
    color: var(--text) !important;
    backdrop-filter: blur(18px);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .modern-sidebar,
html[data-theme="dark"] .polished-sidebar,
html[data-theme="dark"] .ultra-sidebar {
    background: radial-gradient(circle at 20% 0, rgba(14, 165, 233, .18), transparent 34%), linear-gradient(180deg, #111827, #16213a 60%, #111827) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .global-search,
html[data-theme="dark"] .global-search input,
html[data-theme="dark"] .captcha-card {
    background: rgba(15, 23, 42, .74) !important;
    border-color: rgba(203, 213, 225, .22) !important;
    color: #f8fbff !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: rgba(226, 232, 240, .56) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
    background-color: transparent !important;
    border-color: rgba(203, 213, 225, .16) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] th,
html[data-theme="dark"] thead,
html[data-theme="dark"] .table-header,
html[data-theme="dark"] .list-header {
    background: rgba(15, 23, 42, .56) !important;
    color: #dce8fb !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination span,
html[data-theme="dark"] .filter-chip {
    background: rgba(30, 41, 59, .92) !important;
    color: #dbeafe !important;
    border-color: rgba(147, 197, 253, .20) !important;
}

html[data-theme="dark"] .notification-button,
html[data-theme="dark"] .polished-profile-chip,
html[data-theme="dark"] .theme-toggle-button {
    background: rgba(30, 41, 59, .92) !important;
    color: #eaf3ff !important;
    border-color: rgba(147, 197, 253, .24) !important;
}

html[data-theme="dark"] .alert-success {
    background: rgba(22, 101, 52, .18) !important;
    color: #bbf7d0 !important;
    border-color: rgba(74, 222, 128, .24) !important;
}

html[data-theme="dark"] .alert-danger {
    background: rgba(153, 27, 27, .18) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, .24) !important;
}

/* ARENCRM_DARK_ACCESS_LOGIN_POLISH_BEGIN */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f172a;
    --panel: #1e293b;
    --surface: #1f2a3d;
    --surface-soft: #263449;
    --text: #f8fafc;
    --muted: #cbd5e1;
    --line: rgba(148, 163, 184, .26);
    --primary: #38bdf8;
    --primary-dark: #2563eb;
    --shadow: 0 18px 44px rgba(0, 0, 0, .30);
}

html[data-theme="dark"] body,
html[data-theme="dark"] body.theme-ready,
html[data-theme="dark"] .main,
html[data-theme="dark"] .modern-main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .modern-content,
html[data-theme="dark"] .polished-content,
html[data-theme="dark"] .aren-dashboard,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .modern-shell,
html[data-theme="dark"] .polished-shell,
html[data-theme="dark"] .ultra-shell {
    background:
        radial-gradient(circle at 16% 0%, rgba(14, 165, 233, .14), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(16, 185, 129, .10), transparent 32%),
        linear-gradient(180deg, #0f172a 0%, #111c30 50%, #0b1220 100%) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .page-header-card,
html[data-theme="dark"] .dashboard-section-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .dashboard-module-card,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .dashboard-note-card,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .details-card,
html[data-theme="dark"] .customer-card,
html[data-theme="dark"] .sales-doc-card,
html[data-theme="dark"] .opportunity-card,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .list-card,
html[data-theme="dark"] .login-panel-form,
html[data-theme="dark"] .compact-auth-page .login-panel-form,
html[data-theme="dark"] .white-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .metric-card {
    background: linear-gradient(180deg, rgba(30, 41, 59, .98), rgba(22, 32, 49, .98)) !important;
    border-color: rgba(148, 163, 184, .26) !important;
    color: #f8fafc !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .page-header-card,
html[data-theme="dark"] .dashboard-hero-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, .98), rgba(29, 78, 216, .22), rgba(15, 23, 42, .98)) !important;
    border-color: rgba(125, 211, 252, .24) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .page-header-card h1,
html[data-theme="dark"] .page-header-card h2,
html[data-theme="dark"] .dashboard-hero-title,
html[data-theme="dark"] .login-brand h1,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label {
    color: #f8fafc !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .muted-text,
html[data-theme="dark"] .page-header-card p,
html[data-theme="dark"] .card-subtitle,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .table-meta-row,
html[data-theme="dark"] .form-hint,
html[data-theme="dark"] .centered-login-subtitle {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .modern-topbar,
html[data-theme="dark"] .enhanced-topbar,
html[data-theme="dark"] .polished-topbar,
html[data-theme="dark"] .ultra-topbar {
    background: rgba(17, 24, 39, .92) !important;
    border-color: rgba(148, 163, 184, .24) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .modern-sidebar,
html[data-theme="dark"] .polished-sidebar,
html[data-theme="dark"] .ultra-sidebar {
    background: radial-gradient(circle at 20% 0, rgba(56, 189, 248, .16), transparent 34%), linear-gradient(180deg, #111827, #14213a 58%, #0b1220) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .global-search,
html[data-theme="dark"] .global-search input,
html[data-theme="dark"] .captcha-card,
html[data-theme="dark"] .access-search-box,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .filter-row {
    background: rgba(15, 23, 42, .86) !important;
    border-color: rgba(148, 163, 184, .32) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: rgba(203, 213, 225, .68) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] .server-paged-table {
    background: rgba(22, 32, 49, .92) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] th,
html[data-theme="dark"] .table-header,
html[data-theme="dark"] .list-header {
    background: rgba(15, 23, 42, .72) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, .22) !important;
}

html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td {
    background-color: transparent !important;
    color: #f1f5f9 !important;
    border-color: rgba(148, 163, 184, .20) !important;
}

html[data-theme="dark"] tr:hover td,
html[data-theme="dark"] .server-paged-table tr:hover td {
    background: rgba(56, 189, 248, .08) !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination span,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .notification-button,
html[data-theme="dark"] .polished-profile-chip,
html[data-theme="dark"] .theme-toggle-button {
    background: rgba(30, 41, 59, .96) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, .30) !important;
}

html[data-theme="dark"] .btn-primary {
    color: #ffffff !important;
}

html[data-theme="dark"] .login-page,
html[data-theme="dark"] .compact-auth-page.login-page {
    background:
        radial-gradient(circle at 18% 12%, rgba(56, 189, 248, .18), transparent 34%),
        radial-gradient(circle at 88% 14%, rgba(16, 185, 129, .12), transparent 34%),
        linear-gradient(180deg, #0f172a, #111827) !important;
}

.login-theme-action {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 8px;
}

.auth-theme-toggle {
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 999px;
}

html[data-theme="dark"] .login-visual {
    background: #111827 !important;
}

html[data-theme="dark"] .login-visual-overlay {
    background: rgba(15, 23, 42, .84) !important;
    border-color: rgba(148, 163, 184, .22) !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .brand-logo-img,
html[data-theme="dark"] .topbar-logo,
html[data-theme="dark"] .login-logo {
    background: rgba(241, 245, 249, .90) !important;
}
/* ARENCRM_DARK_ACCESS_LOGIN_POLISH_END */
/* ARENCRM_FORCE_DARK_STANDARD_V3_START */
/* Final forced dark layer. CSS-only, no JS, no controller, no DB changes. */
html body.dark-mode,
html.dark-mode body,
html[data-theme="dark"] body,
body[data-theme="dark"],
body.theme-dark,
body.dark {
  background: #081322 !important;
  color: #f8fafc !important;
}

body.dark-mode main,
body.dark-mode .main,
body.dark-mode .main-content,
body.dark-mode .content,
body.dark-mode .page-content,
body.dark-mode .app-content,
body.dark-mode .crm-main,
body.dark-mode .crm-page,
html.dark-mode body main,
html[data-theme="dark"] body main {
  background: linear-gradient(180deg, #0b1628 0%, #07111f 100%) !important;
  color: #f8fafc !important;
}

body.dark-mode .card,
body.dark-mode .crm-card,
body.dark-mode .panel,
body.dark-mode .box,
body.dark-mode .widget,
body.dark-mode .module-card,
body.dark-mode .dashboard-card,
body.dark-mode .summary-card,
body.dark-mode .stat-card,
body.dark-mode .page-card,
body.dark-mode .content-card,
body.dark-mode .filter-card,
body.dark-mode .form-card,
body.dark-mode .table-card,
body.dark-mode .page-hero,
body.dark-mode .hero-card,
body.dark-mode .empty-state,
body.dark-mode .upload-zone,
body.dark-mode .file-zone,
body.dark-mode .file-dropzone,
body.dark-mode .dropzone,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .list-group-item,
body.dark-mode .toast,
body.dark-mode .alert,
body.dark-mode .bg-white,
body.dark-mode .bg-light,
body.dark-mode .white-card,
body.dark-mode .light-card,
html.dark-mode body .card,
html.dark-mode body .bg-white,
html[data-theme="dark"] body .card,
html[data-theme="dark"] body .bg-white {
  background: linear-gradient(135deg, rgba(22, 37, 59, .96), rgba(12, 25, 43, .96)) !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .24) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22) !important;
}

body.dark-mode .page-hero,
body.dark-mode .hero-card,
body.dark-mode .section-hero,
body.dark-mode .crm-hero,
html.dark-mode body .page-hero {
  background: linear-gradient(135deg, rgba(16, 43, 70, .98), rgba(10, 25, 45, .98)) !important;
}

body.dark-mode table,
body.dark-mode .table,
body.dark-mode .table-responsive,
body.dark-mode thead,
body.dark-mode tbody,
body.dark-mode tfoot,
body.dark-mode tr,
body.dark-mode th,
body.dark-mode td,
body.dark-mode .grid,
body.dark-mode .data-grid,
body.dark-mode .table-wrapper,
html.dark-mode body table,
html.dark-mode body .table {
  background-color: #101d31 !important;
  color: #e5edf7 !important;
  border-color: rgba(148, 163, 184, .24) !important;
}
body.dark-mode thead th,
body.dark-mode .table thead th,
body.dark-mode table thead td {
  background-color: #15243a !important;
  color: #cbd5e1 !important;
}
body.dark-mode tbody tr:nth-child(odd),
body.dark-mode .table tbody tr:nth-child(odd) { background-color: #101d31 !important; }
body.dark-mode tbody tr:nth-child(even),
body.dark-mode .table tbody tr:nth-child(even) { background-color: #13243a !important; }
body.dark-mode tbody tr:hover,
body.dark-mode .table tbody tr:hover { background-color: #183451 !important; }

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text,
body.dark-mode .search-input,
body.dark-mode [contenteditable="true"],
html.dark-mode body input,
html.dark-mode body select,
html.dark-mode body textarea {
  background-color: #091624 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .35) !important;
  box-shadow: none !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode .form-control::placeholder,
body.dark-mode .search-input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 .18rem rgba(56, 189, 248, .16) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .title,
body.dark-mode .page-title,
body.dark-mode .card-title,
body.dark-mode .section-title,
body.dark-mode strong,
body.dark-mode b {
  color: #f8fafc !important;
}
body.dark-mode p,
body.dark-mode span,
body.dark-mode small,
body.dark-mode label,
body.dark-mode .text-muted,
body.dark-mode .muted,
body.dark-mode .description,
body.dark-mode .subtitle,
body.dark-mode .help-text,
body.dark-mode .form-text,
body.dark-mode .table-hint,
body.dark-mode .breadcrumb,
body.dark-mode .breadcrumb a {
  color: #cbd5e1 !important;
}
body.dark-mode a { color: #60a5fa !important; }

body.dark-mode .badge,
body.dark-mode .pill,
body.dark-mode .tag,
body.dark-mode .chip,
body.dark-mode .status,
body.dark-mode .status-badge,
body.dark-mode .rounded-pill,
body.dark-mode .page-link,
body.dark-mode .pagination a,
body.dark-mode .pagination span,
body.dark-mode .btn-light,
body.dark-mode .btn-outline-light,
body.dark-mode .btn-soft,
body.dark-mode .nav-pills .nav-link,
body.dark-mode .tab,
body.dark-mode .tabs button {
  background: #17263d !important;
  color: #e5edf7 !important;
  border-color: rgba(148, 163, 184, .28) !important;
}
body.dark-mode .btn-primary,
body.dark-mode .btn-info,
body.dark-mode .btn-gradient,
body.dark-mode button[type="submit"],
body.dark-mode .action-primary {
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
body.dark-mode .btn-danger,
body.dark-mode .delete,
body.dark-mode .btn-delete {
  background: rgba(239, 68, 68, .16) !important;
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, .34) !important;
}
body.dark-mode .btn-success,
body.dark-mode .success,
body.dark-mode .active,
body.dark-mode .status-active {
  background: rgba(16, 185, 129, .16) !important;
  color: #bbf7d0 !important;
  border-color: rgba(74, 222, 128, .30) !important;
}

body.dark-mode .form-check,
body.dark-mode .form-switch,
body.dark-mode .checkbox-card,
body.dark-mode .toggle-card,
body.dark-mode .permission-card,
body.dark-mode .access-card {
  background: #121f33 !important;
  color: #e5edf7 !important;
  border-color: rgba(148, 163, 184, .26) !important;
}
body.dark-mode .form-check-input {
  background-color: #0b1727 !important;
  border-color: #64748b !important;
}
body.dark-mode .form-check-input:checked {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
}

body.dark-mode .toast,
body.dark-mode .notification,
body.dark-mode .notification-toast,
body.dark-mode .alert-success,
body.dark-mode .alert-danger,
body.dark-mode .alert-warning,
body.dark-mode .alert-info {
  background: #101d31 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .24) !important;
}

body.dark-mode img,
body.dark-mode .avatar,
body.dark-mode .logo-box,
body.dark-mode .brand-logo {
  background-color: transparent !important;
}

@media (max-width: 768px) {
  body.dark-mode .card,
  body.dark-mode .crm-card,
  body.dark-mode .panel,
  body.dark-mode .page-hero,
  body.dark-mode .filter-card,
  body.dark-mode .table-card,
  body.dark-mode .form-card {
    background: #101d31 !important;
    border-color: rgba(148, 163, 184, .24) !important;
  }
  body.dark-mode table,
  body.dark-mode .table,
  body.dark-mode .table-responsive {
    background-color: #101d31 !important;
  }
}
/* ARENCRM_FORCE_DARK_STANDARD_V3_END */

/* arencrm-phase98-login-scroll-fix */
.compact-auth-page.login-page{
    min-height:100svh!important;
    height:100svh!important;
    overflow:hidden!important;
    padding:10px!important;
}
.compact-auth-page .login-shell{
    height:calc(100svh - 20px)!important;
    min-height:0!important;
    overflow:hidden!important;
}
.compact-auth-page .login-panel-form{
    max-height:100%!important;
    overflow:hidden!important;
}
@media(max-width:900px){
    .compact-auth-page.login-page{height:auto!important;overflow:auto!important;}
    .compact-auth-page .login-shell{height:auto!important;overflow:visible!important;}
    .compact-auth-page .login-panel-form{overflow:visible!important;}
}


/* Phase 103 Revised: Customer tickets menu is a normal menu item, not the blue active dashboard pill. */
a[href*="CustomerPortalAdmin/Tickets"],
a[href*="CustomerPortalAdmin/Tickets"].active,
.sidebar a[href*="CustomerPortalAdmin/Tickets"],
.sidebar a[href*="CustomerPortalAdmin/Tickets"].active,
.app-sidebar a[href*="CustomerPortalAdmin/Tickets"],
.app-sidebar a[href*="CustomerPortalAdmin/Tickets"].active,
.main-sidebar a[href*="CustomerPortalAdmin/Tickets"],
.main-sidebar a[href*="CustomerPortalAdmin/Tickets"].active,
.portal-admin-sidebar a[href*="CustomerPortalAdmin/Tickets"],
.portal-admin-sidebar a[href*="CustomerPortalAdmin/Tickets"].active {
    background: rgba(15, 23, 42, .46) !important;
    color: #e5eefc !important;
    border-color: rgba(148, 163, 184, .12) !important;
    box-shadow: none !important;
    border-radius: 18px !important;
}
a[href*="CustomerPortalAdmin/Tickets"]:hover,
.sidebar a[href*="CustomerPortalAdmin/Tickets"]:hover,
.app-sidebar a[href*="CustomerPortalAdmin/Tickets"]:hover,
.main-sidebar a[href*="CustomerPortalAdmin/Tickets"]:hover {
    background: rgba(30, 41, 59, .78) !important;
}


/* Phase 104 Revised: ticket composer attachments, emoji and voice UI. */
.ticket-composer-tools{display:grid;gap:10px;margin-top:10px;padding:12px;border:1px dashed #cbd5e1;border-radius:18px;background:#f8fafc}
.ticket-emoji-bar{display:flex;gap:6px;flex-wrap:wrap}.ticket-emoji-bar button{border:1px solid #e2e8f0;background:#fff;border-radius:12px;min-width:36px;height:34px;cursor:pointer;font-size:17px}.ticket-upload-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ticket-file-picker,.ticket-voice-button{border:0;border-radius:14px;background:#0f172a;color:#fff;padding:10px 14px;font-family:inherit;font-weight:900;cursor:pointer;text-decoration:none}.ticket-file-picker input{display:none}.ticket-voice-button{background:#2563eb}.ticket-record-status{font-size:12px;color:#64748b;font-weight:800}.ticket-file-list{display:flex;gap:6px;flex-wrap:wrap}.ticket-file-chip{border:1px solid #dbeafe;background:#eff6ff;color:#1e40af;border-radius:999px;padding:5px 9px;font-size:12px}.ticket-upload-help{color:#64748b;line-height:1.9}.ticket-attachments-panel{grid-column:1/-1;border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:14px;margin-top:12px}.ticket-attachments-panel>strong{display:block;margin-bottom:10px}.ticket-attachments-grid{display:grid;gap:8px}.ticket-attachment-link{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e2e8f0;border-radius:14px;padding:10px 12px;text-decoration:none;color:#0f172a;background:#f8fafc}.ticket-attachment-link small{color:#64748b}


/* PHASE105_DASHBOARD_ALERTS_AND_TICKET_COMPOSER */
.dashboard-system-alert-zone{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;align-items:stretch}
.dashboard-system-alert-zone:not(.has-alerts){display:none!important}
.dashboard-alert{display:flex;flex-direction:column;gap:4px;min-width:210px;max-width:360px;padding:10px 12px;border-radius:18px;text-decoration:none;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);box-shadow:0 14px 34px rgba(15,23,42,.13);color:inherit;backdrop-filter:blur(10px)}
.dashboard-alert strong{font-weight:900;font-size:.88rem}.dashboard-alert span{font-size:.76rem;line-height:1.8}.dashboard-alert.warning{background:rgba(255,247,237,.9);border-color:#fed7aa;color:#9a3412}.dashboard-alert.danger{background:rgba(254,226,226,.92);border-color:#fecaca;color:#991b1b}.dashboard-alert.success{background:rgba(220,252,231,.9);border-color:#bbf7d0;color:#166534}
.ticket-composer-pro{position:relative;display:flex;flex-direction:column;gap:12px;border:1px solid rgba(148,163,184,.25);border-radius:24px;background:linear-gradient(180deg,#fff,rgba(248,250,252,.92));padding:14px;box-shadow:0 18px 45px rgba(15,23,42,.06)}
.ticket-composer-textarea-pro{width:100%;min-height:130px;border:1px solid #dbe5f3!important;border-radius:18px!important;background:#fff!important;padding:14px 16px!important;line-height:2!important;resize:vertical;outline:none;box-shadow:inset 0 1px 0 rgba(15,23,42,.03)}
.ticket-composer-textarea-pro:focus{border-color:#60a5fa!important;box-shadow:0 0 0 4px rgba(59,130,246,.12), inset 0 1px 0 rgba(15,23,42,.03)}
.ticket-composer-toolbar-pro{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;order:5}.ticket-tool-btn-pro{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:1px solid #dbe7f5;border-radius:999px;background:#f8fbff;color:#0f172a;font-weight:800;font-family:inherit;cursor:pointer;transition:.18s ease}.ticket-tool-btn-pro:hover{background:#eff6ff;border-color:#bfdbfe;transform:translateY(-1px)}.ticket-tool-btn-pro span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e0f2fe}.ticket-record-btn-pro.is-recording{background:#fff1f2;border-color:#fecdd3;color:#be123c;animation:ticketRecordPulse 1.15s ease-in-out infinite}@keyframes ticketRecordPulse{50%{box-shadow:0 0 0 6px rgba(244,63,94,.12)}}
.ticket-emoji-menu-pro{position:absolute;z-index:50;bottom:72px;right:18px;display:none;grid-template-columns:repeat(8,36px);gap:7px;padding:12px;border-radius:22px;background:rgba(255,255,255,.98);border:1px solid #dbe7f5;box-shadow:0 24px 65px rgba(15,23,42,.18)}.ticket-emoji-menu-pro.is-open{display:grid}.ticket-emoji-chip-pro{width:36px;height:36px;border:0;border-radius:13px;background:#f1f5f9;font-size:1.15rem;cursor:pointer;line-height:1;display:grid;place-items:center}.ticket-emoji-chip-pro:hover{background:#dbeafe;transform:translateY(-1px)}
.ticket-file-input-pro{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.ticket-file-list-pro{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;order:6}.ticket-file-chip-pro{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:7px 10px;border-radius:999px;background:#eef6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-size:.78rem}.ticket-file-chip-pro span{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ticket-file-chip-pro b{font-size:.7rem;color:#64748b}.ticket-record-status-pro{font-size:.78rem;color:#64748b;min-height:20px;order:7}.ticket-composer-pro [data-ticket-emoji]:not(.ticket-emoji-chip-pro){display:none!important}
@media(max-width:760px){.ticket-composer-pro{padding:12px;border-radius:20px}.ticket-composer-toolbar-pro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ticket-tool-btn-pro{justify-content:center;width:100%;padding:0 8px}.ticket-emoji-menu-pro{right:12px;left:12px;bottom:72px;grid-template-columns:repeat(8,1fr)}.ticket-file-chip-pro span{max-width:150px}}
/* END_PHASE105_DASHBOARD_ALERTS_AND_TICKET_COMPOSER */



/* Phase106 - polished ticket composer, shamsi filters and latest tickets */
[data-ticket-composer="true"] .ticket-tool-row,
[data-ticket-composer="true"] .ticket-compose-tools,
[data-ticket-composer="true"] .ticket-composer-tools,
[data-ticket-composer="true"] .ticket-attachment-tools {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    align-items: stretch !important;
    width: 100%;
    margin: 12px 0 !important;
}
[data-ticket-composer="true"] .ticket-tool-button,
[data-ticket-composer="true"] .ticket-tool-row > button,
[data-ticket-composer="true"] .ticket-tool-row > label,
[data-ticket-composer="true"] [data-ticket-record],
[data-ticket-composer="true"] [data-ticket-emoji-toggle] {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
[data-ticket-composer="true"] .ticket-tool-button span,
[data-ticket-composer="true"] .ticket-tool-button b { pointer-events:none; }
[data-ticket-composer="true"] .ticket-emoji-wrap { position: relative; min-width:0; }
[data-ticket-composer="true"] .ticket-emoji-popover {
    position: absolute;
    inset-inline-end: 0;
    bottom: calc(100% + 10px);
    width: min(260px, 78vw);
    display: none;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: 0 18px 45px rgba(15,23,42,.18);
    z-index: 50;
}
[data-ticket-composer="true"] .ticket-emoji-popover.is-open { display: grid; }
[data-ticket-composer="true"] .ticket-emoji-choice {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    font-size: 18px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
}
[data-ticket-composer="true"] .ticket-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 10px;
    margin: 4px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e3a8a;
    border: 1px solid #bfdbfe;
    font-size: 12px;
}
[data-ticket-composer="true"] .ticket-file-chip span { max-width: 170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-ticket-composer="true"] .ticket-file-chip b { color:#64748b; font-weight:700; }
[data-ticket-composer="true"] [data-ticket-record].is-recording { background:#fee2e2 !important; color:#991b1b !important; border-color:#fecaca !important; }
[data-ticket-composer="true"] [data-ticket-record-status] { display:block; min-height:20px; margin-top:4px; color:#64748b; font-size:12px; }
[data-ticket-composer="true"] .ticket-upload-help,
[data-ticket-composer="true"] .ticket-attachment-help,
[data-ticket-composer="true"] .ticket-file-help,
[data-ticket-composer="true"] .composer-help { display:none !important; }
.cp-ticket-filter-row-polished,
.cp-ticket-filter-row-persian {
    display: grid !important;
    grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(300px, 1fr)) !important;
    gap: 14px !important;
    align-items: end !important;
    overflow: visible !important;
    max-width: 100% !important;
}
.cp-ticket-filter-row-polished label,
.cp-ticket-filter-row-polished .cp-persian-date-filter,
.cp-ticket-filter-row-persian label,
.cp-ticket-filter-row-persian .cp-persian-date-filter { min-width:0 !important; width:100% !important; }
.cp-persian-date-grid { display:grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
.cp-persian-date-grid select,
.cp-ticket-filter-row-persian input,
.cp-ticket-filter-row-persian select {
    min-height: 42px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 13px !important;
    max-width: 100% !important;
}
.cp-ticket-table-wrap { max-width:100%; overflow-x:auto; }
.cp-ticket-list.compact .cp-ticket-item { border-radius:18px; }
@media (max-width: 980px){
    .cp-ticket-filter-row-polished,
    .cp-ticket-filter-row-persian { grid-template-columns: 1fr !important; }
    [data-ticket-composer="true"] .ticket-tool-row,
    [data-ticket-composer="true"] .ticket-compose-tools,
    [data-ticket-composer="true"] .ticket-composer-tools,
    [data-ticket-composer="true"] .ticket-attachment-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
    [data-ticket-composer="true"] .ticket-tool-row,
    [data-ticket-composer="true"] .ticket-compose-tools,
    [data-ticket-composer="true"] .ticket-composer-tools,
    [data-ticket-composer="true"] .ticket-attachment-tools { grid-template-columns: 1fr; }
}


/* Phase107 - repair ticket composer layout and restore portal login visual */
.cp-auth-photo-v96,
.cp-auth-photo-v95,
.cp-auth-photo {
    background-image: linear-gradient(145deg, rgba(15,23,42,.16), rgba(30,64,175,.10)), url('/img/customer-portal/customer-portal-login.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    overflow: hidden !important;
}
.cp-auth-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    background: transparent !important;
}
.cp-auth-photo-v96::before,
.cp-auth-photo-v95::before,
.cp-auth-photo::before { content:none !important; }
.cp-auth-photo-caption-v97,
.cp-auth-photo-caption-v96,
.cp-auth-photo-caption {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.42) !important;
}
[data-ticket-composer="true"] .ticket-tool-row,
[data-ticket-composer="true"] .ticket-tool-row-v107,
[data-ticket-composer="true"] .ticket-compose-tools,
[data-ticket-composer="true"] .ticket-composer-tools,
[data-ticket-composer="true"] .ticket-attachment-tools {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 12px 0 14px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(148,163,184,.40) !important;
    background: rgba(248,250,252,.84) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
[data-ticket-composer="true"] .ticket-tool-button,
[data-ticket-composer="true"] .ticket-tool-row > button,
[data-ticket-composer="true"] .ticket-tool-row > label,
[data-ticket-composer="true"] [data-ticket-record],
[data-ticket-composer="true"] [data-ticket-emoji-toggle] {
    position: relative !important;
    z-index: 2 !important;
    flex: 1 1 0 !important;
    min-width: 102px !important;
    max-width: 136px !important;
    width: auto !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
}
[data-ticket-composer="true"] .ticket-tool-button span,
[data-ticket-composer="true"] .ticket-tool-button b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    color: inherit !important;
}
[data-ticket-composer="true"] .ticket-tool-attach,
[data-ticket-composer="true"] label.ticket-tool-button { background:#0f172a !important; color:#fff !important; }
[data-ticket-composer="true"] .ticket-tool-record,
[data-ticket-composer="true"] [data-ticket-record] { background:#2563eb !important; color:#fff !important; }
[data-ticket-composer="true"] .ticket-tool-emoji,
[data-ticket-composer="true"] [data-ticket-emoji-toggle] { background:#ffffff !important; color:#0f172a !important; }
[data-ticket-composer="true"] [data-ticket-record].is-recording { background:#dc2626 !important; color:#fff !important; }
[data-ticket-composer="true"] .ticket-emoji-wrap {
    position: relative !important;
    display: inline-flex !important;
    flex: 1 1 0 !important;
    min-width: 102px !important;
    max-width: 136px !important;
    width: auto !important;
    overflow: visible !important;
}
[data-ticket-composer="true"] .ticket-emoji-wrap > .ticket-tool-button { flex: 1 1 auto !important; max-width: none !important; min-width: 0 !important; width: 100% !important; }
[data-ticket-composer="true"] .ticket-emoji-popover:not(.is-open) { display: none !important; }
[data-ticket-composer="true"] .ticket-emoji-popover {
    position: absolute !important;
    inset-inline-end: 0 !important;
    bottom: calc(100% + 12px) !important;
    width: 248px !important;
    max-width: min(248px, 78vw) !important;
    display: none !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 7px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(148,163,184,.35) !important;
    box-shadow: 0 18px 45px rgba(15,23,42,.22) !important;
    z-index: 999 !important;
}
[data-ticket-composer="true"] .ticket-emoji-popover.is-open { display: grid !important; }
[data-ticket-composer="true"] .ticket-emoji-choice {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}
[data-ticket-composer="true"] .ticket-upload-help,
[data-ticket-composer="true"] .ticket-attachment-help,
[data-ticket-composer="true"] .ticket-file-help,
[data-ticket-composer="true"] .composer-help { display:none !important; }
[data-ticket-composer="true"] [data-ticket-file-list] { display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin-top:6px !important; }
[data-ticket-composer="true"] textarea { width:100% !important; box-sizing:border-box !important; }
@media (max-width: 520px){
    [data-ticket-composer="true"] .ticket-tool-row,
    [data-ticket-composer="true"] .ticket-tool-row-v107,
    [data-ticket-composer="true"] .ticket-compose-tools,
    [data-ticket-composer="true"] .ticket-composer-tools,
    [data-ticket-composer="true"] .ticket-attachment-tools { gap:8px !important; padding:8px !important; }
    [data-ticket-composer="true"] .ticket-tool-button,
    [data-ticket-composer="true"] .ticket-tool-row > button,
    [data-ticket-composer="true"] .ticket-tool-row > label,
    [data-ticket-composer="true"] [data-ticket-record],
    [data-ticket-composer="true"] [data-ticket-emoji-toggle],
    [data-ticket-composer="true"] .ticket-emoji-wrap { min-width: 88px !important; max-width: none !important; font-size: 12.5px !important; }
}


/* Phase108 - final ticket composer width/layout and customer portal login photo */
.ticket-tool-duplicate-hide { display: none !important; }
.cp-auth-photo,
.cp-auth-photo-v95,
.cp-auth-photo-v96,
.cp-auth-photo-v97,
.customer-portal-login-photo,
.customer-portal-auth-photo {
    background-image: linear-gradient(145deg, rgba(15,23,42,.18), rgba(30,64,175,.10)), url('/img/customer-portal/customer-portal-login.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #0f172a !important;
}
.cp-auth-photo img,
.cp-auth-photo-v95 img,
.cp-auth-photo-v96 img,
.cp-auth-photo-v97 img,
.customer-portal-login-photo img,
.customer-portal-auth-photo img,
.cp-auth-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    background: transparent !important;
}
.ticket-detail-grid,
.portal-ticket-detail-grid,
.customer-ticket-detail-grid,
.ticket-detail-layout,
.cp-ticket-detail-grid,
.cp-ticket-conversation-layout,
.ticket-admin-detail-grid,
.admin-ticket-detail-grid,
.ticket-thread-layout,
.cp-ticket-thread-layout {
    display: grid !important;
    grid-template-columns: minmax(410px, 470px) minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
}
.ticket-compose-panel,
.ticket-reply-panel,
.ticket-response-panel,
.ticket-message-panel,
.ticket-composer-panel,
.cp-ticket-compose-panel,
.cp-ticket-reply-panel,
.cp-ticket-side-panel,
.cp-ticket-reply-card,
.cp-ticket-compose-card,
.ticket-sidebar-card,
.ticket-admin-reply-card {
    min-width: 400px !important;
    max-width: 470px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
[data-ticket-composer="true"],
.ticket-composer-normalized-v108 {
    overflow: visible !important;
}
[data-ticket-composer="true"] textarea {
    width: 100% !important;
    min-height: 170px !important;
    box-sizing: border-box !important;
}
[data-ticket-composer="true"] .ticket-tool-row-v108,
[data-ticket-composer="true"] .ticket-tool-row,
.ticket-composer-normalized-v108 .ticket-tool-row-v108 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(112px, 1fr)) !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: stretch !important;
    width: 100% !important;
    margin: 12px 0 12px !important;
    padding: 12px !important;
    border-radius: 20px !important;
    border: 1px dashed rgba(148,163,184,.38) !important;
    background: rgba(248,250,252,.88) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
[data-ticket-composer="true"] .ticket-tool-button,
[data-ticket-composer="true"] .ticket-tool-row-v108 > label,
[data-ticket-composer="true"] .ticket-tool-row-v108 > button,
[data-ticket-composer="true"] .ticket-tool-row-v108 .ticket-emoji-wrap,
[data-ticket-composer="true"] [data-ticket-record],
[data-ticket-composer="true"] [data-ticket-emoji-toggle] {
    width: 100% !important;
    min-width: 112px !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
[data-ticket-composer="true"] .ticket-tool-attach { background: #0f172a !important; color: #fff !important; border: 1px solid rgba(15,23,42,.12) !important; }
[data-ticket-composer="true"] .ticket-tool-record { background: #2563eb !important; color: #fff !important; border: 1px solid rgba(37,99,235,.18) !important; }
[data-ticket-composer="true"] .ticket-tool-emoji { background: #fff !important; color: #0f172a !important; border: 1px solid rgba(148,163,184,.35) !important; }
[data-ticket-composer="true"] .ticket-tool-button span,
[data-ticket-composer="true"] .ticket-tool-button b { display:inline-flex !important; align-items:center !important; color:inherit !important; pointer-events:none !important; }
[data-ticket-composer="true"] .ticket-emoji-wrap-v108 { position: relative !important; overflow: visible !important; }
[data-ticket-composer="true"] .ticket-emoji-popover:not(.is-open) { display: none !important; }
[data-ticket-composer="true"] .ticket-emoji-popover {
    position: absolute !important;
    inset-inline-end: 0 !important;
    bottom: calc(100% + 12px) !important;
    width: 258px !important;
    max-width: min(258px, 78vw) !important;
    display: none !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 7px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(148,163,184,.35) !important;
    box-shadow: 0 18px 45px rgba(15,23,42,.22) !important;
    z-index: 9999 !important;
}
[data-ticket-composer="true"] .ticket-emoji-popover.is-open { display: grid !important; }
[data-ticket-composer="true"] .ticket-emoji-choice {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}
[data-ticket-composer="true"] .ticket-file-list,
[data-ticket-composer="true"] [data-ticket-file-list] { display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin: 6px 0 10px !important; }
[data-ticket-composer="true"] .ticket-file-chip { display:inline-flex !important; gap:8px !important; align-items:center !important; max-width:100% !important; padding:7px 10px !important; border-radius:999px !important; background:#eff6ff !important; color:#1e3a8a !important; border:1px solid #bfdbfe !important; font-size:12px !important; }
[data-ticket-composer="true"] .ticket-file-chip span { max-width:180px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
[data-ticket-composer="true"] [data-ticket-record].is-recording { background:#dc2626 !important; color:#fff !important; }
[data-ticket-composer="true"] [data-ticket-record-status] { display:block !important; min-height:20px !important; margin: 4px 0 8px !important; color:#64748b !important; font-size:12px !important; text-align:center !important; }
@media (max-width: 1200px){
    .ticket-detail-grid,
    .portal-ticket-detail-grid,
    .customer-ticket-detail-grid,
    .ticket-detail-layout,
    .cp-ticket-detail-grid,
    .cp-ticket-conversation-layout,
    .ticket-admin-detail-grid,
    .admin-ticket-detail-grid,
    .ticket-thread-layout,
    .cp-ticket-thread-layout { grid-template-columns: 1fr !important; }
    .ticket-compose-panel,
    .ticket-reply-panel,
    .ticket-response-panel,
    .ticket-message-panel,
    .ticket-composer-panel,
    .cp-ticket-compose-panel,
    .cp-ticket-reply-panel,
    .cp-ticket-side-panel,
    .cp-ticket-reply-card,
    .cp-ticket-compose-card,
    .ticket-sidebar-card,
    .ticket-admin-reply-card { max-width: 100% !important; min-width: 0 !important; }
}
@media (max-width: 560px){
    [data-ticket-composer="true"] .ticket-tool-row-v108,
    [data-ticket-composer="true"] .ticket-tool-row { grid-template-columns: 1fr !important; }
    [data-ticket-composer="true"] .ticket-tool-button,
    [data-ticket-composer="true"] .ticket-tool-row-v108 > label,
    [data-ticket-composer="true"] .ticket-tool-row-v108 > button,
    [data-ticket-composer="true"] .ticket-tool-row-v108 .ticket-emoji-wrap { min-width:0 !important; }
}


/* Phase109 - unified ticket composer final layout. No controller/query changes. */
.ticket-tool-old-hidden{display:none!important;visibility:hidden!important;inline-size:0!important;block-size:0!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;}
.ticket-file-input-v109{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important;pointer-events:none!important;}
.ticket-detail-grid,.portal-ticket-detail-grid,.customer-ticket-detail-grid,.ticket-detail-layout,.cp-ticket-detail-grid,.cp-ticket-conversation-layout,.ticket-admin-detail-grid,.admin-ticket-detail-grid,.ticket-thread-layout,.cp-ticket-thread-layout{display:grid!important;grid-template-columns:minmax(380px,420px) minmax(0,1fr)!important;gap:24px!important;align-items:start!important;overflow:visible!important;}
.ticket-compose-panel,.ticket-reply-panel,.ticket-response-panel,.ticket-message-panel,.ticket-composer-panel,.cp-ticket-compose-panel,.cp-ticket-reply-panel,.cp-ticket-side-panel,.cp-ticket-reply-card,.cp-ticket-compose-card,.ticket-sidebar-card,.ticket-admin-reply-card{min-width:380px!important;max-width:420px!important;width:100%!important;box-sizing:border-box!important;overflow:visible!important;}
.ticket-composer-final-v109,[data-ticket-composer="true"]{overflow:visible!important;box-sizing:border-box!important;}
.ticket-composer-final-v109 textarea,[data-ticket-composer="true"] textarea{inline-size:100%!important;min-block-size:168px!important;box-sizing:border-box!important;resize:vertical!important;}
.ticket-tool-row-v109{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;inline-size:100%!important;max-inline-size:100%!important;margin:12px 0 12px!important;padding:10px!important;box-sizing:border-box!important;border-radius:20px!important;border:1px dashed rgba(148,163,184,.38)!important;background:rgba(248,250,252,.92)!important;overflow:visible!important;direction:rtl!important;}
.ticket-tool-row-v109 .ticket-tool-button,.ticket-tool-row-v109>label,.ticket-tool-row-v109>button,.ticket-tool-row-v109 .ticket-emoji-wrap-v109{flex:1 1 0!important;min-width:0!important;max-width:none!important;width:auto!important;inline-size:auto!important;height:50px!important;min-height:50px!important;border-radius:16px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:0 10px!important;box-sizing:border-box!important;white-space:nowrap!important;text-decoration:none!important;font-size:14px!important;font-weight:900!important;line-height:1!important;}
.ticket-tool-row-v109 .ticket-tool-button span,.ticket-tool-row-v109 .ticket-tool-button b{display:inline-flex!important;align-items:center!important;color:inherit!important;line-height:1!important;pointer-events:none!important;}
.ticket-tool-row-v109 .ticket-tool-attach{background:#0f172a!important;color:#fff!important;border:1px solid rgba(15,23,42,.12)!important;}
.ticket-tool-row-v109 .ticket-tool-record{background:#2563eb!important;color:#fff!important;border:1px solid rgba(37,99,235,.18)!important;}
.ticket-tool-row-v109 .ticket-tool-emoji{background:#fff!important;color:#0f172a!important;border:1px solid rgba(148,163,184,.38)!important;}
.ticket-emoji-wrap-v109{position:relative!important;overflow:visible!important;padding:0!important;background:transparent!important;border:0!important;}
.ticket-emoji-popover-v109{position:absolute!important;inset-inline-end:0!important;bottom:calc(100% + 10px)!important;width:260px!important;max-width:min(260px,80vw)!important;display:none!important;grid-template-columns:repeat(6,1fr)!important;gap:7px!important;padding:10px!important;border-radius:18px!important;background:rgba(255,255,255,.98)!important;border:1px solid rgba(148,163,184,.35)!important;box-shadow:0 18px 45px rgba(15,23,42,.22)!important;z-index:9999!important;}
.ticket-emoji-popover-v109.is-open{display:grid!important;}
.ticket-emoji-popover-v109 .ticket-emoji-choice{inline-size:34px!important;block-size:34px!important;min-inline-size:34px!important;border-radius:12px!important;padding:0!important;font-size:18px!important;line-height:1!important;background:#f8fafc!important;color:#0f172a!important;border:1px solid #e2e8f0!important;box-shadow:none!important;}
.ticket-file-list,[data-ticket-file-list]{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:6px 0 10px!important;}
.ticket-file-chip{display:inline-flex!important;gap:8px!important;align-items:center!important;max-width:100%!important;padding:7px 10px!important;border-radius:999px!important;background:#eff6ff!important;color:#1e3a8a!important;border:1px solid #bfdbfe!important;font-size:12px!important;}
.ticket-file-chip span{max-width:180px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.ticket-tool-row-v109 [data-ticket-record].is-recording,.ticket-tool-record.is-recording{background:#dc2626!important;color:#fff!important;}
.ticket-record-status-v109{display:block!important;min-height:20px!important;margin:4px 0 8px!important;color:#64748b!important;font-size:12px!important;text-align:center!important;}
/* Portal login real photo fallback */
.cp-auth-photo,.cp-auth-photo-v95,.cp-auth-photo-v96,.cp-auth-photo-v97,.customer-portal-login-photo,.customer-portal-auth-photo{background-image:linear-gradient(145deg,rgba(15,23,42,.16),rgba(30,64,175,.12)),url('/img/customer-portal/customer-portal-login.webp')!important;background-size:cover!important;background-position:center!important;background-color:#0f172a!important;}
.cp-auth-photo img,.cp-auth-photo-v95 img,.cp-auth-photo-v96 img,.cp-auth-photo-v97 img,.customer-portal-login-photo img,.customer-portal-auth-photo img,.cp-auth-media{width:100%!important;height:100%!important;min-height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important;background:transparent!important;}
@media (max-width:1240px){.ticket-detail-grid,.portal-ticket-detail-grid,.customer-ticket-detail-grid,.ticket-detail-layout,.cp-ticket-detail-grid,.cp-ticket-conversation-layout,.ticket-admin-detail-grid,.admin-ticket-detail-grid,.ticket-thread-layout,.cp-ticket-thread-layout{grid-template-columns:1fr!important}.ticket-compose-panel,.ticket-reply-panel,.ticket-response-panel,.ticket-message-panel,.ticket-composer-panel,.cp-ticket-compose-panel,.cp-ticket-reply-panel,.cp-ticket-side-panel,.cp-ticket-reply-card,.cp-ticket-compose-card,.ticket-sidebar-card,.ticket-admin-reply-card{min-width:0!important;max-width:100%!important}}
@media (max-width:520px){.ticket-tool-row-v109{gap:8px!important;padding:8px!important}.ticket-tool-row-v109 .ticket-tool-button,.ticket-tool-row-v109>label,.ticket-tool-row-v109>button,.ticket-tool-row-v109 .ticket-emoji-wrap-v109{height:46px!important;min-height:46px!important;font-size:12px!important;padding:0 7px!important}.ticket-tool-row-v109 .ticket-tool-button span{display:none!important}}


/* Phase110 - final compact ticket toolbar, portal menu color and ticket filters */
.ticket-tool-old-hidden{display:none!important;visibility:hidden!important;width:0!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;}
.ticket-file-input-v110{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
.ticket-detail-grid,.portal-ticket-detail-grid,.customer-ticket-detail-grid,.ticket-detail-layout,.cp-ticket-detail-grid,.cp-ticket-conversation-layout,.ticket-admin-detail-grid,.admin-ticket-detail-grid,.ticket-thread-layout,.cp-ticket-thread-layout{display:grid!important;grid-template-columns:minmax(420px,460px) minmax(0,1fr)!important;gap:24px!important;align-items:start!important;overflow:visible!important;}
.ticket-compose-panel,.ticket-reply-panel,.ticket-response-panel,.ticket-message-panel,.ticket-composer-panel,.cp-ticket-compose-panel,.cp-ticket-reply-panel,.cp-ticket-side-panel,.cp-ticket-reply-card,.cp-ticket-compose-card,.ticket-sidebar-card,.ticket-admin-reply-card{min-width:420px!important;max-width:460px!important;width:100%!important;box-sizing:border-box!important;overflow:visible!important;}
.ticket-composer-final-v110,[data-ticket-composer="true"]{overflow:visible!important;box-sizing:border-box!important;}
.ticket-composer-final-v110 textarea,[data-ticket-composer="true"] textarea{width:100%!important;min-height:170px!important;box-sizing:border-box!important;resize:vertical!important;}
.ticket-tool-row-v110{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;width:100%!important;max-width:100%!important;margin:12px 0 12px!important;padding:10px!important;box-sizing:border-box!important;border-radius:20px!important;border:1px dashed rgba(148,163,184,.42)!important;background:rgba(248,250,252,.94)!important;overflow:visible!important;direction:rtl!important;}
.ticket-tool-row-v110 .ticket-tool-button-v110,.ticket-tool-row-v110>label,.ticket-tool-row-v110 .ticket-emoji-wrap-v110{flex:1 1 0!important;min-width:118px!important;max-width:145px!important;width:auto!important;height:50px!important;min-height:50px!important;border-radius:16px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:0 12px!important;box-sizing:border-box!important;white-space:nowrap!important;text-decoration:none!important;font-size:14px!important;font-weight:900!important;line-height:1!important;position:relative!important;}
.ticket-tool-row-v110 .ticket-tool-button-v110 .ticket-tool-icon,.ticket-tool-row-v110 .ticket-tool-button-v110 b{display:inline-flex!important;align-items:center!important;color:inherit!important;line-height:1!important;pointer-events:none!important;}
.ticket-tool-attach-v110{background:#0f172a!important;color:#fff!important;border:1px solid rgba(15,23,42,.12)!important;}
.ticket-tool-record-v110{background:#2563eb!important;color:#fff!important;border:1px solid rgba(37,99,235,.18)!important;}
.ticket-tool-emoji-v110{background:#fff!important;color:#0f172a!important;border:1px solid rgba(148,163,184,.42)!important;box-shadow:none!important;}
.ticket-emoji-wrap-v110{background:transparent!important;border:0!important;padding:0!important;overflow:visible!important;}
.ticket-emoji-wrap-v110>.ticket-tool-emoji-v110{width:100%!important;height:100%!important;max-width:none!important;min-width:0!important;}
.ticket-emoji-popover-v110{position:absolute!important;right:0!important;bottom:calc(100% + 10px)!important;width:260px!important;max-width:min(260px,80vw)!important;display:none!important;grid-template-columns:repeat(6,1fr)!important;gap:7px!important;padding:10px!important;border-radius:18px!important;background:rgba(255,255,255,.98)!important;border:1px solid rgba(148,163,184,.35)!important;box-shadow:0 18px 45px rgba(15,23,42,.22)!important;z-index:9999!important;}
.ticket-emoji-popover-v110.is-open{display:grid!important;}
.ticket-emoji-choice-v110{width:34px!important;height:34px!important;min-width:34px!important;border-radius:12px!important;padding:0!important;font-size:18px!important;line-height:1!important;background:#f8fafc!important;color:#0f172a!important;border:1px solid #e2e8f0!important;box-shadow:none!important;}
.ticket-file-list-v110,[data-ticket-file-list]{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:6px 0 10px!important;}
.ticket-file-chip{display:inline-flex!important;gap:8px!important;align-items:center!important;max-width:100%!important;padding:7px 10px!important;border-radius:999px!important;background:#eff6ff!important;color:#1e3a8a!important;border:1px solid #bfdbfe!important;font-size:12px!important;}
.ticket-file-chip span{max-width:180px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.ticket-tool-record-v110.is-recording{background:#dc2626!important;color:#fff!important;}
.ticket-record-status-v110{display:block!important;min-height:20px!important;margin:4px 0 8px!important;color:#64748b!important;font-size:12px!important;text-align:center!important;}
/* Remove accidental older duplicated rows */
.ticket-tool-row-v106,.ticket-tool-row-v107,.ticket-tool-row-v108,.ticket-tool-row-v109,.ticket-emoji-popover-v109,.ticket-emoji-wrap-v109{display:none!important;}
/* Customer portal sidebar disabled items must keep menu style, not white/faded blocks */
.cp-sidebar a,.cp-sidebar button,.customer-portal-sidebar a,.customer-portal-sidebar button,.portal-sidebar a,.portal-sidebar button,.cp-menu a,.cp-menu button{opacity:1!important;color:#fff!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important;}
.cp-sidebar a[aria-disabled="true"],.cp-sidebar .disabled,.customer-portal-sidebar a[aria-disabled="true"],.customer-portal-sidebar .disabled,.portal-sidebar a[aria-disabled="true"],.portal-sidebar .disabled,.cp-menu a[aria-disabled="true"],.cp-menu .disabled{opacity:.72!important;color:#e2e8f0!important;background:rgba(15,23,42,.35)!important;border-color:rgba(255,255,255,.10)!important;filter:none!important;}
.cp-sidebar a.active,.customer-portal-sidebar a.active,.portal-sidebar a.active,.cp-menu a.active{background:linear-gradient(135deg,rgba(20,184,166,.30),rgba(14,165,233,.22))!important;border-color:rgba(45,212,191,.42)!important;}
/* Ticket filters: compact apply/clear buttons and readable selects */
.ticket-filter-panel .btn,.ticket-filter-panel button,.ticket-filters .btn,.ticket-filters button,.ticket-filter-bar .btn,.ticket-filter-bar button,.admin-ticket-filter .btn,.admin-ticket-filter button{height:46px!important;min-height:46px!important;width:auto!important;min-width:96px!important;max-width:128px!important;padding:0 16px!important;border-radius:14px!important;font-size:14px!important;font-weight:900!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;}
.ticket-filter-panel select,.ticket-filter-panel input,.ticket-filters select,.ticket-filters input,.ticket-filter-bar select,.ticket-filter-bar input,.admin-ticket-filter select,.admin-ticket-filter input{height:42px!important;min-height:42px!important;font-size:14px!important;border-radius:12px!important;box-sizing:border-box!important;}
@media (max-width:1240px){.ticket-detail-grid,.portal-ticket-detail-grid,.customer-ticket-detail-grid,.ticket-detail-layout,.cp-ticket-detail-grid,.cp-ticket-conversation-layout,.ticket-admin-detail-grid,.admin-ticket-detail-grid,.ticket-thread-layout,.cp-ticket-thread-layout{grid-template-columns:1fr!important}.ticket-compose-panel,.ticket-reply-panel,.ticket-response-panel,.ticket-message-panel,.ticket-composer-panel,.cp-ticket-compose-panel,.cp-ticket-reply-panel,.cp-ticket-side-panel,.cp-ticket-reply-card,.cp-ticket-compose-card,.ticket-sidebar-card,.ticket-admin-reply-card{min-width:0!important;max-width:100%!important}}
@media (max-width:560px){.ticket-tool-row-v110{gap:6px!important;padding:8px!important}.ticket-tool-row-v110 .ticket-tool-button-v110,.ticket-tool-row-v110>label,.ticket-tool-row-v110 .ticket-emoji-wrap-v110{min-width:0!important;max-width:none!important;height:46px!important;min-height:46px!important;font-size:12px!important;padding:0 8px!important}.ticket-tool-row-v110 .ticket-tool-icon{display:none!important}.ticket-emoji-popover-v110{right:auto!important;left:0!important;width:230px!important}}

/* Phase159U - Login media promotional text cleanup
   هدف: حذف نوشته‌های تبلیغاتی روی تصاویر ورود بدون تغییر تصویر اصلی و بدون اثر روی سرعت/PWA. */

/* صفحه ورود کارکنان: حذف کپشن/متن تبلیغاتی روی تصویر */
.compact-auth-page .login-visual-overlay,
.compact-auth-page .login-visual-overlay * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* یک لایه خیلی ملایم برای کم‌رنگ شدن متن‌هایی که داخل خود عکس هستند و با CSS قابل حذف مستقیم نیستند */
.compact-auth-page .login-visual::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(14,165,233,.08)),
        radial-gradient(circle at 72% 42%, rgba(255,255,255,.24), transparent 38%) !important;
}

.compact-auth-page .login-visual .auth-media,
.compact-auth-page .login-visual img,
.compact-auth-page .login-visual video {
    filter: saturate(1.03) contrast(.96) brightness(1.03) !important;
}

/* صفحه ورود پورتال مشتریان: حذف کپشن/متن تبلیغاتی پایین تصویر */
.cp-auth-photo-caption-v97,
.cp-auth-photo-caption-v96,
.cp-auth-photo-caption,
.cp-auth-photo-caption-v97 *,
.cp-auth-photo-caption-v96 *,
.cp-auth-photo-caption * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* کم‌رنگ کردن نوشته‌هایی که ممکن است داخل خود تصویر پورتال باشند */
.cp-auth-photo-v96::before,
.cp-auth-photo-v95::before,
.cp-auth-photo::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(15,23,42,.06)),
        radial-gradient(circle at 72% 44%, rgba(255,255,255,.22), transparent 40%) !important;
}

.cp-auth-photo-v96 .cp-auth-media,
.cp-auth-photo-v95 .cp-auth-media,
.cp-auth-photo .cp-auth-media {
    filter: saturate(1.02) contrast(.95) brightness(1.04) !important;
}

@media (max-width: 760px) {
    .compact-auth-page .login-visual::before,
    .cp-auth-photo-v96::before,
    .cp-auth-photo-v95::before,
    .cp-auth-photo::before {
        background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(14,165,233,.07)) !important;
    }
}

/* Phase159X - Preserve multiline text exactly as users typed it across CRM writing boxes */
:where(
  .op-description,
  .op-activity-item > p,
  .op-activity-item p,
  .op-reply-box p,
  .op-referral-replies p,
  .op-referral-status,
  .task-description,
  .task-report-card p,
  .task-report-item p,
  .task-referral-card p,
  .task-referral-item p,
  .task-referral-reply p,
  .task-referral-message p,
  .referral-message-block p,
  .tasks-referral-preview p,
  .tasks-latest-message p,
  .engineering-referral-description,
  .engineering-reply-row p,
  .engineering-history-detail p,
  .engineering-history-detail .periodic-summary-text,
  .engineering-history-detail .periodic-actions-text,
  .engineering-history-detail td,
  .engineering-project-summary-grid p,
  .engineering-project-summary-grid div,
  .engineering-card p,
  .engineering-card td,
  .engineering-card .report-readonly-text,
  .engineering-card .report-manager-note,
  .report-readonly-text,
  .report-manager-note,
  .periodic-raw-text,
  .periodic-summary-text,
  .periodic-actions-text,
  .deliverable-note p,
  .summary p,
  .execution-work-note,
  .execution-report-history p,
  .execution-report-history td,
  .execution-item-description,
  .execution-item-report-text,
  .customer-portal-document-description,
  .customer-portal-description,
  .portal-document-description,
  .portal-ticket-message,
  .portal-ticket-reply,
  .portal-service-description,
  .portal-project-description,
  .portal-chat-message,
  .message-text,
  .chat-message-text,
  .admin-document-body,
  .administrative-document-body,
  .product-delivery-description,
  .product-delivery-note,
  .product-delivery-body,
  [data-multiline-text]
) {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 2.05 !important;
    unicode-bidi: plaintext;
}

:where(
  p[class*="description"], div[class*="description"], span[class*="description"], td[class*="description"],
  p[class*="report"], div[class*="report-text"], span[class*="report-text"], td[class*="report"],
  p[class*="referral"], div[class*="referral-description"], div[class*="referral-message"], span[class*="referral-message"],
  p[class*="reply"], div[class*="reply-text"], span[class*="reply-text"],
  p[class*="summary"], div[class*="summary-text"], span[class*="summary-text"],
  p[class*="scope"], div[class*="scope"], span[class*="scope"],
  p[class*="deliverable"], div[class*="deliverable-note"],
  p[class*="risk"], div[class*="risk"],
  p[class*="note"], div[class*="note-text"], span[class*="note-text"],
  p[class*="message"], div[class*="message-text"], span[class*="message-text"]
):not(input):not(textarea):not(select):not(button) {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 2.05 !important;
    unicode-bidi: plaintext;
}

:where(
  .op-description,
  .op-activity-item > p,
  .task-description,
  .task-report-item p,
  .task-referral-item p,
  .task-referral-reply p,
  .engineering-referral-description,
  .engineering-reply-row p,
  .report-readonly-text,
  .deliverable-note p,
  .summary p
) {
    display: block !important;
    margin-top: .65rem !important;
    margin-bottom: .65rem !important;
}


/* Phase160H.20.8 - Reset password page must scroll fully on desktop/mobile */
.reset-password-page.compact-auth-page.login-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
}

.reset-password-page.compact-auth-page .login-shell,
.reset-password-page.compact-auth-page .forgot-shell {
    height: auto !important;
    min-height: min(720px, calc(100dvh - 24px)) !important;
    overflow: visible !important;
    margin-block: clamp(10px, 2vh, 22px) !important;
}

.reset-password-page.compact-auth-page .login-panel-form {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: max(34px, env(safe-area-inset-bottom)) !important;
}

.reset-password-page.compact-auth-page .premium-login-form {
    padding-bottom: 16px !important;
}

@media (min-width: 941px) {
    .reset-password-page.compact-auth-page .login-shell,
    .reset-password-page.compact-auth-page .forgot-shell {
        align-self: flex-start !important;
    }

    .reset-password-page.compact-auth-page .login-visual {
        min-height: 720px !important;
    }
}

@media (max-width: 940px) {
    .reset-password-page.compact-auth-page .login-shell,
    .reset-password-page.compact-auth-page .forgot-shell {
        min-height: 100dvh !important;
        margin-block: 0 !important;
    }

    .reset-password-page.compact-auth-page .login-panel-form {
        padding-bottom: max(44px, env(safe-area-inset-bottom)) !important;
    }
}

/* Phase160H36_2_LoginScrollFix */
html, body {
    min-height: 100%;
}
body:has(.login-card),
body:has(.auth-card),
body:has(.login-shell),
body:has(.auth-shell),
body:has(form[action*="Login"]),
body:has(form[action*="ForgotPassword"]),
body:has(form[action*="ResetPassword"]) {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100dvh !important;
}
.login-shell,
.auth-shell,
.login-page,
.auth-page,
.auth-layout,
.account-auth,
.portal-auth,
.forgot-password-page,
.reset-password-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
}
.login-shell > *,
.auth-shell > *,
.login-page > *,
.auth-page > *,
.account-auth > *,
.portal-auth > * {
    max-height: none !important;
}
@media (max-height: 820px), (max-width: 760px) {
    .login-shell,
    .auth-shell,
    .login-page,
    .auth-page,
    .account-auth,
    .portal-auth {
        align-items: flex-start !important;
        padding-top: 24px !important;
        padding-bottom: 48px !important;
    }
}

/* Phase160H36.3 Dashboard Opportunities + Presence Polish */
.phase160h36-presence-trigger,
.phase-presence-trigger,
#onlineStatusButton,
#portalPresenceButton,
[data-presence-trigger="true"] {
    position: static !important;
    inset: auto !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 6px !important;
    background: linear-gradient(135deg, #2563eb, #15b8c9) !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .22) !important;
    z-index: 2 !important;
}
.phase160h36-presence-trigger::after,
.phase-presence-trigger::after,
#onlineStatusButton::after,
#portalPresenceButton::after,
[data-presence-trigger="true"]::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #22c55e;
    border: 2px solid #fff;
    top: 8px;
    right: 8px;
}
.phase160h36-my-opportunities,
.phase160h36-my-opportunities-card,
[data-dashboard-section="my-opportunities"] {
    width: 100% !important;
    margin: 18px 0 22px !important;
    border: 1px solid rgba(37, 99, 235, .14) !important;
    border-radius: 28px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,252,255,.94)) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .06) !important;
    overflow: hidden !important;
}
.phase160h36-my-opportunities .phase-opportunity-head,
.phase160h36-my-opportunities [data-role="section-head"] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 22px 26px 10px !important;
}
.phase160h36-my-opportunities h2,
.phase160h36-my-opportunities h3,
.phase160h36-my-opportunities .section-title {
    margin: 0 !important;
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: #0f172a !important;
}
.phase160h36-my-opportunities .phase-opportunity-list,
.phase160h36-my-opportunities .dashboard-list,
.phase160h36-my-opportunities .items-list {
    padding: 10px 24px 24px !important;
    display: grid !important;
    gap: 12px !important;
}
.phase160h36-my-opportunities .phase-opportunity-row,
.phase160h36-my-opportunities .opportunity-row,
.phase160h36-my-opportunities .dashboard-row,
.phase160h36-my-opportunities .item-row {
    display: grid !important;
    grid-template-columns: minmax(230px, 1.6fr) minmax(170px, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(203, 213, 225, .9) !important;
    border-radius: 22px !important;
    background: #fff !important;
}
.phase160h36-my-opportunities .btn,
.phase160h36-my-opportunities a[href] {
    white-space: nowrap !important;
}
@media (max-width: 900px) {
    .phase160h36-my-opportunities .phase-opportunity-row,
    .phase160h36-my-opportunities .opportunity-row,
    .phase160h36-my-opportunities .dashboard-row,
    .phase160h36-my-opportunities .item-row {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }
}





/* Phase160H.36.5 safe fallbacks */
.aren-login-fit { overflow: hidden !important; }
.aren-my-opps-v365, .aren-my-opps-v365 * { box-sizing: border-box; }
/* /Phase160H.36.5 safe fallbacks */

/* Phase160H37 Login + Dashboard Opportunities + Presence final polish */
html.phase160h37-login-root,
html.phase160h37-login-root body {
    width: 100%;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden !important;
}
html.phase160h37-login-root * {
    box-sizing: border-box;
}
.phase160h37-login {
    margin: 0 !important;
    min-height: 100svh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    padding: 12px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background: radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 30%), linear-gradient(135deg, #eef6ff 0%, #f8fafc 55%, #ffffff 100%) !important;
    font-family: Vazirmatn, Tahoma, sans-serif !important;
}
.phase160h37-login .login-shell {
    width: min(1080px, 100%) !important;
    height: calc(100svh - 24px) !important;
    max-height: calc(100svh - 24px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr) !important;
    direction: ltr !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    background: #fff !important;
    box-shadow: 0 24px 75px rgba(15, 23, 42, .14) !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
}
.phase160h37-login .login-panel {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.phase160h37-login .login-panel-form {
    direction: rtl !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(18px, 3vh, 34px) clamp(22px, 3vw, 46px) !important;
    gap: 10px !important;
}
.phase160h37-login .login-brand.refined,
.phase160h37-login .login-brand {
    margin: 0 0 10px !important;
    text-align: center !important;
}
.phase160h37-login .login-logo {
    width: clamp(74px, 10vh, 112px) !important;
    height: auto !important;
    max-height: 96px !important;
    object-fit: contain !important;
    margin: 0 auto 8px !important;
    display: block !important;
}
.phase160h37-login .login-brand h1 {
    margin: 0 !important;
    font-size: clamp(20px, 3vh, 30px) !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
    color: #0f172a !important;
}
.phase160h37-login .centered-login-subtitle,
.phase160h37-login .login-brand p {
    margin: 5px auto 0 !important;
    font-size: clamp(12px, 1.7vh, 14px) !important;
    line-height: 1.7 !important;
    color: #64748b !important;
}
.phase160h37-login .premium-login-form,
.phase160h37-login .login-form {
    display: grid !important;
    gap: clamp(8px, 1.25vh, 12px) !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
}
.phase160h37-login .form-field {
    margin: 0 !important;
}
.phase160h37-login .form-field label,
.phase160h37-login .captcha-title {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
    font-weight: 900 !important;
}
.phase160h37-login .form-field input,
.phase160h37-login .captcha-input-wrap input {
    width: 100% !important;
    min-height: clamp(40px, 6vh, 48px) !important;
    height: clamp(40px, 6vh, 48px) !important;
    border-radius: 15px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
}
.phase160h37-login .captcha-card {
    min-height: clamp(54px, 8vh, 66px) !important;
    padding: 9px 12px !important;
    border-radius: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr minmax(95px, 130px) !important;
    align-items: center !important;
    gap: 10px !important;
}
.phase160h37-login .captcha-card strong {
    font-size: clamp(17px, 2.7vh, 22px) !important;
    line-height: 1.2 !important;
}
.phase160h37-login .login-options-row {
    margin: 0 !important;
    gap: 10px !important;
    font-size: 12.5px !important;
}
.phase160h37-login .login-submit,
.phase160h37-login .btn.full {
    min-height: clamp(42px, 6.5vh, 50px) !important;
    border-radius: 16px !important;
    font-weight: 950 !important;
}
.phase160h37-login .customer-portal-entry-v96 {
    width: min(430px, 100%) !important;
    min-height: clamp(44px, 6.8vh, 54px) !important;
    margin: 10px auto 0 !important;
    border-radius: 17px !important;
    padding: 0 14px !important;
    flex-shrink: 0 !important;
}
.phase160h37-login .customer-portal-entry-v96::before {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
}
.phase160h37-login .validation-summary,
.phase160h37-login .field-validation-error,
.phase160h37-login .auth-success-message {
    font-size: 12px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}
.phase160h37-login .login-visual {
    position: relative !important;
    background: #0f172a !important;
    isolation: isolate !important;
    overflow: hidden !important;
}
.phase160h37-login .auth-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: none !important;
    opacity: 1 !important;
    background: #0f172a !important;
}
.phase160h37-login .login-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.34));
    pointer-events: none;
    z-index: 1;
}
.phase160h37-login .login-visual-overlay {
    position: absolute !important;
    inset-inline: 22px !important;
    bottom: 22px !important;
    z-index: 2 !important;
    padding: 18px !important;
    border-radius: 22px !important;
    background: rgba(15, 23, 42, .58) !important;
    backdrop-filter: blur(10px) !important;
    color: #fff !important;
}
.phase160h37-login .login-visual-overlay span,
.phase160h37-login .login-visual-overlay h2,
.phase160h37-login .login-visual-overlay p {
    color: #fff !important;
}
.phase160h37-login .login-visual-overlay h2 {
    margin: 6px 0 !important;
    font-size: clamp(18px, 3vh, 26px) !important;
    line-height: 1.45 !important;
}
.phase160h37-login .login-visual-overlay p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
}
.topbar-actions .presence-inline-btn,
.cp-topbar .presence-inline-btn,
.presence-inline-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #e0f2fe, #2563eb) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    cursor: pointer !important;
    font-family: Vazirmatn, Tahoma, sans-serif !important;
    font-size: 20px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}
.cp-topbar .presence-inline-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 15px !important;
}
.presence-dot-live {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 11px !important;
    height: 11px !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12) !important;
}
.presence-panel {
    position: fixed !important;
    top: 82px !important;
    left: 22px !important;
    z-index: 9999 !important;
    width: min(430px, calc(100vw - 32px)) !important;
    max-height: min(72vh, 620px) !important;
    overflow: auto !important;
    display: none !important;
    direction: rtl !important;
    padding: 18px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(191, 219, 254, .9) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .18) !important;
    font-family: Vazirmatn, Tahoma, sans-serif !important;
}
.presence-panel.is-open {
    display: block !important;
}
.presence-head,
.presence-tabs,
.presence-list,
.presence-item {
    box-sizing: border-box !important;
}
.presence-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}
.presence-head span {
    display: block !important;
    color: #2563eb !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}
.presence-head strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 950 !important;
}
.presence-close {
    border: 0 !important;
    border-radius: 14px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    padding: 8px 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}
.presence-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.presence-tab {
    border: 1px solid #dbeafe !important;
    background: #f8fbff !important;
    color: #2563eb !important;
    border-radius: 16px !important;
    padding: 10px !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}
.presence-tab.active {
    background: #2563eb !important;
    color: #fff !important;
}
.presence-list {
    display: grid !important;
    gap: 8px !important;
}
.presence-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 11px 12px !important;
    border: 1px solid #e5edf8 !important;
    border-radius: 18px !important;
    background: #fff !important;
}
.presence-name {
    font-weight: 900 !important;
    color: #1e293b !important;
}
.presence-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #64748b !important;
    white-space: nowrap !important;
}
.presence-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #94a3b8;
}
.presence-item.online .presence-status::before {
    background: #22c55e;
}
.presence-empty {
    padding: 18px !important;
    text-align: center !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 18px !important;
    color: #64748b !important;
    background: #f8fafc !important;
    font-weight: 800 !important;
}
.dashboard-my-opportunities-panel {
    margin-top: 18px !important;
}
.dashboard-my-opportunities-panel .dashboard-panel-head span {
    background: #ecfeff !important;
    color: #0891b2 !important;
}
.dashboard-my-opportunities-list {
    min-height: 0 !important;
}
.dashboard-my-opportunity-row {
    border-color: rgba(20, 184, 166, .18) !important;
}
.dashboard-my-opportunity-row .referral-direction {
    background: rgba(20, 184, 166, .12) !important;
    color: #0f766e !important;
}
.dashboard-my-opportunity-row .referral-person-chip {
    background: #eef2ff !important;
    color: #4338ca !important;
}
@media (max-height: 760px) {
    .phase160h37-login { padding: 8px !important; }
    .phase160h37-login .login-shell { height: calc(100svh - 16px) !important; max-height: calc(100svh - 16px) !important; }
    .phase160h37-login .login-panel-form { padding-block: 14px !important; gap: 7px !important; }
    .phase160h37-login .login-logo { width: 72px !important; max-height: 70px !important; margin-bottom: 5px !important; }
    .phase160h37-login .centered-login-subtitle { display: none !important; }
    .phase160h37-login .login-visual-overlay p { display: none !important; }
    .phase160h37-login .customer-portal-entry-v96 em { display: none !important; }
}
@media (max-height: 650px) {
    .phase160h37-login .login-visual-overlay { display: none !important; }
    .phase160h37-login .login-logo { width: 60px !important; max-height: 58px !important; }
    .phase160h37-login .login-brand h1 { font-size: 18px !important; }
    .phase160h37-login .form-field input,
    .phase160h37-login .captcha-input-wrap input { min-height: 36px !important; height: 36px !important; }
    .phase160h37-login .captcha-card { min-height: 46px !important; }
    .phase160h37-login .login-submit,
    .phase160h37-login .btn.full { min-height: 38px !important; }
    .phase160h37-login .customer-portal-entry-v96 { min-height: 38px !important; }
}
@media (max-width: 940px) {
    .phase160h37-login { padding: 0 !important; }
    .phase160h37-login .login-shell {
        width: 100% !important;
        height: 100svh !important;
        max-height: 100svh !important;
        border-radius: 0 !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 150px minmax(0, 1fr) !important;
    }
    .phase160h37-login .login-visual { grid-row: 1 !important; }
    .phase160h37-login .login-panel-form { grid-row: 2 !important; padding: 14px 18px !important; }
    .phase160h37-login .login-visual-overlay { display: none !important; }
    .presence-panel { top: 72px !important; left: 12px !important; width: calc(100vw - 24px) !important; }
}
@media (max-width: 520px), (max-height: 560px) {
    .phase160h37-login .login-shell {
        grid-template-rows: minmax(0, 1fr) !important;
    }
    .phase160h37-login .login-visual {
        display: none !important;
    }
    .phase160h37-login .login-panel-form {
        padding: 12px 14px !important;
    }
    .phase160h37-login .customer-portal-entry-v96 {
        flex-wrap: nowrap !important;
    }
    .phase160h37-login .customer-portal-entry-v96 strong {
        font-size: 13px !important;
    }
}
/* /Phase160H37 */
@media (min-width: 941px) {
    .phase160h37-login .login-panel-form { grid-column: 2 !important; grid-row: 1 !important; }
    .phase160h37-login .login-visual { grid-column: 1 !important; grid-row: 1 !important; }
}

/* Phase160H37.2 - Login visual height, customer portal action polish, no-scroll refinement */
html.phase160h37-login-root,
html.phase160h37-login-root body.phase160h37-login {
    width: 100% !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
}

.phase160h37-login.login-page {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    padding: 12px !important;
}

.phase160h37-login .login-shell {
    width: min(1150px, calc(100vw - 24px)) !important;
    height: min(760px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    grid-template-columns: minmax(0, 1.14fr) minmax(390px, .86fr) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
}

.phase160h37-login .login-panel,
.phase160h37-login .login-visual,
.phase160h37-login .login-panel-form {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

.phase160h37-login .login-visual {
    position: relative !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    display: block !important;
    background: #071426 !important;
}

.phase160h37-login .login-visual .auth-media,
.phase160h37-login .login-visual > img,
.phase160h37-login .login-visual > video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
    filter: saturate(1.04) contrast(1.02) brightness(.98) !important;
    opacity: 1 !important;
    background: #071426 !important;
}

.phase160h37-login .login-visual::before {
    z-index: 1 !important;
}

.phase160h37-login .login-visual::after {
    z-index: 2 !important;
    background:
        linear-gradient(180deg, rgba(7, 20, 38, .03), rgba(7, 20, 38, .22)),
        radial-gradient(circle at 38% 38%, rgba(14, 165, 233, .12), transparent 44%) !important;
}

.customer-portal-entry-v96 {
    width: 100% !important;
    min-height: 58px !important;
    border: 1px solid rgba(37, 99, 235, .24) !important;
    border-radius: 20px !important;
    padding: 0 18px !important;
    background:
        radial-gradient(circle at 86% 18%, rgba(20, 184, 166, .16), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #eff6ff 58%, #ecfeff 100%) !important;
    box-shadow: 0 16px 34px rgba(37, 99, 235, .10) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    color: #0f172a !important;
    font-weight: 950 !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.customer-portal-entry-v96:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 20px 42px rgba(37, 99, 235, .16) !important;
    border-color: rgba(37, 99, 235, .42) !important;
}

.customer-portal-entry-v96::before {
    content: "" !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 16px !important;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9.5' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E") center / 23px 23px no-repeat,
        linear-gradient(135deg, #2563eb 0%, #06b6d4 52%, #10b981 100%) !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, .24) !important;
}

.customer-portal-entry-v96 strong {
    display: block !important;
    color: #0f172a !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.customer-portal-entry-v96 em {
    font-style: normal !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    background: rgba(219, 234, 254, .78) !important;
    border: 1px solid rgba(147, 197, 253, .7) !important;
    border-radius: 999px !important;
    padding: 7px 12px !important;
    white-space: nowrap !important;
}

.phase160h37-login .login-panel-form {
    justify-content: flex-start !important;
    overflow: hidden !important;
    padding-block: clamp(18px, 2.4vh, 30px) !important;
}

.phase160h37-login .login-brand.refined,
.phase160h37-login .login-brand {
    margin-top: auto !important;
    margin-bottom: clamp(8px, 1.15vh, 12px) !important;
}

.phase160h37-login .customer-portal-entry-v96 {
    width: min(430px, 100%) !important;
    min-height: clamp(48px, 6.5vh, 58px) !important;
    margin: auto auto 0 !important;
    flex-shrink: 0 !important;
}

@media (max-height: 760px) and (min-width: 941px) {
    .phase160h37-login .login-shell {
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .phase160h37-login .customer-portal-entry-v96 {
        min-height: 44px !important;
        border-radius: 16px !important;
    }

    .phase160h37-login .customer-portal-entry-v96::before {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 13px !important;
        background-size: 20px 20px, auto !important;
    }
}

@media (max-width: 940px) {
    html.phase160h37-login-root,
    html.phase160h37-login-root body.phase160h37-login,
    .phase160h37-login.login-page {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: auto !important;
    }

    .phase160h37-login .login-shell {
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 190px minmax(0, auto) !important;
        border-radius: 0 !important;
    }

    .phase160h37-login .login-visual {
        min-height: 190px !important;
    }

    .phase160h37-login .login-panel-form {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .phase160h37-login .login-brand.refined,
    .phase160h37-login .login-brand,
    .phase160h37-login .customer-portal-entry-v96 {
        margin-top: 0 !important;
    }
}

@media (max-width: 520px), (max-height: 560px) {
    .phase160h37-login .customer-portal-entry-v96 {
        min-height: 44px !important;
        padding: 0 12px !important;
        gap: 8px !important;
    }

    .phase160h37-login .customer-portal-entry-v96 em {
        display: none !important;
    }
}
/* /Phase160H37.2 */


/* Phase160H37.3 - professional full-bleed login visual + Persian opportunity live labels */
html.phase160h37-login-root,
html.phase160h37-login-root body.phase160h37-login {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 7% 8%, rgba(37, 99, 235, .20), transparent 30%),
        radial-gradient(circle at 91% 10%, rgba(14, 165, 233, .18), transparent 32%),
        radial-gradient(circle at 17% 88%, rgba(20, 184, 166, .20), transparent 34%),
        linear-gradient(135deg, #eef6ff 0%, #f7fbff 48%, #eefdf8 100%) !important;
}

.phase160h37-login.login-page {
    padding: clamp(10px, 1.7vh, 18px) !important;
    overflow: hidden !important;
    background: transparent !important;
}

.phase160h37-login .login-shell {
    position: relative !important;
    width: min(1190px, calc(100vw - 28px)) !important;
    height: min(760px, calc(100dvh - 28px)) !important;
    max-height: calc(100dvh - 28px) !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr) !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.70)) !important;
    border: 1px solid rgba(255,255,255,.88) !important;
    box-shadow:
        0 34px 95px rgba(15, 23, 42, .18),
        inset 0 1px 0 rgba(255,255,255,.76) !important;
    isolation: isolate !important;
}

.phase160h37-login .login-shell::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 55%, rgba(255,255,255,.38) 100%),
        radial-gradient(circle at 72% 22%, rgba(37,99,235,.08), transparent 26%) !important;
}

.phase160h37-login .login-panel,
.phase160h37-login .login-visual,
.phase160h37-login .login-panel-form {
    position: relative !important;
    z-index: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

.phase160h37-login .login-visual {
    margin: 0 !important;
    border-radius: 0 !important;
    background: #071426 !important;
    overflow: hidden !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.10) !important;
}

.phase160h37-login .login-visual .auth-media,
.phase160h37-login .login-visual > img,
.phase160h37-login .login-visual > video {
    position: absolute !important;
    inset: -2px !important;
    width: calc(100% + 4px) !important;
    height: calc(100% + 4px) !important;
    min-width: calc(100% + 4px) !important;
    min-height: calc(100% + 4px) !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.015) !important;
    filter: saturate(1.12) contrast(1.06) brightness(.93) !important;
    opacity: 1 !important;
    background: #071426 !important;
}

.phase160h37-login .login-visual::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        linear-gradient(180deg, rgba(7, 20, 38, .08) 0%, rgba(7, 20, 38, .18) 54%, rgba(7, 20, 38, .42) 100%),
        linear-gradient(90deg, rgba(3, 7, 18, .28) 0%, rgba(3, 7, 18, .03) 58%, rgba(255,255,255,.20) 100%),
        radial-gradient(circle at 48% 42%, rgba(14,165,233,.20), transparent 33%),
        radial-gradient(circle at 12% 8%, rgba(37,99,235,.26), transparent 28%) !important;
}

.phase160h37-login .login-visual::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: 46% !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, transparent 0%, rgba(7,20,38,.44) 100%) !important;
}

.phase160h37-login .login-visual-overlay {
    z-index: 4 !important;
    right: 26px !important;
    left: 26px !important;
    bottom: 26px !important;
    width: auto !important;
    padding: 18px 20px !important;
    border-radius: 26px !important;
    background: linear-gradient(135deg, rgba(15,23,42,.74), rgba(15,23,42,.50)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 24px 70px rgba(2, 6, 23, .26) !important;
    backdrop-filter: blur(14px) saturate(1.15) !important;
}

.phase160h37-login .login-visual-overlay span {
    background: rgba(14,165,233,.16) !important;
    border: 1px solid rgba(125,211,252,.22) !important;
    color: #dff8ff !important;
}

.phase160h37-login .login-panel-form {
    background:
        radial-gradient(circle at 78% 8%, rgba(59,130,246,.09), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.97), rgba(248,252,255,.94)) !important;
    box-shadow: inset 1px 0 0 rgba(255,255,255,.72) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: clamp(18px, 2.4vh, 30px) clamp(28px, 3.2vw, 46px) !important;
}

.phase160h37-login .login-brand.refined,
.phase160h37-login .login-brand {
    margin: 0 0 clamp(8px, 1.3vh, 14px) !important;
}

.phase160h37-login .premium-login-form,
.phase160h37-login .login-form {
    gap: clamp(7px, 1.06vh, 11px) !important;
}

.phase160h37-login .customer-portal-entry-v96 {
    position: relative !important;
    overflow: hidden !important;
    width: min(430px, 100%) !important;
    margin: clamp(12px, 1.7vh, 18px) auto 0 !important;
    min-height: clamp(48px, 6.4vh, 56px) !important;
    border-radius: 19px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(239,246,255,.94) 48%, rgba(204,251,241,.82) 100%) !important;
    border: 1px solid rgba(96,165,250,.34) !important;
    box-shadow: 0 16px 36px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.phase160h37-login .customer-portal-entry-v96::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: 18px !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.50), transparent) !important;
    transform: translateX(110%) !important;
    transition: transform .45s ease !important;
}

.phase160h37-login .customer-portal-entry-v96:hover::after {
    transform: translateX(-110%) !important;
}

.phase160h37-login .customer-portal-entry-v96::before {
    border-radius: 15px !important;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20a6 6 0 0 0-12 0'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M19 8v5'/%3E%3Cpath d='M21.5 10.5h-5'/%3E%3C/svg%3E") center / 23px 23px no-repeat,
        linear-gradient(135deg, #2563eb 0%, #06b6d4 52%, #10b981 100%) !important;
}

.phase160h37-login .customer-portal-entry-v96 strong,
.phase160h37-login .customer-portal-entry-v96 em {
    position: relative !important;
    z-index: 1 !important;
}

.dashboard-my-opportunities-list .referral-person-chip,
.dashboard-my-opportunities-list .referral-date {
    text-transform: none !important;
}

@media (max-height: 720px) and (min-width: 941px) {
    .phase160h37-login .login-shell {
        height: calc(100dvh - 18px) !important;
        max-height: calc(100dvh - 18px) !important;
    }

    .phase160h37-login .login-logo {
        width: 68px !important;
        max-height: 72px !important;
    }

    .phase160h37-login .login-brand h1 {
        font-size: 21px !important;
    }

    .phase160h37-login .centered-login-subtitle {
        display: none !important;
    }

    .phase160h37-login .form-field input,
    .phase160h37-login .captcha-input-wrap input {
        min-height: 40px !important;
        height: 40px !important;
    }

    .phase160h37-login .captcha-card {
        min-height: 54px !important;
        padding-block: 8px !important;
    }

    .phase160h37-login .login-submit,
    .phase160h37-login .customer-portal-entry-v96 {
        min-height: 42px !important;
    }
}

@media (max-width: 940px) {
    html.phase160h37-login-root,
    html.phase160h37-login-root body.phase160h37-login,
    .phase160h37-login.login-page {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: auto !important;
    }

    .phase160h37-login .login-shell {
        width: 100% !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 210px minmax(0, auto) !important;
    }

    .phase160h37-login .login-visual {
        min-height: 210px !important;
    }

    .phase160h37-login .login-panel-form {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 26px 20px max(30px, env(safe-area-inset-bottom)) !important;
    }
}
/* /Phase160H37.3 */

/* Phase160H39 - integrated portrait login visual + live presence polish */
.phase160h37-login .login-shell {
    width: min(1240px, calc(100vw - 24px)) !important;
    height: min(780px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    grid-template-columns: minmax(0, 1.26fr) minmax(390px, .74fr) !important;
    border-radius: 36px !important;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.72)) !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    box-shadow: 0 34px 96px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255,255,255,.76) !important;
}

.phase160h37-login .login-shell::before {
    background:
        radial-gradient(circle at 78% 19%, rgba(14,165,233,.11), transparent 25%),
        linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.04) 55%, rgba(255,255,255,.54) 100%) !important;
}

.phase160h37-login .login-visual {
    border-radius: 0 !important;
    background: linear-gradient(135deg, #061425, #0f2743) !important;
    box-shadow: none !important;
}

.phase160h37-login .login-visual .auth-media,
.phase160h37-login .login-visual > img,
.phase160h37-login .login-visual > video {
    inset: -18px !important;
    width: calc(100% + 36px) !important;
    height: calc(100% + 36px) !important;
    min-width: calc(100% + 36px) !important;
    min-height: calc(100% + 36px) !important;
    object-fit: cover !important;
    object-position: 34% center !important;
    transform: scale(1.055) !important;
    filter: saturate(1.08) contrast(1.05) brightness(.95) !important;
}

.phase160h37-login .login-visual::before {
    z-index: 2 !important;
    background:
        linear-gradient(90deg, rgba(3,7,18,.34) 0%, rgba(3,7,18,.08) 42%, rgba(248,252,255,.82) 100%),
        linear-gradient(180deg, rgba(7,20,38,.18) 0%, rgba(7,20,38,.05) 48%, rgba(7,20,38,.34) 100%),
        radial-gradient(circle at 24% 28%, rgba(14,165,233,.18), transparent 29%) !important;
}

.phase160h37-login .login-visual::after {
    inset: 0 !important;
    height: auto !important;
    z-index: 3 !important;
    background:
        linear-gradient(0deg, rgba(7,20,38,.34), transparent 27%),
        linear-gradient(180deg, rgba(255,255,255,.12), transparent 22%),
        linear-gradient(90deg, rgba(7,20,38,.24), transparent 30%, rgba(255,255,255,.38) 100%) !important;
}

.phase160h37-login .login-panel-form {
    background:
        radial-gradient(circle at 78% 8%, rgba(59,130,246,.11), transparent 27%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,252,255,.91)) !important;
    box-shadow: -22px 0 55px rgba(248,252,255,.42), inset 1px 0 0 rgba(255,255,255,.78) !important;
}

.phase160h37-login .login-visual-overlay {
    display: none !important;
}

.presence-panel .presence-name {
    font-size: 14.5px !important;
    letter-spacing: -.01em !important;
}

.presence-panel .presence-item {
    transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}

.presence-panel .presence-item.online {
    border-color: rgba(34,197,94,.22) !important;
    background: linear-gradient(135deg, #ffffff, #f0fdf4) !important;
}

.presence-dot-live.has-online {
    animation: presencePulse160h39 1.9s ease-in-out infinite !important;
}

@keyframes presencePulse160h39 {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.12); }
    50% { box-shadow: 0 0 0 8px rgba(34,197,94,.03); }
}

@media (max-height: 720px) and (min-width: 941px) {
    .phase160h37-login .login-shell {
        width: min(1210px, calc(100vw - 16px)) !important;
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }
}

@media (max-width: 940px) {
    .phase160h37-login .login-shell {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 235px minmax(0, auto) !important;
    }

    .phase160h37-login .login-visual .auth-media,
    .phase160h37-login .login-visual > img,
    .phase160h37-login .login-visual > video {
        object-position: center center !important;
        transform: scale(1.02) !important;
    }
}
/* /Phase160H39 */

/* Phase160H40 - Presence names + recovery auth visual polish */
.presence-panel .presence-item {
    align-items: center !important;
}
.presence-panel .presence-person {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
.presence-panel .presence-name {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #0f172a !important;
}
.presence-panel .presence-subname {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #64748b !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}
.presence-panel .presence-status {
    flex: 0 0 auto !important;
}

.forgot-page.compact-auth-page.login-page {
    min-height: 100svh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    padding: 12px !important;
    display: grid !important;
    place-items: center !important;
    background:
        radial-gradient(circle at 8% 16%, rgba(37,99,235,.18), transparent 30%),
        radial-gradient(circle at 91% 15%, rgba(20,184,166,.24), transparent 32%),
        radial-gradient(circle at 15% 92%, rgba(14,165,233,.18), transparent 32%),
        linear-gradient(135deg, #eef7ff 0%, #f8fbff 48%, #f1fffb 100%) !important;
}
.forgot-page.compact-auth-page .login-shell,
.forgot-page.compact-auth-page .forgot-shell,
.reset-password-page.compact-auth-page .login-shell,
.reset-password-page.compact-auth-page .forgot-shell {
    width: min(1120px, 100%) !important;
    height: calc(100svh - 24px) !important;
    max-height: calc(100svh - 24px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(360px, .88fr) minmax(0, 1.12fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-radius: 32px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(255,255,255,.88) !important;
    box-shadow: 0 30px 90px rgba(15,23,42,.14) !important;
    backdrop-filter: blur(18px) !important;
    margin: 0 !important;
}
.forgot-page.compact-auth-page .login-panel-form,
.reset-password-page.compact-auth-page .login-panel-form {
    position: relative !important;
    z-index: 2 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.90) 72%, rgba(255,255,255,.68)) !important;
    box-shadow: -18px 0 46px rgba(255,255,255,.42) !important;
    padding: clamp(18px, 3vh, 34px) clamp(22px, 3vw, 46px) !important;
}
.reset-password-page.compact-auth-page .login-panel-form {
    justify-content: flex-start !important;
    padding-top: clamp(18px, 2.4vh, 28px) !important;
    padding-bottom: clamp(18px, 2.6vh, 32px) !important;
}
.forgot-page.compact-auth-page .login-visual,
.reset-password-page.compact-auth-page .login-visual {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #0f172a !important;
    border-radius: 0 !important;
    isolation: isolate !important;
}
.forgot-page.compact-auth-page .login-visual .auth-media,
.forgot-page.compact-auth-page .login-visual img,
.forgot-page.compact-auth-page .login-visual video,
.reset-password-page.compact-auth-page .login-visual .auth-media,
.reset-password-page.compact-auth-page .login-visual img,
.reset-password-page.compact-auth-page .login-visual video {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #0f172a !important;
    filter: saturate(1.04) contrast(.98) brightness(1.02) !important;
    transform: scale(1.012) !important;
}
.forgot-page.compact-auth-page .login-visual::before,
.reset-password-page.compact-auth-page .login-visual::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, rgba(15,23,42,.06) 0%, rgba(15,23,42,.10) 50%, rgba(255,255,255,.28) 100%),
        radial-gradient(circle at 72% 20%, rgba(255,255,255,.22), transparent 34%),
        radial-gradient(circle at 12% 92%, rgba(14,165,233,.18), transparent 36%) !important;
}
.forgot-page.compact-auth-page .login-visual::after,
.reset-password-page.compact-auth-page .login-visual::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 34% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.36) 72%, rgba(255,255,255,.56)) !important;
}
.forgot-page.compact-auth-page .login-visual-overlay,
.reset-password-page.compact-auth-page .login-visual-overlay {
    display: none !important;
}
.forgot-page.compact-auth-page .premium-login-form,
.reset-password-page.compact-auth-page .premium-login-form {
    width: min(430px, 100%) !important;
    margin-inline: auto !important;
}
.forgot-page.compact-auth-page .login-brand,
.reset-password-page.compact-auth-page .login-brand {
    text-align: center !important;
}

@media (max-width: 940px) {
    .forgot-page.compact-auth-page.login-page {
        height: auto !important;
        max-height: none !important;
        overflow: auto !important;
        padding: 10px !important;
    }
    .forgot-page.compact-auth-page .login-shell,
    .forgot-page.compact-auth-page .forgot-shell,
    .reset-password-page.compact-auth-page .login-shell,
    .reset-password-page.compact-auth-page .forgot-shell {
        height: auto !important;
        max-height: none !important;
        min-height: calc(100svh - 20px) !important;
        grid-template-columns: 1fr !important;
    }
    .forgot-page.compact-auth-page .login-visual,
    .reset-password-page.compact-auth-page .login-visual {
        min-height: 260px !important;
        order: -1 !important;
    }
    .forgot-page.compact-auth-page .login-panel-form,
    .reset-password-page.compact-auth-page .login-panel-form {
        overflow: visible !important;
        background: rgba(255,255,255,.96) !important;
    }
}

/* Phase160H41 - login image readability, responsive mobile/PWA polish */
.phase160h37-login .login-shell {
    width: min(1320px, calc(100vw - 24px)) !important;
    height: min(760px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    grid-template-columns: minmax(0, 1.34fr) minmax(390px, .66fr) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.78)) !important;
}

.phase160h37-login .login-visual {
    background:
        linear-gradient(90deg, rgba(3, 7, 18, .56), rgba(7, 20, 38, .18)),
        url('/img/login/aren-login-vision.webp') center center / cover no-repeat,
        linear-gradient(135deg, #071426, #0f2743) !important;
}

.phase160h37-login .login-visual .auth-media,
.phase160h37-login .login-visual > img,
.phase160h37-login .login-visual > video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    filter: saturate(1.08) contrast(1.04) brightness(1) !important;
    opacity: 1 !important;
    background: transparent !important;
}

.phase160h37-login .login-visual::before {
    background:
        linear-gradient(90deg, rgba(3,7,18,.10) 0%, rgba(3,7,18,.02) 72%, rgba(248,252,255,.08) 100%),
        linear-gradient(180deg, rgba(7,20,38,.10) 0%, transparent 46%, rgba(7,20,38,.18) 100%) !important;
}

.phase160h37-login .login-visual::after {
    background:
        linear-gradient(90deg, transparent 0%, transparent 78%, rgba(255,255,255,.28) 100%) !important;
}

.phase160h37-login .login-panel-form {
    padding: clamp(18px, 2.1vh, 28px) clamp(26px, 2.8vw, 42px) !important;
    background:
        radial-gradient(circle at 76% 9%, rgba(59,130,246,.10), transparent 27%),
        linear-gradient(135deg, rgba(255,255,255,.985), rgba(248,252,255,.94)) !important;
    box-shadow: -14px 0 42px rgba(248,252,255,.34), inset 1px 0 0 rgba(255,255,255,.82) !important;
}

.phase160h37-login .login-logo {
    width: clamp(70px, 8.6vh, 88px) !important;
    max-height: clamp(70px, 8.6vh, 88px) !important;
}

@media (max-height: 720px) and (min-width: 941px) {
    .phase160h37-login .login-shell {
        width: min(1280px, calc(100vw - 16px)) !important;
        height: calc(100dvh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .phase160h37-login .login-panel-form {
        padding-block: 14px !important;
    }
}

@media (max-width: 940px) {
    html.phase160h37-login-root,
    html.phase160h37-login-root body.phase160h37-login,
    .phase160h37-login.login-page {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .phase160h37-login.login-page {
        padding: 0 !important;
    }

    .phase160h37-login .login-shell {
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: minmax(230px, 38dvh) auto !important;
        box-shadow: none !important;
    }

    .phase160h37-login .login-visual {
        order: 1 !important;
        min-height: 230px !important;
        max-height: 380px !important;
        border-radius: 0 0 30px 30px !important;
    }

    .phase160h37-login .login-visual .auth-media,
    .phase160h37-login .login-visual > img,
    .phase160h37-login .login-visual > video {
        object-fit: cover !important;
        object-position: 30% center !important;
    }

    .phase160h37-login .login-visual::before {
        background: linear-gradient(180deg, rgba(7,20,38,.08), rgba(7,20,38,.26)) !important;
    }

    .phase160h37-login .login-visual::after {
        background: linear-gradient(180deg, transparent 0%, rgba(248,252,255,.18) 100%) !important;
    }

    .phase160h37-login .login-panel-form {
        order: 2 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        padding: 24px 18px max(28px, env(safe-area-inset-bottom)) !important;
        box-shadow: none !important;
    }

    .phase160h37-login .login-brand h1 {
        font-size: clamp(22px, 6vw, 28px) !important;
    }

    .phase160h37-login .centered-login-subtitle {
        display: block !important;
        font-size: 13px !important;
        line-height: 1.9 !important;
    }

    .phase160h37-login .form-field input,
    .phase160h37-login .captcha-input-wrap input {
        min-height: 48px !important;
        height: 48px !important;
        font-size: 16px !important;
    }

    .phase160h37-login .captcha-card {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .phase160h37-login .login-options-row {
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .phase160h37-login .login-submit,
    .phase160h37-login .customer-portal-entry-v96 {
        width: 100% !important;
        min-height: 50px !important;
    }
}

@media (max-width: 560px) {
    .phase160h37-login .login-shell {
        grid-template-rows: minmax(190px, 31dvh) auto !important;
    }

    .phase160h37-login .login-visual {
        min-height: 190px !important;
    }

    .phase160h37-login .login-visual .auth-media,
    .phase160h37-login .login-visual > img,
    .phase160h37-login .login-visual > video {
        object-position: 22% center !important;
    }
}

@media (display-mode: standalone) {
    .phase160h37-login.login-page {
        padding-top: max(0px, env(safe-area-inset-top)) !important;
        padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
    }
}
/* /Phase160H41 */

/* Phase160H54_Mobile_PWA_Stable_Responsive_Fix_Final - global mobile table helpers */
@media (max-width: 900px) {
  .table-responsive,
  .responsive-table,
  .table-scroll,
  .data-table-wrap,
  .aren-table-wrap,
  .crm-table-wrap,
  .card-table-wrap,
  .list-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: thin !important;
  }

  .table-responsive > table,
  .responsive-table > table,
  .table-scroll > table,
  .data-table-wrap > table,
  .aren-table-wrap > table,
  .crm-table-wrap > table,
  .card-table-wrap > table,
  .list-table-wrap > table {
    max-width: none !important;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px !important;
  }
}


/* AREN_DISABLE_DARK_SAFE_V2_START */
/* Safe light-mode lock. This does not edit Razor or controllers. */
html, body { color-scheme: light !important; }
html.dark, html.dark-mode, html.theme-dark,
body.dark, body.dark-mode, body.theme-dark,
body[data-theme='dark'], html[data-theme='dark'] {
  background: #f5f7fb !important;
  color: #172033 !important;
}

/* Neutralize dark-mode wrappers without affecting normal light UI. */
html.dark *, html.dark-mode *, html.theme-dark *,
body.dark *, body.dark-mode *, body.theme-dark *,
body[data-theme='dark'] *, html[data-theme='dark'] * {
  color-scheme: light !important;
}

/* Hide only header/navbar theme controls, not business buttons. */
header button[id*='theme' i], header a[id*='theme' i], header [class*='theme-toggle' i], header [class*='dark-toggle' i],
.navbar button[id*='theme' i], .navbar a[id*='theme' i], .navbar [class*='theme-toggle' i], .navbar [class*='dark-toggle' i],
.topbar button[id*='theme' i], .topbar a[id*='theme' i], .topbar [class*='theme-toggle' i], .topbar [class*='dark-toggle' i],
.app-header button[id*='theme' i], .app-header a[id*='theme' i], .app-header [class*='theme-toggle' i], .app-header [class*='dark-toggle' i],
.main-header button[id*='theme' i], .main-header a[id*='theme' i], .main-header [class*='theme-toggle' i], .main-header [class*='dark-toggle' i],
header button[aria-label*='theme' i], header button[aria-label*='dark' i], header button[title*='theme' i], header button[title*='dark' i],
.navbar button[aria-label*='theme' i], .navbar button[aria-label*='dark' i], .navbar button[title*='theme' i], .navbar button[title*='dark' i] {
  display: none !important;
}
/* AREN_DISABLE_DARK_SAFE_V2_END */


/* AREN_LOGIN_LOCKOUT_V21_START */
.phase160h37-login .auth-lockout-message {
    display: block !important;
    border: 1px solid rgba(245, 158, 11, .35) !important;
    background: linear-gradient(135deg, rgba(255, 251, 235, .98), rgba(255, 247, 237, .98)) !important;
    color: #92400e !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.8 !important;
    box-shadow: 0 12px 28px rgba(146, 64, 14, .12) !important;
}
.phase160h37-login .auth-lockout-message strong {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 28px !important;
    margin: 0 4px !important;
    border-radius: 10px !important;
    background: #f59e0b !important;
    color: #fff !important;
    font-weight: 900 !important;
}
.phase160h37-login .login-submit:disabled,
.phase160h37-login #Password:disabled {
    opacity: .62 !important;
    cursor: not-allowed !important;
}
@media (max-width: 640px) {
    .phase160h37-login .auth-lockout-message {
        font-size: 12px !important;
        padding: 11px 12px !important;
        border-radius: 14px !important;
    }
}
/* AREN_LOGIN_LOCKOUT_V21_END */