/* ============================================================
   Rooms.Net — App Design System
   Shared CSS for both public and management UI.
   Imported by _Layout.cshtml and _LayoutManagement.cshtml.
   ============================================================ */

/* ===== DESIGN TOKENS ===================================================== */

:root {
    --primary:           #007a33;
    --primary-hover:     #006b2d;
    --primary-light:     #f0faf4;
    --primary-subtle:    #d1f0de;

    --text-dark:         #111827;
    --text-body:         #374151;
    --text-muted:        #6b7280;
    --text-light:        #9ca3af;

    --border:            #e5e7eb;
    --border-dark:       #d1d5db;

    --bg-page:           #f8fafc;
    --bg-card:           #ffffff;
    --bg-subtle:         #f9fafb;

    --radius-sm:         6px;
    --radius-md:         10px;
    --radius-lg:         14px;

    --shadow-sm:         0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:         0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --shadow-lg:         0 10px 25px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.05);

    /* Status colour pairs */
    --s-active-bg:       #dcfce7; --s-active-tx:    #166534;
    --s-pending-bg:      #fef9c3; --s-pending-tx:   #854d0e;
    --s-info-bg:         #dbeafe; --s-info-tx:      #1e40af;
    --s-warning-bg:      #fff7ed; --s-warning-tx:   #9a3412;
    --s-danger-bg:       #fee2e2; --s-danger-tx:    #991b1b;
    --s-neutral-bg:      #f3f4f6; --s-neutral-tx:   #374151;

    /* Management sidebar */
    --sidebar-w:         240px;
    --topbar-h:          60px;
}


/* ===== GLOBAL BASE ======================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-body);
    line-height: 1.6;
}


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

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.status-badge.active,
.status-badge.accepted,
.status-badge.published  { background: var(--s-active-bg);  color: var(--s-active-tx); }
.status-badge.pending    { background: var(--s-pending-bg); color: var(--s-pending-tx); }
.status-badge.shortlisted,
.status-badge.viewed,
.status-badge.info       { background: var(--s-info-bg);    color: var(--s-info-tx); }
.status-badge.withdrawn,
.status-badge.warning    { background: var(--s-warning-bg); color: var(--s-warning-tx); }
.status-badge.rejected,
.status-badge.danger     { background: var(--s-danger-bg);  color: var(--s-danger-tx); }
.status-badge.inactive,
.status-badge.draft,
.status-badge.secondary  { background: var(--s-neutral-bg); color: var(--s-neutral-tx); }


/* ===== ACTION BUTTONS (small, semantic) =================================== */

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.4;
    background: none;
}

.btn-action.primary  { background: var(--primary); color: #fff; }
.btn-action.primary:hover { background: var(--primary-hover); color: #fff; text-decoration: none; }

.btn-action.secondary { background: #fff; color: var(--text-dark); border-color: var(--border); }
.btn-action.secondary:hover { border-color: var(--border-dark); color: var(--text-dark); text-decoration: none; }

.btn-action.danger { background: #fff; color: var(--s-danger-tx); border-color: #fecaca; }
.btn-action.danger:hover { background: var(--s-danger-bg); border-color: #fca5a5; text-decoration: none; color: var(--s-danger-tx); }

.btn-action.success { background: #fff; color: var(--s-active-tx); border-color: #bbf7d0; }
.btn-action.success:hover { background: var(--s-active-bg); text-decoration: none; color: var(--s-active-tx); }

.btn-action.warning { background: #fff; color: var(--s-warning-tx); border-color: #fed7aa; }
.btn-action.warning:hover { background: var(--s-warning-bg); text-decoration: none; color: var(--s-warning-tx); }

/* Override Bootstrap primary to use brand green */
.btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
.btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; }
.btn-outline-primary:hover { background-color: var(--primary) !important; color: #fff !important; }

/* Pressed, and open - a dropdown toggle carries .show while its menu is out.
   Bootstrap paints these states its own blue, and the !important green text
   above then sat on it: the "My account" button read green on blue whenever
   its menu was open. */
.btn-primary:active, .btn-primary.active, .btn-primary.show {
    background-color: var(--primary-hover) !important; border-color: var(--primary-hover) !important;
}
.btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.show,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--primary) !important; color: #fff !important;
}
/* The focus ring too. Bootstrap 5.1 writes it as a literal blue rgba rather
   than a variable, so it has to be replaced outright. */
.btn-primary:focus, .btn-outline-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(0, 122, 51, .35) !important;
}


/* ===== PAGE HEADER ======================================================== */

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

.page-header-text { flex: 1; min-width: 0; }

.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.page-breadcrumb a   { color: var(--text-muted); text-decoration: none; }
.page-breadcrumb a:hover { color: var(--primary); }
.page-breadcrumb-sep { color: var(--text-light); }

.page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px;
    line-height: 1.3;
}

.page-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

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


/* ===== EMPTY STATE ======================================================== */

.empty-state {
    text-align: center;
    padding: 56px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.empty-state-icon {
    width: 60px;
    height: 60px;
    background: var(--bg-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    color: var(--text-light);
}

.empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.empty-state-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 auto 20px;
    max-width: 320px;
}


/* ===== DATA SECTION (card wrapper for tables / lists) ===================== */

.data-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.data-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.data-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}


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

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .2s;
}

.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 14px;
}

.stat-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all .15s;
}

.stat-action:hover { border-color: var(--primary); background: var(--primary-light); text-decoration: none; }


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

.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: all .2s;
}

.action-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    border-color: var(--primary);
    color: inherit;
    text-decoration: none;
}

.action-icon {
    width: 42px;
    height: 42px;
    background: var(--primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 17px;
    flex-shrink: 0;
}

.action-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 2px;
}

.action-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}


/* ===== SECTION HEADING ==================================================== */

.section-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 16px;
}


/* ===== FILTER PILLS ======================================================= */

.filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.filter-pill { position: relative; }
.filter-pill input[type="radio"] { position: absolute; opacity: 0; width: 0; }

.filter-pill label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
    background: var(--bg-card);
    user-select: none;
}

.filter-pill label:hover { border-color: var(--primary); color: var(--primary); }

.filter-pill input:checked + label {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.filter-pill-count {
    background: rgba(0,0,0,.12);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 11px;
}

.filter-pill input:checked + label .filter-pill-count { background: rgba(255,255,255,.25); }


/* ===== ROOM/LISTING MANAGEMENT CARDS ===================================== */

.mgmt-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.mgmt-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all .2s;
    display: flex;
    flex-direction: column;
}

.mgmt-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.mgmt-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.mgmt-card-placeholder {
    height: 180px;
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 32px;
}

.mgmt-card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mgmt-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.mgmt-card-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.mgmt-card-price small {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

.mgmt-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-muted);
}

.mgmt-card-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mgmt-card-meta-row i { width: 14px; text-align: center; color: var(--text-light); }

.mgmt-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.mgmt-card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
    flex-wrap: wrap;
}

.mgmt-card-footer {
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-light);
}


/* ===== PHOTO GRID (property/room edit) ==================================== */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.photo-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-card);
}

.photo-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.photo-item-actions {
    padding: 8px;
    display: flex;
    gap: 6px;
    flex-direction: column;
}

.photo-main-badge {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    padding: 4px;
    background: var(--primary-light);
    border-radius: var(--radius-sm);
}


/* ===== MANAGEMENT SHELL =================================================== */

.mgmt-body {
    background: var(--bg-page);
    min-height: 100vh;
    margin-bottom: 0 !important;
}

.mgmt-shell {
    display: flex;
    min-height: 100vh;
}


/* SIDEBAR */

.mgmt-sidebar {
    width: var(--sidebar-w);
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 200;
    transition: transform .25s ease;
    overflow: hidden;
}

.sidebar-header {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-logo {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-logo:hover { color: var(--primary-hover); text-decoration: none; }

.sidebar-close {
    display: none;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 6px;
    border-radius: var(--radius-sm);
}

.sidebar-close:hover { background: var(--bg-subtle); }

.sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
}

.sidebar-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 10px 5px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-body);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all .15s;
    margin-bottom: 1px;
}

.sidebar-link i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sidebar-link:hover { background: var(--bg-subtle); color: var(--text-dark); text-decoration: none; }
.sidebar-link:hover i { color: var(--text-dark); }

.sidebar-link.active { background: var(--primary-light); color: var(--primary); }
.sidebar-link.active i { color: var(--primary); }

.sidebar-badge {
    margin-left: auto;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-user-avatar {
    width: 30px;
    height: 30px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-user-info { flex: 1; min-width: 0; }

.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 11px;
    color: var(--text-muted);
}

.sidebar-signout-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: all .15s;
    font-size: 14px;
}

.sidebar-signout-btn:hover { background: var(--bg-subtle); color: var(--text-dark); }


/* TOPBAR */

.mgmt-topbar {
    height: var(--topbar-h);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 12px;
}

.topbar-menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 7px;
    cursor: pointer;
    color: var(--text-dark);
    border-radius: var(--radius-sm);
    font-size: 16px;
    line-height: 1;
}

.topbar-menu-toggle:hover { background: var(--bg-subtle); }

.topbar-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: all .15s;
}

.topbar-link:hover { color: var(--text-dark); background: var(--bg-subtle); text-decoration: none; }


/* MAIN AREA */

.mgmt-main {
    flex: 1;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

.mgmt-content {
    flex: 1;
    padding: 28px 32px;

    /* Bounded and centred. It used to be padding only, so thirteen back-office
       pages - the dashboards, the property and room lists, the application
       screens - ran the full width of the monitor, while eight others capped
       themselves at 820, 900, 900, 920, 980, 1000, 1100 and 1120px in a style
       block inside the view. Same disease the public side had.

       Left-aligned rather than centred, which is where it differs from
       .page-shell. The back office has a fixed sidebar for the eye to start
       from; centring the content on a wide monitor pushes it away from that
       sidebar and leaves a corridor of empty space between the two. */
    width: 100%;
    max-width: 1200px;
}

/* For a management page that is one column of cards or a form rather than a
   table or a grid. 860px, which is the width .page-shell already uses for the
   same shape of page on the public side - the two sides of the app should not
   need two vocabularies for one measurement. */
.mgmt-narrow {
    max-width: 860px;
}


/* OVERLAY */

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 150;
}

.sidebar-overlay.open { display: block; }


/* ===== MESSAGING ========================================================== */

.conversation-list { list-style: none; padding: 0; margin: 0; }

.conversation-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}

.conversation-item:last-child { border-bottom: none; }
.conversation-item:hover { background: var(--bg-subtle); text-decoration: none; color: inherit; }
.conversation-item.unread { border-left: 3px solid var(--primary); }

.conversation-avatar {
    width: 38px;
    height: 38px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.conversation-body { flex: 1; min-width: 0; }
.conversation-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.conversation-subject { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.conversation-time { font-size: 12px; color: var(--text-light); white-space: nowrap; }
.conversation-with { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.conversation-preview { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== PAGE SHELL (public side) ===========================================

   The back office has .mgmt-content to hold its pages in; the public side had
   nothing, so every page invented its own container. There were eight widths
   across eight pages - 1280, 1080, 820 three times, 760, 720, 640 - and each
   page also brought its own title styling and its own CSS namespace, so no two
   account screens lined up or looked alike.

   Five widths, each with a reason:
     --narrow a single message and maybe a button - a confirmation, a refusal
     --form   a single column of fields; wider is harder to read, not better
     --prose  paragraphs to be read; a long line is a hard line to track
     (default) lists and detail pages
     --wide   card grids, which need the room

   Anything else belongs in a component below, not in a page.

   The widths are not new. --narrow, --form and --prose are the values pages
   had already reached for on their own, hard-coded into a style attribute on
   a Bootstrap .container - which meant fighting Bootstrap's responsive ladder
   with an override, and meant that pages doing the same job disagreed by
   twenty or forty pixels for no reason anyone could name. Naming them here is
   what stops the next page inventing a sixth. */

.page-shell {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px 20px 56px;
}

.page-shell--narrow { max-width: 560px; }

.page-shell--form { max-width: 680px; }

.page-shell--prose { max-width: 760px; }

.page-shell--wide { max-width: 1200px; }

@media (max-width: 640px) {
    .page-shell { padding: 20px 16px 40px; }
}

/* Wraps, deliberately. Without flex-wrap the two spans - "With <name>" and
   the room - both shrink below their content on a phone and wrap internally,
   so they interleave into each other a word at a time and neither is
   readable. Wrapping puts them on separate lines instead. */
.conversation-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin-top: 6px;
    min-width: 0;
}

@media (max-width: 640px) {
    .conversation-row { padding: 14px 16px; gap: 10px; }

    /* The timestamp is the least important thing here and was taking a fixed
       column out of a 390px row. Under the text, where it costs nothing. */
    .conversation-row { flex-wrap: wrap; }
    .conversation-time { font-size: 11px; width: 100%; padding-left: 54px; }
}


/* ===== PUBLIC: override _Layout.cshtml.css cruft ========================== */

a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }


/* ===== MGMT GRID (alias for mgmt-card-grid) ================================ */

.mgmt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.mgmt-card-img--placeholder {
    height: 160px;
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 36px;
    border-radius: 10px 10px 0 0;
}

/* A listing with no photos, shown as something to act on rather than as a
   neutral empty state. It is the most valuable thing a landlord can fix. */
.mgmt-card-img--needs-photos {
    height: 160px;
    background: #fffbeb;
    border: 1px dashed #fde68a;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #92400e;
    font-size: 26px;
    text-decoration: none;
    transition: background .15s;
}

.mgmt-card-img--needs-photos:hover {
    background: #fef3c7;
    color: #92400e;
}

.mgmt-card-img--needs-photos span {
    font-size: 13px;
    font-weight: 600;
}

/* ===== CONVERSATION ROW ==================================================== */

.conversation-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}

.conversation-row:last-child { border-bottom: none; }

.conversation-row:hover { background: var(--bg-subtle); }

.conversation-row--unread { border-left: 3px solid var(--primary); }

/* ===== CHAT BUBBLES ======================================================== */

.chat-bubble {
    display: flex;
    flex-direction: column;
    max-width: 70%;
}

.chat-bubble--mine { align-self: flex-end; align-items: flex-end; }

.chat-bubble--theirs { align-self: flex-start; align-items: flex-start; }

.chat-bubble-content {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.chat-bubble--mine .chat-bubble-content {
    background: var(--primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-bubble--theirs .chat-bubble-content {
    background: var(--bg-subtle);
    color: var(--text-dark);
    border-bottom-left-radius: 4px;
}

.chat-bubble-meta {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 4px;
    padding: 0 4px;
}

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

@media (max-width: 900px) {
    .mgmt-sidebar { transform: translateX(-100%); }
    .mgmt-sidebar.open { transform: translateX(0); }
    .sidebar-close { display: flex; }
    .mgmt-main { margin-left: 0; }
    .topbar-menu-toggle { display: flex; }
    .mgmt-content { padding: 20px 16px; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header-actions { justify-content: flex-start; }
}

@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr; }
    .mgmt-card-grid { grid-template-columns: 1fr; }
    .action-grid { grid-template-columns: 1fr; }
}

/* ===== FORM FIELDS ========================================================= */

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

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-dark);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    line-height: 1.5;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0,122,51,.1);
}

.form-control.is-invalid { border-color: #ef4444; }

.form-control:disabled,
.form-control[readonly] { background: var(--bg-subtle); color: var(--text-muted); cursor: not-allowed; }

select.form-control { appearance: auto; }

textarea.form-control { resize: vertical; min-height: 80px; }

.invalid-feedback { color: #ef4444; font-size: 12px; margin-top: 4px; display: none; }
.invalid-feedback.d-block,
.form-control.is-invalid ~ .invalid-feedback { display: block; }

.form-text { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: block; }
.text-muted { color: var(--text-muted) !important; }
.text-danger { color: #ef4444 !important; }

.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.form-check-input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.form-check-label { font-size: 14px; color: var(--text-dark); cursor: pointer; }

.field-group { margin-bottom: 28px; }
.field-group-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.field-group-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; margin-top: -8px; }
.field-group-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

.form-actions { display: flex; gap: 10px; margin-top: 24px; }

/* ===== TABLE COMPONENT ===================================================== */

.table-component { width: 100%; display: block; }
.table-component .tabulator { width: 100% !important; min-width: 0 !important; }
.table-component .tabulator .tabulator-tableholder { width: 100% !important; }
.table-component .tabulator .tabulator-header { width: 100% !important; }

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.table-toolbar-left { display: flex; gap: 8px; align-items: center; }
.table-toolbar-right { display: flex; gap: 8px; align-items: center; }

.table-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    min-width: 220px;
}

.table-search-icon { color: var(--text-muted); font-size: 13px; }

.table-search-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--text-dark);
    font-family: inherit;
    width: 100%;
}

.table-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
}

.table-info-text { font-size: 13px; color: var(--text-muted); }

.row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all .15s;
    text-decoration: none;
}
.row-action-btn:hover { background: var(--bg-subtle); border-color: #9ca3af; color: var(--text-dark); }
.row-action-btn:last-child:hover { border-color: #fca5a5; color: #dc2626; background: #fff5f5; }

/* ===== STEPPER FIELD ======================================================= */

.stepper-field {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    width: 140px;
}
.stepper-btn {
    flex-shrink: 0;
    width: 38px;
    height: 42px;
    border: none;
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    user-select: none;
}
.stepper-btn:hover { background: #e5e7eb; color: var(--text-dark); }
.stepper-btn:active { background: #d1d5db; }
.stepper-input {
    flex: 1;
    min-width: 0;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    height: 42px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    background: #fff;
    padding: 0;
    -moz-appearance: textfield;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper-input:focus { outline: none; background: #f0fdf4; }

/* ===== IMAGE UPLOAD ZONE =================================================== */

.upload-zone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--bg-subtle);
}
.upload-zone:hover,
.upload-zone.drag-over {
    border-color: var(--primary);
    background: #f0fdf4;
}
.upload-zone-icon {
    font-size: 36px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 12px;
}
.upload-zone-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark);
}
.upload-zone-link { color: var(--primary); text-decoration: underline; }
.upload-zone-hint { margin: 0; font-size: 13px; color: var(--text-muted); }

.upload-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.upload-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 90px;
}
.upload-preview-item img {
    width: 90px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.upload-preview-item span {
    font-size: 11px;
    color: var(--text-muted);
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}


/* ===== PUBLIC PAGE COMPONENTS =============================================

   Seven account pages had grown seven private CSS namespaces - fav-, ma-, ad-,
   ap-, ss-, rw-, notif- - between them about ninety classes reimplementing the
   same nine ideas. Alerts existed five times over, buttons five, muted notes
   five, cards four, list rows three. No two pages agreed on a measurement, so
   none of them lined up with each other.

   These are those nine ideas, once. A page composes them; a page does not
   bring its own layout. Anything genuinely unique to one screen is a strong
   hint that it wants a component here instead.
   ========================================================================= */

/* --- Card: a plain panel on the public side. .data-section is its
       back-office cousin, with a titled header bar. ------------------------ */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.card + .card { margin-top: 16px; }

.card-heading {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 14px;
}

/* --- Alert -------------------------------------------------------------- */

.alert-note {
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.alert-note--ok {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #067647;
}

.alert-note--bad {
    background: #fef3f2;
    border-color: #fecdca;
    color: #b42318;
}

/* --- List of rows -------------------------------------------------------

   Applications, saved searches, notifications and saved rooms are all a list
   of things with a title, some meta and something on the right. They were
   three separate implementations that drifted apart in padding, border and
   hover. ------------------------------------------------------------------ */

.list-rows {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.list-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}

.list-row:last-child { border-bottom: none; }

a.list-row:hover { background: var(--bg-subtle); }

.list-row--unread { border-left: 3px solid var(--primary); }

.list-row-main { flex: 1; min-width: 0; }

.list-row-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 2px;
}

.list-row-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.list-row-side {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Rows carry their own controls on the wider screens and stack on a phone,
   where a fixed right-hand column leaves the title a few characters wide. */
@media (max-width: 640px) {
    .list-row { flex-wrap: wrap; padding: 14px 16px; }
    .list-row-side { width: 100%; }
}

/* --- Badge --------------------------------------------------------------

   Semantic rather than literal: a status is good, waiting or over, and the
   colour follows from that. ApplicationStatusBadge decides which. ---------- */

.badge-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-pill--good { background: #ecfdf3; color: #067647; }
.badge-pill--wait { background: var(--bg-subtle); color: var(--text-muted); }
.badge-pill--off  { background: #f2f4f7; color: #667085; }

/* --- Toolbar above a list ----------------------------------------------- */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Quiet button: an action that reads as a link ------------------------ */

.btn-quiet {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
    text-decoration: none;
}

.btn-quiet:hover { text-decoration: underline; }

/* --- Segmented filter links (All / Unread) ------------------------------- */

.segmented { display: inline-flex; gap: 6px; }

.segmented a {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid transparent;
}

.segmented a:hover { background: var(--bg-subtle); }

.segmented a.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* --- Note: small print under content ------------------------------------ */

.note {
    font-size: 13px;
    color: var(--text-muted);
    margin: 16px 0 0;
}

/* --- Pager --------------------------------------------------------------- */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.pager a {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-dark);
    text-decoration: none;
}

.pager a:hover { border-color: var(--primary); color: var(--primary); }

.pager-count { font-size: 13px; color: var(--text-muted); }

/* Two fields side by side, stacking on a phone. Profile and Apply each
   carried their own version of this. */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 560px) {
    .form-row { grid-template-columns: 1fr; }
}

/* A row title is usually a link, and a link in a list row should not be
   underlined and blue - the row is the affordance. */
.list-row-title a {
    color: inherit;
    text-decoration: none;
}

.list-row-title a:hover { color: var(--primary); }

/* Small print carries links too, and they should be the brand colour rather
   than the browser's default blue. */
.note a { color: var(--primary); }

/* A label above its control, which is what .form-group holds on the public
   side. The toolbar lays several of them out in a row. */
.toolbar .form-group { display: flex; flex-direction: column; gap: 4px; }
.toolbar .form-group .form-label { margin: 0; }

/* The title is sometimes the link itself rather than wrapping one. */
a.list-row-title { display: inline-block; color: var(--text-dark); text-decoration: none; }
a.list-row-title:hover { color: var(--primary); }

/* ============================================================================
   Search form

   One control set for the two places a room search gets built: the home page
   hero and the results filter bar. Each used to carry its own class
   vocabulary ("search-*" against "filter-*") and, worse, its own price
   control - the hero a curated ladder with no way to say "per week", the bar
   free entry with an unlabelled basis select hanging underneath it. Sharing
   the fields but forking the layout is what let them drift apart again after
   the first consolidation, so the fork is gone: only the surrounding chrome
   (a Search button, or Sort By and the extra filters) belongs to a page.
   ============================================================================ */

.searchbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

/* The hero's white card. The filter bar sits directly on its own band and
   does not want one. */
.searchbar-card {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
    margin-bottom: 32px;
}

.searchbar-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Location earns the slack; everything else is content-sized. */
.searchbar-field--location { flex: 1 1 240px; }

.searchbar-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.searchbar-control {
    /* An explicit height, because <input> and <select> do not compute the
       same one from identical padding and font size - the inputs came out
       several pixels taller, which made their groups taller, which under
       `align-items: flex-end` pushed the Location and Price labels out of
       line with Distance and Room Type. */
    box-sizing: border-box;
    height: 42px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
    color: var(--text-dark);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.searchbar-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 51, .1);
}

/* Price is a single row like every other field, so the labels along the bar
   line up. Stacking the basis select underneath the bounds made this group
   two rows tall against everyone else's one, and with `align-items: flex-end`
   that pushed its label out of line with the rest - which is exactly how the
   bar came to look ragged. */
.searchbar-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Wide enough for the "No max" placeholder. It was 84px when this held a
   min and a max side by side. */
.searchbar-price .searchbar-control { width: 108px; }

/* Wide enough for its own text. This needs to out-specify the 84px above,
   which is why it is not simply `.searchbar-price-basis`; as a single class
   it lost, and the control rendered clipped to "per m". */
.searchbar-price .searchbar-price-basis { width: auto; }

.searchbar-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    height: 42px;
    padding: 10px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease;
}

.searchbar-submit:hover { background: var(--primary-hover); }
.searchbar-submit svg { width: 18px; height: 18px; }

@media (max-width: 768px) {
    .searchbar { flex-direction: column; align-items: stretch; gap: 12px; }

    /* Once the row becomes a column, the flex shorthand grows items along the
       vertical axis - so Location's `flex: 1 1 240px` stretched it downwards
       and left a tall empty gap between it and Distance. */
    .searchbar-field { width: 100%; flex: 0 0 auto; }

    .searchbar-price { width: 100%; }

    /* min-width: 0 because a flex item defaults to min-width: auto, and an
       <input>'s intrinsic width is wide enough that the three price controls
       together overflowed the screen and pushed the basis select off it. */
    .searchbar-price .searchbar-control { flex: 1 1 0; width: auto; min-width: 0; }

    /* Out-specifies the rule above so the basis keeps its own text width
       instead of being flexed down with the two number inputs. */
    .searchbar-price .searchbar-price-basis { flex: 0 0 auto; width: auto; }

    .searchbar-submit { width: 100%; padding: 12px; }
}

/* ---- The location field ---------------------------------------------------
   Its look travels with it rather than living in whichever page happens to
   render it; the results page once showed an unstyled suggestions list
   dropped on top of the results because these rules sat in the home page's
   own style block. */

.location-field { position: relative; }

/* A flex row, not a plain block, for two reasons. The input has to fill the
   field or the locate button - positioned against this wrapper - ends up
   floating in the gap to the right of it. And an inline-block input leaves a
   baseline descender below itself, which made this group a few pixels taller
   than its neighbours; under `align-items: flex-end` that lifted the Location
   label out of line with every other label on the row. */
.location-input-wrapper { position: relative; display: flex; }
.location-input-wrapper .searchbar-control { flex: 1 1 auto; min-width: 0; }

/* Room for the locate button so it never sits over typed text. */
.location-field input[type="text"] { padding-right: 40px; }

.locate-button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.locate-button:hover { background: #f3f4f6; color: var(--primary); }
.locate-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.locate-button.is-busy { color: var(--primary); animation: locate-pulse 1s ease-in-out infinite; }
.locate-button:disabled { cursor: wait; }

@keyframes locate-pulse { 50% { opacity: .35; } }

.location-error { margin: 6px 0 0; font-size: 12px; color: #b42318; }
.location-status { margin: 6px 0 0; font-size: 12px; color: #04663a; }
.location-error[hidden], .location-status[hidden] { display: none; }

.location-suggestions {
    position: fixed !important;
    background: #fff;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 999999 !important;
    display: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
}

.location-suggestions.active { display: block; }

.suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background .2s;
}

.suggestion-item:hover, .suggestion-item.selected { background: #f9fafb; }
.suggestion-title { font-weight: 500; color: #111827; margin-bottom: 2px; }
.suggestion-subtitle { font-size: 13px; color: #6b7280; }

.suggestion-type {
    display: inline-block;
    padding: 2px 6px;
    background: #e5e7eb;
    color: #4b5563;
    border-radius: 3px;
    font-size: 11px;
    margin-left: 8px;
}

/* The empty state inside the suggestions dropdown. Scoped, because the pages
   that render results use a bare .no-results for a full-width empty panel and
   the two should not borrow each other's padding. */
.location-suggestions .no-results {
    padding: 12px 16px;
    color: #6b7280;
    font-size: 14px;
}

/* ---- Two button shapes that had no shared definition ----------------------

   Both were used across a dozen views but defined only inside individual
   page style blocks - six copies of .btn-link-quiet, three of
   .btn-action.small, all very slightly different. The views that never
   carried a copy simply rendered an unstyled native button: Saved searches
   and Notification preferences among them. Defined once here so a page does
   not have to bring its own. */

.btn-action.small { padding: 6px 12px; font-size: 13px; }

.btn-link-quiet {
    background: none;
    border: 0;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 6px 8px;
    text-decoration: none;
}

.btn-link-quiet:hover { color: var(--primary); text-decoration: none; }
.btn-link-quiet.danger { color: var(--s-danger-tx); }
.btn-link-quiet.danger:hover { color: #b42318; }

/* ---- Controls sitting in a list row ---------------------------------------

   A row's right-hand side holds real controls on some pages - a select, a
   checkbox, a Save. It was a nowrap flex with `flex-shrink: 0`, so on a
   phone the controls could neither shrink nor wrap and the last of them was
   pushed off the side of the screen. */

.list-row-side { flex-wrap: wrap; }

/* A .form-control is 100% wide because it normally sits in a stacked form.
   In a row it should be as wide as it needs to be. */
.list-row-side .form-control { width: auto; max-width: 100%; }

/* The 4px that separates stacked checkboxes just knocks this one out of
   line with the controls beside it. */
.list-row-side .form-check { margin-bottom: 0; }

@media (max-width: 640px) {
    /* A select takes the whole line on a phone, so what follows it wraps as a
       tidy second row rather than trailing off the end of the first. */
    .list-row-side .form-control { width: 100%; }
}

/* ============================================================================
   The landlord box on a listing

   Who is letting the room, shown above the way to contact them. A private
   individual is never named - the server decides that, this only presents it.
   ============================================================================ */

.landlord-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
    background: var(--bg-card);
}

.landlord-box-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.landlord-box-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logos arrive at whatever shape their owner uploaded, so the slot is fixed
   and the image is contained inside it rather than cropped - a letterboxed
   wordmark beats a cropped one with its ends cut off. */
.landlord-box-logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.landlord-box-avatar {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: var(--bg-subtle);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.landlord-box-text { min-width: 0; }

.landlord-box-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    overflow-wrap: anywhere;
}

.landlord-box-type {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.landlord-box-verified {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

.landlord-box-note {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* The logo preview on the profile form, sized like the one on a listing so
   what you upload is what you see. */
.logo-preview {
    max-width: 160px;
    max-height: 80px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 6px;
}

/* ===== BRAND LOGO ========================================================= */

/* The header lockup, from wwwroot/img/logo.svg. Sized by height so the mark
   and the word keep their proportions whatever the header does; the width
   follows from the SVG's own aspect ratio. It replaced a house emoji next to
   the word "Rooms" in HTML, which meant the logo was Apple's house on a Mac,
   Google's on Android, and Microsoft's on Windows. */
.brand-logo {
    height: 30px;
    width: auto;
    display: block;
}

.brand-logo--footer {
    height: 26px;
}

@media (max-width: 640px) {
    .brand-logo { height: 26px; }
}