* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background: #f4f6f8;

    color: #17202a;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   AUTH / HOME
   ========================================================= */

.auth-page,
.home-page {
    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;
}

.auth-card,
.home-card {
    width: 100%;

    max-width: 430px;

    background: #ffffff;

    border-radius: 20px;

    padding: 32px 26px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.08);
}

.brand {
    text-align: center;

    margin-bottom: 30px;
}

.brand-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 12px;

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #17365d;

    color: #ffffff;

    font-size: 20px;

    font-weight: 700;
}

.brand h1 {
    margin: 0;

    font-size: 28px;

    font-weight: 700;
}

.brand p {
    margin: 6px 0 0;

    color: #68727d;

    font-size: 14px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    font-size: 14px;
}

.form-control {
    width: 100%;

    height: 50px;

    padding: 0 14px;

    border: 1px solid #d8dde3;

    border-radius: 10px;

    font-size: 16px;

    outline: none;
}

.form-control:focus {
    border-color: #17365d;

    box-shadow:
        0 0 0 3px rgba(23, 54, 93, 0.10);
}

.primary-button {
    width: 100%;

    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius: 10px;

    background: #17365d;

    color: #ffffff;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;
}

.auth-links {
    text-align: center;

    margin-top: 20px;
}

.auth-links a {
    color: #17365d;

    font-size: 14px;

    font-weight: 600;
}

.auth-footer {
    margin-top: 28px;

    padding-top: 20px;

    border-top: 1px solid #edf0f2;

    text-align: center;

    color: #8a949e;

    font-size: 12px;
}

.validation-summary {
    margin-bottom: 18px;

    padding: 12px;

    border-radius: 8px;

    background: #fff0f0;

    color: #a4262c;

    font-size: 14px;
}

.field-error {
    display: block;

    margin-top: 5px;

    color: #a4262c;

    font-size: 13px;
}


/* =========================================================
   ADMIN
   ========================================================= */

.admin-page {
    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding: 28px 20px 50px;
}

.top-bar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

.eyebrow {
    color: #6c7782;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;
}

.top-bar h1 {
    margin: 4px 0 0;

    font-size: 30px;
}

.logout-button {
    border: 1px solid #d8dde3;

    background: #ffffff;

    border-radius: 9px;

    padding: 10px 17px;

    cursor: pointer;

    font-weight: 600;

    font-size: 14px;
}

.logout-button:hover {
    background: #f5f6f7;
}

.welcome-card {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 24px;

    margin-bottom: 30px;

    background: #17365d;

    color: #ffffff;

    border-radius: 16px;
}

.welcome-label {
    font-size: 13px;

    opacity: 0.75;
}

.welcome-name {
    margin-top: 3px;

    font-size: 23px;

    font-weight: 700;
}

.welcome-email {
    margin-top: 4px;

    font-size: 13px;

    opacity: 0.8;
}

.admin-badge {
    padding: 8px 13px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.15);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;
}

.section-title {
    margin: 28px 0 13px;

    font-size: 18px;

    font-weight: 700;
}

.stats-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;
}

.stat-card {
    background: #ffffff;

    border-radius: 14px;

    padding: 20px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.05);
}

.stat-number {
    font-size: 29px;

    font-weight: 700;

    color: #17365d;
}

.stat-label {
    margin-top: 5px;

    color: #6c7782;

    font-size: 13px;
}

.admin-menu {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.menu-card {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 90px;

    padding: 18px;

    background: #ffffff;

    border-radius: 14px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.menu-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.08);
}

.menu-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #eef3f8;

    color: #17365d;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.5px;
}

.menu-content {
    min-width: 0;
}

.menu-title {
    font-weight: 700;

    font-size: 15px;
}

.menu-description {
    margin-top: 4px;

    color: #7a858f;

    font-size: 12px;
}

.menu-arrow {
    margin-left: auto;

    color: #9aa3ab;

    font-size: 25px;

    font-weight: 300;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

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

    .admin-menu {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .admin-page {
        padding: 18px 14px 40px;
    }

    .top-bar {
        align-items: flex-start;
    }

    .top-bar h1 {
        font-size: 24px;
    }

    .welcome-card {
        padding: 20px;
    }

    .stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .stat-card {
        padding: 16px;
    }

    .stat-number {
        font-size: 25px;
    }

    .menu-card {
        min-height: 82px;
    }
}

/* ============================================================
   Towers & Flats Management
   ============================================================ */

.management-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.4fr);
    gap: 24px;
    margin-top: 24px;
}

.management-card {
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 4px 18px rgba(16, 24, 40, 0.05);
}

.card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.card-heading h2 {
    margin: 3px 0 0;
    font-size: 22px;
    color: #101828;
}

.card-description {
    margin: 6px 0 0;
    color: #667085;
    font-size: 14px;
}

.section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #667085;
}

.count-pill {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 17px;
    background: #f2f4f7;
    color: #344054;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.inline-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 16px;
    margin-bottom: 18px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #eaecf0;
}

.inline-form .form-group {
    flex: 1;
    margin: 0;
}

.inline-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
}

.form-control {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    background: #ffffff;
    color: #101828;
    font-size: 14px;
    outline: none;
}

.form-control:focus {
    border-color: #667085;
    box-shadow: 0 0 0 3px rgba(102, 112, 133, 0.12);
}

.btn {
    border: 0;
    border-radius: 9px;
    min-height: 42px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.btn-primary {
    background: #101828;
    color: #ffffff;
}

.btn-primary:hover {
    background: #1d2939;
}

.btn-secondary {
    background: #f2f4f7;
    color: #344054;
}

.btn-secondary:hover {
    background: #e4e7ec;
}

.btn-small {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
}

.btn-warning {
    background: #fff4e5;
    color: #b54708;
}

.btn-success {
    background: #ecfdf3;
    color: #027a48;
}

.btn-danger {
    background: #fef3f2;
    color: #b42318;
}

.tower-list,
.flat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tower-row,
.flat-row {
    border: 1px solid #eaecf0;
    border-radius: 11px;
    background: #ffffff;
}

.tower-row {
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.tower-row.selected {
    border-color: #98a2b3;
    box-shadow: 0 0 0 2px rgba(152, 162, 179, 0.15);
}

.tower-main {
    flex: 1;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.tower-main:hover {
    background: #f9fafb;
}

.tower-name {
    font-size: 16px;
    font-weight: 700;
    color: #101828;
}

.tower-meta {
    margin-top: 5px;
    color: #667085;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.tower-actions {
    display: flex;
    align-items: center;
    padding: 8px;
    border-left: 1px solid #eaecf0;
}

.tower-actions form,
.flat-actions form {
    margin: 0;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

.status-active {
    background: #ecfdf3;
    color: #027a48;
}

.status-inactive {
    background: #f2f4f7;
    color: #667085;
}

.flat-summary {
    display: flex;
    gap: 18px;
    margin: -4px 0 15px;
    font-size: 12px;
    color: #667085;
}

.flat-summary strong {
    color: #344054;
}

.flat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
}

.flat-info {
    min-width: 0;
}

.flat-number {
    font-size: 15px;
    font-weight: 700;
    color: #101828;
}

.flat-status {
    margin-top: 4px;
}

.flat-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.empty-state {
    text-align: center;
    padding: 28px 15px;
    color: #667085;
    font-size: 14px;
}

.empty-selection {
    min-height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #667085;
}

.empty-selection-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: #f2f4f7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #344054;
    font-weight: 800;
    margin-bottom: 16px;
}

.empty-selection h2 {
    margin: 0 0 7px;
    color: #101828;
    font-size: 20px;
}

.empty-selection p {
    margin: 0;
    max-width: 300px;
    line-height: 1.5;
}

.alert {
    margin-top: 20px;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 14px;
}

.alert-success {
    background: #ecfdf3;
    border: 1px solid #abefc6;
    color: #027a48;
}

.alert-error {
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {

    .management-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .management-card {
        padding: 15px;
        border-radius: 13px;
    }

    .card-heading h2 {
        font-size: 19px;
    }

    .inline-form {
        flex-direction: column;
        align-items: stretch;
    }

    .inline-form .btn {
        width: 100%;
    }

    .tower-row {
        flex-direction: column;
    }

    .tower-actions {
        border-left: 0;
        border-top: 1px solid #eaecf0;
        justify-content: flex-end;
    }

    .flat-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .flat-actions {
        width: 100%;
    }

    .flat-actions .btn {
        flex: 1;
    }

}

/* ============================================================
   WestSquare Admin Layout
   ============================================================ */

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #f8fafc;
    color: #101828;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}

.admin-shell {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 32px 50px;
    box-sizing: border-box;
}

.admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.admin-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    color: #667085;
    margin-bottom: 8px;
}

.admin-header h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 750;
    color: #101828;
}

.admin-subtitle {
    margin: 8px 0 0;
    color: #667085;
    font-size: 15px;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.admin-header-actions form {
    margin: 0;
}


/* ============================================================
   Improve buttons
   ============================================================ */

.admin-header-actions .btn {
    min-height: 40px;
}


/* ============================================================
   Responsive Admin Header
   ============================================================ */

@media (max-width: 700px) {

    .admin-shell {
        padding: 20px 15px 35px;
    }

    .admin-header {
        flex-direction: column;
        gap: 18px;
    }

    .admin-header h1 {
        font-size: 26px;
    }

    .admin-header-actions {
        width: 100%;
    }

    .admin-header-actions .btn {
        flex: 1;
    }

}


/* ============================================================
   Residents Management
   ============================================================ */

.resident-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.resident-stat-card {
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(16, 24, 40, 0.04);
}

.resident-stat-number {
    font-size: 26px;
    font-weight: 750;
    color: #101828;
    line-height: 1.1;
}

.resident-stat-label {
    margin-top: 5px;
    font-size: 13px;
    color: #667085;
}

.resident-add-card {
    margin-bottom: 24px;
}

.resident-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #eaecf0;
    border-radius: 12px;
}

.resident-form .form-group {
    margin: 0;
}

.resident-form-action {
    display: flex;
    align-items: flex-end;
}

.resident-form-action .btn {
    width: 100%;
}

.field-error {
    display: block;
    margin-top: 5px;
    color: #b42318;
    font-size: 12px;
}

.resident-search-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 180px auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
    margin-bottom: 18px;
    background: #f8fafc;
    border: 1px solid #eaecf0;
    border-radius: 12px;
}

.resident-search-input label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
}

.resident-search-actions {
    display: flex;
    gap: 8px;
}

.resident-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #eaecf0;
    border-radius: 12px;
}

.resident-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    background: #ffffff;
}

.resident-table th {
    padding: 12px 14px;
    text-align: left;
    background: #f8fafc;
    border-bottom: 1px solid #eaecf0;
    color: #667085;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.resident-table td {
    padding: 14px;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: middle;
    font-size: 13px;
    color: #344054;
}

.resident-table tbody tr:last-child td {
    border-bottom: 0;
}

.resident-table tbody tr:hover {
    background: #fcfcfd;
}

.resident-name {
    font-weight: 700;
    color: #101828;
}

.resident-flat {
    font-weight: 650;
    color: #344054;
    white-space: nowrap;
}

.resident-email {
    color: #667085;
}

.flat-capacity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 4px 8px;
    border-radius: 20px;
    background: #f2f4f7;
    color: #344054;
    font-size: 11px;
    font-weight: 700;
}

.flat-capacity-full {
    background: #fff4e5;
    color: #b54708;
}

.resident-actions-column {
    text-align: right !important;
}

.resident-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.resident-row-actions form {
    margin: 0;
}

.resident-flat-select {
    cursor: pointer;
}

@media (max-width: 900px) {

    .resident-stats {
        grid-template-columns: 1fr;
    }

    .resident-form {
        grid-template-columns: 1fr;
    }

    .resident-search-form {
        grid-template-columns: 1fr;
    }

    .resident-search-actions {
        width: 100%;
    }

    .resident-search-actions .btn {
        flex: 1;
    }
}

@media (max-width: 600px) {

    .resident-stat-card {
        padding: 15px;
    }

    .resident-form,
    .resident-search-form {
        padding: 14px;
    }

}


/* =========================================================
   Final V1 resident / settings UI
   ========================================================= */
.wide-auth-card{max-width:560px}.registration-note,.registration-warning{padding:12px 14px;border-radius:10px;background:#f8fafc;color:#667085;font-size:13px;line-height:1.5;margin-bottom:20px}.registration-warning{margin-top:20px;margin-bottom:0;background:#fff8eb;color:#9a6700}.resident-page{max-width:1200px;margin:0 auto;padding:24px 16px 50px}.resident-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}.resident-header h1{margin:0;font-size:28px}.resident-header p{margin:6px 0 0;color:#667085}.date-tabs,.amenity-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:5px;margin-bottom:18px}.date-tab,.amenity-tab{border:1px solid #e4e7ec;background:#fff;border-radius:12px;padding:10px 14px;min-width:90px;text-align:center;display:flex;flex-direction:column;gap:3px}.date-tab span{font-size:12px;color:#667085}.date-tab.selected,.amenity-tab.selected{background:#17365d;color:#fff;border-color:#17365d}.date-tab.selected span{color:#eaf2fb}.booking-layout{display:grid;grid-template-columns:1.6fr .8fr;gap:18px}.booking-card{background:#fff;border:1px solid #e4e7ec;border-radius:16px;padding:20px;box-shadow:0 4px 18px rgba(16,24,40,.05)}.slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.slot-card{border:1px solid #e4e7ec;border-radius:12px;padding:13px;background:#fff;min-height:110px}.slot-card.selected{border-color:#17365d;box-shadow:0 0 0 2px rgba(23,54,93,.1)}.slot-card.occupied{background:#f8fafc}.slot-time{font-weight:700}.slot-status{margin-top:8px;font-size:12px;color:#667085}.slot-who{margin-top:5px;font-size:13px;font-weight:600}.slot-who span{font-weight:500;color:#667085}.slot-select{display:inline-block;margin-top:10px;color:#17365d;font-weight:700;font-size:13px}.slot-cancel{margin-top:8px;border:0;background:#fef3f2;color:#b42318;border-radius:7px;padding:5px 8px;font-size:11px;font-weight:700;cursor:pointer}.booking-confirm{margin-top:16px;padding:14px;border-radius:12px;background:#f8fafc;border:1px solid #e4e7ec;display:flex;justify-content:space-between;align-items:center;gap:15px}.my-booking-list{display:flex;flex-direction:column;gap:8px}.my-booking{padding:12px;border:1px solid #eaecf0;border-radius:10px;display:flex;flex-direction:column;gap:4px}.my-booking span{font-size:12px;color:#667085}.amenity-description{margin-left:8px;color:#667085;font-size:11px}.settings-form{display:flex;flex-direction:column;gap:16px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.settings-grid small{display:block;color:#667085;margin-top:5px;font-size:11px}.home-register{margin-top:15px}.resident-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.resident-stat-card{background:#fff;border:1px solid #e4e7ec;border-radius:14px;padding:18px}.resident-stat-number{font-size:25px;font-weight:800}.resident-stat-label{font-size:12px;color:#667085;margin-top:4px}.resident-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.resident-form-action{display:flex;align-items:end}.resident-form-action .btn{width:100%}.resident-search-form{display:flex;gap:10px;margin-bottom:16px}.resident-search-input{flex:1}.resident-search-input label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}.resident-filter{width:220px}.field-error:empty{display:none}
@media(max-width:850px){.booking-layout{grid-template-columns:1fr}.resident-form{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.resident-stats{grid-template-columns:1fr 1fr}.resident-search-form{flex-direction:column}.resident-filter{width:100%}}
@media(max-width:600px){.resident-header{flex-direction:column}.resident-header .btn{width:100%}.slot-grid{grid-template-columns:1fr}.booking-confirm{flex-direction:column;align-items:stretch}.booking-confirm .btn{width:100%}.resident-stats{grid-template-columns:1fr}.date-tab{min-width:84px}.booking-card{padding:15px}}

/* =========================================================
   RESIDENT MOBILE-FIRST CLUBHOUSE EXPERIENCE
   ========================================================= */
.resident-page{max-width:980px;margin:0 auto;padding:18px 16px 96px}
.mobile-hero{padding:4px 0 18px;border-bottom:1px solid #eaecf0;margin-bottom:18px}
.resident-kicker{font-size:10px;font-weight:800;letter-spacing:1.4px;color:#667085;margin-bottom:5px}
.resident-header h1{margin:0;font-size:28px;line-height:1.12;color:#101828}
.resident-header p{margin:5px 0 0;color:#667085;font-size:14px;font-weight:600}
.resident-step{margin-bottom:24px}
.resident-section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:12px}
.resident-section-heading h2{margin:2px 0 0;font-size:20px;line-height:1.2;color:#101828}
.section-subtitle{margin:5px 0 0;color:#667085;font-size:13px;line-height:1.45;max-width:680px}
.resident-date-hint{font-size:12px;color:#667085;white-space:nowrap}
.mobile-scroll{overflow-x:auto;scrollbar-width:none}
.mobile-scroll::-webkit-scrollbar{display:none}
.date-tabs{gap:8px;padding:2px 1px 7px;margin-bottom:0}
.date-tab{min-width:92px;min-height:64px;justify-content:center;border:1px solid #d0d5dd;border-radius:14px;padding:10px 13px;background:#fff;box-shadow:0 2px 7px rgba(16,24,40,.04);text-decoration:none}
.date-tab strong{font-size:14px;color:#101828}
.date-tab span{font-size:12px;color:#667085}
.date-tab.selected{background:#17365d;border-color:#17365d;box-shadow:0 5px 14px rgba(23,54,93,.18)}
.date-tab.selected strong,.date-tab.selected span{color:#fff}
.amenity-list{display:flex;flex-direction:column;gap:12px}
.amenity-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #e4e7ec;border-radius:16px;text-decoration:none;box-shadow:0 4px 14px rgba(16,24,40,.05);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.amenity-card:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(16,24,40,.08)}
.amenity-card.selected{border-color:#17365d;box-shadow:0 0 0 2px rgba(23,54,93,.1),0 7px 20px rgba(16,24,40,.08)}
.amenity-photo-wrap{height:170px;position:relative;background:linear-gradient(135deg,#dbe7f3,#f4f7fa);overflow:hidden}
.amenity-photo{width:100%;height:100%;display:block;object-fit:cover}
.amenity-photo-fallback{display:flex;align-items:center;justify-content:center;color:#17365d;font-weight:800;font-size:22px}
.amenity-badge{position:absolute;left:12px;top:12px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:#067647;font-size:11px;font-weight:800;box-shadow:0 2px 8px rgba(16,24,40,.12)}
.amenity-card-body{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px 15px}
.amenity-card-body h3{margin:0;color:#101828;font-size:17px}
.amenity-card-body p{margin:4px 0 0;color:#667085;font-size:12px}
.amenity-arrow{flex:0 0 auto;color:#17365d;font-size:13px;font-weight:800}
.amenity-arrow span{font-size:17px;margin-left:4px}
.slots-section{scroll-margin-top:10px}
.back-link{color:#17365d;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap}
.slot-legend{display:flex;gap:14px;flex-wrap:wrap;margin:-3px 0 12px;color:#667085;font-size:11px;font-weight:600}
.slot-legend span{display:inline-flex;align-items:center;gap:5px}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;border:1px solid #98a2b3}
.legend-dot.available{background:#fff}
.legend-dot.booked{background:#e4e7ec}
.legend-dot.maintenance{background:#f9dbaf}
.mobile-slot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.slot-card{min-height:112px;border:1px solid #e4e7ec;border-radius:13px;padding:12px;background:#fff;display:flex;flex-direction:column;justify-content:space-between}
.slot-card.available{border-color:#d0d5dd}
.slot-card.selected{border-color:#17365d;box-shadow:0 0 0 2px rgba(23,54,93,.12);background:#f5f8fc}
.slot-card.occupied{background:#f8fafc}
.slot-time{font-size:13px;font-weight:800;color:#101828}
.slot-status{margin-top:7px;font-size:11px;color:#667085;font-weight:600}
.slot-who{margin-top:6px;font-size:12px;font-weight:700;color:#344054;line-height:1.3}
.slot-who span{font-weight:600;color:#667085}
.slot-select{display:flex;align-items:center;justify-content:center;min-height:36px;margin-top:8px;border-radius:9px;background:#eef4fb;color:#17365d;font-size:12px;font-weight:800;text-decoration:none}
.selected-slot{background:#17365d;color:#fff}
.slot-cancel{margin-top:8px;border:0;background:#fef3f2;color:#b42318;border-radius:8px;padding:7px 9px;font-size:11px;font-weight:800;cursor:pointer;width:100%}
.mobile-booking-bar{position:sticky;bottom:72px;z-index:20;margin-top:14px;padding:12px;border-radius:15px;background:rgba(255,255,255,.97);border:1px solid #d0d5dd;box-shadow:0 -5px 22px rgba(16,24,40,.12);backdrop-filter:blur(10px)}
.booking-confirm-text{display:flex;flex-direction:column;gap:2px}
.booking-confirm-text span{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#067647;font-weight:800}
.booking-confirm-text strong{font-size:14px;color:#101828}
.booking-confirm-text small{font-size:11px;color:#667085}
.booking-button{min-height:48px;min-width:150px;border-radius:11px}
.my-bookings-section{scroll-margin-top:10px}
.my-booking-list{display:flex;flex-direction:column;gap:9px}
.my-booking{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border:1px solid #e4e7ec;border-radius:12px;background:#fff}
.my-booking div{display:flex;flex-direction:column;gap:4px}
.my-booking strong{font-size:13px;color:#101828}
.my-booking span{font-size:11px;color:#667085}
.my-booking-view{font-size:11px;font-weight:800;color:#17365d;text-decoration:none}
.mobile-empty-state{padding:22px 14px;border:1px dashed #d0d5dd;border-radius:12px;background:#fff;color:#667085;text-align:center;font-size:13px}
.resident-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:space-around;align-items:stretch;height:64px;background:rgba(255,255,255,.98);border-top:1px solid #e4e7ec;box-shadow:0 -3px 16px rgba(16,24,40,.08);padding-bottom:env(safe-area-inset-bottom)}
.resident-bottom-nav a,.resident-bottom-nav button{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;border:0;background:transparent;color:#667085;text-decoration:none;font-size:10px;font-weight:800;cursor:pointer}
.resident-bottom-nav span{font-size:19px;line-height:1}
.resident-bottom-nav a:hover,.resident-bottom-nav button:hover{color:#17365d}

@media(min-width:700px){
    .resident-page{padding:30px 20px 50px}
    .amenity-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    .amenity-photo-wrap{height:190px}
    .mobile-booking-bar{position:static}
    .resident-bottom-nav{display:none}
}
@media(max-width:600px){
    .desktop-logout{display:none}
    .resident-page{padding-left:13px;padding-right:13px}
    .resident-section-heading{align-items:flex-start}
    .resident-date-hint{display:none}
    .amenity-photo-wrap{height:165px}
    .mobile-slot-grid{grid-template-columns:1fr}
    .slot-card{min-height:96px}
    .mobile-booking-bar{flex-direction:column;align-items:stretch;gap:10px}
    .booking-button{width:100%}
}

/* =========================================================
   WESTSQUARE PREMIUM RESIDENT EXPERIENCE V4
   ========================================================= */
.clubhouse-page{max-width:1120px;margin:0 auto;padding:24px 22px 70px;color:#17202b}
.clubhouse-hero{min-height:92px;border-radius:22px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(120deg,#0d2238 0%,#153b5a 55%,#1b5067 100%);box-shadow:0 14px 35px rgba(11,32,51,.16);color:#fff}
.clubhouse-brand,.clubhouse-user{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);font-weight:800;font-size:20px}.brand-name{font-size:16px;font-weight:800;letter-spacing:.2px}.brand-subtitle{font-size:11px;color:rgba(255,255,255,.62);margin-top:2px}.clubhouse-user{gap:10px}.clubhouse-user-copy{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}.clubhouse-user-copy span{font-size:10px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.7px}.clubhouse-user-copy strong{font-size:13px;margin-top:3px}.clubhouse-user-copy small{font-size:10px;color:rgba(255,255,255,.65);margin-top:3px}.hero-logout{width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:17px;cursor:pointer}.booking-intro{padding:42px 2px 26px}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:800;color:#6b7785}.booking-intro h1{margin:7px 0 6px;font-size:34px;line-height:1.08;letter-spacing:-.8px;color:#102131}.booking-intro p{margin:0;color:#697786;font-size:14px}.booking-section{margin-top:24px}.section-title-row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:13px}.section-title-row>div{display:flex;align-items:center;gap:10px}.step-number{font-size:10px;font-weight:900;color:#6b7785;letter-spacing:1px}.section-title-row h2{margin:0;font-size:20px;letter-spacing:-.2px;color:#17202b}.section-note{font-size:11px;color:#7a8794;white-space:nowrap}.date-picker{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 8px;scrollbar-width:none}.date-picker::-webkit-scrollbar{display:none}.date-choice{min-width:88px;height:78px;border:1px solid #dce2e7;border-radius:15px;background:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#566575;transition:.15s ease}.date-choice:hover{border-color:#9fb3c2;transform:translateY(-1px)}.date-choice .date-day{font-size:9px;letter-spacing:.8px;font-weight:800}.date-choice strong{font-size:25px;line-height:1;color:#17202b}.date-choice .date-month{font-size:9px;font-weight:800;color:#8b97a3}.date-choice.active{background:#102f48;border-color:#102f48;box-shadow:0 8px 20px rgba(16,47,72,.18)}.date-choice.active strong,.date-choice.active .date-day,.date-choice.active .date-month{color:#fff}.facility-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.facility-card{display:block;overflow:hidden;border:1px solid #e1e6ea;border-radius:19px;background:#fff;text-decoration:none;color:inherit;box-shadow:0 7px 22px rgba(16,32,48,.06);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.facility-card:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(16,32,48,.1)}.facility-card.active{border-color:#9bb1c1;box-shadow:0 0 0 2px rgba(16,47,72,.09),0 13px 30px rgba(16,32,48,.1)}.facility-image{height:215px;background:#dbe2e7;overflow:hidden}.facility-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s ease}.facility-card:hover .facility-image img{transform:scale(1.025)}.facility-content{min-height:76px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px}.facility-copy{min-width:0}.facility-copy h3{margin:0;color:#152535;font-size:16px;line-height:1.2}.facility-copy span{display:flex;align-items:center;gap:6px;margin-top:7px;color:#7b8793;font-size:10px}.facility-copy i{width:6px;height:6px;border-radius:50%;background:#19a974;display:inline-block}.facility-arrow{width:32px;height:32px;border-radius:10px;background:#f1f5f7;color:#173b56;display:grid;place-items:center;font-size:17px;font-weight:700;flex:0 0 auto}.slots-panel{padding-top:12px}.change-link{font-size:11px;font-weight:800;color:#36566e;text-decoration:none}.slots-help{margin:-4px 0 12px 20px;color:#7b8793;font-size:12px}.slot-legend-premium{display:flex;gap:15px;flex-wrap:wrap;margin:0 0 13px 20px;color:#778491;font-size:10px;font-weight:700}.slot-legend-premium span{display:flex;align-items:center;gap:5px}.slot-legend-premium i{width:7px;height:7px;border-radius:50%;border:1px solid #aeb8c0}.slot-legend-premium i.available{background:#fff}.slot-legend-premium i.booked{background:#dfe4e8}.slot-legend-premium i.maintenance{background:#e8c78e}.premium-slot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.premium-slot{min-height:104px;padding:12px;border:1px solid #e1e6ea;border-radius:14px;background:#fff;display:flex;flex-direction:column;justify-content:space-between}.premium-slot.selected{border-color:#183b56;background:#f3f7fa;box-shadow:0 0 0 2px rgba(24,59,86,.1)}.premium-slot.occupied{background:#f7f8f9}.premium-slot-time{font-size:14px;font-weight:850;color:#182735}.premium-slot-time span{font-size:9px;color:#87939e;margin-left:2px}.premium-slot-status{font-size:10px;color:#8a96a1;font-weight:700}.premium-slot-who{font-size:10px;color:#344454;font-weight:750;line-height:1.3}.premium-slot-who span{font-weight:600;color:#8995a0}.premium-slot-action{display:flex;align-items:center;justify-content:center;height:32px;border-radius:9px;background:#edf3f7;color:#244b65;text-decoration:none;font-size:10px;font-weight:850}.selected-action{background:#153b57;color:#fff}.premium-cancel{width:100%;border:0;background:#fff0ef;color:#b42318;border-radius:8px;height:28px;font-size:10px;font-weight:800;cursor:pointer}.premium-confirm{margin-top:14px;border:1px solid #cfd9df;border-radius:16px;background:#f7fafb;padding:13px 14px;display:flex;align-items:center;justify-content:space-between;gap:15px;box-shadow:0 8px 24px rgba(16,32,48,.06)}.premium-confirm div{display:flex;flex-direction:column;gap:2px}.premium-confirm span{font-size:9px;color:#0a8055;text-transform:uppercase;letter-spacing:.9px;font-weight:900}.premium-confirm strong{font-size:13px;color:#152535}.premium-confirm small{font-size:10px;color:#7b8793}.premium-confirm button{height:44px;padding:0 19px;border:0;border-radius:11px;background:#153b57;color:#fff;font-size:11px;font-weight:850;cursor:pointer}.my-bookings-panel{padding-top:8px}.premium-empty{padding:22px;border:1px dashed #d5dde3;border-radius:14px;text-align:center;color:#7c8995;background:#fbfcfd;font-size:12px}.premium-my-bookings{display:flex;flex-direction:column;gap:8px}.premium-my-booking{padding:12px 14px;border:1px solid #e1e6ea;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:space-between}.premium-my-booking div{display:flex;flex-direction:column;gap:3px}.premium-my-booking strong{font-size:12px}.premium-my-booking span{font-size:10px;color:#7c8995}.premium-my-booking a{font-size:10px;font-weight:850;color:#36566e;text-decoration:none}.clubhouse-alert{margin-top:14px;padding:11px 13px;border-radius:11px;font-size:12px}.clubhouse-alert.success{background:#edf9f4;color:#067647;border:1px solid #c8efdf}.clubhouse-alert.error{background:#fff2f1;color:#b42318;border:1px solid #f5d0cc}.premium-bottom-nav{display:none}
@media(max-width:900px){.premium-slot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.clubhouse-page{padding:12px 13px 86px}.clubhouse-hero{min-height:76px;padding:14px 15px;border-radius:18px}.brand-mark{width:36px;height:36px;border-radius:11px;font-size:17px}.brand-name{font-size:14px}.clubhouse-user-copy{display:none}.hero-logout{width:35px;height:35px}.booking-intro{padding:30px 1px 20px}.booking-intro h1{font-size:28px}.booking-intro p{font-size:13px}.booking-section{margin-top:20px}.section-title-row{align-items:flex-start}.section-note{display:none}.facility-grid{grid-template-columns:1fr;gap:12px}.facility-image{height:185px}.facility-content{min-height:70px;padding:12px 14px}.facility-copy h3{font-size:15px}.premium-slot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.premium-slot{min-height:96px;padding:11px}.premium-confirm{position:sticky;bottom:70px;z-index:20;flex-direction:column;align-items:stretch;background:rgba(247,250,251,.97);backdrop-filter:blur(12px)}.premium-confirm button{width:100%;height:48px}.premium-bottom-nav{position:fixed;left:0;right:0;bottom:0;height:62px;z-index:50;display:flex;background:rgba(255,255,255,.97);border-top:1px solid #e1e6ea;box-shadow:0 -6px 20px rgba(16,32,48,.08);padding-bottom:env(safe-area-inset-bottom)}.premium-bottom-nav a,.premium-bottom-nav button{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#7b8793;text-decoration:none;font-size:9px;font-weight:850}.premium-bottom-nav span{font-size:17px;line-height:1}.premium-bottom-nav form{display:flex;flex:1}.premium-bottom-nav form button{width:100%}}