/* ==========================================================================
   EDAK HUB — Unified Design System
   Version: Phase 5 (2025-10-30)
   Components: Layout, Sidebar, Forms, Buttons, Tables, Wizard
   ========================================================================== */

/* ---------- CSS VARIABLES ---------- */
:root{
  --bg:#0f172a;            /* Topbar dark slate */
  --panel:#0b1226;         /* Sidebar background */
  --card:#ffffff;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --primary:#004c91;       /* EDAK blue */
  --primary-light:#e8f1fb;
  --danger:#c0392b;
  --shadow-md:0 4px 12px rgba(0,0,0,0.08);
}

/* ---------- RESET ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }
body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background:#f4f6f9;
    color:var(--text);
}

/* Form section headings */
.form-container h2{
  margin-top:18px;
  margin-bottom:8px;
  font-size:1.1rem;
  color:var(--primary);
  font-weight:700;
}

/* ==========================================================================
   TOPBAR
   ========================================================================== */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:.75rem;
  height:56px; padding:0 1rem;
  background:var(--bg); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .brand a{
  color:#fff; font-weight:700; text-decoration:none;
}
.hamburger{
  background:transparent; border:0;
  font-size:20px; color:#fff; cursor:pointer;
}
.topbar-actions{
  margin-left:auto; display:flex; align-items:center; gap:.75rem;
}
.user-pill{
  background:rgba(255,255,255,.1);
  padding:.25rem .5rem; border-radius:999px;
}

/* Role chip (used in layouts/app.blade.php if present) */
.role-pill{
  margin-left:.5rem;
  font-size:.8rem;
  opacity:.85;
}

/* ==========================================================================
   USER DROPDOWN (Topbar)
   ========================================================================== */
.user-menu{
  position:relative;
}

.user-menu .user-pill{
  cursor:pointer;
}

.user-dropdown{
  position:absolute;
  right:0;
  top:120%;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:.6rem;
  min-width:180px;
  box-shadow:0 10px 24px rgba(2,6,23,.12);
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:100;
}

.user-dropdown a{
  display:block;
  padding:.6rem .75rem;
  text-decoration:none;
  color:var(--text);
  font-size:.95rem;
}

.user-dropdown a:hover{
  background:var(--primary-light);
  color:var(--primary);
}

.user-menu:hover .user-dropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.layout{
  display:grid; grid-template-columns:260px 1fr;
  min-height:calc(100vh - 56px - 40px);
}
.content{ padding:1.25rem; }
.footer{
  height:40px; display:flex; align-items:center; justify-content:center;
  color:var(--muted);
}

/* ==========================================================================
   STANDARD PAGE CONTAINERS (Reusable)
   ========================================================================== */
.properties-container,
.owners-container,
.units-container,
.tenants-container,
.leases-container,
.users-container,
.form-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.sidebar{
  background:var(--panel); color:#cbd5e1;
  padding:1rem; border-right:1px solid rgba(255,255,255,.06);
}
.sidebar-section{ margin-bottom:1.25rem; }
.sidebar-title{
  font-size:.85rem; text-transform:uppercase;
  letter-spacing:.08em; color:#8aa4c3; margin:.25rem 0 .5rem;
}
.sidebar-link{
  display:block; padding:.45rem .5rem;
  border-radius:.5rem; color:#dbe7f8;
  text-decoration:none; font-size:.95rem;
}
.sidebar-link:hover{ background:rgba(255,255,255,.06); }

/* Disable “Coming soon” sidebar items safely */
.sidebar-link.disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

@media (max-width:1024px){
  .layout{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; inset:56px auto 40px 0; width:260px;
    transform:translateX(-100%); transition:.2s;
  }
  .sidebar.open{ transform:translateX(0); }
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-container, .form{
  max-width:620px; margin:auto; background:#fff;
  padding:2rem; border-radius:1rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}

label{ display:block; margin:12px 0 6px; font-size:.92rem; }
select, input[type="text"], input[type="email"], input[type="date"], input[type="number"], input[type="password"]{
  width:100%; padding:.6rem .7rem; font-size:1rem;
  border:1px solid var(--border); border-radius:.6rem;
  background:#fff; outline:none;
}
select:focus,input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,76,145,.12);
}

.wizard-buttons{
  display:flex; justify-content:space-between;
  margin-top:20px; gap:10px;
}

/* --------------------------------------------------
   GLOBAL FORM ACTIONS (Phase C)
   All Cancel/Save button rows bottom-right with spacing
-------------------------------------------------- */
.form-actions,
.form-actions.align-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;

  /* space from the last field above */
  margin-top:24px;

  /* breathing room from the card edge */
  padding-top:8px;
}

.form-container textarea {
    width: 100%;
    resize: vertical;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.primary-btn, .button{
  appearance:none; border:1px solid transparent;
  background:var(--primary); color:#fff;
  font-weight:600; border-radius:.7rem;
  padding:.6rem 1rem; cursor:pointer; text-decoration:none;
  text-align:center;
}

/* Support both naming styles used across views */
.button.small,
.button.small-btn{
  padding:.35rem .6rem;
  font-size:.9rem;
  border-radius:.65rem;
}

.button.danger,
.button.danger-btn{
  background:var(--danger);
}

/* ==========================================================================
   ALERTS
   ========================================================================== */
.alert{ border-radius:.6rem; padding:.6rem .8rem; margin-top:4px; }
.alert.error{
  background:#fee2e2; border:1px solid #fecaca; color:#7f1d1d;
}
.alert.success{
  background:#dcfce7; border:1px solid #bbf7d0; color:#14532d;
}
.alert.danger{
  background:#fee2e2; border:1px solid #fecaca; color:#7f1d1d;
}

/* ==========================================================================
   TABLES (Spacing + Zebra + Hover)
   ========================================================================== */

/* ---------- AGREEMENT STATUS BADGES ---------- */
.badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  line-height:1.2;
  border:1px solid transparent;
}

.badge-success{ background:#dcfce7; border-color:#bbf7d0; color:#14532d; }
.badge-warning{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.badge-danger{  background:#fee2e2; border-color:#fecaca; color:#7f1d1d; }

/* Row highlights */
.row-expiring{ background:#fff7ed; }
.row-expired{  background:#fee2e2; }

.table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:hidden; /* keeps rounded corners on header/rows */
}

.table thead th{
  background:#f3f6fb;
  color:#0b2c4a;
  font-weight:700;
  letter-spacing:.02em;
}

.table th,
.table td{
  padding:12px 14px;              /* vertical + horizontal spacing */
  text-align:left;
  border-bottom:1px solid #e9edf3;
  vertical-align:middle;
}

.table tbody tr:nth-child(even){
  background:#f8fafc;             /* alternate row colour */
}

.table tbody tr:hover{
  background:#eef6ff;             /* hover highlight */
}

.table th:last-child,
.table td:last-child{
  text-align:right;               /* actions column */
  white-space:nowrap;
}

.table td .button{
  margin-left:6px;
}

/* --------------------------------------------------
   FIX: Table action buttons (forms are block by default)
   Makes View/Edit/Delete sit nicely side-by-side
-------------------------------------------------- */
.inline-form{
  display:inline-block;
  margin:0;
}

.text-right{
  text-align:right;
  white-space:nowrap;
}

.actions{
  text-align:right;
  white-space:nowrap;
}

.actions .button{
  margin-left:6px;
}

/* ==========================================================================
   TABLE WRAPPER (Make any plain table match .table styling)
   Fixes header/data alignment on Properties index
   ========================================================================== */
.table-wrapper{
  width:100%;
}

.table-wrapper table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:hidden;
  table-layout:fixed;             /* key: stable column alignment */
}

.table-wrapper thead th{
  background:#f3f6fb;
  color:#0b2c4a;
  font-weight:700;
  letter-spacing:.02em;
}

.table-wrapper th,
.table-wrapper td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid #e9edf3;
  vertical-align:middle;

  /* keeps columns neat even with long text */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.table-wrapper tbody tr:nth-child(even){
  background:#f8fafc;
}
.table-wrapper tbody tr:hover{
  background:#eef6ff;
}

/* Actions column alignment (use class on th/td: actions-col) */
.table-wrapper th.actions-col,
.table-wrapper td.actions-col{
  text-align:right;
  white-space:nowrap;
}

/* Action buttons group (use div class: table-actions) */
.table-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  align-items:center;
}

.table-actions form{
  margin:0;                        /* prevent form spacing shifts */
}

/* Prevent old margin rule from fighting flex layout */
.table-wrapper td .button{
  margin-left:0;
}

/* ---------- AGREEMENT STATUS BADGES ---------- */
.badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  line-height:1.2;
  border:1px solid transparent;
}

.badge-success{ background:#dcfce7; border-color:#bbf7d0; color:#14532d; }
.badge-warning{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.badge-danger{  background:#fee2e2; border-color:#fecaca; color:#7f1d1d; }

/* Row highlights */
.row-expiring{ background:#fff7ed; }
.row-expired{  background:#fee2e2; }

/* Agreements table: action buttons */
.actions-cell{
  white-space:nowrap;
  overflow:visible;
  padding-right:16px;
}

.actions-buttons{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  overflow:visible;
  min-width: 200px;
}

.actions-head{
  width: 220px;
}

/* ==========================================================================
   Sortable Table Header Styling (match non-link headers)
   ========================================================================== */

/* Remove sidebar-link styling when used inside tables */
.table-wrapper thead th a{
  color:#0b2c4a;               /* same as normal header text */
  font-weight:700;
  text-decoration:none;
  display:inline-block;
}

.table-wrapper thead th a:hover{
  text-decoration:underline;
}

/* Prevent sidebar-link blue override */
.table-wrapper thead th a.sidebar-link{
  background:transparent;
  padding:0;
  border-radius:0;
  color:#0b2c4a;
}

/* ==========================================================================
   Sortable table headers + subtle ▲▼ icons
   ========================================================================== */

.table-sort{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#0b2c4a;
  font-weight:700;
  text-decoration:none;
}

.table-sort:hover{
  text-decoration:underline;
}

.sort-icons{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  transform:translateY(1px);
  opacity:.45;
}

.table-sort.is-active .sort-icons{
  opacity:.85;
}

.sort-up, .sort-down{
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
}

.sort-up{
  border-bottom:6px solid #0b2c4a;  /* ▲ */
  opacity:.25;
}

.sort-down{
  border-top:6px solid #0b2c4a;     /* ▼ */
  opacity:.25;
}

/* Highlight active direction */
.sort-up.is-on{ opacity:1; }
.sort-down.is-on{ opacity:1; }

/* Ensure header icons are never clipped by table header overflow rules */
.table-wrapper thead th{
  overflow:visible;
  text-overflow:clip;
}

/* Force sortable header links to look like normal header text (not blue links) */
.table-wrapper thead th .table-sort{
  color:#0b2c4a;
  font-weight:700;
  text-decoration:none;
}

.table-wrapper thead th .table-sort:hover{
  text-decoration:underline;
}

/* ==========================================================================
   DASHBOARD POLISH (Phase 5B Option B)
   ========================================================================== */
.dash-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.25rem;
}
.page-subtitle{
  margin:.35rem 0 0;
  color:#444;
  font-size:.95rem;
}
.dash-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
}
.dash-section{
  margin-top:1.25rem;
}
.section-title{
  margin:0 0 .75rem;
  font-size:1.1rem;
  color:#0b2c4a;
  font-weight:700;
}

@media (max-width:700px){
  .dash-header{
    flex-direction:column;
    align-items:stretch;
  }
}

/* ==========================================================================
   PAGE HEADERS & EMPTY STATES (Reusable)
   ========================================================================== */
.page-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1.25rem;
}

.page-header-left{
  max-width:70%;
}

.page-header-right{
  display:flex;
  align-items:center;
  gap:.5rem;
}

@media (max-width:700px){
  .page-header{
    flex-direction:column;
    align-items:stretch;
  }
  .page-header-left{
    max-width:100%;
  }
}

/* ---------- EMPTY STATE ---------- */
.empty-state{
  margin:3rem auto 0;
  padding:2.5rem 2rem;
  text-align:center;
  background:#ffffff;
  border:1px dashed var(--border);
  border-radius:1rem;
  color:var(--muted);
  max-width:980px;
}

.empty-state h3{
  margin-bottom:.25rem;
  color:var(--text);
}

.empty-state p{
  margin-bottom:1rem;
}

/* Empty state icon (subtle, reusable) */
.empty-icon{
  font-size:2.2rem;
  line-height:1;
  margin-bottom:.75rem;
  opacity:.35;
}

/* Small layout helpers */
.stack{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  align-items:center;
}

.nowrap{
  white-space:nowrap;
}

/* ==========================================================================
   DASHBOARD CARDS
   ========================================================================== */
.cards-grid{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(12,1fr);
}

/* Base card */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1rem;
  transition:transform .06s, box-shadow .06s;
  color:var(--text);              /* prevent blue link text */
}

/* Make clickable cards behave like cards (not links) */
.cards-grid a.card{
  text-decoration:none;           /* remove underline */
  color:var(--text);              /* prevent default link colour */
  display:block;                  /* ensures full card clickable */
}

.cards-grid a.card:hover{
  text-decoration:none;
}

/* Hover effect */
.card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}

/* Disabled cards */
.card.disabled{
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}

.quick-card{ grid-column:span 12; }
@media (min-width:640px){ .quick-card{ grid-column:span 6; } }
@media (min-width:1024px){ .quick-card{ grid-column:span 4; } }


/* ==========================================================================
   AGREEMENT WIZARD
   ========================================================================== */
.wizard-progress{
    display:flex; align-items:center; gap:8px;
    margin:20px 0;
}
.wizard-progress .step{
    width:28px; height:28px; border-radius:50%;
    border:2px solid var(--primary);
    display:flex; justify-content:center; align-items:center;
    font-size:14px; background:#fff; color:var(--primary);
    font-weight:600;
}
.wizard-progress .step.active{
    background:var(--primary); color:#fff;
}
.wizard-progress .bar{
    flex:1; height:4px; background:#ccc; border-radius:2px;
}
.wizard-progress .bar.active{
    background:var(--primary);
}

.summary-section{
  background:#fff; border-radius:8px; padding:15px;
  margin-bottom:15px; box-shadow:var(--shadow-md);
}
.summary-section h3{ margin-top:0; color:var(--primary); }

.bg-warning{ background:#fff8d1; }
.badge-warning{
    background:#ffcc00; padding:4px 8px;
    border-radius:6px; font-size:12px; font-weight:bold;
}

/* Agreements table layout improvements */

.leases-container .table-wrapper table {
  table-layout: auto;
}

.leases-container th:nth-child(4),
.leases-container th:nth-child(5),
.leases-container td:nth-child(4),
.leases-container td:nth-child(5) {
  min-width: 140px;   /* ensures full YYYY-MM-DD shows */
  white-space: nowrap;
}

.leases-container th:nth-child(8),
.leases-container td:nth-child(8) {
  min-width: 220px;   /* actions column */
}

.leases-container td {
  white-space: nowrap;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS — Phase D4
   Target: 375px–430px viewport width
   ========================================================================== */

/* ── No-sidebar layout (login / logged-out pages) ─────────────────────────
   Without the sidebar <nav> in the DOM, <main> auto-places into column 1
   (260px on desktop, 0px at the <=1024px breakpoint). A single 1fr column
   fixes this without touching the sidebar overlay behaviour.                */
.layout--no-sidebar {
    grid-template-columns: 1fr;
}

/* ── Login / auth page wrapper ────────────────────────────────────────────
   .auth-container has no prior CSS. Centre the login card with max-width.  */
.auth-container {
    max-width: 480px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* ── Grid item min-width ──────────────────────────────────────────────────
   CSS grid items default to min-width:auto — they can expand beyond their
   allocated track and push the viewport wider. Setting 0 allows the main
   content area to shrink properly and lets text wrap instead of overflow.  */
.main-content {
    min-width: 0;
}

/* ── Table containers: horizontal scroll ─────────────────────────────────
   white-space:nowrap on table cells causes tables to overflow the viewport.
   Without a scroll container this pushes the page body wider, making all
   other text (headings, paragraphs) word-wrap incorrectly — the root cause
   of the "word by word" breaking reported on multiple pages.
   Applies at all widths — scrollable tables are better than broken layouts. */
.table-wrapper,
.table-wrap,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Table layout: allow horizontal scroll on narrow screens ─────────────
   .table-wrapper table uses table-layout:fixed + width:100%, which forces
   all columns into equal shares of the container width and clips overflow
   with text-overflow:ellipsis ("Tes…", "Va…"). Switching to auto layout
   at tablet/phone widths lets the table grow to fit content; the
   overflow-x:auto wrapper then provides horizontal scroll.
   Breakpoint 768px: sidebar becomes a fixed overlay at 1024px, so narrow
   tables are a real concern from 768px down.                               */
@media (max-width: 768px) {
    .table-wrapper table {
        table-layout: auto;
        width: auto;
        min-width: 100%;
    }

    .table-wrapper th,
    .table-wrapper td {
        overflow: visible;
        text-overflow: clip;
    }
}

/* ── Small-screen breakpoint (phones 375px–480px) ───────────────────────── */
@media (max-width: 480px) {

    /* Side padding — content no longer sits hard against the screen edge */
    .main-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Reduce form padding 2rem → 1rem; soften border-radius slightly */
    .form-container,
    .form {
        padding: 1rem;
        border-radius: 0.5rem;
    }

    /* Topbar: tighter on narrow screens */
    .topbar {
        padding: 0 0.5rem;
        gap: 0.5rem;
    }

    /* Scale h1 so long page titles don't overflow on narrow screens */
    h1 {
        font-size: 1.5rem;
    }

    /* KPI cards: one per row on mobile (span 12 is already the default,
       but gap reduction means cards now have breathing room at 375px)     */
    .quick-card {
        grid-column: span 12;
    }

    /* Tighten card grid gap so cards don't clip at screen edges */
    .cards-grid {
        gap: 0.5rem;
    }

    /* Page headers: stack title + button on mobile
       (already collapses at 700px, reinforced here for 480px)             */
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-left {
        max-width: 100%;
    }

    /* Form action buttons: left-align on mobile (not pushed to right edge) */
    .form-actions,
    .form-actions.align-right {
        justify-content: flex-start;
    }
}