/**
 * Bataqah brand theme
 * Colors sampled from bataqah_logo.jpeg (royal blue wordmark on paper white).
 */
:root {
    --brand-blue: #13378F;
    --brand-blue-dark: #0F2D75;
    --brand-blue-soft: rgba(19, 55, 143, 0.12);
    --brand-paper: #F6F6F4;
    --brand-white: #FFFFFF;
}

/* Login canvas matches the logo paper background */
.brand-login-wrap {
    min-height: 100vh;
    background: #f4f6fb;
    font-family: 'DM Sans', sans-serif;
    color: #17213d;
}

.brand-login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(380px, 0.92fr) minmax(480px, 1.08fr);
}

.brand-login-logo {
    max-width: 190px;
    width: 100%;
    height: auto;
}

.brand-login-intro {
    background: var(--brand-blue);
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: clamp(40px, 8vw, 112px);
}

.brand-login-intro::before,
.brand-login-intro::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    width: 480px;
    height: 480px;
    right: -250px;
    top: 12%;
}

.brand-login-intro::after {
    width: 720px;
    height: 720px;
    right: -430px;
    top: -5%;
}

.brand-login-intro-inner {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.brand-login-logo-light {
    max-width: 178px;
    margin-bottom: clamp(64px, 11vh, 130px);
}

.brand-login-logo-light.logo-on-light {
    display: none;
}

.brand-login-kicker {
    color: var(--brand-blue);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.4;
    text-transform: uppercase;
}

.brand-login-intro .brand-login-kicker,
.brand-login-intro .brand-login-detail {
    color: rgba(255, 255, 255, 0.72);
}

.brand-login-intro h1 {
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.4rem, 4.2vw, 4.5rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.04;
    margin: 18px 0 24px;
}

.brand-login-intro h1 span {
    color: #9eb8ff;
}

.brand-login-intro-copy {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
    max-width: 430px;
}

.brand-login-detail {
    align-items: center;
    display: flex;
    font-size: 0.78rem;
    font-weight: 500;
    gap: 10px;
    margin-top: 46px;
}

.brand-login-dot {
    background: #8ee0bd;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(142, 224, 189, 0.14);
    height: 7px;
    width: 7px;
}

.brand-login-grid {
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 42px 42px;
    bottom: -90px;
    height: 310px;
    left: 0;
    opacity: 0.45;
    position: absolute;
    right: 0;
    transform: perspective(500px) rotateX(55deg) scale(1.3);
    transform-origin: bottom;
}

.brand-login-form-panel {
    align-items: center;
    background: #f4f6fb;
    display: flex;
    justify-content: center;
    padding: 48px clamp(32px, 8vw, 138px);
}

.brand-login-form-wrap {
    max-width: 430px;
    width: 100%;
}

.brand-login-mobile-logo {
    display: none;
}

.brand-login-heading {
    margin-bottom: 38px;
}

.brand-login-heading h2 {
    color: #17213d;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin: 12px 0 12px;
}

.brand-login-heading p {
    color: #69738d;
    font-size: 0.92rem;
    margin: 0;
}

.brand-login-feedback {
    border-radius: 8px;
    display: none;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
    margin: -16px 0 24px;
    padding: 12px 14px;
}

.brand-login-feedback.is-error {
    background: #fff0f1;
    border: 1px solid #ffd4d7;
    color: #bd3340;
}

.brand-login-feedback.is-success {
    background: #ecfaf4;
    border: 1px solid #c9efdd;
    color: #18724f;
}

.brand-login-form-wrap .form-body {
    --bs-gutter-y: 1.35rem;
}

.brand-login-form-wrap .form-label {
    color: #26304b;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 9px;
}

.brand-login-form-wrap .form-control {
    background: #fff;
    border: 1px solid #dfe4ef;
    border-radius: 9px;
    color: #17213d;
    font-size: 0.9rem;
    min-height: 52px;
    padding: 0 16px;
}

.brand-login-form-wrap .form-control::placeholder {
    color: #a7afc0;
}

.brand-login-form-wrap .form-control:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px var(--brand-blue-soft);
}

.brand-login-form-wrap .btn-primary {
    align-items: center;
    border-radius: 9px;
    display: flex;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 18px 0 21px;
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.brand-login-form-wrap .btn-primary:hover {
    box-shadow: 0 9px 22px rgba(19, 55, 143, 0.2);
    transform: translateY(-1px);
}

.brand-login-arrow {
    font-size: 1.3rem;
    font-weight: 400;
}

.brand-login-footer {
    color: #a0a8ba;
    font-size: 0.72rem;
    margin: 38px 0 0;
    text-align: center;
}

@media (max-width: 767.98px) {
    .brand-login-shell {
        display: block;
    }

    .brand-login-intro {
        align-items: flex-start;
        min-height: 320px;
        padding: 32px 28px 44px;
    }

    .brand-login-logo-light {
        margin-bottom: 42px;
        max-width: 150px;
    }

    .brand-login-intro h1 {
        font-size: 2.35rem;
    }

    .brand-login-intro-copy {
        font-size: 0.88rem;
        line-height: 1.55;
        max-width: 360px;
    }

    .brand-login-detail {
        margin-top: 25px;
    }

    .brand-login-form-panel {
        padding: 42px 28px 36px;
    }

    .brand-login-mobile-logo {
        display: block;
        margin-bottom: 34px;
    }

    .brand-login-mobile-logo .brand-login-logo {
        max-width: 142px;
    }
}

/* Sidebar wordmark + collapsed icon */
.sidebar-wrapper .sidebar-header {
    height: 72px;
    padding: 10px 16px;
}

.sidebar-wrapper .sidebar-header .brand-lockup {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sidebar-wrapper .sidebar-header .brand-logo-full {
    width: 100%;
    max-width: 168px;
    height: auto;
    margin: 0;
}

.sidebar-wrapper .sidebar-header .brand-logo-icon {
    display: none;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

/* White wordmark stays hidden on light sidebars */
.sidebar-wrapper .sidebar-header .logo-on-dark {
    display: none;
}

/* Dark / semi-dark sidebars use the white logo so it stays readable */
html.dark-theme .sidebar-wrapper .sidebar-header .logo-on-light,
html.semi-dark .sidebar-wrapper .sidebar-header .logo-on-light {
    display: none;
}

html.dark-theme .sidebar-wrapper .sidebar-header .brand-logo-full.logo-on-dark,
html.semi-dark .sidebar-wrapper .sidebar-header .brand-logo-full.logo-on-dark {
    display: block;
}

/* Do not invert the already-white dark-mode logo */
html.semi-dark .sidebar-wrapper .sidebar-header img,
html.dark-theme .sidebar-wrapper .sidebar-header img {
    filter: none;
}

@media screen and (min-width: 1025px) {
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .brand-lockup {
        justify-content: center;
    }

    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .brand-logo-full {
        display: none !important;
    }

    html:not(.dark-theme):not(.semi-dark) .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .brand-logo-icon.logo-on-light,
    html.dark-theme .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .brand-logo-icon.logo-on-dark,
    html.semi-dark .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .brand-logo-icon.logo-on-dark {
        display: block;
    }
}

/* Primary actions follow the logo blue */
.btn-primary {
    background: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--brand-blue-dark) !important;
    border-color: var(--brand-blue-dark) !important;
    color: #fff !important;
}

.text-primary {
    color: var(--brand-blue) !important;
}

.bg-primary {
    background-color: var(--brand-blue) !important;
}

.active_page_link,
.active > .page-link,
.page-link.active {
    color: #fff !important;
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
}

.page-link {
    color: var(--brand-blue);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 0.25rem var(--brand-blue-soft);
}

.sidebar-wrapper .metismenu .mm-active > a,
.sidebar-wrapper .metismenu a:active,
.sidebar-wrapper .metismenu a:focus,
.sidebar-wrapper .metismenu a:hover {
    color: var(--brand-blue);
    background-color: var(--brand-blue-soft);
}

html.dark-theme .sidebar-wrapper .metismenu .mm-active > a,
html.dark-theme .sidebar-wrapper .metismenu a:active,
html.dark-theme .sidebar-wrapper .metismenu a:focus,
html.dark-theme .sidebar-wrapper .metismenu a:hover {
    color: #ffffff;
    background-color: rgba(19, 55, 143, 0.45);
}

.back-to-top {
    background-color: var(--brand-blue);
}

.pace .pace-progress {
    background: var(--brand-blue);
}

.user-card {
    background: linear-gradient(179deg, rgba(19, 55, 143, 0.12) 0%, rgba(15, 45, 117, 0.16) 100%);
}

.bg-gradient-purple {
    background-image: linear-gradient(310deg, #13378F, #3D6BC4);
}

.footer .footer-text {
    letter-spacing: 0.2px;
}

/* Fixed light top bar */
.brand-top-header { background: #fff; border-bottom: 1px solid #e8edf5; box-shadow: 0 3px 16px rgba(24, 35, 63, .04); min-height: 74px; }
.brand-top-header .navbar { min-height: 74px; padding: 0 26px; }
.brand-top-header .toggle-icon { align-items: center; background: #f3f6fb; border-radius: 9px; color: var(--brand-blue); display: inline-flex; height: 38px; justify-content: center; transition: background 160ms ease; width: 38px; }
.brand-top-header .toggle-icon:hover { background: var(--brand-blue-soft); color: var(--brand-blue); }
.brand-top-search { margin-left: 4px; max-width: 420px; }
.brand-top-search .form-control { background: #f6f8fc; border: 1px solid transparent; border-radius: 9px; color: #26304b; font-size: .78rem; height: 42px; padding-right: 38px; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.brand-top-search .form-control:focus { background: #fff; border-color: #cbd6ec; box-shadow: 0 0 0 4px var(--brand-blue-soft); }
.brand-top-search .search-icon { color: #7c88a1; font-size: 1rem; }
.brand-top-search .search-close-icon { color: #7c88a1; right: 12px; }
.brand-topbar-context { align-items: center; color: #7d88a0; display: flex; font-size: .72rem; font-weight: 700; gap: 9px; margin-left: 10px; }
.brand-topbar-status { background: #35a779; border-radius: 50%; box-shadow: 0 0 0 4px rgba(53, 167, 121, .12); height: 7px; width: 7px; }
.brand-top-user { align-items: center; display: flex;  padding: 0px !important; }
.brand-top-user::after { color: #8994aa; margin-left: 6px; }
.brand-top-user .user-img { border: 2px solid #fff; box-shadow: 0 2px 8px rgba(24, 35, 63, .14); height: 34px; width: 34px; }
.brand-top-header .dropdown-menu { border: 1px solid #e6ebf3; border-radius: 10px; box-shadow: 0 14px 32px rgba(24, 35, 63, .12); margin-top: 10px; min-width: 190px; padding: 7px; }
.brand-top-header .dropdown-item { border-radius: 7px; color: #53607b; font-size: .78rem; padding: 10px 11px; }
.brand-top-header .dropdown-item:hover { background: var(--brand-blue-soft); color: var(--brand-blue); }
.switcher-body { display: none !important; }
@media (max-width: 767.98px) { .brand-top-header .navbar { padding: 0 14px; } .brand-top-search { flex: 1; max-width: none; } .brand-topbar-context { display: none; } .brand-top-user { margin-left: 4px; } }

/* Two-tone sidebar icons */
.sidebar-wrapper .parent-icon .brand-sidebar-icon { display: inline-block; height: 21px; position: relative; width: 21px; }
.sidebar-wrapper .parent-icon .brand-sidebar-icon ion-icon { height: 21px; left: 0; position: absolute; top: 0; width: 21px; }
.sidebar-wrapper .parent-icon .brand-sidebar-icon ion-icon:first-child { color: rgba(19, 55, 143, .2); font-size: 21px; }
.sidebar-wrapper .parent-icon .brand-sidebar-icon ion-icon:last-child { color: var(--brand-blue); font-size: 17px; left: 2px; top: 2px; }
.sidebar-wrapper .metismenu a:hover .brand-sidebar-icon ion-icon:first-child, .sidebar-wrapper .metismenu .mm-active .brand-sidebar-icon ion-icon:first-child { color: rgba(19, 55, 143, .35); }
.sidebar-wrapper .metismenu a:hover .brand-sidebar-icon ion-icon:last-child, .sidebar-wrapper .metismenu .mm-active .brand-sidebar-icon ion-icon:last-child { color: var(--brand-blue-dark); }
.sidebar-wrapper .metismenu .parent-icon { align-items: center; display: flex; justify-content: center; }

/* Sidebar navigation */
.sidebar-wrapper { background: #fbfcff; border-right: 1px solid #e7ecf4; box-shadow: 6px 0 24px rgba(24, 35, 63, .035); }
.sidebar-wrapper .sidebar-header { background: #fff; border-bottom: 1px solid #edf0f5; border-right: 1px solid #e7ecf4; }
.sidebar-wrapper .metismenu { margin-top: 82px; padding: 0 13px; }
.sidebar-wrapper .metismenu li + li { margin-top: 7px; }
.sidebar-wrapper .metismenu a { border: 1px solid transparent; border-radius: 10px; color: #78839b; font-size: .8rem; font-weight: 700; letter-spacing: .01em; min-height: 48px; padding: 10px 13px; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; }
.sidebar-wrapper .metismenu a .parent-icon { background: #f0f3f9; border-radius: 8px; height: 31px; margin-right: 3px; width: 31px; }
.sidebar-wrapper .metismenu a .menu-title { margin-left: 11px; }
.sidebar-wrapper .metismenu a:hover { background: #f3f6fc; border-color: #e4eaf4; color: var(--brand-blue); transform: translateX(2px); }
.sidebar-wrapper .metismenu .mm-active > a { background: var(--brand-blue-soft); border-color: rgba(19, 55, 143, .12); color: var(--brand-blue); }
.sidebar-wrapper .metismenu .mm-active > a::before { background: var(--brand-blue); border-radius: 0 4px 4px 0; content: ''; height: 24px; left: -13px; position: absolute; top: 12px; width: 3px; }
.sidebar-wrapper .metismenu .mm-active > a .parent-icon, .sidebar-wrapper .metismenu a:hover .parent-icon { background: #fff; }
.sidebar-wrapper .sidebar-header .brand-lockup { padding-left: 2px; }
.sidebar-wrapper .sidebar-header .brand-logo-full { max-width: 154px; }
.sidebar-wrapper .sidebar-header .brand-logo-icon { height: 40px; width: 40px; }
@media screen and (min-width: 1025px) {
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu { padding: 0 10px; }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a { justify-content: center; padding-left: 8px; padding-right: 8px; }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a .parent-icon { margin-right: 0; }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .mm-active > a::before { left: -10px; }
}
@media screen and (max-width: 1024px) {
    .sidebar-wrapper { box-shadow: 8px 0 28px rgba(24, 35, 63, .12); }
}

/* Dashboard workspace */
.brand-dashboard-header { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 20px; gap: 20px; }
.brand-dashboard-eyebrow { color: var(--brand-blue); display: block; font-size: .67rem; font-weight: 800; letter-spacing: .14em; line-height: 1.4; }
.brand-dashboard-header h1 { color: #18233f; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 600; letter-spacing: -.04em; margin: 10px 0 8px; }
.brand-dashboard-header p, .brand-dashboard-feature p { color: #78839b; margin: 0; }
.brand-dashboard-action { align-items: center; background: var(--brand-blue); border-radius: 8px; color: #fff; display: inline-flex; flex-shrink: 0; font-size: .78rem; font-weight: 700; gap: 10px; padding: 13px 15px; text-decoration: none; }
.brand-dashboard-action:hover { background: var(--brand-blue-dark); color: #fff; }
.brand-stat-card, .brand-dashboard-feature, .brand-dashboard-quick { border: 0; border-radius: 12px; box-shadow: 0 7px 22px rgba(24, 35, 63, .06); height: 100%; }
.brand-stat-card { border-top: 3px solid var(--stat-color); }
.brand-stat-blue { --stat-color: #3d6bc4; } .brand-stat-green { --stat-color: #35a779; } .brand-stat-orange { --stat-color: #e18c48; } .brand-stat-violet { --stat-color: #8372c8; }
.brand-stat-card .card-body { padding: 17px 19px 16px; }
.brand-stat-top { align-items: center; color: #68738d; display: flex; font-size: .78rem; font-weight: 700; justify-content: space-between; }
.brand-stat-icon { align-items: center; background: color-mix(in srgb, var(--stat-color) 12%, white); border-radius: 9px; display: inline-flex; height: 34px; justify-content: center; width: 34px; }
.brand-stat-icon ion-icon { color: var(--stat-color); font-size: 1.2rem; }
.brand-stat-number { color: #18233f; font-family: 'Space Grotesk', sans-serif; font-size: 2.35rem; font-weight: 600; letter-spacing: -.05em; line-height: 1; margin-top: 17px; }
.brand-stat-note { color: #9aa4b8; font-size: .7rem; margin-top: 3px; }
.brand-stat-progress { background: #edf1f7; border-radius: 99px; height: 5px; margin-top: 12px; overflow: hidden; }
.brand-stat-progress span { background: var(--stat-color); border-radius: inherit; display: block; height: 100%; min-width: 3px; }
.brand-stat-progress-label { color: #9aa4b8; display: flex; font-size: .65rem; justify-content: space-between; margin-top: 7px; }
.brand-stat-progress-label strong { color: var(--stat-color); font-weight: 800; }
.brand-dashboard-feature { align-items: center; background: var(--brand-blue); color: #fff; display: flex; justify-content: space-between; min-height: 182px; overflow: hidden; padding: 22px 25px; position: relative; }
.brand-dashboard-feature::after { border: 1px solid rgba(255,255,255,.14); border-radius: 50%; content: ''; height: 300px; position: absolute; right: -130px; top: -100px; width: 300px; }
.brand-dashboard-feature .brand-dashboard-eyebrow { color: #9eb8ff; }
.brand-dashboard-feature h2, .brand-dashboard-quick h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; font-weight: 600; letter-spacing: -.035em; margin: 12px 0 9px; }
.brand-dashboard-feature h2 { color: #fff; }
.brand-dashboard-feature p { color: rgba(255,255,255,.7); max-width: 350px; }
.brand-dashboard-ring { align-items: center; border: 7px solid rgba(255,255,255,.18); border-left-color: #9eb8ff; border-radius: 50%; display: flex; flex-direction: column; flex-shrink: 0; height: 112px; justify-content: center; margin-left: 24px; position: relative; width: 112px; z-index: 1; }
.brand-dashboard-ring strong { color: #fff; font-size: 1.35rem; } .brand-dashboard-ring span { color: rgba(255,255,255,.65); font-size: .66rem; text-transform: uppercase; }
.brand-dashboard-quick { background: #fff; padding: 21px 24px; }
.brand-dashboard-quick h2 { color: #18233f; margin-bottom: 10px; }
.brand-dashboard-quick a { align-items: center; border-top: 1px solid #edf0f5; color: #43506d; display: flex; font-size: .78rem; font-weight: 600; justify-content: space-between; padding: 14px 0; text-decoration: none; }
.brand-dashboard-quick a span { align-items: center; display: flex; gap: 9px; } .brand-dashboard-quick a ion-icon { color: var(--brand-blue); font-size: 1.1rem; } .brand-dashboard-quick a:hover { color: var(--brand-blue); }
html.dark-theme .brand-dashboard-header h1, html.dark-theme .brand-stat-number, html.dark-theme .brand-dashboard-quick h2 { color: #f0f2f8; }
html.dark-theme .brand-dashboard-header p { color: #aeb5c4; } html.dark-theme .brand-stat-card, html.dark-theme .brand-dashboard-quick { background: #222; }
html.dark-theme .brand-stat-top, html.dark-theme .brand-dashboard-quick a { color: #c4c9d4; } html.dark-theme .brand-dashboard-quick a { border-color: rgba(255,255,255,.1); }
@media (max-width: 767.98px) { .brand-dashboard-header { align-items: flex-start; flex-direction: column; } .brand-dashboard-action { justify-content: center; width: 100%; } .brand-dashboard-feature { align-items: flex-start; flex-direction: column; gap: 18px; } .brand-dashboard-ring { margin-left: 0; } }

/* Card library and editor */
.brand-card-list-panel { border: 0; border-radius: 14px; box-shadow: 0 8px 28px rgba(24, 35, 63, .06); }
.brand-card-list-panel > .card-body { padding: 26px; }
.brand-card-list-panel .card-body > .d-flex { align-items: flex-end !important; border-bottom: 1px solid #edf0f5; gap: 14px; padding-bottom: 22px; }
.brand-card-list-panel form { min-width: min(420px, 100%); }
.brand-card-list-panel form .form-control { border: 1px solid #dfe4ef; border-radius: 8px; min-height: 42px; }
.brand-card-list-panel form .btn, .brand-card-list-panel .d-flex > .btn { border-radius: 8px; font-size: .76rem; font-weight: 700; min-height: 42px; white-space: nowrap; }
.brand-card-list-panel .btn-warning { background: #f0a35b; border-color: #f0a35b; color: #fff; }
.brand-card-list-panel .btn-warning:hover { background: #d9863e; border-color: #d9863e; color: #fff; }
.brand-card-grid { margin-top: 24px; row-gap: 24px; }
.brand-card-grid > .col { display: flex; }
.brand-card-tile { background: #fff; border: 1px solid #edf0f5 !important; box-shadow: 0 7px 20px rgba(24, 35, 63, .05); height: 100%; overflow: hidden; transition: box-shadow 180ms ease, transform 180ms ease; width: 100%; }
.brand-card-tile:hover { box-shadow: 0 14px 30px rgba(24, 35, 63, .11); transform: translateY(-3px); }
.brand-card-tile .card-body { padding: 18px 18px 20px; }
.brand-card-tile .profile-img { align-items: center; background: #f1f4fb; border-radius: 12px; display: flex; height: 142px; justify-content: center; margin: 8px auto 0; overflow: hidden; width: 100%; }
.brand-card-tile .profile-img img { border-radius: 0 !important; height: 100% !important; object-fit: cover; width: 100% !important; }
.brand-card-tile h5 { color: #18233f; font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; }
.brand-card-tile h5 a { color: inherit; }
.brand-card-tile .text-warning { color: #d9863e !important; font-size: .76rem; font-weight: 700; }
.brand-card-tile .btn-group { border-top: 1px solid #edf0f5; padding-top: 14px; }
.brand-card-tile .btn-group .btn { align-items: center; border-radius: 7px !important; display: inline-flex; justify-content: center; min-height: 34px; padding: 6px 9px; }
.brand-card-tile > .card-body > a.d-block { color: var(--brand-blue); font-size: .75rem; font-weight: 700; text-decoration: none; }
.brand-card-tile .form-check-input:checked { background-color: #35a779; border-color: #35a779; }
.brand-card-form { background: #fff; border: 0; border-radius: 14px; box-shadow: 0 8px 28px rgba(24, 35, 63, .06); padding: 26px; width: 100%; }
.brand-card-form .card-body { padding: 0; }
.brand-card-form label { color: #26304b; font-size: .78rem; font-weight: 700; margin-bottom: 8px; }
.brand-card-form .form-control { border: 1px solid #dfe4ef; border-radius: 8px; min-height: 44px; }
.brand-card-form textarea.form-control { min-height: 110px; padding-top: 12px; }
.brand-card-form .form-control:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 4px var(--brand-blue-soft); }
.brand-card-form .btn-primary { border-radius: 8px; font-size: .8rem; font-weight: 700; min-height: 44px; padding: 0 24px; }
.brand-card-editor > .col-md-3 > .card, .brand-card-editor > .col-md-9 > .card { border: 0; border-radius: 14px; box-shadow: 0 8px 28px rgba(24, 35, 63, .06); }
.brand-card-editor .nav-pills .nav-link { border-radius: 8px; color: #68738d; font-size: .78rem; font-weight: 700; padding: 12px 14px; }
.brand-card-editor .nav-pills .nav-link.active, .brand-card-editor .nav-pills .nav-link:hover { background: var(--brand-blue-soft); color: var(--brand-blue); }
html.dark-theme .brand-card-list-panel, html.dark-theme .brand-card-tile, html.dark-theme .brand-card-form, html.dark-theme .brand-card-editor > .col-md-3 > .card, html.dark-theme .brand-card-editor > .col-md-9 > .card { background: #222; border-color: rgba(255,255,255,.08) !important; }
html.dark-theme .brand-card-tile h5, html.dark-theme .brand-card-form label { color: #f0f2f8; }
html.dark-theme .brand-card-list-panel .card-body > .d-flex, html.dark-theme .brand-card-tile .btn-group { border-color: rgba(255,255,255,.1); }
@media (max-width: 767.98px) { .brand-card-list-panel > .card-body { padding: 18px; } .brand-card-list-panel .card-body > .d-flex { align-items: stretch !important; flex-direction: column; } .brand-card-list-panel form { min-width: 0; width: 100%; } .brand-card-list-panel .d-flex > .btn { width: 100%; } .brand-card-form { padding: 18px; } }

/* User forms */
#user-form { background: #fff; border: 0; border-radius: 14px; box-shadow: 0 8px 28px rgba(24, 35, 63, .06); margin: 0; padding: 28px; width: 100%; }
#user-form .card-body { padding: 0; }
#user-form .row { row-gap: 18px; }
#user-form .form-group { height: 100%; }
#user-form label { color: #26304b; display: block; font-size: .78rem; font-weight: 700; margin-bottom: 8px; }
#user-form label .text-danger { font-size: .85rem; margin-left: 3px; }
#user-form .form-control, #user-form .form-select { background: #fff; border: 1px solid #dfe4ef; border-radius: 8px; color: #26304b; min-height: 44px; transition: border-color 160ms ease, box-shadow 160ms ease; }
#user-form textarea.form-control { min-height: 105px; padding-top: 12px; }
#user-form .form-control:focus, #user-form .form-select:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 4px var(--brand-blue-soft); }
#user-form .form-control:disabled, #user-form .form-select:disabled { background: #f4f6fa; color: #8b95a9; cursor: not-allowed; }
#user-form input[type='file'] { padding: 9px 12px; }
#user-form .img-thumbnail { background: #f4f6fa; border: 1px solid #e1e6ef; border-radius: 10px; object-fit: cover; }
#user-form .btn-primary { border-radius: 8px; font-size: .8rem; font-weight: 700; min-height: 44px; padding: 0 26px; }
#user-form .invalid-feedback { font-size: .7rem; font-weight: 600; }
html.light-theme #user-form .form-check-input:checked { background-color: var(--brand-blue); border-color: var(--brand-blue); }
@media (max-width: 767.98px) { #user-form { border-radius: 10px; padding: 18px; } #user-form .form-group.d-flex { align-items: flex-start !important; flex-direction: column; } #user-form .form-group.d-flex > div { width: 100%; } #user-form .form-group.d-flex .img-thumbnail { margin: 12px 0 0 !important; width: 92px !important; } }

/* Admin user form */
.brand-user-form { background: #fff; border: 0; border-radius: 14px; box-shadow: 0 8px 28px rgba(24, 35, 63, .06); margin: 0; padding: 28px; width: 100%; }
.brand-user-form .card-body { padding: 0; }
.brand-form-intro { border-bottom: 1px solid #edf0f5; margin-bottom: 26px; padding-bottom: 20px; }
.brand-form-intro h2 { color: #18233f; font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; font-weight: 600; letter-spacing: -.035em; margin: 10px 0 7px; }
.brand-form-intro p { color: #78839b; font-size: .82rem; margin: 0; }
.brand-user-form .row { row-gap: 18px; }
.brand-user-form label { color: #26304b; display: block; font-size: .78rem; font-weight: 700; margin-bottom: 8px; }
.brand-user-form label .text-danger { font-size: .85rem; margin-left: 3px; }
.brand-user-form .form-control, .brand-user-form .form-select { background: #fff; border: 1px solid #dfe4ef; border-radius: 8px; color: #26304b; min-height: 44px; transition: border-color 160ms ease, box-shadow 160ms ease; }
.brand-user-form .form-control:focus, .brand-user-form .form-select:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 4px var(--brand-blue-soft); }
.brand-user-form .form-control:disabled, .brand-user-form .form-select:disabled { background: #f4f6fa; color: #8b95a9; }
.brand-user-form input[type='file'] { padding: 9px 12px; }
.brand-user-form .img-thumbnail { background: #f4f6fa; border: 1px solid #e1e6ef; border-radius: 10px; object-fit: cover; }
.brand-user-form .btn-primary { border-radius: 8px; font-size: .8rem; font-weight: 700; min-height: 44px; padding: 0 26px; }
.brand-user-form .invalid-feedback { font-size: .7rem; font-weight: 600; }
@media (max-width: 767.98px) { .brand-user-form { border-radius: 10px; padding: 18px; } .brand-user-form .form-group.d-flex { align-items: flex-start !important; flex-direction: column; } .brand-user-form .form-group.d-flex > div { width: 100%; } .brand-user-form .form-group.d-flex .img-thumbnail { margin: 12px 0 0 !important; width: 92px !important; } }