/* ============================================================
   SBH Owners Portal — Main Stylesheet
   All frontend and admin styles for the sbh_owners_content plugin.
   Single file for consistent look-and-feel across the portal.
   ============================================================ */


/* ===========================================================
   1. CSS VARIABLES
   =========================================================== */

:root {
    --sbh-primary:      #2271b1;
    --sbh-primary-dark: #195a8c;
    --sbh-bg:           #f5f6f7;
    --sbh-surface:      #ffffff;
    --sbh-border:       #e6e6e6;
    --sbh-muted:        #6b7280;
    --sbh-radius-sm:    4px;
    --sbh-radius-md:    6px;
    --sbh-radius-lg:    10px;
}


/* ===========================================================
   2. BASE / SHARED
   =========================================================== */

.sbh-wrapper,
.sbh-admin-wrapper,
.sbh-widget-container {
    font-family: "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
    color: #222;
    margin-bottom: 24px;
}

.sbh-card,
.sbh-widget-card,
.sbh-admin-content,
.sbh-admin-sidebar {
    background: var(--sbh-surface);
    border: 1px solid var(--sbh-border);
    border-radius: var(--sbh-radius-md);
}

.sbh-card,
.sbh-widget-card {
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    padding: 16px;
}

.sbh-card-full {
    margin-top: 20px;
}

.sbh-card h2,
.sbh-widget-title h4 {
    color: var(--sbh-primary);
    margin: 0 0 8px 0;
    font-weight: 600;
}

.sbh-btn,
.sbh-btn-primary,
.sbh-btn-small {
    display: inline-block;
    background: var(--sbh-primary);
    color: #fff !important;
    border-radius: var(--sbh-radius-sm);
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.sbh-btn:hover,
.sbh-btn-primary:hover,
.sbh-btn-small:hover {
    background: var(--sbh-primary-dark);
}

.sbh-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.sbh-table th {
    background: #f3f4f6;
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--sbh-border);
}

.sbh-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f1f1;
}

.sbh-table tr:hover td {
    background: #f9fafb;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sbh-muted { color: var(--sbh-muted); }
.sbh-gap   { gap: 16px; }


/* ===========================================================
   3. FRONTEND WIDGET EXTRAS
   =========================================================== */

.sbh-widget-container {
    background: #f5f5f5;
    padding: 15px;
    border-radius: 8px;
}

.sbh-widget-card {
    background: var(--sbh-surface);
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
}

.sbh-widget-title h4 {
    font-size: 20px;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.sbh-widget-table td,
.sbh-widget-table th {
    font-size: 13px;
}

.sbh-order-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #4a90e2;
    color: #4a90e2;
    font-weight: 600;
    font-size: 12px;
}

.sbh-pagination a {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 5px;
    border-radius: 6px;
    background: #e8e8e8;
    color: #333;
    text-decoration: none;
    font-size: 12px;
}

.sbh-pagination a:hover {
    background: #dcdcdc;
}


/* ===========================================================
   4. LOGIN FORM
   =========================================================== */

.sbh-owners-home-login-container {
    width: 100%;
    padding: 12px 20px;
    background: var(--sbh-bg);
    border-bottom: 1px solid var(--sbh-border);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.sbh-login-form-container.sbh-logged-out {
    display: flex;
    align-items: center;
}

.sbh-owners-home-login-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sbh-form-fields {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sbh-input {
    padding: 8px 12px;
    border: 1px solid var(--sbh-border);
    border-radius: var(--sbh-radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--sbh-surface);
    color: #222;
}

.sbh-input:focus {
    outline: none;
    border-color: var(--sbh-primary);
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

.sbh-input::placeholder { color: #999; }

.sbh-input-email,
.sbh-input-password {
    min-width: 180px;
}

.sbh-btn-login {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.sbh-login-status.sbh-logged-in {
    display: flex;
    align-items: center;
}

.sbh-login-greeting {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sbh-login-welcome {
    font-size: 14px;
    color: #222;
    margin: 0;
}

.sbh-login-welcome strong {
    color: var(--sbh-primary);
    font-weight: 600;
}

.sbh-logout-form {
    margin: 0;
    display: inline;
}

.sbh-btn-logout {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

body.owner-not-logged-in .show-when-logged-in,
body.owner-logged-in     .show-when-not-logged-in {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

body.owner-logged-in     .show-when-logged-in,
body.owner-not-logged-in .show-when-not-logged-in {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}


/* ===========================================================
   5. ADMIN LAYOUT & FORMS
   =========================================================== */

.sbh-admin-wrapper {
    font-family: "Segoe UI", sans-serif;
}

.sbh-admin-header {
    background: var(--sbh-primary);
    color: #fff;
    padding: 20px;
    border-radius: var(--sbh-radius-md);
    margin-bottom: 20px;
}

.sbh-admin-body {
    display: flex;
    gap: 20px;
}

.sbh-admin-sidebar {
    width: 220px;
    padding: 15px;
}

.sbh-admin-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sbh-admin-sidebar li {
    margin-bottom: 12px;
}

.sbh-admin-sidebar a {
    text-decoration: none;
    color: var(--sbh-primary);
    font-weight: 600;
}

.sbh-admin-content {
    flex: 1;
    padding: 20px;
}

.sbh-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.sbh-card {
    flex: 1;
}

.sbh-card h2 {
    margin-top: 0;
    font-size: 18px;
}

.sbh-card-number {
    font-size: 36px;
    font-weight: bold;
    margin-top: 10px;
}

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

.sbh-btn-primary {
    padding: 10px 20px;
}

.sbh-form-row {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.sbh-form-row label {
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

.sbh-form-row input,
.sbh-form-row select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: var(--sbh-radius-sm);
}

.sbh-multiselect {
    min-width: 300px;
}

.sbh-form-actions {
    margin-top: 20px;
}


/* ===========================================================
   6. RESPONSIVE
   =========================================================== */

@media (max-width: 768px) {
    .sbh-owners-home-login-container {
        justify-content: center;
        flex-wrap: wrap;
        padding: 16px;
    }

    .sbh-login-form-container.sbh-logged-out {
        justify-content: center;
    }

    .sbh-owners-home-login-form {
        flex-wrap: wrap;
        justify-content: center;
    }

    .sbh-form-fields {
        flex-wrap: wrap;
        justify-content: center;
    }

    .sbh-input-email,
    .sbh-input-password {
        min-width: 150px;
    }

    .sbh-login-status.sbh-logged-in {
        justify-content: center;
        flex-direction: column;
        gap: 15px;
    }

    .sbh-login-greeting {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}


/* ===========================================================
   7. BOOKINGS CALENDAR
   =========================================================== */

.sbh-bookscal-wrap {
    font-family: inherit;
    max-width: 480px;
    background: var(--sbh-surface);
    border: 1px solid var(--sbh-border);
    border-radius: var(--sbh-radius-md);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    padding: 16px;
    margin-bottom: 24px;
}

.sbh-bookscal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sbh-bookscal-period {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

.sbh-bookscal-nav-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: var(--sbh-radius-sm);
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 0;
    color: #555;
    transition: background 0.15s;
}

.sbh-bookscal-nav-btn:hover {
    background: #f0f0f0;
}

.sbh-bookscal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 11px;
    color: #555;
}

.sbh-cal-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sbh-cal-legend-item::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sbh-cal-busy-legend::before     { background: #c0392b; }
.sbh-cal-checkin-legend::before  { background: linear-gradient(to bottom right, #f0f0f0 50%, #c0392b 50%); border: 1px solid #ddd; }
.sbh-cal-checkout-legend::before { background: linear-gradient(to bottom right, #c0392b 50%, #f0f0f0 50%); border: 1px solid #ddd; }
.sbh-cal-free-legend::before     { background: #eee; border: 1px solid #ddd; }

.sbh-bookscal-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.sbh-bookscal-table th {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    padding: 4px 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sbh-bookscal-cell {
    text-align: center;
    padding: 3px 2px;
    vertical-align: middle;
}

.sbh-bookscal-day-num {
    display: block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    margin: 0 auto;
    font-size: 13px;
    color: #333;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.sbh-cal-free .sbh-bookscal-day-num     { background: transparent; }
.sbh-cal-busy .sbh-bookscal-day-num     { background: #c0392b; color: #fff; cursor: pointer; }

.sbh-cal-checkin .sbh-bookscal-day-num {
    background: linear-gradient(to bottom right, #f0f0f0 50%, #c0392b 50%);
    color: #333;
    cursor: pointer;
}

.sbh-cal-checkout .sbh-bookscal-day-num {
    background: linear-gradient(to bottom right, #c0392b 50%, #f0f0f0 50%);
    color: #fff;
    cursor: pointer;
}

.sbh-cal-today .sbh-bookscal-day-num {
    border: 2px solid var(--sbh-primary);
    font-weight: 700;
    line-height: 28px;
}

.sbh-cal-past .sbh-bookscal-day-num { opacity: 0.45; }

.sbh-cal-busy     .sbh-bookscal-day-num:hover,
.sbh-cal-checkin  .sbh-bookscal-day-num:hover,
.sbh-cal-checkout .sbh-bookscal-day-num:hover {
    filter: brightness(1.15);
}

.sbh-bookscal-day-detail {
    margin-top: 14px;
    border: 1px solid #e0e0e0;
    border-radius: var(--sbh-radius-md);
    overflow: hidden;
}

.sbh-bookscal-day-detail-head {
    background: #f8f8f8;
    border-bottom: 1px solid #e8e8e8;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sbh-bookscal-day-detail-title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.sbh-bookscal-day-detail-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #888;
    padding: 0 4px;
}

.sbh-bookscal-day-detail-close:hover { color: #333; }

.sbh-bookscal-day-detail-body { padding: 12px 14px; }

.sbh-bookscal-booking-item {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.sbh-bookscal-booking-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sbh-bookscal-booking-room {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 3px;
}

.sbh-bookscal-booking-dates { font-size: 13px; color: #555; }

.sbh-bookscal-nights {
    color: #888;
    font-size: 12px;
    margin-left: 4px;
}

.sbh-bookscal-loading,
.sbh-bookscal-no-bookings {
    color: #999;
    font-size: 13px;
    text-align: center;
    padding: 10px 0;
    margin: 0;
}

/* === TWO-COLUMN CALENDAR PATCH === */

.sbh-bookscal-wrap {
    max-width: none !important;
}

.sbh-bookscal-months-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px;
    align-items: flex-start;
}

.sbh-bookscal-month-col {
    flex: 1 1 0 !important;
    min-width: 0;
}

.sbh-bookscal-month-label {
    font-weight: 600;
    font-size: 0.9em;
    text-align: center;
    margin: 0 0 6px;
    color: #333;
}

.sbh-bookscal-month-col .sbh-bookscal-table {
    width: 100%;
    table-layout: fixed;
}

/* === END PATCH === */

/* TWO-COL-START */
.sbh-bookscal-wrap { max-width: none !important; padding: 0; }
.sbh-bookscal-months-row { display: flex !important; flex-direction: row !important; gap: 16px; align-items: flex-start; }
.sbh-bookscal-month-col { flex: 1 1 0 !important; min-width: 0; }
.sbh-bookscal-month-header { display: flex; align-items: center; margin-bottom: 6px; }
.sbh-bookscal-month-label { font-weight: 600; font-size: 0.9em; text-align: center; flex: 1; color: #333; margin: 0; }
.sbh-bookscal-nav-btn, .sbh-bookscal-nav-spacer { flex: 0 0 28px; width: 28px; height: 28px; box-sizing: border-box; }
.sbh-bookscal-nav-spacer { visibility: hidden; }
.sbh-bookscal-month-col .sbh-bookscal-table { width: 100%; table-layout: fixed; }
/* TWO-COL-END */