/*Start of styling for new tabs in  account page*/


.profileTab-wrapper {
    justify-content: space-evenly;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
}

.profileTab-username {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.profileTab-username-input{
    margin: -20px 15px 0 15px;
}

.profileTab-text-success,
.profileTab-text-danger {
    font-size: 12px;
    white-space: nowrap;
}

.profileTab-text-success {
    color: #007D47;
}

.profileTab-text-danger {
    color: red;
}

.profileTab-left-col, .profileTab-right-col {
    min-width: 400px;
    max-width: 400px;
}

.profileTab-left-col {
    margin-right: 144px ;
    margin-left: -15px;
}

.profileTab-right-col {
    display: flex;
    flex-direction: column;
    margin-right: -15px;
}

.profileTab-social-section {
    margin-top: auto;
}

.profileTab-image-wrapper{
    margin-bottom: 34px;
    margin-left: 0;
}


.profileTab-title{
    margin: 0 0 24px -15px;

}


.profileTab-initials{
    /*height: 155px !important;*/
}




/*used to target tabs in the settings/account page*/
.settings-full-page .nav-tabs {
    background: #e9ecf0 !important;
    border: none !important;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 40px;
    flex-wrap: nowrap;
    width: fit-content;
    gap: 2px;
}

.settings-full-page .nav-tabs .nav-link {
    background: transparent;
    border: none !important;
    border-radius: 999px;
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 20px;
    outline: none;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.settings-full-page .nav-tabs .nav-item.show .nav-link,
.settings-full-page .nav-tabs .nav-link.active {
    background: #ffffff !important;
    color: #ff4a00 !important;
    border: none !important;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    font-weight: 600;
}

.settings-full-page .nav-tabs .nav-link:focus {
    outline: none;
    box-shadow: none;
}

.settings-full-page .nav-tabs .nav-link:hover:not(.active) {
    background: rgba(0, 0, 0, 0.06);
    color: #475569;
    border: none !important;
}
.notificationsTab-container {
    text-align: center;
    padding: 0 20px;
    flex-direction: column;
}

.profileTab-verification {
    background-color: #fff4e6;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: left;
    display: flex;
    align-items: center;
    max-width: 100%;
}

.notificationsTab-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 778px;
}

.notificationsTab-status-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.notificationsTab-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
}

.notificationsTab-status-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #4F5674;
    max-width: 90%;
}

.notificationsTab-status-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: auto;
}

.notificationsTab-bellIcon,
.notificationsTab-annoucementIcon {
    border-radius: 50%;
    background: white;
    max-height: 40px;
    max-width: 40px;
    min-height: 40px;
    min-width: 40px;
    text-align: center;
    align-content: space-around;
}
.notificationsTab-content {
     padding: 16px;
     border-radius: 12px;
     margin-bottom: 20px;
     text-align: left;
     display: flex;
     align-items: center;
     width: 100%;
     justify-content: space-between;
 }

.notificationsTab-active {
    background-color: #E6F2ED;
}

.notificationsTab-inactive {
    background-color: #F2F3F7;
}

.notificationsTab-toggle {
    display: flex;
    align-items: center;
    max-width: min-content;
}

.notificationsTab-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.notificationsTab-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.notificationsTab-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.notificationsTab-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.notificationsTab-switch input:checked + .notificationsTab-slider {
    background-color: #007D47;
}

.notificationsTab-switch input:checked + .notificationsTab-slider:before {
    transform: translateX(16px);
}

.notificationsTab-status-label {
    margin-right: 8px;
    font-weight: 700;
    font-size: 12px;
    color: #101424;
    align-items: flex-end;
}

/* Not-yet-wired notification: dimmed card + "Coming soon" badge in place of the toggle. */
.notificationsTab-disabled {
    opacity: 0.65;
}
.notificationsTab-soon-note {
    display: block;
    margin-top: 8px;
    font-style: italic;
    font-weight: 600;
    color: #E06535;
}
.notificationsTab-soon-badge {
    white-space: nowrap;
    font-weight: 700;
    font-size: 12px;
    color: #E06535;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(224, 101, 53, 0.4);
    background: rgba(224, 101, 53, 0.12);
}

.request-change-button {
    border-radius: 5px;
    font-size: 12px;
    padding: 3px 5px !important;
}

#buttons.request-change-button {
    margin-bottom: 8px !important;
}

#buttons-alt.request-change-button {
    margin-bottom: 0 !important;
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .settings-full-page .nav-tabs {
    background: var(--bg-secondary) !important;
}
[data-theme="dark"] .settings-full-page .nav-tabs .nav-link {
    background: transparent;
    color: var(--text-secondary);
}
[data-theme="dark"] .settings-full-page .nav-tabs .nav-item.show .nav-link,
[data-theme="dark"] .settings-full-page .nav-tabs .nav-link.active {
    background: var(--bg-muted) !important;
    color: var(--accent) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .settings-full-page .nav-tabs .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
[data-theme="dark"] .notificationsTab-title {
    color: var(--text-primary);
}
[data-theme="dark"] .notificationsTab-status-text {
    color: var(--text-secondary);
}
[data-theme="dark"] .profileTab-verification {
    background-color: rgba(224, 101, 53, 0.15);
}
[data-theme="dark"] .notificationsTab-active {
    background-color: rgba(126, 160, 134, 0.18);
}
[data-theme="dark"] .notificationsTab-inactive {
    background-color: var(--bg-muted);
}
[data-theme="dark"] .notificationsTab-status-label {
    color: var(--text-primary);
}
[data-theme="dark"] .notificationsTab-bellIcon,
[data-theme="dark"] .notificationsTab-annoucementIcon {
    background: var(--bg-muted);
}

/* The verification panel sits as a sibling to the left/right cols inside the flex row;
   force it onto its own line above the cols so the Setup Checklist on the right can't
   overlap it. */
.profileTab-verification {
    flex: 1 0 100%;
    width: 100%;
}

/* ── Verify Account panel (magic-link) ─────────────────────────────────────── */
/* Lives at the top of profileTab. The .profileTab-verification wrapper above
   already gives us the amber background, padding, border-radius, and
   flex:1 0 100% so it spans the full settings row. This block lays out the
   contents inside that wrapper. */

.verifyAccount-idle-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.verifyAccount-icon {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verifyAccount-text {
    flex: 1 1 auto;
    min-width: 0;
}

.verifyAccount-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.verifyAccount-desc {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary, #5b6471);
    line-height: 1.4;
}

.verifyAccount-error {
    margin: 6px 0 0;
    color: #d23a3a;
    font-size: 13px;
}

.verifyAccount-cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Sent-state confirmation — same horizontal flow, friendly check icon. */
.verifyAccount-sent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.verifyAccount-sent-icon {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #2f9b58;
    background: rgba(47, 155, 88, 0.15);
}

.verifyAccount-sent-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.verifyAccount-sent-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.verifyAccount-sent-text {
    font-size: 14px;
    color: var(--text-secondary, #5b6471);
    line-height: 1.4;
}

.verifyAccount-resend-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 0 4px;
    color: var(--accent, #d85a30);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-weight: 600;
}
.verifyAccount-resend-link:hover { opacity: 0.85; }

/* Mobile: stack vertically so the button doesn't squeeze the description. */
@media (max-width: 720px) {
    .verifyAccount-idle-row,
    .verifyAccount-sent-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .verifyAccount-cta { width: 100%; }
    .verifyAccount-cta button { width: 100%; }
}

/* Override the soft amber so the verify panel actually catches the eye —
   matches the brand orange used elsewhere in the app. */
.profileTab-verification {
    background-color: #ffe7d4 !important;
    border: 1px solid rgba(216, 90, 48, 0.40) !important;
    box-shadow: 0 1px 0 rgba(216, 90, 48, 0.06);
}

[data-theme="dark"] .profileTab-verification {
    background-color: rgba(216, 90, 48, 0.18) !important;
    border-color: rgba(216, 90, 48, 0.45) !important;
    box-shadow: none;
}

[data-theme="dark"] .verifyAccount-title {
    color: #ffb78f !important;
}

.verifyAccount-icon {
    color: #d85a30;
}
[data-theme="dark"] .verifyAccount-icon {
    color: #ffb78f;
}

.verifyAccount-icon svg {
    width: 28px;
    height: 28px;
}

/* Pull the icon's existing fill colour into the brand orange. */
.verifyAccount-icon svg path,
.verifyAccount-icon svg rect,
.verifyAccount-icon svg circle {
    fill: currentColor;
}

/* Verified-state panel — same shape as the orange "Verify Account" panel,
   recoloured to a confirmation green. */
.profileTab-verification--verified {
    background-color: #e3f6ec !important;
    border-color: rgba(47, 155, 88, 0.40) !important;
    box-shadow: 0 1px 0 rgba(47, 155, 88, 0.06);
}
[data-theme="dark"] .profileTab-verification--verified {
    background-color: rgba(47, 155, 88, 0.18) !important;
    border-color: rgba(47, 155, 88, 0.45) !important;
    box-shadow: none;
}
.profileTab-verification--verified .verifyAccount-sent-icon {
    color: #2f9b58;
    background: rgba(47, 155, 88, 0.18);
}
.profileTab-verification--verified .verifyAccount-sent-title {
    color: #1f7a44;
}
[data-theme="dark"] .profileTab-verification--verified .verifyAccount-sent-title {
    color: #8ee0a8;
}

/* Center the Setup Checklist in the available vertical space between the verify
   panel (top) and the Social section (bottom). The right col is a flex column,
   so auto top+bottom margins on the wrapper consume the free space evenly. */
.profileTab-right-col .profileTab-checklist-wrap {
    margin: auto 0;
}

/* Match the `--done` state of the checklist with a subtle green accent so it
   feels finished but doesn't compete for attention with anything else. */
.acl-card--done .acl-title { color: #1f7a44; }
[data-theme="dark"] .acl-card--done .acl-title { color: #8ee0a8; }

/* ── Inline confirm state for the Setup Checklist X button ──────────────── */
.acl-card--confirming,
.acl-card--locked {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.acl-confirm-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.acl-confirm-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.acl-confirm-text {
    font-size: 13px;
    color: var(--text-muted, #98a3af);
    line-height: 1.45;
}

.acl-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.acl-confirm-cancel,
.acl-confirm-ok {
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
}

.acl-confirm-cancel {
    background: transparent;
    color: var(--text-secondary, #5b6471);
}
.acl-confirm-cancel:hover {
    background: rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .acl-confirm-cancel {
    color: var(--text-muted);
}
[data-theme="dark"] .acl-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.06);
}

.acl-confirm-ok {
    background: #d23a3a;
    color: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
.acl-confirm-ok:hover {
    background: #b82e2e;
}
.acl-confirm-ok:active {
    transform: translateY(1px);
}