/* public/css/style.css - merged base, header, listings, and admin styles (patched for two-row listing layout) */

/* Reset / base */
* { box-sizing: border-box; }
html,body { height:100%; }
body { font-family: Arial, sans-serif; margin:0; color:#222; background:#f7f7f7; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Header */
.site-header { background:#ffffff; border-bottom:1px solid #e6e6e6; position: relative; z-index: 1000; }
.header-inner { display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:12px 16px; gap:12px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-link { display:flex; align-items:center; text-decoration:none; color:inherit; }
.brand-logo { width:56px; height:56px; object-fit:contain; border-radius:6px; background:#fff; border:1px solid #eee; padding:6px; }
.brand-text { display:flex; flex-direction:column; line-height:1; }
.company-name { font-weight:700; font-size:18px; display:block; }
.company-tag { font-size:12px; color:#666; display:block; }

/* Nav & actions */
.header-actions { display:flex; align-items:center; gap:12px; }
.main-nav { display:flex; gap:10px; margin-right:8px; overflow: visible; }
.nav-link { color:#333; text-decoration:none; padding:8px 10px; border-radius:6px; font-size:14px; }
.nav-link:hover { background:#f0f0f0; }
.auth-actions .btn { margin-left:6px; white-space:nowrap; }

/* Search bar */
.search-bar { max-width:1200px; margin:8px auto 16px; padding:0 16px 12px; }
.search-form { display:flex; gap:8px; align-items:center; }
.search-form input, .search-form select { padding:8px 10px; border:1px solid #ddd; border-radius:6px; background:#fff; }
.search-form button.btn { padding:9px 14px; border-radius:6px; border:0; background:#007bff; color:#fff; cursor:pointer; }

/* Buttons */
.btn { display:inline-block; padding:8px 12px; background:#007bff; color:#fff; text-decoration:none; border-radius:6px; font-weight:600; }
.btn-outline { display:inline-block; padding:8px 12px; background:transparent; color:#007bff; border:1px solid #007bff; border-radius:6px; text-decoration:none; font-weight:600; }

/* Listing grid (public site cards) */
.content { max-width:1200px; margin:0 auto; padding:0 16px 40px; }
.list-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:16px; padding:0; }
.card { background:#fff; border:1px solid #e6e6e6; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 2px 6px rgba(0,0,0,0.03); }
.card .thumb img { width:100%; height:180px; object-fit:cover; display:block; }
.card .meta { padding:12px; flex:1; display:flex; flex-direction:column; gap:8px; }
.card h2 { margin:0; font-size:16px; }
.card .location { color:#666; font-size:13px; margin:0; }
.card .price { margin-top:auto; font-weight:700; color:#0a6; }


/* Detail layout (if used) */
.detail { display:flex; flex-direction:column; gap:16px; padding:16px; max-width:1000px; margin:0 auto; }
.gallery { display:flex; gap:8px; overflow:auto; }
.gallery img { height:200px; object-fit:cover; border-radius:4px; cursor:pointer; }

/* No results */
.no-results { padding:24px; text-align:center; color:#666; }
/* Agent area: professional form and listing styles */
.btn-outline { background:transparent; color:#0b74ff; border:1px solid #0b74ff; padding:8px 12px; border-radius:8px; text-decoration:none; display:inline-block; }
.btn-delete { background:#ef4444; color:#fff; border-radius:8px; padding:8px 12px; border:none; cursor:pointer; }
.agent-listing .btn { padding:8px 10px; border-radius:8px; text-decoration:none; display:inline-block; }
/* Admin dashboard styles */
/* Centered admin grid: balanced gutters and centered main column */
.admin-grid {
  max-width: 1200px;
  margin: 20px auto;
  display: grid;
  /* left gutter | main column (min 760px, max 980px) | right gutter */
  grid-template-columns: 1fr minmax(760px, 980px) 1fr;
  gap: 20px;
  align-items: start;
  padding: 0 16px; /* small page padding so gutters never touch the viewport edge */
}

/* Place panels into the grid columns explicitly for clarity */
.admin-grid > aside.profile-card { grid-column: 1 / 2; }   /* left column (gutter) */
.admin-grid > section.listings { grid-column: 2 / 3; }     /* center main column */
.admin-grid > aside.panel:last-child { grid-column: 3 / 4; } /* right column (gutter) */

/* Make sure the center panel uses full width of its column */
.listings-panel, .listings { width: 100%; box-sizing: border-box; }

/* Reduce visual weight of side gutters on narrow screens */
@media (max-width: 1100px) {
  .admin-grid {
    grid-template-columns: 1fr; /* stack vertically on small screens */
    padding: 12px;
  }
  .admin-grid > aside.profile-card,
  .admin-grid > section.listings,
  .admin-grid > aside.panel:last-child {
    grid-column: auto;
  }
  .listing-row { grid-template-columns: 1fr; }
  .listing-thumb { width:100%; height:200px; }
}

/* Optional: slightly increase center column prominence on very wide screens */
@media (min-width: 1400px) {
  .admin-grid { max-width: 1200px; grid-template-columns: 1fr minmax(820px, 980px) 1fr; }
}

/* Small visual tweak: center the content inside the left/right panels */
.admin-grid aside.profile-card,
.admin-grid aside.panel:last-child {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Ensure the header and main container remain aligned */
.site-header { max-width: 1200px; margin: 0 auto; padding: 12px 16px; box-sizing: border-box; }
.content { max-width: 1200px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
/* Layout */
.admin-wrap { max-width:1200px; margin:20px auto; padding:16px; font-family:Inter,Arial,Helvetica,sans-serif; display:grid; grid-template-columns: 1fr 360px; gap:20px; }

.side-col { background:#fff; border-radius:10px; padding:14px; box-shadow:0 8px 30px rgba(16,24,40,0.04); height:fit-content; }

/* Header / filters / stats */
.admin-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.filter-btn { padding:8px 12px; border-radius:8px; background:#f3f4f6; text-decoration:none; color:#111; font-weight:700; font-size:13px; transition: all .12s ease; }
.filter-btn:hover { transform: translateY(-2px); }
.filter-btn.active { background:#0b74ff; color:#fff; box-shadow:0 6px 18px rgba(11,116,255,0.12); }
.stat { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.stat .item { background:#fff; padding:8px 12px; border-radius:10px; border:1px solid #eef2f7; font-weight:700; color:#0f172a; }

/* Table */
table.admin-table { width:100%; border-collapse:collapse; background:transparent; }
table.admin-table thead th { text-align:left; padding:12px; background:#fbfdff; border-bottom:1px solid #eef2f7; font-weight:800; color:#0f172a; }
table.admin-table tbody td { padding:14px 12px; background:#fff; border-bottom:1px solid #f1f5f9; vertical-align:top; }

/* Listing detail: reactions and booking */
.reaction-btn { font-weight:700; border:1px solid #e6eef6; background:#fff; padding:8px 12px; border-radius:8px; cursor:pointer; }
.reaction-btn.active { border-color:#0b74ff; color:#0b74ff; box-shadow:0 6px 18px rgba(11,116,255,0.08); }
.book-panel input, .book-panel textarea { border:1px solid #e6eef6; border-radius:8px; padding:10px; }
.btn-outline { background:transparent; color:#0b74ff; border:1px solid #0b74ff; padding:8px 12px; border-radius:8px; text-decoration:none; display:inline-block; }
/* Thumbnail cell */
.thumb-cell { width:220px; padding:8px; vertical-align:top; }
/* Header logo */
.site-header .logo img { height:44px; }
/* Agent dashboard header & profile */
.site-header { background:#fff; border-bottom:1px solid #eef2f7; padding:12px 18px; display:flex; align-items:center; gap:16px; box-shadow:0 6px 18px rgba(16,24,40,0.03); }
.logo img { height:44px; width:auto; border-radius:6px; }
.agent-wrap { max-width:1200px; margin:20px auto; display:grid; grid-template-columns: 320px 1fr; gap:20px; align-items:start; }
.profile-card { background:#fff; border-radius:12px; padding:16px; box-shadow:0 8px 30px rgba(16,24,40,0.04); border:1px solid #eef6ff; }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-stats .stat { display:inline-block; margin-right:8px; }

/* Listings */
.listings-panel { background:#fff; border-radius:12px; padding:12px; box-shadow:0 8px 30px rgba(16,24,40,0.04); border:1px solid #eef6ff; }
.listing-compact { display:grid; grid-template-columns: 220px 1fr 160px; gap:12px; padding:12px; border-radius:10px; border:1px solid #f1f5f9; margin-bottom:12px; align-items:start; background:#fff; }
.listing-thumb { width:220px; height:140px; border-radius:8px; overflow:hidden; background:#f3f4f6; }
.listing-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.btn-outline { background:transparent; color:#0b74ff; border:1px solid #0b74ff; padding:8px 12px; border-radius:8px; text-decoration:none; display:inline-block; text-align:center; }
.btn-delete { background:#ef4444; color:#fff; border-radius:8px; padding:8px 12px; border:none; cursor:pointer; text-align:center; }
@media (max-width:900px) {
  .agent-wrap { grid-template-columns: 1fr; padding:12px; }
  .listing-compact { grid-template-columns: 1fr; }
  .listing-thumb { width:100%; height:200px; }
}
/* Comments */
.comments-wrap .comment { gap:12px; }
.comments-wrap .comment .meta { font-weight:700; }
.comments-wrap .comment .role { margin-left:8px; color:#64748b; font-weight:700; font-size:12px; }
/* Thumbnail container (fixed dimensions preserved) */
.listing-thumb {
  width: 220px;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 2px 8px rgba(10,20,30,0.04);
}
.listing-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* Status badge */
.status-badge { padding:6px 10px; border-radius:999px; color:#fff; font-weight:700; font-size:13px; display:inline-block; }
.status-approved { background:#16a34a; }
.status-pending { background:#f59e0b; color:#000; }
.status-rejected { background:#ef4444; }

/* Listing details row (spans right-side columns) */
.details-row td { background: transparent; padding-top:6px; padding-bottom:18px; }
.listing-details { display:flex; flex-direction:column; gap:10px; }
.listing-details-top { padding:8px 10px; border-radius:8px; background:linear-gradient(180deg,#fff,#fbfdff); border:1px solid #eef6ff; box-shadow:0 4px 12px rgba(16,24,40,0.03); }
.listing-title { font-size:15px; font-weight:800; color:#0f172a; display:block; margin-bottom:6px; }
.listing-location, .listing-desc { color:#475569; font-size:13px; margin-bottom:6px; }

/* Price block inside details row */
.listing-details-bottom { display:flex; justify-content:flex-start; padding:0 10px; }
.price-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; background:linear-gradient(180deg,#f6fffb,#f0fff7); border:1px solid #dff6ea; font-weight:800; color:#064e3b; box-shadow:0 4px 14px rgba(10,20,15,0.03); }
.price-label { color:#6b7280; font-weight:700; font-size:13px; }
.price-value { font-size:15px; color:#064e3b; }

/* Actions column: vertical stack on desktop, wrapped horizontal on small screens */
table.admin-table td.actions-cell,
.admin-table td.actions-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  white-space: normal !important;
  min-width: 160px !important;
  padding: 6px 8px !important;
  box-sizing: border-box !important;
}

/* Buttons inside actions cell */
table.admin-table td.actions-cell .action-btn,
.admin-table td.actions-cell .action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06) !important;
  transition: transform .06s ease, box-shadow .12s ease, opacity .12s ease !important;
  width: 100% !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Hover / focus */
table.admin-table td.actions-cell .action-btn:hover,
.admin-table td.actions-cell .action-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(16,24,40,0.12) !important;
}
table.admin-table td.actions-cell .action-btn:focus,
.admin-table td.actions-cell .action-btn:focus {
  outline: 2px solid rgba(11,116,255,0.12) !important;
  outline-offset: 2px !important;
}

/* Button colors */
.btn-view { background:#0ea5e9; color:#fff; }
.btn-approve { background:#16a34a; color:#fff; }
.btn-reject { background:#ef4444; color:#fff; }
.btn-delete { background:#6b7280; color:#fff; }

/* Agent panel */
.agent-list { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.agent-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px; border-radius:8px; background:#fbfdff; border:1px solid #eef2f7; }
.agent-meta { font-size:13px; color:#0f172a; }
.agent-actions button { margin-left:6px; }

/* Small helpers */
.small { font-size:13px; color:#666; }

/* Responsive tweaks */
@media (max-width:1100px) {
  .admin-wrap { grid-template-columns: 1fr; padding:12px; }

  /* Make table more compact on narrow screens */
  table.admin-table thead th { display:none; }
  table.admin-table tbody td { display:block; width:100%; }
  table.admin-table tbody tr { display:block; margin-bottom:12px; border-bottom:1px solid #eef2f7; padding-bottom:12px; }

  /* Thumbnail becomes full width */
  .thumb-cell { width:100%; padding:0; }
  .listing-thumb { width:100%; height:200px; }

  /* Details row becomes stacked under thumb */
  .details-row td { padding:8px 0 0 0; }
  .listing-details-top, .listing-details-bottom { padding-left:0; padding-right:0; }

  /* Actions become horizontal wrap */
  table.admin-table td.actions-cell,
  .admin-table td.actions-cell {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
  }
  table.admin-table td.actions-cell .action-btn,
  .admin-table td.actions-cell .action-btn {
    width: auto !important;
    display: inline-flex !important;
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 120px !important;
  }
}

@media (max-width:720px) {
  .header-inner { padding:10px; }
  .brand-logo { width:48px; height:48px; }
  .search-form { flex-direction:column; align-items:stretch; gap:8px; }
  .main-nav { display:none; } /* hide nav on small screens for simplicity */
}
/* Force header full-bleed and align content to edges */
.site-header {
  width: 100vw;                      /* full viewport width */
  margin-left: calc(50% - 50vw);     /* neutralize any centered container */
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #eef2f7;
  box-shadow: 0 6px 18px rgba(16,24,40,0.03);
  z-index: 1000;
  position: relative;
  padding: 10px 0;
}

/* Row stretches full width; content aligned to edges with gutters */
.site-header .header-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo left, actions right */
  width: 100%;
  padding: 0 28px;                /* page gutter; adjust to match .wrap */
  box-sizing: border-box;
}

/* Logo and brand */
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.logo img { height:44px; width:auto; display:block; }
.brand .site-title { font-weight:800; font-size:18px; color:#0f172a; }
.brand .small-muted { color:#64748b; font-size:13px; }

/* Header actions aligned right */
.header-actions { display:flex; gap:12px; align-items:center; }

/* Buttons */
.btn { background:#0b74ff; color:#fff; padding:8px 12px; border-radius:8px; text-decoration:none; display:inline-block; }
.btn-outline { background:transparent; color:#0b74ff; border:1px solid #0b74ff; padding:8px 12px; border-radius:8px; text-decoration:none; }

/* Defensive rule: override any other width/margin rules that may constrain header */
.site-header[style] { width:100vw !important; margin-left:calc(50% - 50vw) !important; }

/* Responsive tweaks */
@media (max-width: 1100px) {
  .site-header .header-row { padding: 0 14px; }
  .brand .site-title { font-size:16px; }
  .header-actions { gap:8px; }
}
/* Ensure header is full-bleed and row is a flex container */
.site-header {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #eef2f7;
  box-shadow: 0 6px 18px rgba(16,24,40,0.03);
  padding: 10px 0;
  position: relative;
  z-index: 1000;
}

/* header-row: left logo, right actions */
.site-header .header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* critical */
  width: 100% !important;
  padding: 0 28px !important; /* adjust gutter */
  box-sizing: border-box;
}
.header-row { display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand { display:flex; flex-direction:column; line-height:1.05; }
.header-actions { margin-left:auto; display:flex; gap:12px; align-items:center; }


/* Actions block must be a flex container and pushed to the right */
.header-actions {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  margin-left: auto !important; /* ensures it moves to the right */
  min-width: 0; /* defensive for flex children */
}

/* Buttons inside actions */
.header-actions .btn,
.header-actions .btn-outline {
  white-space: nowrap;
}

/* Defensive override for any floats or widths that may constrain the actions */
.header-actions, .header-actions * {
  float: none !important;
  width: auto !important;
  max-width: none !important;
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo left, actions right */
  gap: 12px;
  padding: 0 24px;
}
.header-actions { margin-left: auto; display:flex; gap:12px; align-items:center; }

/* Force header full-bleed and edge-aligned content */
.site-header {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #eef2f7;
  box-shadow: 0 6px 18px rgba(16,24,40,0.03);
  padding: 10px 0;
  position: relative;
  z-index: 1000;
  left: 0;
  right: 0;
}

/* header-row: left logo, right actions */
.site-header .header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0 20px !important; /* gutter; adjust if needed */
  box-sizing: border-box;
}

/* Ensure actions are a flex container and not constrained */
.header-actions {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  margin-left: auto !important;
  min-width: 0 !important;
}

/* Defensive overrides for floats/widths */
.site-header, .site-header * {
  float: none !important;
  max-width: none !important;
  width: auto !important;
}