/* =====================================================================
   LandlordHub - Global styles (AWBilling-flavoured)
   ===================================================================== */

:root {
    --primary:        #2563eb;
    --primary-hover:  #1d4ed8;
    --primary-light:  #eff6ff;
    --sidebar-bg:     #0f0f10;
    --sidebar-text:   #9ca3af;
    --sidebar-active: #ffffff;
    --bg:             #f3f4f6;
    --white:          #ffffff;
    --border:         #e5e7eb;
    --text:           #111827;
    --text-muted:     #6b7280;
    --danger:         #dc2626;
    --warning:        #f59e0b;
    --success:        #10b981;
    --radius:         8px;
    --shadow:         0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --sidebar-width:  240px;

    /* Dashboard alert blocks. Defined in both themes so the markup can
       stay colour-agnostic — see the .alert component below. */
    --alert-danger-bg:      #fff5f5;
    --alert-danger-border:  #dc2626;
    --alert-danger-text:    #111827;
    --alert-danger-accent:  #dc2626;
    --alert-warning-bg:     #fffbeb;
    --alert-warning-border: #d97706;
    --alert-warning-text:   #111827;
    --alert-muted:          #6b7280;

    /* Small status pills (mortgage state, fixed-rate state). */
    --pill-danger-bg:   #fee2e2;  --pill-danger-fg:  #dc2626;
    --pill-warning-bg:  #fff8e1;  --pill-warning-fg: #d97706;
    --pill-success-bg:  #dcfce7;  --pill-success-fg: #16a34a;
    --pill-muted-bg:    #f3f4f6;  --pill-muted-fg:   #6b7280;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

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

/* ---------------------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------------------- */

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 200;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 16px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-nav {
    flex: 1;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--sidebar-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--sidebar-active);
}

.nav-item.active {
    background: var(--primary);
    color: #fff;
}

.nav-item.active:hover {
    background: var(--primary);
    color: #fff;
}

.nav-item svg {
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-item.signout {
    color: #6b7280;
}

.nav-item.signout:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ---------------------------------------------------------------------
   MAIN CONTENT AREA
   --------------------------------------------------------------------- */

.main {
    margin-left: var(--sidebar-width);
    padding: 30px;
    min-height: 100vh;
}

h1 {
    margin: 0 0 24px;
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
}

h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }

/* Title + action row */
.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.page-header-row h1 {
    margin: 0;
}

/* ---------------------------------------------------------------------
   CARDS / TABLES / FORMS / BUTTONS
   --------------------------------------------------------------------- */

.card {
    background: var(--white);
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--primary);
    color: #fff;
    padding: 9px 14px;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
    line-height: 1;
}

.btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
}

.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    border-bottom: 1px solid var(--border);
    background: #fafafa;
    letter-spacing: 0.02em;
}

td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: #f9fafb;
}

.total-row {
    background: #fafafa !important;
    font-weight: 600;
}

.total-row:hover {
    background: #fafafa !important;
}

input, select, textarea {
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--white);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

label {
    display: block;
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.summary {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

/* Status / utility text */
.status-valid    { color: var(--success); font-weight: 600; }
.status-expired  { color: var(--danger);  font-weight: 600; }
.status-warning  { color: var(--warning); font-weight: 600; }
.text-danger     { color: var(--danger); }
.text-success    { color: var(--success); }

/* ---------------------------------------------------------------------
   STAT CARDS (report summaries)
   --------------------------------------------------------------------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow);
}

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

/* ---------------------------------------------------------------------
   REPORT HUB TILES
   --------------------------------------------------------------------- */

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

.report-tile {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: var(--shadow);
    color: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.report-tile:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.report-tile-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.report-tile h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.report-tile p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ---------------------------------------------------------------------
   PROPERTY CARDS (dashboard)
   --------------------------------------------------------------------- */

.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.property-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
}

.property-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}

.property-card-photo {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.property-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.property-card-placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.property-card-body {
    padding: 14px 16px 16px;
}

.property-card-body h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.property-card-meta {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.property-card-tenant {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text);
}

.property-card-rent {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.property-card-stats {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

.property-card-yield {
    font-size: 13px;
    font-weight: 600;
    color: var(--success);
}

/* ---------------------------------------------------------------------
   PROPERTY HERO (photo + map at top of edit page)
   --------------------------------------------------------------------- */

.property-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.hero-photo,
.hero-map {
    height: 300px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    background: var(--white);
}

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

.hero-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    color: var(--text-muted);
    background: var(--bg);
    font-size: 13px;
}

.hero-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 900px) {
    .property-hero {
        grid-template-columns: 1fr;
    }
    .hero-photo,
    .hero-map {
        height: 220px;
    }
}

/* ---------------------------------------------------------------------
   TWO-COLUMN FORM GRID (property edit / add)
   --------------------------------------------------------------------- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}

.form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* label/input default margins look cramped inside a grid cell - tame them */
.form-field label {
    margin-top: 0;
}

.form-field input,
.form-field select,
.form-field textarea {
    margin-bottom: 14px;
}

/* span the full row (notes, photo, anything wide) */
.form-field--full {
    grid-column: 1 / -1;
}

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

/* ---------------------------------------------------------------------
   DETAIL PANELS (documents / tenancies under the property form)
   --------------------------------------------------------------------- */

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
}

@media (max-width: 980px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

.panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: #fafafa;
}

.panel-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.panel-body {
    padding: 0;
}

.panel table {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.panel-empty {
    padding: 22px 18px;
    color: var(--text-muted);
    font-size: 13px;
}

/* compact action buttons used inside panels */
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 6px;
}

.row-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.row-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--white);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

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

.row-actions a.danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: #fef2f2;
}

/* Delete is now a POST <form> (CSRF) - match the anchor styling */
.row-actions form {
    display: inline;
    margin: 0;
}

.row-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--white);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.row-actions button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.row-actions button.danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: #fef2f2;
}

/* Property list thumbnails */
.thumb-link {
    display: inline-block;
    line-height: 0;
}

.thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.thumb-placeholder {
    color: var(--text-muted);
    background: #f3f4f6;
}

.thumb-link:hover .thumb {
    border-color: var(--primary);
}

/* Two-column page layout (inspections, rent increase notice).
   minmax(0,1fr) stops long content / selects widening a column. */
.split-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Dashboard cashflow SVG chart */
.cf-chart { min-width: 760px; }

/* Hamburger toggle - hidden on desktop, revealed in the mobile top bar */
.nav-toggle { display: none; }
.nav-toggle-btn { display: none; }

/* =====================================================================
   RESPONSIVE / MOBILE
   The grid layouts (stats / property / report) already reflow via
   auto-fit, and the form grid, property hero and detail panels have
   their own breakpoints above. This block handles the fixed sidebar
   and wide data tables, which are the remaining mobile pain points.
   ===================================================================== */

@media (max-width: 860px) {

    /* Sidebar becomes a full-width top bar; the nav collapses behind a
       hamburger, toggled purely in CSS via the #nav-toggle checkbox in
       the header (no JavaScript - works within the CSP). */
    .sidebar {
        position: sticky;
        top: 0;
        width: 100%;
        height: auto;
        flex-direction: column;
        z-index: 300;
    }

    .sidebar-logo {
        padding: 12px 16px;
    }

    .nav-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        padding: 6px;
        color: #fff;
        cursor: pointer;
        border-radius: 6px;
    }

    .nav-toggle-btn:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    /* Collapsed by default */
    .sidebar-nav,
    .sidebar-footer {
        display: none;
    }

    .nav-toggle-btn .icon-open  { display: block; }
    .nav-toggle-btn .icon-close { display: none; }

    /* Expanded when the hamburger (checkbox) is checked */
    .nav-toggle:checked ~ .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 4px 12px 12px;
        overflow: visible;
    }

    .nav-toggle:checked ~ .sidebar-footer {
        display: block;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding: 10px 12px 14px;
    }

    .nav-toggle:checked ~ .sidebar-logo .nav-toggle-btn .icon-open  { display: none; }
    .nav-toggle:checked ~ .sidebar-logo .nav-toggle-btn .icon-close { display: block; }

    .nav-item {
        padding: 11px 12px;
        font-size: 14px;
        gap: 10px;
    }

    /* Content uses the full width once the sidebar is on top */
    .main {
        margin-left: 0;
        padding: 16px;
        min-height: 0;
        min-width: 0;
    }

    /* Two-column page layouts collapse to one column */
    .split-2 { grid-template-columns: minmax(0, 1fr); }

    /* Dashboard cashflow chart: less forced width, still scrolls in its card */
    .cf-chart { min-width: 560px; }

    h1 { font-size: 21px; margin-bottom: 16px; }

    .card { padding: 16px; }

    /* Wide data tables scroll horizontally instead of overflowing the
       viewport. Small tables still stretch to full width. max-width is
       what makes the scroll work: without it, width:max-content lets the
       table grow past the screen and widen the whole page. */
    table {
        display: block;
        width: max-content;
        min-width: 100%;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    th, td { padding: 10px 12px; }
}

@media (max-width: 480px) {
    .main { padding: 12px; }
    h1 { font-size: 19px; }
    .card { padding: 14px; }
    .nav-item { font-size: 12px; padding: 6px 9px; }
}

/* ---------------------------------------------------------------------
   DASHBOARD ALERT BLOCKS
   Shared by the rent-increase, mortgage and inspection alerts. Colours
   come from the --alert-* variables so both themes can style them; the
   markup carries no colour of its own.
   --------------------------------------------------------------------- */

.alert-stack { margin-bottom: 20px; }

.alert {
    padding: 20px 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-left: 4px solid transparent;
}

.alert-danger {
    background:  var(--alert-danger-bg);
    border-left-color: var(--alert-danger-border);
    color: var(--alert-danger-text);
}

.alert-warning {
    background:  var(--alert-warning-bg);
    border-left-color: var(--alert-warning-border);
    color: var(--alert-warning-text);
}

.alert-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.alert-title {
    font-weight: 600;
    color: inherit;
}

.alert-detail {
    display: block;
    font-size: 13px;
    margin-top: 3px;
    color: var(--alert-muted);
}

.alert-overdue { color: var(--alert-danger-accent); font-weight: 600; }

.alert .btn { white-space: nowrap; }

/* ---------------------------------------------------------------------
   STATUS PILLS
   --------------------------------------------------------------------- */

.pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

.pill-danger  { background: var(--pill-danger-bg);  color: var(--pill-danger-fg); }
.pill-warning { background: var(--pill-warning-bg); color: var(--pill-warning-fg); }
.pill-success { background: var(--pill-success-bg); color: var(--pill-success-fg); }
.pill-muted   { background: var(--pill-muted-bg);   color: var(--pill-muted-fg); }

/* ---------------------------------------------------------------------
   MORTGAGE SUMMARY (property edit page)
   --------------------------------------------------------------------- */

.mortgage-entry { padding: 16px 18px; }

.mortgage-entry + .mortgage-entry { border-top: 1px solid var(--border); }

/* Historic deals are dimmed so the live one reads first. Restored on
   hover so the detail is still available when wanted. */
.mortgage-entry--ended { opacity: 0.62; transition: opacity 0.15s; }
.mortgage-entry--ended:hover { opacity: 1; }

.mortgage-entry-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.mortgage-entry-lender { font-weight: 600; font-size: 15px; }

.mortgage-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px 24px;
}

.mortgage-fact-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.mortgage-fact-value { font-weight: 600; }
.mortgage-fact-value--lg { font-size: 16px; }
.mortgage-fact-note { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.mortgage-notes {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}