/* ===========================================================
   ATLAS THEME
   Version: 1.0
   =========================================================== */

:root {

    /* Brand */
    --atlas-primary: #4EC4C3;
    --atlas-primary-hover: #36B0AF;

    /* Backgrounds */
    --atlas-bg: #F6F8FA;
    --atlas-white: #FFFFFF;

    /* Text */
    --atlas-text: #23313A;
    --atlas-text-light: #667085;
    --atlas-heading: #16232E;

    /* Borders */
    --atlas-border: #DDE3EA;

    /* Status */
    --atlas-success: #2EB67D;
    --atlas-warning: #F5A524;
    --atlas-danger: #E5484D;

    /* Radius */
    --atlas-radius-sm: 8px;
    --atlas-radius: 12px;
    --atlas-radius-lg: 18px;

    /* Shadows */
    --atlas-shadow-sm: 0 2px 8px rgba(0,0,0,.05);
    --atlas-shadow: 0 10px 30px rgba(0,0,0,.08);
    --atlas-shadow-lg: 0 18px 45px rgba(0,0,0,.12);

    /* Animation */
    --atlas-speed: .25s;

}


/* ===========================================================
   RESET
   =========================================================== */

html,
body{

    margin:0;
    padding:0;

    width:100%;
    height:100%;

    background:var(--atlas-bg);

    color:var(--atlas-text);

    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,
    "Segoe UI",Roboto,sans-serif;

    font-size:16px;
    line-height:1.5;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;

}


/* ===========================================================
   TYPOGRAPHY
   =========================================================== */

h1,h2,h3,h4,h5,h6{

    color:var(--atlas-heading);
    font-weight:700;
    margin-bottom:1rem;

}

h1{

    font-size:2rem;

}

h2{

    font-size:1.6rem;

}

h3{

    font-size:1.3rem;

}

p{

    margin-bottom:1rem;

}


/* ===========================================================
   LINKS
   =========================================================== */

a{

    color:var(--atlas-primary);
    text-decoration:none;
    -webkit-transition:all var(--atlas-speed);
    transition:all var(--atlas-speed);

}

a:hover{

    color:var(--atlas-primary-hover);

}


/* ===========================================================
   BUTTONS
   =========================================================== */

.btn-atlas{

    border-radius:10px;

    font-weight:600;

    -webkit-transition:all .25s;

    transition:all .25s;

}

.btn-atlas-primary{

    background:var(--atlas-primary);
    color:white;
    border:none;

}

.btn-atlas-primary:hover{

    background:var(--atlas-primary-hover);
    color:white;

}

.btn-atlas-outline{

    background:white;

    border:1px solid var(--atlas-border);

}


/* ===========================================================
   INPUTS
   =========================================================== */

.form-control{

    border-radius:10px;

    border:1px solid var(--atlas-border);

    min-height:52px;

}

.form-control:focus{

    border-color:var(--atlas-primary);

    -webkit-box-shadow:0 0 0 .2rem rgba(78,196,195,.20);

            box-shadow:0 0 0 .2rem rgba(78,196,195,.20);

}


/* ===========================================================
   CARDS
   =========================================================== */

.card{

    border:none;

    border-radius:var(--atlas-radius);

    -webkit-box-shadow:var(--atlas-shadow-sm);

            box-shadow:var(--atlas-shadow-sm);

}


/* ===========================================================
   UTILITIES
   =========================================================== */

.shadow-atlas{

    -webkit-box-shadow:var(--atlas-shadow);

            box-shadow:var(--atlas-shadow);

}

.rounded-atlas{

    border-radius:var(--atlas-radius);

}

.text-muted{

    color:var(--atlas-text-light)!important;

}

/* ===========================================================
   BADGES
   =========================================================== */

.atlas-badge{
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    gap:6px;
    padding:4px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.atlas-badge::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
}

.atlas-badge-active{
    background:#E8F8F0;
    color:var(--atlas-success);
}

.atlas-badge-inactive{
    background:#FDECEC;
    color:var(--atlas-danger);
}



/* =====================================================
   ROLE CHECKBOX LIST
===================================================== */

.atlas-role-list {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 14px 18px;
    max-height: 220px;
    overflow-y: auto;
    background: #fafafa;
}

.atlas-role-list .form-check {
    margin-bottom: 12px;
    padding-left: 2.2rem;
}

.atlas-role-list .form-check:last-child {
    margin-bottom: 0;
}

.atlas-role-list .form-check-input {
    width: 1.35rem;
    height: 1.35rem;
    margin-left: -2.2rem;
    cursor: pointer;
}

.atlas-role-list .form-check-label {
    font-size: 1rem;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* =====================================================
   ATLAS NAVIGATION TABS
   Fælles standard for hele Atlas
===================================================== */

.atlas-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
}

.atlas-tab {
    min-width: 122px;
    min-height: 46px;

    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;

    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    gap: 8px;
    padding: 10px 18px;

    background: #ffffff;
    color: #8a9298;

    border: 2px solid #9ededd;
    border-radius: 10px;

    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    -webkit-transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        -webkit-transform 0.18s ease;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.atlas-tab:hover {
    background: #eefafa;
    border-color: #42b6b5;
    color: #66737e;
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

.atlas-tab-active,
.atlas-tab-active:hover {
    background: #4ec4c3;
    border-color: #4ec4c3;
    color: #ffffff;
    -webkit-transform: none;
            transform: none;
}

.atlas-tab-disabled,
.atlas-tab-disabled:hover {
    background: #ffffff;
    border-color: #9ededd;
    color: #8a9298;

    cursor: not-allowed;
    pointer-events: none;

    -webkit-transform: none;
            transform: none;
}


/* =====================================================
   ATLAS TAB COUNT
   Small count badge used in shared Atlas tabs
===================================================== */

.atlas-tab-count {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;

    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    min-width: 22px;
    height: 22px;
    padding: 0 6px;

    background: #e8f7f7;
    border-radius: 999px;

    color: #278f8f;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.atlas-tab-active .atlas-tab-count {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

@media (max-width: 768px) {
    .atlas-tabs {
        gap: 8px;
    }

    .atlas-tab {
        min-width: 0;
        width: 100%;
    }
}

/* =====================================================
   ATLAS FORM SECTIONS
===================================================== */

.atlas-form-section {
    margin-bottom: 32px;
}

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

.atlas-form-section-title {
    margin: 0 0 18px;
    padding-bottom: 10px;

    border-bottom: 1px solid #dfe7eb;

    color: #17232d;
    font-size: 1.05rem;
    font-weight: 700;
}

.atlas-form-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 12px;

    margin-top: 30px;
    padding-top: 22px;

    border-top: 1px solid #dfe7eb;
}

/* =====================================================
   ATLAS TOAST
===================================================== */

.atlas-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 2000;

    min-width: 320px;
    max-width: 420px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;

    padding: 16px 18px;

    background: #ffffff;
    border: 1px solid #bfe9e8;
    border-left: 5px solid #4ec4c3;
    border-radius: 10px;

    -webkit-box-shadow: 0 12px 30px rgba(23, 35, 45, 0.16);

            box-shadow: 0 12px 30px rgba(23, 35, 45, 0.16);

    -webkit-animation: atlas-toast-in 0.22s ease;

            animation: atlas-toast-lifecycle 2.5s ease forwards;
}

.atlas-toast-icon {
    width: 34px;
    height: 34px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    -webkit-box-flex: 0;

        -ms-flex: 0 0 34px;

            flex: 0 0 34px;

    border-radius: 50%;

    background: #e8f8f8;
    color: #249b99;
}

.atlas-toast-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2px;
}

.atlas-toast-content strong {
    color: #17232d;
    font-size: 0.98rem;
}

.atlas-toast-content span {
    color: #66737e;
    font-size: 0.88rem;
}

@-webkit-keyframes atlas-toast-in {
    from {
        opacity: 0;
        -webkit-transform: translateX(18px);
                transform: translateX(18px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}

@keyframes atlas-toast-in {
    from {
        opacity: 0;
        -webkit-transform: translateX(18px);
                transform: translateX(18px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
}


@-webkit-keyframes atlas-toast-lifecycle {

    0% {
        opacity: 0;
        -webkit-transform: translateX(18px);
                transform: translateX(18px);
        visibility: visible;
    }

    10% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
        visibility: visible;
    }

    82% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
        visibility: visible;
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(18px);
                transform: translateX(18px);
        visibility: hidden;
        pointer-events: none;
    }
}


@keyframes atlas-toast-lifecycle {

    0% {
        opacity: 0;
        -webkit-transform: translateX(18px);
                transform: translateX(18px);
        visibility: visible;
    }

    10% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
        visibility: visible;
    }

    82% {
        opacity: 1;
        -webkit-transform: translateX(0);
                transform: translateX(0);
        visibility: visible;
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(18px);
                transform: translateX(18px);
        visibility: hidden;
        pointer-events: none;
    }
}





/* =====================================================
   ATLAS SUBSCRIPTION CARDS
===================================================== */

.atlas-subscription-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px;
}

.atlas-subscription-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 330px;

    padding: 26px;

    background: #ffffff;
    border: 1px solid #dfe7eb;
    border-radius: 14px;

    -webkit-box-shadow: 0 6px 18px rgba(23, 35, 45, 0.06);

            box-shadow: 0 6px 18px rgba(23, 35, 45, 0.06);
}

.atlas-subscription-card-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 16px;
}

.atlas-subscription-code {
    display: block;
    margin-bottom: 4px;

    color: #4ec4c3;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.atlas-subscription-title {
    margin: 0;

    color: #17232d;
    font-size: 1.45rem;
    font-weight: 700;
}

.atlas-subscription-description {
    min-height: 72px;
    margin: 24px 0;

    color: #66737e;
    line-height: 1.55;
}

.atlas-subscription-price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    gap: 8px;

    margin-bottom: 28px;
}

.atlas-subscription-price-value {
    color: #17232d;
    font-size: 2rem;
    font-weight: 700;
}

.atlas-subscription-price-suffix {
    color: #7b8790;
    font-size: 0.95rem;
}

.atlas-subscription-card-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;

    margin-top: auto;
    padding-top: 20px;

    border-top: 1px solid #e7edef;
}

@media (max-width: 768px) {
    .atlas-subscription-grid {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   ATLAS MODULE CARDS
===================================================== */

.atlas-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.atlas-module-card {
    padding: 20px;

    background: #ffffff;
    border: 2px solid #dfe7eb;
    border-radius: 12px;

    -webkit-transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        -webkit-box-shadow 0.18s ease;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        -webkit-box-shadow 0.18s ease;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        -webkit-box-shadow 0.18s ease;
}

.atlas-module-card-active {
    background: #f2fbfb;
    border-color: #4ec4c3;
    -webkit-box-shadow: 0 5px 16px rgba(78, 196, 195, 0.12);
            box-shadow: 0 5px 16px rgba(78, 196, 195, 0.12);
}

.atlas-module-card-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 16px;
}

.atlas-module-code {
    display: block;
    margin-bottom: 3px;

    color: #4ec4c3;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.atlas-module-title {
    margin: 0;

    color: #17232d;
    font-size: 1.18rem;
    font-weight: 700;
}

.atlas-module-description {
    min-height: 48px;
    margin: 18px 0 0;

    color: #66737e;
    line-height: 1.5;
}


/* Atlas switch */

.atlas-switch {
    position: relative;

    width: 48px;
    height: 26px;

    -webkit-box-flex: 0;

        -ms-flex: 0 0 48px;

            flex: 0 0 48px;
}

.atlas-switch input {
    width: 0;
    height: 0;

    opacity: 0;
}

.atlas-switch-slider {
    position: absolute;
    inset: 0;

    background: #cbd4d9;
    border-radius: 999px;

    cursor: pointer;

    -webkit-transition: background-color 0.18s ease;

    transition: background-color 0.18s ease;
}

.atlas-switch-slider::before {
    content: "";

    position: absolute;
    top: 4px;
    left: 4px;

    width: 18px;
    height: 18px;

    background: #ffffff;
    border-radius: 50%;

    -webkit-box-shadow: 0 2px 5px rgba(23, 35, 45, 0.2);

            box-shadow: 0 2px 5px rgba(23, 35, 45, 0.2);

    -webkit-transition: -webkit-transform 0.18s ease;

    transition: -webkit-transform 0.18s ease;

    transition: transform 0.18s ease;

    transition: transform 0.18s ease, -webkit-transform 0.18s ease;
}

.atlas-switch input:checked + .atlas-switch-slider {
    background: #4ec4c3;
}

.atlas-switch input:checked + .atlas-switch-slider::before {
    -webkit-transform: translateX(22px);
            transform: translateX(22px);
}

.atlas-mobile-menu-btn {
    display: none;
}

.atlas-mobile-offcanvas {
    width: 300px;
    background: #ffffff;
}

.atlas-mobile-offcanvas .offcanvas-header {
    min-height: 100px;
    padding: 24px 28px;
    border-bottom: 1px solid #e1e8ec;
}

.atlas-mobile-offcanvas .offcanvas-body {
    padding: 18px 12px;
}

.atlas-mobile-offcanvas .atlas-sidebar-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.atlas-mobile-offcanvas .atlas-sidebar-nav .nav-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 14px;
    padding: 13px 18px;
    margin-bottom: 6px;
    border-radius: 12px;
    color: #65728a;
    text-decoration: none;
    font-weight: 600;
}

.atlas-mobile-offcanvas .atlas-sidebar-nav .nav-link.active {
    color: #2eb8b7;
    background: #e8f7f7;
}

.atlas-mobile-offcanvas .atlas-sidebar-nav .nav-link:hover {
    color: #2eb8b7;
    background: #f0f8f8;
}

@media (max-width: 991.98px) {

    .atlas-mobile-menu-btn {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        background: #ffffff;
        border: 1px solid #d6dde3;
        border-radius: 8px;
        color: #172432;
        font-size: 1.2rem;
        cursor: pointer;
    }

    .atlas-sidebar {
        display: none;
    }

    .atlas-main {
        width: 100%;
        margin-left: 0;
    }
}

/* =====================================================
   PLATFORM DASHBOARD
===================================================== */

.atlas-dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.atlas-dashboard-stat-card {
    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 16px;

    min-height: 130px;
    padding: 22px;

    background: #ffffff;
    border: 1px solid #dfe7eb;
    border-radius: 14px;

    color: #17232d;
    text-decoration: none;

    -webkit-box-shadow: 0 6px 18px rgba(23, 35, 45, 0.05);

            box-shadow: 0 6px 18px rgba(23, 35, 45, 0.05);

    -webkit-transition:
        border-color 0.18s ease,
        -webkit-transform 0.18s ease,
        -webkit-box-shadow 0.18s ease;

    transition:
        border-color 0.18s ease,
        -webkit-transform 0.18s ease,
        -webkit-box-shadow 0.18s ease;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        -webkit-transform 0.18s ease,
        -webkit-box-shadow 0.18s ease;
}

.atlas-dashboard-stat-card:hover {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    border-color: #9ededd;
    -webkit-box-shadow: 0 10px 24px rgba(23, 35, 45, 0.09);
            box-shadow: 0 10px 24px rgba(23, 35, 45, 0.09);
}

.atlas-dashboard-stat-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    width: 48px;
    height: 48px;

    -webkit-box-flex: 0;

        -ms-flex: 0 0 48px;

            flex: 0 0 48px;

    background: #e8f7f7;
    border-radius: 12px;

    color: #2eb8b7;
    font-size: 1.2rem;
}

.atlas-dashboard-stat-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
}

.atlas-dashboard-stat-label {
    color: #687782;
    font-size: 0.9rem;
    font-weight: 600;
}

.atlas-dashboard-stat-value {
    color: #17232d;
    font-size: 2rem;
    line-height: 1;
}

.atlas-dashboard-stat-arrow {
    margin-left: auto;
    color: #a6b2ba;
    font-size: 0.8rem;
}

.atlas-dashboard-section-header {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e7edef;
}

.atlas-status-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.atlas-status-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 20px;

    padding: 15px 0;
    border-bottom: 1px solid #edf1f3;
}

.atlas-status-row:last-child {
    border-bottom: 0;
}

.atlas-status-name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;

    color: #35444f;
    font-weight: 600;
}

.atlas-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.atlas-status-dot-online {
    background: #2eb88a;
    -webkit-box-shadow: 0 0 0 4px rgba(46, 184, 138, 0.12);
            box-shadow: 0 0 0 4px rgba(46, 184, 138, 0.12);
}

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

.atlas-quick-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;

    min-height: 62px;
    padding: 15px 16px;

    background: #f8fafb;
    border: 1px solid #e1e8ec;
    border-radius: 11px;

    color: #35444f;
    text-decoration: none;
    font-weight: 600;

    -webkit-transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        -webkit-transform 0.18s ease;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        -webkit-transform 0.18s ease;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        -webkit-transform 0.18s ease;
}

.atlas-quick-action i {
    color: #2eb8b7;
}

.atlas-quick-action:hover {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
    background: #edf9f9;
    border-color: #a8dedd;
    color: #17232d;
}

@media (max-width: 1399.98px) {

    .atlas-dashboard-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {

    .atlas-dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .atlas-dashboard-stat-card {
        min-height: 105px;
    }

    .atlas-quick-actions {
        grid-template-columns: 1fr;
    }
}
.atlas-plan-modules {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 20px;
}

.atlas-plan-module-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 28px;
    padding: 5px 11px;
    border: 1px solid #cdeeed;
    border-radius: 999px;
    background: #eef9f8;
    color: #287b79;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.atlas-plan-module-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: #4ec4c3;
}

.atlas-plan-modules-empty {
    margin: 18px 0 20px;
    color: #8a8f98;
    font-size: 0.82rem;
    font-style: italic;
}
/* ATLAS MODULES 2.0 */
.atlas-module-color-dot{display:inline-block;width:14px;height:14px;-webkit-box-flex:0;-ms-flex:0 0 14px;flex:0 0 14px;border:2px solid rgba(255,255,255,.95);border-radius:50%;-webkit-box-shadow:0 0 0 1px rgba(15,23,42,.12);box-shadow:0 0 0 1px rgba(15,23,42,.12)}
.atlas-color-picker-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;gap:10px}
.atlas-color-picker-row .form-control-color{width:58px;min-width:58px;height:38px;padding:4px}
.atlas-module-preview-card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:18px;min-height:130px;padding:22px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}
.atlas-module-icon-preview{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:58px;height:58px;-webkit-box-flex:0;-ms-flex:0 0 58px;flex:0 0 58px;border-radius:16px;color:#fff;font-size:1.35rem;-webkit-box-shadow:0 10px 22px rgba(15,23,42,.12);box-shadow:0 10px 22px rgba(15,23,42,.12)}
.atlas-module-icon-preview-small{width:34px;height:34px;-ms-flex-preferred-size:34px;flex-basis:34px;border-radius:10px;font-size:.9rem;-webkit-box-shadow:none;box-shadow:none}
.atlas-module-icon-inline{min-width:44px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#f8fafc}
.atlas-module-badge-dot{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%}

/* =========================================================
   ATLAS FARVE- OG IKONVÆLGER
========================================================= */

.atlas-color-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 42px));
    gap: 12px;
    margin-bottom: 10px;
}

.atlas-color-option {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 50%;
    background: var(--atlas-option-color);
    color: #ffffff;
    cursor: pointer;
    -webkit-transition:
        border-color 0.15s ease,
        -webkit-transform 0.15s ease,
        -webkit-box-shadow 0.15s ease;
    transition:
        border-color 0.15s ease,
        -webkit-transform 0.15s ease,
        -webkit-box-shadow 0.15s ease;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease,
        -webkit-transform 0.15s ease,
        -webkit-box-shadow 0.15s ease;
}

.atlas-color-option:hover {
    -webkit-transform: translateY(-2px) scale(1.05);
            transform: translateY(-2px) scale(1.05);
    -webkit-box-shadow: 0 7px 15px rgba(15, 23, 42, 0.18);
            box-shadow: 0 7px 15px rgba(15, 23, 42, 0.18);
}

.atlas-color-option i {
    visibility: hidden;
    font-size: 0.8rem;
}

.atlas-color-option.active {
    border-color: #ffffff;
    -webkit-box-shadow:
        0 0 0 3px #172333,
        0 7px 15px rgba(15, 23, 42, 0.18);
            box-shadow:
        0 0 0 3px #172333,
        0 7px 15px rgba(15, 23, 42, 0.18);
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
}

.atlas-color-option.active i {
    visibility: visible;
}

.atlas-icon-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 52px));
    gap: 12px;
    margin-bottom: 10px;
}

.atlas-icon-option {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid #dce3ea;
    border-radius: 12px;
    background: #ffffff;
    color: #657286;
    font-size: 1.05rem;
    cursor: pointer;
    -webkit-transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        -webkit-transform 0.15s ease,
        -webkit-box-shadow 0.15s ease;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        -webkit-transform 0.15s ease,
        -webkit-box-shadow 0.15s ease;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease,
        -webkit-transform 0.15s ease,
        -webkit-box-shadow 0.15s ease;
}

.atlas-icon-option:hover {
    color: #287b79;
    border-color: #4ec4c3;
    background: #eef9f8;
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
}

.atlas-icon-option.active {
    color: #ffffff;
    border-color: #4ec4c3;
    background: #4ec4c3;
    -webkit-box-shadow: 0 6px 14px rgba(78, 196, 195, 0.28);
            box-shadow: 0 6px 14px rgba(78, 196, 195, 0.28);
}

/* =========================================================
   ATLAS EDIT FORM
   Bruges til create/edit-sider i Atlas
   ========================================================= */

.atlas-edit-page {
    padding: 24px 16px 40px;
}

.atlas-edit-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.atlas-edit-title {
    margin: 0 0 5px;
    color: #18232d;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.atlas-edit-subtitle {
    margin: 0;
    color: #697584;
    font-size: 14px;
    line-height: 1.5;
}

.atlas-edit-back {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid #cfd6dd;
    border-radius: 7px;
    background: #ffffff;
    color: #4f5b67;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    -webkit-transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        -webkit-box-shadow 0.2s ease;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        -webkit-box-shadow 0.2s ease;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        -webkit-box-shadow 0.2s ease;
}

.atlas-edit-back:hover {
    border-color: #4ec4c3;
    background: #f5ffff;
    color: #278f8f;
    -webkit-box-shadow: 0 2px 7px rgba(78, 196, 195, 0.14);
            box-shadow: 0 2px 7px rgba(78, 196, 195, 0.14);
}

.atlas-edit-card {
    overflow: hidden;
    border: 1px solid #A2E0DD; /* Atlas Card Border Standard */
    border-radius: 10px;
    background: #ffffff;
    -webkit-box-shadow: 0 3px 14px rgba(24, 35, 45, 0.07);
            box-shadow: 0 3px 14px rgba(24, 35, 45, 0.07);
}

/* Hover effect used across Atlas cards */
.atlas-edit-card:hover {
    border-color: #4EC4C3;
}



.atlas-form-section {
    padding: 16px 24px 18px;
    border-bottom: 1px solid #e2e7eb;
}

.atlas-form-section:last-of-type {
    border-bottom: 0;
}

.atlas-section-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.atlas-section-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30px;
            flex: 0 0 30px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 7px;
    background: #22aaaa;
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
}

.atlas-section-title {
    margin: 0 0 2px;
    color: #17212b;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.atlas-section-description {
    margin: 0;
    color: #707c88;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.atlas-edit-card .form-label {
    margin-bottom: 6px;
    color: #17212b;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.atlas-required {
    margin-left: 4px;
    color: #d84b4b;
    font-weight: 700;
}

.atlas-edit-card .form-control,
.atlas-edit-card .form-select {
    min-height: 40px;
    border: 1px solid #d4dce3;
    border-radius: 6px;
    background-color: #ffffff;
    color: #25313c;
    font-size: 14px;
    font-weight: 400;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        -webkit-box-shadow 0.2s ease;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        -webkit-box-shadow 0.2s ease;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        -webkit-box-shadow 0.2s ease;
}

.atlas-edit-card .form-control {
    padding: 8px 12px;
}

.atlas-edit-card .form-select {
    padding-top: 8px;
    padding-bottom: 8px;
}

.atlas-edit-card textarea.form-control {
    min-height: 68px;
    resize: vertical;
}

.atlas-edit-card .form-control::-webkit-input-placeholder {
    color: #9aa4ad;
    opacity: 1;
}

.atlas-edit-card .form-control::-moz-placeholder {
    color: #9aa4ad;
    opacity: 1;
}

.atlas-edit-card .form-control:-ms-input-placeholder {
    color: #9aa4ad;
    opacity: 1;
}

.atlas-edit-card .form-control::-ms-input-placeholder {
    color: #9aa4ad;
    opacity: 1;
}

.atlas-edit-card .form-control::placeholder {
    color: #9aa4ad;
    opacity: 1;
}

.atlas-edit-card .form-control:focus,
.atlas-edit-card .form-select:focus {
    border-color: #4ec4c3;
    outline: 0;
    -webkit-box-shadow: 0 0 0 3px rgba(78, 196, 195, 0.16);
            box-shadow: 0 0 0 3px rgba(78, 196, 195, 0.16);
}

.atlas-edit-card .form-control[readonly] {
    background: #f7f9fa;
    color: #596572;
    cursor: default;
}

.atlas-edit-card .form-text {
    margin-top: 4px;
    color: #77828d;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.atlas-form-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid #e2e7eb;
    background: #fbfcfc;
}

.atlas-btn-cancel {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-width: 115px;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid #ccd4db;
    border-radius: 7px;
    background: #ffffff;
    color: #4f5b67;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    -webkit-transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        -webkit-box-shadow 0.2s ease;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        -webkit-box-shadow 0.2s ease;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        -webkit-box-shadow 0.2s ease;
}

.atlas-btn-cancel:hover {
    border-color: #adb8c1;
    background: #f5f7f8;
    color: #303b45;
    -webkit-box-shadow: 0 2px 7px rgba(24, 35, 45, 0.08);
            box-shadow: 0 2px 7px rgba(24, 35, 45, 0.08);
}

.atlas-btn-save {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 9px;
    min-width: 195px;
    min-height: 40px;
    padding: 8px 20px;
    border: 1px solid #22aaaa;
    border-radius: 7px;
    background: #22aaaa;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    -webkit-box-shadow: 0 3px 8px rgba(34, 170, 170, 0.2);
            box-shadow: 0 3px 8px rgba(34, 170, 170, 0.2);
    cursor: pointer;
    -webkit-transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        -webkit-transform 0.2s ease,
        -webkit-box-shadow 0.2s ease;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        -webkit-transform 0.2s ease,
        -webkit-box-shadow 0.2s ease;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease,
        -webkit-transform 0.2s ease,
        -webkit-box-shadow 0.2s ease;
}

.atlas-btn-save:hover {
    border-color: #198f8f;
    background: #198f8f;
    color: #ffffff;
    -webkit-box-shadow: 0 4px 11px rgba(34, 170, 170, 0.3);
            box-shadow: 0 4px 11px rgba(34, 170, 170, 0.3);
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
}

.atlas-btn-save:focus {
    outline: 0;
    -webkit-box-shadow: 0 0 0 3px rgba(78, 196, 195, 0.2);
            box-shadow: 0 0 0 3px rgba(78, 196, 195, 0.2);
}

.atlas-btn-save:active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.atlas-btn-save:disabled {
    border-color: #9dd9d8;
    background: #9dd9d8;
    color: #ffffff;
    -webkit-box-shadow: none;
            box-shadow: none;
    cursor: not-allowed;
    -webkit-transform: none;
            transform: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767.98px) {
    .atlas-edit-page {
        padding: 18px 10px 30px;
    }

    .atlas-edit-header {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }

    .atlas-edit-title {
        font-size: 23px;
    }

    .atlas-form-section {
        padding: 16px;
    }

    .atlas-form-actions {
        padding: 14px 16px;
    }
}

@media (max-width: 575.98px) {
    .atlas-edit-header {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .atlas-edit-back {
        -ms-flex-item-align: start;
            align-self: flex-start;
    }

    .atlas-form-actions {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
    }

    .atlas-btn-cancel,
    .atlas-btn-save {
        width: 100%;
    }
}

/* =========================================================
   ATLAS FILTER TABS
   ========================================================= */

.atlas-filter-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 28px 20px;
  border-bottom: 1px solid #e6ebef;
}

.atlas-filter-tabs [is="dmx-repeat"] {
  display: contents;
}

.atlas-filter-tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 7px;

  min-height: 38px;
  padding: 8px 14px;

  border: 1px solid #d9e2e7;
  border-radius: 999px;

  background: #ffffff;
  color: #52616d;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;

  -webkit-transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    -webkit-box-shadow 0.18s ease,
    -webkit-transform 0.18s ease;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    -webkit-box-shadow 0.18s ease,
    -webkit-transform 0.18s ease;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    -webkit-box-shadow 0.18s ease,
    -webkit-transform 0.18s ease;
}

.atlas-filter-tab i {
  color: #87959f;
  font-size: 14px;
}

.atlas-filter-tab:hover {
  background: #f2fbfb;
  border-color: #9ededd;
  color: #26343d;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.atlas-filter-tab:hover i {
  color: #4ec4c3;
}

.atlas-filter-tab.active {
  background: #4ec4c3;
  border-color: #4ec4c3;
  color: #ffffff;

  -webkit-box-shadow: 0 4px 12px rgba(78, 196, 195, 0.24);

          box-shadow: 0 4px 12px rgba(78, 196, 195, 0.24);
}

.atlas-filter-tab.active i {
  color: #ffffff;
}

.atlas-filter-tab:focus-visible {
  outline: 3px solid rgba(78, 196, 195, 0.25);
  outline-offset: 2px;
}

/* =====================================================
   ATLAS CONTACT OPTION GROUP
   Shared option container for contact settings
===================================================== */

.atlas-contact-options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

    gap: 2rem;
    padding: 22px 24px;

    background: #fbfdfe;
    border: 1px solid #a2e0dd;
    border-radius: 18px;
}

/* Shared Atlas checkbox styling inside option groups */
.atlas-contact-options .form-check {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    gap: 0.75rem;
    margin: 0;
}

.atlas-contact-options .form-check-input {
    width: 24px;
    height: 24px;
    margin: 0;

    background-color: #ffffff;
    border: 2px solid #667f91;
    border-radius: 6px;

    cursor: pointer;

    -webkit-transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        -webkit-box-shadow 0.15s ease;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.atlas-contact-options .form-check-input:hover {
    border-color: var(--atlas-primary);
    -webkit-box-shadow: 0 0 0 3px rgba(78, 196, 195, 0.12);
            box-shadow: 0 0 0 3px rgba(78, 196, 195, 0.12);
}

.atlas-contact-options .form-check-input:focus {
    border-color: var(--atlas-primary);
    -webkit-box-shadow: 0 0 0 3px rgba(78, 196, 195, 0.18);
            box-shadow: 0 0 0 3px rgba(78, 196, 195, 0.18);
}

.atlas-contact-options .form-check-input:checked {
    background-color: var(--atlas-primary);
    border-color: var(--atlas-primary);
}

.atlas-contact-options .form-check-label {
    margin: 0;
    color: var(--atlas-text);
    font-size: 1.05rem;
    font-weight: 500;
}

/* =====================================================
   ATLAS TAB STATE OVERRIDES
   Ensures all inactive shared tabs keep the same visual
   appearance regardless of generic button/link rules.
===================================================== */

.atlas-tabs .atlas-tab:not(.atlas-tab-active) {
    background: #ffffff;
    border-color: #9ededd;
    color: #8a9298;
}

.atlas-tabs .atlas-tab:not(.atlas-tab-active) i {
    color: inherit;
}

.atlas-tabs .atlas-tab:not(.atlas-tab-active):hover {
    background: #eefafa;
    border-color: #42b6b5;
    color: #66737e;
}

.atlas-tabs .atlas-tab.atlas-tab-active,
.atlas-tabs .atlas-tab.atlas-tab-active:hover {
    background: #4ec4c3;
    border-color: #4ec4c3;
    color: #ffffff;
}

/* =========================================================
   FORM PLACEHOLDERS
   ========================================================= */

.form-control::placeholder {
    color: #9aa9b8;
    font-size: 0.9em;
    font-style: italic;
    opacity: 0.75;
}

.form-control::-webkit-input-placeholder {
    color: #9aa9b8;
    font-size: 0.9em;
    font-style: italic;
    opacity: 0.75;
}