/* =====================================================================
   M-Property - compatibility + custom layer on top of the Attex theme.
   Maps the system's existing markup (.data-table, .form-box, .stat-card,
   .badge-*, .btn-*, ...) onto Attex look & feel, so every module page
   matches the template without per-page rewrites.
   ===================================================================== */

:root { --mp-foot-h: var(--ct-footer-height, 60px); }

/* ---------- Brand / logo ---------- */
.mp-logo { align-items: center; gap: 9px; line-height: 1; text-decoration: none; }
a.mp-logo, .logo-lg .mp-logo { display: inline-flex; }

.logo-sm.mp-logo { gap: 0; }
.mp-logo-text { line-height: 1; }
.mp-logo-mark {
    width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--ct-primary), #6d4ad5 60%, var(--ct-info));
    box-shadow: 0 6px 14px -5px rgba(62, 96, 213, .7);
}
.mp-logo-text { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ct-emphasis-color, #111); }
[data-menu-color="dark"] .leftside-menu .mp-logo-text, .leftside-menu .mp-logo-text.text-white { color: #fff; }
[data-topbar-color="dark"] .logo-topbar .mp-logo-text { color: #fff; }
.leftside-menu .logo, .logo-topbar a { display: flex; align-items: center; }
.leftside-menu .logo .logo-lg, .leftside-menu .logo .logo-sm { line-height: var(--ct-topbar-height, 70px); }
.leftside-menu .logo { padding: 0 1.25rem; }
html[data-sidenav-size="condensed"] .leftside-menu .logo { padding: 0; justify-content: center; }
.mp-avatar {
    width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ct-primary-bg-subtle, #e2e7f8); color: var(--ct-primary); font-weight: 700; font-size: 13px;
}

/* ---------- Layout: fixed footer + sidebar logout on the same line ---------- */
.content-page { padding-bottom: calc(var(--mp-foot-h) + .5rem); }
.footer.mp-footer {
    position: fixed; bottom: 0; right: 0; left: var(--ct-leftbar-width); height: var(--mp-foot-h);
    padding: 0 1.5rem; z-index: 999; display: flex; align-items: center;
    background: var(--ct-card-bg); border-top: 1px solid var(--ct-border-color); color: var(--ct-secondary-color, #6c757d);
    box-shadow: 0 -4px 16px -10px rgba(0, 0, 0, .25); font-size: .8125rem;
}
.footer.mp-footer .container-fluid { padding: 0; }
.mp-foot-clock { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ct-body-color); white-space: nowrap; }
.mp-foot-clock i { color: var(--ct-primary); vertical-align: -2px; }
html[data-sidenav-size="condensed"] .footer.mp-footer { left: var(--ct-leftbar-width-sm); }
html[data-sidenav-size="full"] .footer.mp-footer, html[data-sidenav-size="fullscreen"] .footer.mp-footer { left: 0; }
@media (max-width: 767.98px) { .footer.mp-footer { left: 0 !important; } .mp-foot-left { display: none; } .mp-foot-clock { margin: 0 auto; } }

.leftside-menu { padding-bottom: var(--mp-foot-h); }
.sidebar-logout {
    position: absolute; left: 0; right: 0; bottom: 0; height: var(--mp-foot-h); z-index: 2;
    display: flex; align-items: center; gap: .65rem; padding: 0 1.5rem; font-weight: 600; font-size: .9rem;
    color: var(--ct-menu-item-color); background: var(--ct-menu-bg); border-top: 1px solid rgba(255, 255, 255, .08);
    transition: all .2s;
}
[data-menu-color="light"] .sidebar-logout { border-top-color: var(--ct-border-color); }
.sidebar-logout i { font-size: 1.25rem; color: #fa6767; }
.sidebar-logout:hover { color: #fff; background: rgba(250, 103, 103, .16); }
[data-menu-color="light"] .sidebar-logout:hover { color: #d94e4e; }
html[data-sidenav-size="condensed"] .sidebar-logout { justify-content: center; padding: 0; }
html[data-sidenav-size="condensed"] .sidebar-logout span { display: none; }
html[data-sidenav-size="condensed"]:not([data-sidenav-size="full"]) .leftside-menu:hover .sidebar-logout span { display: inline; }

.side-nav .side-nav-item.active > .side-nav-link, .side-nav-link.active { color: var(--ct-menu-item-active-color); }
.side-nav-link i { min-width: 1.75rem; }

/* ---------- Page body ---------- */
.mp-page > p, .mp-page > ul { color: var(--ct-body-color); }
.mp-page h2 {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--ct-secondary-color, #6c757d);
    margin: 1.75rem 0 .85rem;
}
.mp-page h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; }
.mp-page small { color: var(--ct-secondary-color, #6c757d); }
.mp-page ul { padding-left: 1.25rem; }

/* ---------- Alerts ---------- */
.error, .success, .readonly-note {
    border-radius: var(--ct-border-radius); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .875rem; border: 1px solid transparent;
}
.error { background: var(--ct-danger-bg-subtle); color: var(--ct-danger-text-emphasis); border-color: var(--ct-danger-border-subtle); }
.success { background: var(--ct-success-bg-subtle); color: var(--ct-success-text-emphasis); border-color: var(--ct-success-border-subtle); }
.readonly-note { background: var(--ct-info-bg-subtle); color: var(--ct-info-text-emphasis); border-color: var(--ct-info-border-subtle); font-weight: 500; }

/* ---------- Forms: every bare control looks like Attex .form-control ---------- */
.mp-page input[type=text], .mp-page input[type=email], .mp-page input[type=password], .mp-page input[type=number],
.mp-page input[type=tel], .mp-page input[type=date], .mp-page input[type=month], .mp-page input[type=search],
.mp-page input[type=time], .mp-page input[type=datetime-local], .mp-page input[type=url], .mp-page input[type=file],
.mp-page select, .mp-page textarea {
    display: block; width: 100%; padding: .45rem .9rem; font-family: inherit; font-size: .9rem; line-height: 1.5;
    color: var(--ct-body-color); background-color: var(--ct-input-bg, var(--ct-body-bg)); background-clip: padding-box;
    border: 1px solid var(--ct-border-color); border-radius: var(--ct-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.mp-page select { padding-right: 2rem; }
.mp-page textarea { min-height: 90px; }
.mp-page input:focus, .mp-page select:focus, .mp-page textarea:focus {
    outline: 0; border-color: #9eb0ea; box-shadow: 0 0 0 .2rem rgba(62, 96, 213, .2);
}
.mp-page input[type=checkbox], .mp-page input[type=radio] { width: 1.05rem; height: 1.05rem; accent-color: var(--ct-primary); vertical-align: -2px; }
.mp-page input[type=file] { padding: .35rem .75rem; }

.form-box {
    max-width: 560px; background: var(--ct-card-bg); padding: 1.5rem; border-radius: var(--ct-border-radius);
    box-shadow: var(--ct-box-shadow, 0 0 35px 0 rgba(154, 161, 171, .15)); border: 1px solid var(--ct-border-color);
    margin-bottom: 1.5rem;
}
.form-box label { display: block; margin-bottom: 1rem; font-size: .875rem; font-weight: 600; color: var(--ct-body-color); }
.form-box label > input, .form-box label > select, .form-box label > textarea { margin-top: .4rem; font-weight: 400; }
.form-box button[type=submit], .form-box > button, .filter-bar button, .thread-reply-form button {
    display: inline-block; padding: .45rem 1.1rem; font-weight: 600; font-family: inherit; font-size: .9rem; cursor: pointer;
    color: #fff; background: var(--ct-primary); border: 1px solid var(--ct-primary); border-radius: var(--ct-border-radius);
    transition: all .15s;
}
.form-box button:hover, .filter-bar button:hover, .thread-reply-form button:hover { background: #3553bb; border-color: #3553bb; }
.actions-row { display: flex; gap: .6rem; margin-top: .25rem; flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; gap: .6rem; margin-bottom: 1.1rem; flex-wrap: wrap; align-items: center; }
.filter-bar {
    display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; background: var(--ct-card-bg); padding: 1rem 1.25rem;
    border-radius: var(--ct-border-radius); margin-bottom: 1.5rem; border: 1px solid var(--ct-border-color); font-size: .875rem;
    box-shadow: var(--ct-box-shadow, 0 0 35px 0 rgba(154, 161, 171, .15));
}
.filter-bar label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.filter-bar input, .filter-bar select { min-width: 150px; }

/* ---------- Buttons (Attex .btn provided; map legacy variants) ---------- */
.btn { font-family: inherit; }
.btn-secondary { color: var(--ct-body-color); background: var(--ct-card-bg); border-color: var(--ct-border-color); }
.btn-secondary:hover, .btn-secondary:focus { color: var(--ct-primary); background: var(--ct-primary-bg-subtle, #e2e7f8); border-color: #b8c4f0; }
.btn-danger { color: #fff; background: var(--ct-danger); border-color: var(--ct-danger); }
.btn-danger:hover { background: #d0496a; border-color: #d0496a; color: #fff; }
.btn-sm { --ct-btn-padding-y: .2rem; --ct-btn-padding-x: .6rem; font-size: .78rem; padding: .22rem .65rem; }
.btn[disabled] { opacity: .65; pointer-events: none; }
.btn-spinner, .is-loading .btn-spinner {
    display: none; width: 13px; height: 13px; border-radius: 50%; margin-right: 7px; vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: mpSpin .7s linear infinite;
}
.btn.is-loading .btn-spinner, button.is-loading .btn-spinner { display: inline-block; }
.btn-secondary .btn-spinner { border-color: var(--ct-border-color); border-top-color: var(--ct-primary); }
@keyframes mpSpin { to { transform: rotate(360deg); } }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: .35em .7em; font-size: .72rem; font-weight: 600; line-height: 1; border-radius: 50rem; margin-top: 0; text-transform: none; }
.badge-paid { background: var(--ct-success-bg-subtle); color: var(--ct-success-text-emphasis); }
.badge-partial { background: var(--ct-warning-bg-subtle); color: var(--ct-warning-text-emphasis); }
.badge-unpaid { background: var(--ct-danger-bg-subtle); color: var(--ct-danger-text-emphasis); }
.badge-unknown { background: var(--ct-light); color: var(--ct-secondary-color, #6c757d); }
.badge-repair { background: var(--ct-info-bg-subtle); color: var(--ct-info-text-emphasis); }

/* ---------- Stat cards (dashboards) ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.stat-card {
    position: relative; overflow: hidden; background: var(--ct-card-bg); padding: 1.25rem 1.25rem 1.1rem 1.5rem;
    border-radius: var(--ct-border-radius); border: 1px solid var(--ct-border-color);
    box-shadow: var(--ct-box-shadow, 0 0 35px 0 rgba(154, 161, 171, .15));
}
.stat-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ct-primary); }
.stat-cards .stat-card:nth-child(4n+2)::before { background: var(--ct-success); }
.stat-cards .stat-card:nth-child(4n+3)::before { background: var(--ct-warning); }
.stat-cards .stat-card:nth-child(4n+4)::before { background: var(--ct-info); }
.stat-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ct-secondary-color, #6c757d); margin-bottom: .45rem; }
.stat-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; color: var(--ct-emphasis-color, var(--ct-body-color)); line-height: 1.2; }
.stat-sub { font-size: .8rem; color: var(--ct-secondary-color, #6c757d); margin-top: .3rem; }
.progress-bar { display: block; height: 7px; margin-top: .75rem; border-radius: 6px; overflow: hidden; background: var(--ct-light); width: auto; }
.progress-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ct-primary), var(--ct-info)); transition: width .4s ease; }
.chart-card, .complaint-thread, .building-header, .receipt-box {
    background: var(--ct-card-bg); padding: 1.25rem 1.5rem; border-radius: var(--ct-border-radius); margin-bottom: 1.5rem;
    border: 1px solid var(--ct-border-color); box-shadow: var(--ct-box-shadow, 0 0 35px 0 rgba(154, 161, 171, .15));
}
.report-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .report-columns { grid-template-columns: 1fr; } }

/* ---------- Building / room cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.building-card {
    display: block; overflow: hidden; background: var(--ct-card-bg); border-radius: var(--ct-border-radius); color: inherit;
    border: 1px solid var(--ct-border-color); box-shadow: var(--ct-box-shadow, 0 0 35px 0 rgba(154, 161, 171, .15)); transition: transform .15s, box-shadow .15s;
}
.building-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px -8px rgba(62, 96, 213, .3); color: inherit; }
.building-card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.photo-placeholder {
    width: 100%; height: 140px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem;
    color: var(--ct-primary); background: linear-gradient(135deg, var(--ct-primary-bg-subtle, #e2e7f8), var(--ct-info-bg-subtle));
}
.building-card-body { padding: 1rem 1.1rem; }
.building-card-body h3 { margin: 0 0 .25rem; font-size: 1rem; }
.building-card-body p { margin: .15rem 0; font-size: .82rem; color: var(--ct-secondary-color, #6c757d); }
.card-actions { padding: 0 1.1rem 1rem; display: flex; gap: .5rem; }
.building-header { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.building-hero { width: 220px; height: 140px; object-fit: cover; border-radius: var(--ct-border-radius); }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .85rem; margin-bottom: 1.5rem; }
.room-tile {
    background: var(--ct-card-bg); border-radius: var(--ct-border-radius); padding: .9rem 1rem; font-size: .82rem;
    border: 1px solid var(--ct-border-color); border-left: 4px solid var(--ct-secondary-color, #98a6ad); transition: transform .15s, box-shadow .15s;
}
.room-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .3); }
.room-tile.room-vacant { border-left-color: #98a6ad; }
.room-tile.room-occupied { border-left-color: var(--ct-success); }
.room-tile.room-maintenance { border-left-color: var(--ct-warning); }
.room-tile-actions { margin-top: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- Tables ---------- */
.mp-table-wrap {
    background: var(--ct-card-bg); border: 1px solid var(--ct-border-color); border-radius: var(--ct-border-radius);
    box-shadow: var(--ct-box-shadow, 0 0 35px 0 rgba(154, 161, 171, .15)); margin-bottom: 1.5rem; overflow: hidden;
}
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--ct-border-color); }
.table-search { display: flex; align-items: center; gap: .5rem; padding: .3rem .75rem; min-width: 250px; max-width: 100%; border: 1px solid var(--ct-border-color); border-radius: var(--ct-border-radius); background: var(--ct-body-bg); }
.table-search:focus-within { border-color: #9eb0ea; box-shadow: 0 0 0 .2rem rgba(62, 96, 213, .2); }
.table-search svg { width: 15px; height: 15px; color: var(--ct-secondary-color, #98a6ad); flex-shrink: 0; }
.table-search input { border: 0 !important; box-shadow: none !important; outline: 0; background: transparent !important; padding: .1rem 0 !important; font-size: .875rem; width: 100%; color: var(--ct-body-color); }
.table-count { font-size: .78rem; color: var(--ct-secondary-color, #98a6ad); white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; margin-bottom: 0; border-collapse: collapse; font-size: .875rem; color: var(--ct-body-color); background: var(--ct-card-bg); }
.mp-page > .data-table, .mp-page > form > .data-table { border: 1px solid var(--ct-border-color); border-radius: var(--ct-border-radius); margin-bottom: 1.5rem; }
.data-table th, .data-table td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--ct-border-color); vertical-align: middle; white-space: nowrap; }
.data-table td:nth-child(1), .data-table th:nth-child(1) { white-space: normal; }
.data-table th {
    background: var(--ct-tertiary-bg, var(--ct-light)); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
    color: var(--ct-secondary-color, #6c757d); cursor: pointer; user-select: none;
}
.data-table th:hover { color: var(--ct-primary); }
.data-table th .sort-arrow { display: inline-block; margin-left: 4px; opacity: .4; font-size: .65rem; }
.data-table th.sorted-asc .sort-arrow, .data-table th.sorted-desc .sort-arrow { opacity: 1; color: var(--ct-primary); }
.data-table tbody tr { transition: background .1s; }
.data-table tbody tr:hover { background: rgba(62, 96, 213, .05); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table a { font-weight: 600; }
.data-table .row-hidden { display: none; }
.data-table form { display: inline; margin: 0; }

/* ---------- Complaint threads ---------- */
.complaint-thread h3 { margin: 0 0 .25rem; }
.thread-meta { font-size: .78rem; color: var(--ct-secondary-color, #6c757d); margin: 0 0 .75rem; }
.thread-reply { background: var(--ct-light); padding: .7rem 1rem; border-radius: var(--ct-border-radius); margin-top: .6rem; font-size: .875rem; }
.thread-reply-form { margin-top: 1rem; display: flex; gap: .5rem; }
.thread-reply-form input { flex: 1; }

/* ---------- Receipts / statements ---------- */
.receipt-box { max-width: 600px; padding: 2rem; }
.receipt-header { text-align: center; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ct-border-color); }
.receipt-header h1 { margin: 0; font-size: 1.4rem; }
.receipt-header p { margin: .25rem 0 0; color: var(--ct-secondary-color, #6c757d); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.receipt-meta, .receipt-amount { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.receipt-meta td { padding: .4rem 0; border-bottom: 1px dashed var(--ct-border-color); font-size: .9rem; }
.receipt-meta td:first-child { color: var(--ct-secondary-color, #6c757d); width: 45%; }
.receipt-amount td { padding: .6rem 0; }
.receipt-amount .amount { font-size: 1.5rem; font-weight: 700; text-align: right; color: var(--ct-success); }
.receipt-footer { text-align: center; color: var(--ct-secondary-color, #6c757d); font-size: .85rem; margin-top: .75rem; }
@media print {
    .leftside-menu, .navbar-custom, .footer, .no-print, .page-title-box, #cmdkBackdrop { display: none !important; }
    .content-page { margin: 0 !important; padding: 0 !important; }
    .content-page > .content { padding: 0 !important; }
    body { background: #fff !important; }
    .receipt-box { box-shadow: none; border: 0; }
}

/* ---------- Command palette ---------- */
.cmdk-backdrop { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(20, 23, 31, .5); align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cmdk-backdrop.open { display: flex; }
.cmdk-box { width: 100%; max-width: 540px; margin: 0 1rem; background: var(--ct-card-bg); border-radius: .6rem; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .5); overflow: hidden; }
.cmdk-input-row { display: flex; align-items: center; gap: .65rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--ct-border-color); }
.cmdk-input-row i { color: var(--ct-secondary-color, #98a6ad); font-size: 1.1rem; }
.cmdk-input-row input { flex: 1; border: 0; outline: 0; font-family: inherit; font-size: 1rem; background: transparent; color: var(--ct-body-color); }
.cmdk-input-row kbd { font-size: .7rem; padding: .15rem .45rem; }
.cmdk-results { max-height: 340px; overflow-y: auto; padding: .5rem; }
.cmdk-item { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border-radius: var(--ct-border-radius); cursor: pointer; font-size: .9rem; color: var(--ct-body-color); }
.cmdk-item i { color: var(--ct-secondary-color, #98a6ad); }
.cmdk-item.active { background: var(--ct-primary-bg-subtle, #e2e7f8); color: var(--ct-primary); }
.cmdk-item.active i { color: var(--ct-primary); }
.cmdk-empty { padding: 1.25rem; text-align: center; color: var(--ct-secondary-color, #98a6ad); }
.app-search .input-group { cursor: pointer; }

/* ---------- Auth (login / register / forgot) ---------- */
.auth-fluid-form-box { max-width: 480px; }
.auth-fluid-right {
    background: linear-gradient(160deg, rgba(20, 24, 60, .93), rgba(62, 96, 213, .88)), url(../images/bg-auth.jpg) center/cover;
    padding: 4rem 2.5rem;
}
.auth-fluid-right.has-demo { text-align: left; display: flex; flex-direction: column; justify-content: center; }
.auth-user-testimonial { position: relative; max-width: 560px; margin: 0 auto; }
.auth-user-testimonial h2 { color: #fff; }
@media (min-width: 992px) { .auth-fluid-right { display: block; } .auth-fluid-right.has-demo { display: flex; } }
.auth-fluid-form-box .form-label { font-weight: 600; }
.auth-fluid-form-box input[type=text], .auth-fluid-form-box input[type=password], .auth-fluid-form-box input[type=email], .auth-fluid-form-box input[type=tel] {
    display: block; width: 100%; padding: .55rem .9rem; font-size: .9rem; font-family: inherit; color: var(--ct-body-color);
    background: var(--ct-input-bg, var(--ct-body-bg)); border: 1px solid var(--ct-border-color); border-radius: var(--ct-border-radius);
}
.auth-fluid-form-box input:focus { outline: 0; border-color: #9eb0ea; box-shadow: 0 0 0 .2rem rgba(62, 96, 213, .2); }
.auth-fluid-form-box label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: .875rem; }
.auth-fluid-form-box label > input { margin-top: .4rem; font-weight: 400; }
.auth-fluid-form-box form > button[type=submit], .auth-fluid-form-box form button.btn-block {
    width: 100%; padding: .6rem; font-weight: 600; color: #fff; background: var(--ct-primary); border: 0; border-radius: var(--ct-border-radius); cursor: pointer; font-family: inherit; font-size: .95rem;
}
.auth-fluid-form-box form > button[type=submit]:hover { background: #3553bb; }
.auth-fluid-form-box p.error, .auth-fluid-form-box p.success { margin-top: 0; }

.demo-head { margin-bottom: 1.25rem; }
.demo-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 50rem; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
.demo-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .3); }
.auth-fluid-right h2.demo-title { color: #fff; font-size: 1.6rem; margin: .8rem 0 .3rem; }
.demo-head p { margin: 0; color: rgba(255, 255, 255, .78); font-size: .9rem; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; max-width: 720px; }
.demo-form { display: contents; margin: 0; }
.demo-tile {
    width: 100%; height: 100%; text-align: left; cursor: pointer; font: inherit; color: #fff; position: relative;
    display: flex; align-items: flex-start; gap: .75rem; padding: .85rem; border-radius: .6rem;
    background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .17); backdrop-filter: blur(6px);
    transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
.demo-tile:hover, .demo-tile:focus-visible { background: rgba(255, 255, 255, .18); border-color: var(--tc, #fff); transform: translateY(-2px); outline: 0; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .7), 0 0 0 1px var(--tc, #fff); }
.demo-tile:active { transform: scale(.98); }
.demo-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: .55rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; background: var(--tc, #6366f1); box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .45); }
.demo-txt { display: flex; flex-direction: column; min-width: 0; }
.demo-txt strong { font-size: .9rem; font-weight: 600; line-height: 1.25; }
.demo-txt small { color: rgba(255, 255, 255, .7); font-size: .74rem; line-height: 1.4; margin-top: 3px; }
.demo-go { position: absolute; top: .6rem; right: .7rem; opacity: 0; transition: opacity .15s; font-size: 1rem; }
.demo-tile:hover .demo-go, .demo-tile:focus-visible .demo-go { opacity: .95; }
.tone-indigo { --tc: #6366f1; } .tone-violet { --tc: #8b5cf6; } .tone-emerald { --tc: #10b981; } .tone-sky { --tc: #0ea5e9; }
.tone-amber { --tc: #f59e0b; } .tone-teal { --tc: #14b8a6; } .tone-orange { --tc: #f97316; } .tone-rose { --tc: #f43f5e; }
.tone-cyan { --tc: #06b6d4; } .tone-slate { --tc: #64748b; }
@media (max-width: 1199px) { .demo-grid { grid-template-columns: 1fr; } }
/* on phones/tablets Attex hides the right pane; show demo tiles under the form instead */
@media (max-width: 991.98px) {
    .auth-fluid-right.has-demo { display: flex; padding: 2rem 1.25rem; }
}
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
@media (max-width: 991.98px) {
    .auth-fluid-form-box { min-height: auto; max-width: none; }
    .auth-fluid-form-box .my-auto { margin: 1rem 0 !important; }
}