/* ============================================================
   RentEaz — main.css
   Shared design system, loaded on every page.
   ============================================================ */

:root{
  --ink:        #16261E;   /* TEXT color only — never used as a background below */
  --ink-soft:   #4A5750;
  --stamp:      #1F6D4C;   /* accent only — buttons, links, active states */
  --stamp-dark: #134D34;
  --clay:       #B5652E;
  --gold:       #C99A3C;
  --danger:     #A63D2F;

  --bg:         #FFFFFF;
  --bg-soft:    #F7F5EC;
  --surface:    #FFFFFF;
  --line:       #E4E1D2;

  --font-display: 'Fraunces', serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --space-xs: 6px; --space-sm: 12px; --space-md: 20px; --space-lg: 32px; --space-xl: 56px; --space-2xl: 90px;
  --radius: 6px;
}

*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.5;}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:600;color:var(--ink);}
.mono{font-family:var(--font-mono);}
a{color:var(--stamp);}
img{max-width:100%;display:block;}

.btn{display:inline-block;padding:12px 22px;border-radius:var(--radius);font-family:var(--font-body);font-weight:600;font-size:14px;border:none;cursor:pointer;text-decoration:none;transition:transform .12s ease, box-shadow .12s ease;}
.btn-primary{background:var(--stamp);color:#fff;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(31,109,76,.28);}
.btn-clay{background:var(--clay);color:#fff;}
.btn-clay:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(181,101,46,.28);}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-sm{padding:8px 16px;font-size:13px;}
.btn-danger{background:var(--danger);color:#fff;}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-md);}

.badge{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;}
.badge-verified{background:rgba(31,109,76,.1);color:var(--stamp-dark);}
.badge-pending{background:rgba(201,154,60,.15);color:#8A6A22;}
.badge-rejected,.badge-danger{background:rgba(166,61,47,.1);color:var(--danger);}

label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink-soft);}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--font-body);font-size:14px;margin-bottom:var(--space-md);background:var(--surface);color:var(--ink);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--stamp);outline-offset:1px;}
.inline-label{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;color:var(--ink);margin-bottom:var(--space-md);}
.inline-label input[type="checkbox"],.inline-label input[type="radio"]{width:auto;margin:0;}
fieldset{border:none;padding:0;margin:0 0 var(--space-md);}
fieldset legend{font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;padding:0;}

table{width:100%;border-collapse:collapse;background:var(--surface);}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:10px 14px;border-bottom:1px solid var(--line);}
td{padding:12px 14px;font-size:13.5px;border-bottom:1px solid var(--bg-soft);}

.app-topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 48px;background:var(--bg);border-bottom:1px solid var(--line);}
.app-topbar .logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;}
.app-topbar .logo img{height:32px;width:auto;}
.app-topbar nav{display:flex;gap:26px;font-size:13.5px;}
.app-topbar nav a{color:var(--ink-soft);text-decoration:none;}
.app-topbar .actions{display:flex;gap:10px;align-items:center;}

.site-footer{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;padding:28px 20px;background:var(--bg-soft);color:var(--ink-soft);font-size:12.5px;border-top:1px solid var(--line);}
.site-footer a{color:var(--ink-soft);text-decoration:none;}

.dash-topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 30px;background:var(--surface);border-bottom:1px solid var(--line);}
.dash-topbar .logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);text-decoration:none;}
.dash-topbar .logo img{height:26px;width:auto;}
.dash-topbar h1,.dash-topbar h2{font-size:18px;margin:0;}
.dash-nav{display:flex;gap:22px;padding:14px 30px;background:var(--bg-soft);border-bottom:1px solid var(--line);font-size:13.5px;flex-wrap:wrap;}
.dash-nav a{color:var(--ink-soft);text-decoration:none;}
.dash-nav a:hover{color:var(--stamp);}
.dash-body{padding:28px 30px;max-width:1100px;}

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;}
.kpi .lbl{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.kpi .val{font-family:var(--font-display);font-size:26px;font-weight:600;}
.kpi.refund{border-left:3px solid var(--danger);}
.kpi.refund .val{color:var(--danger);}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:22px;}
.panel .p-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);}
.panel .p-head h3{margin:0;font-size:14px;}

.modal-box{background:var(--surface);border-radius:8px;padding:24px;width:340px;max-width:90vw;position:relative;}

@media (max-width: 860px){
  .app-topbar{padding:14px 20px;flex-wrap:wrap;gap:12px;}
  .app-topbar nav{display:none;}
  .dash-body{padding:20px 16px;}
  .kpi-row{grid-template-columns:1fr 1fr;}
}

.dash-topbar-actions{display:flex;align-items:center;gap:14px;}

[data-lucide]{width:18px;height:18px;stroke-width:1.8;vertical-align:middle;}
.icon-sm [data-lucide]{width:14px;height:14px;}
.icon-lg [data-lucide]{width:28px;height:28px;}

#faq-bot-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #0F4C33;
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

#faq-bot-toggle:hover { background: #176B48; }
#faq-bot-toggle svg { width: 24px; height: 24px; }

#faq-bot-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 320px;
  max-width: calc(100vw - 32px);
  height: 420px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
}

#faq-bot-panel.hidden { display: none; }

.faq-bot-header {
  background: #0F4C33;
  color: #fff;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Fraunces', serif;
}

.faq-bot-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.faq-bot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #F4F7F5;
}

.faq-bot-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
}

.faq-bot-bubble.bot {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-bottom-left-radius: 4px;
}

.faq-bot-bubble.user {
  align-self: flex-end;
  background: #0F4C33;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.faq-bot-form {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid #E5E7EB;
  background: #fff;
}

.faq-bot-form input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  font-size: 13px;
}

.faq-bot-form input:focus { outline: none; border-color: #0F4C33; }

.faq-bot-form button {
  padding: 8px 16px;
  border-radius: 999px;
  background: #0F4C33;
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}