/* ═══════════════════════════════════════════════════════════════════════
   custom.css  —  Part135SMS App Overrides
   Load order: after Bootstrap, after theme.css
   All brand colour now uses var(--primary) / var(--primary-dark) from
   theme.css so a single token change updates the entire UI.
═══════════════════════════════════════════════════════════════════════ */

/* ── Auth background ────────────────────────────────────────────────── */
.account-body.accountbg {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #525298;
    background: #525298;
}

/* ── Logo ───────────────────────────────────────────────────────────── */
.topbar .topbar-left .logo .logo-sm {
    height: 60px;
}

/* ── Alert overrides ────────────────────────────────────────────────── */
.alert-info {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary-dark);
}
.alert-secondary {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary-dark);
}
.alert-secondary strong {
    font-weight: normal;
    color: #fff;
}
.alert-success {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary-dark);
}
.alert-success strong {
    color: #fff;
}

/* ── Headings ───────────────────────────────────────────────────────── */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading, #0f172a);
    margin: 10px 0;
}
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--text-heading, #f1f5f9);
}

/* ── Labels ─────────────────────────────────────────────────────────── */
label {
    font-weight: 400;
    color: var(--text, #1e293b);
}

/* ── Body / typography ──────────────────────────────────────────────── */
body {
    font-family: arial, sans-serif;
    font-size: 14px;
    background-color: var(--bg, #f1f5f9);
}
p {
    line-height: 1.6;
    font-family: arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer {
    color: var(--text-muted, #64748b);
}

/* ── Navigation ─────────────────────────────────────────────────────── */
/* One consolidated block — replaces 5+ duplicate rules from original */
.navbar-custom-menu .navigation-menu > li > a {
    font-size: 14px;
    height: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: var(--nav-link, #64748b);
    text-decoration: none;
}
.navbar-custom-menu .navigation-menu > li:hover a,
.navbar-custom-menu .navigation-menu > li > a:hover {
    color: var(--nav-link-hover, #2563eb);
    text-decoration: none;
}
.navbar-toggle span {
    background-color: var(--primary, #2563eb);
}
.navigation-menu > li a {
    display: block;
    font-size: 14px;
    transition: all .1s ease;
    line-height: 18px;
    padding-left: 18px;
    padding-right: 18px;
}
@media (min-width: 992px) {
    [data-layout="horizontal"] .navbar-custom-menu .navigation-menu > li > a {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .navbar-custom-menu .navigation-menu > li .submenu-tab,
    .navbar-custom-menu .navigation-menu > li .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        padding: 10px 0;
        list-style: none;
        min-width: 350px;
    }
    .navbar-custom-menu .navigation-menu > li .submenu-tab li a:hover,
    .navbar-custom-menu .navigation-menu > li .submenu li a:hover {
        color: var(--nav-link-hover, #2563eb);
    }
    input[type="checkbox"] {
        transform: scale(1.3);
    }
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-primary,
.btn-primary:hover {
    color: #fff;
    background-color: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
}
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--primary-dark, #1e40af) !important;
    border-color: var(--primary-dark, #1e40af);
}

.btn-success,
.btn-success:hover {
    color: #fff;
    background-color: var(--primary, #2563eb) !important;
    border-color: var(--primary, #2563eb);
}
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: var(--primary-dark, #1e40af);
    border-color: var(--primary-dark, #1e40af);
}

.btn-warning {
    color: #fff;
    background-color: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
}

.btn-outline-info:hover {
    color: #fff;
    background-color: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
}

/* Safety CTA button */
a.btn_safety {
    background-color: var(--primary, #2563eb);
    border: none;
    color: #fff !important;
    padding: 15px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color .18s;
}
a.btn_safety:hover {
    color: #fff !important;
    background-color: var(--primary-dark, #1e40af);
}

/* ── Links ──────────────────────────────────────────────────────────── */
a, a:active {
    color: var(--primary, #2563eb);
    text-decoration: underline;
}
a:hover {
    color: var(--primary-dark, #1e40af);
    text-decoration: underline;
}
a.text-primary:hover,
a.text-primary:focus {
    color: var(--primary-dark, #1e40af) !important;
}

/* ── Pagination ─────────────────────────────────────────────────────── */
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
}

/* ── Before-review section ──────────────────────────────────────────── */
#before_review b,
#before_review strong {
    font-weight: normal;
    color: var(--text, #1e293b);
}
#before_review h3 {
    margin: 30px 0 50px;
}

/* ── Section header ─────────────────────────────────────────────────── */
.SectionHeader {
    margin: 50px 0 8px;
    letter-spacing: 0.02em;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-heading, #303e67);
    font-family: "Roboto", sans-serif;
}
.SectionHeader span {
    text-transform: none;
}

/* ── Table ──────────────────────────────────────────────────────────── */
.table td {
    vertical-align: baseline !important;
}
.white td {
    border-color: #fff !important;
}

/* ── Misc utilities ─────────────────────────────────────────────────── */
.txt {
    color: var(--text, #1e293b);
}
.head {
    margin: 20px 0 40px;
}
.center_align {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    border: 1px solid var(--primary, #2563eb) !important;
}
.red    { background: red; }
.green  { background: green; }
.yellow { background: yellow; }

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal-content .modal-body p {
    color: var(--text, #1e293b);
}
html.dark-mode .modal-content .modal-body p,
body.dark-mode .modal-content .modal-body p {
    color: var(--text, #f1f5f9);
}
.modal-dialog {
    overflow-y: initial !important;
}
#mdEdit .modal-body {
    overflow-y: auto;
}
@media (min-width: 768px) {
    .modal.show .modal-dialog {
        transform: none;
        max-width: 700px;
    }
}
@media (min-width: 992px) {
    .modal.show .modal-dialog {
        transform: none;
        max-width: 800px;
    }
}
@media (min-width: 1200px) {
    .modal.show .modal-dialog {
        transform: none;
        max-width: 800px;
    }
    #Warning .modal.show .modal-dialog {
        margin-top: 200px;
    }
}

/* ── Breadcrumb (triangle style) ────────────────────────────────────── */
.cd-breadcrumb,
.cd-multi-steps {
    width: 90%;
    max-width: 968px;
    padding: .5em 1em;
    margin: 1em auto;
    background-color: #edeff0;
    border-radius: .25em;
}
.cd-breadcrumb li,
.cd-multi-steps li {
    display: inline-block;
    float: left;
    margin: .5em 0;
    font-size: 14px;
    position: relative;
    padding: 0;
    margin: 4px 4px 4px 0;
}
.cd-breadcrumb li::after,
.cd-multi-steps li::after {
    display: inline-block;
    content: '\00bb';
    margin: 0 .6em;
    color: #959fa5;
}
.cd-breadcrumb li > *,
.cd-multi-steps li > * {
    display: inline-block;
    font-size: 1.4rem;
    color: #2c3f4c;
}
.cd-breadcrumb.triangle {
    background-color: transparent;
    padding: 0;
}
.cd-breadcrumb.triangle li > * {
    position: relative;
    padding: 1em .8em 1em 2.5em;
    color: #2c3f4c;
    background-color: #edeff0;
    border-color: #edeff0;
    font-size: 14px;
}
.cd-breadcrumb.triangle li:first-of-type > * {
    padding-left: 1.6em;
    border-radius: .25em 0 0 .25em;
}
.cd-breadcrumb.triangle li::after,
.cd-breadcrumb.triangle li > *::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    height: 0;
    width: 0;
    border: 24px solid transparent;
    border-right-width: 0;
    border-left-width: 20px;
}
.cd-breadcrumb.triangle li::after {
    z-index: 1;
    transform: translateX(4px);
    border-left-color: #fff;
    margin: 0;
}
.cd-breadcrumb.triangle li > *::after {
    z-index: 2;
    border-left-color: inherit;
}
.cd-breadcrumb.triangle.custom-icons li::after,
.cd-breadcrumb.triangle.custom-icons li > *::after {
    border-top-width: 25px;
    border-bottom-width: 25px;
}
/* Active breadcrumb step */
.cd-breadcrumb.triangle li.current > * {
    color: #fff;
    background-color: var(--primary, #2563eb);
    border-color: var(--primary, #2563eb);
}

/* ── Select2 ────────────────────────────────────────────────────────── */
.select2-container {
    width: 200px !important;
}