/* assets/css/app.css */
:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;

  --primary:#2563eb;
  --primary-weak: rgba(37,99,235,.10);

  --shadow: 0 18px 45px rgba(15,23,42,.08);
  --radius: 14px;
  --radius-sm: 10px;

  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
}

/* Typography */
.page-title{
  margin:0;
  font-size: 18px;
  font-weight: 700;
}
.page-subtitle{
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* Utilities */
.stack{ display:flex; flex-direction:column; }
.stack-md{ gap: 16px; }

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card-body{ padding: 16px; }

/* =========================================================
   Button groups
   ========================================================= */
.btn-group {
  display: inline-flex;
  gap: 6px;
}

/* =========================================================
   Base Button
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    font-family: inherit;
    font-weight: 500;
    line-height: 1;

    border-radius: 6px;
    border: 1px solid transparent;

    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;

    transition: background-color .15s ease,
                border-color .15s ease,
                color .15s ease,
                box-shadow .15s ease;
}

/* =========================================================
   Button Sizes
   ========================================================= */
.btn-sm {
    padding: 6px 10px;
    font-size: 12px;
}

.btn-md {
    padding: 8px 14px;
    font-size: 13px;
}

.btn-lg {
    padding: 10px 18px;
    font-size: 14px;
}


/* =========================================================
   Outline Button (Edit / Neutral)
   ========================================================= */
.btn-outline {
    color: #334155;            /* slate-700 */
    border-color: #cbd5e1;     /* slate-300 */
    background-color: transparent;
}

.btn-outline:hover {
    background-color: #f1f5f9; /* slate-100 */
    border-color: #94a3b8;     /* slate-400 */
    color: #0f172a;            /* slate-900 */
}

.btn-outline:active {
    background-color: #e2e8f0; /* slate-200 */
}

.btn-outline:disabled,
.btn-outline[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}


/* =========================================================
   Danger – Outline (Delete actions)
   ========================================================= */
.btn-danger-outline {
    color: #dc2626;               /* red-600 */
    border-color: #dc2626;
    background-color: transparent;
}

.btn-danger-outline:hover {
    background-color: #fee2e2;    /* red-100 */
    color: #b91c1c;               /* red-700 */
    border-color: #b91c1c;
}

.btn-danger-outline:active {
    background-color: #fecaca;    /* red-200 */
}

.btn-danger-outline:disabled,
.btn-danger-outline[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}


/* =========================================================
   Primary Button
   ========================================================= */
.btn-primary {
    background-color: #2563eb; /* blue-600 */
    border-color: #2563eb;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #1d4ed8; /* blue-700 */
    border-color: #1d4ed8;
}

.btn-primary:active {
    background-color: #1e40af; /* blue-800 */
}


/* =========================================================
   Tables
   ========================================================= */
.table-wrapper {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 12px;
}

.table td {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.table-empty {
  padding: 32px;
  text-align: center;
  color: #94a3b8;
}

/* ---------- Table card ---------- */
.table-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
}
.table-wrap{ overflow:auto; }
.table-actions{ white-space:nowrap; display:flex; gap:8px; justify-content:flex-end; }
.text-right{ text-align:right; }
.text-center{ text-align:center; }
.td-strong{ font-weight:600; }
.empty-cell{ padding:18px; text-align:center; color:#9ca3af; }

/* =========================================================
   Action bars
   ========================================================= */
.page-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

/* =========================================================
   Badges (status pills)
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}

.badge-success { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge-warning { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-danger  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.badge-muted   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* =========================================================
   Table action spacing
   ========================================================= */
.table-actions { white-space: nowrap; }
/* Centered max-width container */
.container{
  margin: 0 auto;
  width: 100%;
}

.sidebar-nav{
  padding: 14px 10px;
  gap: 14px;
}

/* Dashboard */
.muted { color: #6b7280; font-size: 12px; }
.right { text-align: right; }

.dashboard { display: flex; flex-direction: column; gap: 24px; }

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

.kpi-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
}

.kpi-label { font-size: 12px; color: #6b7280; }
.kpi-value { margin-top: 6px; font-size: 20px; font-weight: 700; color: #111827; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

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

.dashboard-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
}

.panel-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }

.table-simple { width: 100%; border-collapse: collapse; font-size: 12px; }
.table-simple th, .table-simple td { padding: 8px 6px; border-bottom: 1px solid #f1f5f9; }
.table-simple th { text-align: left; color: #6b7280; font-weight: 600; }

/* ---------------------------------------
   Reusable UI helpers (Owners/Properties)
---------------------------------------- */

/* Page sections */
.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.section-title{margin:0;font-size:14px;font-weight:700}
.section-subtitle{margin:2px 0 0;color:var(--muted);font-size:12px}

.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.table-wrap{overflow:auto}

.empty-cell{text-align:center;padding:28px;color:var(--muted);font-size:12px}

.cell-title{font-weight:600;font-size:13px}
.cell-subtitle{color:var(--muted);font-size:11px;margin-top:2px}

.text-muted{color:var(--muted)}
.muted{color:#cbd5e1}

.mb-4{margin-bottom:16px}

/* Table column helpers */
.col-actions{width:160px}
.col-owner{min-width:240px}
.col-created{min-width:140px}

.td-strong{font-weight:600}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Alerts */
.alert{margin-bottom:12px;padding:10px 12px;border-radius:12px;font-size:12px;border:1px solid transparent}
.alert--success{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.08);color:#065f46}
.alert--info{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.08);color:#1e40af}
.alert--warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10);color:#92400e}

/* Forms */
.form-label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.form-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:6px}
.help-text{font-size:12px;color:var(--muted)}
.help-text--mt{margin-top:6px}

.check-row{display:flex;align-items:center;gap:8px}
.check-row--mt{margin-top:6px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid--3{grid-template-columns:repeat(3,1fr)}
.form-grid--4{grid-template-columns:repeat(4,1fr)}
.align-end{align-items:end}
@media (max-width:720px){
  .form-grid,.form-grid--3,.form-grid--4{grid-template-columns:1fr}
}

/* Dialog / modal */
.modal{border:none;padding:0;border-radius:16px;width:min(720px,95vw);box-shadow:0 24px 80px rgba(0,0,0,.25)}
.modal::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
.modal__form{padding:18px}
@media (max-width:520px){.modal__form{padding:16px}}
.modal__header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal__title{margin:0;font-size:14px}
.modal__actions{display:flex;gap:8px;justify-content:flex-end}

/* Inline checkbox row (used in Properties modals) */
.check-inline{display:flex;gap:10px;align-items:center}
.check-inline__label{margin:0}

/* ===== Form controls ===== */
.field{ display:flex; flex-direction:column; gap:6px; }
.label{ font-size: 12px; font-weight: 600; color:#0f172a; }
.hint{ font-size: 11px; color:#64748b; }

.input, .select, .textarea{
  width: 100%;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

.checkbox{
  display:flex;
  gap:10px;
  align-items:center;
  font-size: 13px;
  color:#334155;
}
.checkbox input{ width: 14px; height: 14px; }

/* ===== Modal (dialog) ===== */
.modal{
  border: none;
  padding: 0;
  width: min(640px, calc(100% - 32px));
  border-radius: 18px;
}
.modal::backdrop{ background: rgba(15, 23, 42, .55); }

.modal-card{
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eef2f7;
}
.modal-title{ font-weight: 700; font-size: 14px; color:#0f172a; }

.icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.icon-btn:hover{ background: #f8fafc; }

.modal-body{ padding: 16px; }
.modal-foot{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid #eef2f7;
}

/* Local layout fix: keep filter controls aligned with other pages */
.page-tools{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap}

.page-tools__left{
    flex:1;
    min-width:280px}

.page-tools__left .form-inline{
    display:flex;
    align-items:flex-end;
    gap:10px;
    flex-wrap:wrap}

.page-tools__left .form-inline .input{min-width:180px}

.page-tools__left .form-inline label{
    display:block;
    margin:0 0 6px;
    color:var(--muted,#6b7280);
    font-size:.85rem}

.page-tools__right{
    display:flex;
    gap:10px;
    align-items:flex-end}

.filter-field{
    display:flex;
    flex-direction:column}

/* Tenant styling */
.tenant-summary{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:12px 14px;border:1px solid rgba(148,163,184,.18);border-radius:14px;background:rgba(148,163,184,.06)}
.tenant-name{font-size:1.1rem;font-weight:700;margin-bottom:2px}
.tenant-meta{opacity:.9;margin-top:4px}
.tenant-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;border-bottom:1px solid rgba(148,163,184,.18);padding-bottom:10px}
.tab{padding:8px 10px;border-radius:10px;text-decoration:none;border:1px solid rgba(148,163,184,.18);color:inherit;opacity:.9}
.tab.active{font-weight:700;opacity:1;background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.28)}
.btn-xs{padding:3px 8px;font-size:.75rem}


/* Responsive form grid */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid__full{ grid-column: 1 / -1; }

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