/* GKBNB — sistemi i dizajnit "Gjiri". CSS i dorëshkruar, pa varësi. */
:root {
  --primary-50:#f0f7f7; --primary-100:#dcedee; --primary-200:#bcdcdf; --primary-300:#90c2c8;
  --primary-500:#3c838e; --primary-600:#2b6b76; --primary-700:#225762; --primary-800:#1c4750;
  --primary-900:#173a42; --primary-950:#0e2429;
  --accent-50:#fdf3e5; --accent-100:#fae3c2; --accent-200:#f4cc8e; --accent-400:#e2932f; --accent-600:#ae5f10;
  --sand-50:#faf8f5; --sand-100:#f2efe9; --sand-200:#e6e1d7; --sand-300:#d3ccbd; --sand-400:#b3aa97; --sand-500:#948a74;
  --shell:#fbfaf7; --surface:#ffffff; --ink:#221f1a; --ink-soft:#6b6353; --ink-faint:#948a74;
  --ok-50:#f2f7ed; --ok-600:#4e7330; --ok-700:#3e5c28;
  --warn-50:#fbf4e4; --warn-600:#946711; --warn-700:#745010;
  --danger-50:#fceeec; --danger-600:#a43225; --danger-700:#862a20;
  --airbnb:#d93a57; --airbnb-soft:#fae9ec; --booking:#1a5fa8; --booking-soft:#e6eef7;
  --radius:10px; --radius-sm:7px; --radius-lg:16px;
  --shadow-soft:0 1px 2px rgba(14,36,41,.06),0 4px 12px rgba(14,36,41,.05);
  --shadow-lift:0 2px 6px rgba(14,36,41,.08),0 12px 28px rgba(14,36,41,.10);
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--shell); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { margin:0; line-height:1.15; letter-spacing:-0.01em; }
a { color:var(--primary-700); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
.muted { color:var(--ink-soft); }
.faint { color:var(--ink-faint); }
.small { font-size:13px; }
.center { text-align:center; }
.stack > * + * { margin-top:14px; }
.row { display:flex; gap:12px; align-items:center; }
.row.wrap-row { flex-wrap:wrap; }
.spacer { flex:1; }
.hidden { display:none; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:7px; border-radius:var(--radius-sm); padding:9px 16px;
  font-size:14px; font-weight:600; border:1px solid transparent; cursor:pointer; background:var(--primary-700); color:#fff; text-decoration:none; }
.btn:hover { background:var(--primary-800); text-decoration:none; }
.btn.accent { background:var(--accent-400); color:#3a2405; }
.btn.accent:hover { background:var(--accent-600); color:#fff; }
.btn.outline { background:var(--surface); color:var(--primary-700); border-color:var(--sand-300); }
.btn.outline:hover { background:var(--sand-50); }
.btn.ghost { background:transparent; color:var(--ink-soft); }
.btn.ghost:hover { background:var(--sand-100); }
.btn.danger { background:var(--danger-600); color:#fff; }
.btn.sm { padding:6px 12px; font-size:13px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* cards / panels */
.card, .panel { background:var(--surface); border:1px solid var(--sand-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); }
.panel { border-radius:12px; overflow:hidden; }
.panel-head { padding:12px 16px; border-bottom:1px solid var(--sand-200); display:flex; align-items:center; justify-content:space-between; }
.panel-head b { font-size:14px; }
.card-body { padding:18px; }

/* badges */
.badge { display:inline-block; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; letter-spacing:.02em; }
.badge.airbnb { background:var(--airbnb-soft); color:#9c2138; }
.badge.booking { background:var(--booking-soft); color:#12457a; }
.badge.manual { background:var(--primary-100); color:var(--primary-800); }
.badge.ok { background:var(--ok-50); color:var(--ok-700); }
.badge.warn { background:var(--warn-50); color:var(--warn-700); }
.badge.danger { background:var(--danger-50); color:var(--danger-700); }
.badge.muted { background:var(--sand-100); color:var(--ink-soft); }

/* forms */
label { display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:var(--ink); }
.field { margin-bottom:14px; }
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],input[type=tel],select,textarea {
  width:100%; padding:9px 11px; border:1px solid var(--sand-300); border-radius:var(--radius-sm); font-size:14px;
  font-family:inherit; background:var(--surface); color:var(--ink); }
input:focus,select:focus,textarea:focus { outline:2px solid var(--primary-300); outline-offset:1px; border-color:var(--primary-500); }
textarea { min-height:90px; resize:vertical; }
.field .err { color:var(--danger-600); font-size:12px; margin-top:4px; }
.help { font-size:12px; color:var(--ink-faint); margin-top:4px; }
.checkbox { display:flex; align-items:center; gap:8px; font-weight:500; }
.checkbox input { width:auto; }

/* tables */
table.tbl { width:100%; border-collapse:collapse; font-size:14px; }
table.tbl th { text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
  font-weight:600; padding:9px 14px; border-bottom:1px solid var(--sand-200); background:var(--sand-50); }
table.tbl td { padding:10px 14px; border-bottom:1px solid var(--sand-100); vertical-align:middle; }
table.tbl tr:last-child td { border-bottom:none; }
.tbl-wrap { overflow-x:auto; }

/* flash */
.flash { padding:11px 15px; border-radius:10px; margin-bottom:14px; font-size:14px; }
.flash.success { background:var(--ok-50); border:1px solid #c5daab; color:var(--ok-700); }
.flash.error { background:var(--danger-50); border:1px solid #efb3ab; color:var(--danger-700); }
.flash.info { background:var(--primary-50); border:1px solid var(--primary-200); color:var(--primary-800); }
.flash.warn { background:var(--warn-50); border:1px solid #edd28b; color:var(--warn-700); }

/* alerts */
.alert { display:flex; gap:11px; border-radius:11px; padding:12px 14px; font-size:14px; align-items:flex-start; }
.alert.warn { background:var(--warn-50); border:1px solid #edd28b; color:var(--warn-700); }
.alert.ok { background:var(--ok-50); border:1px solid #c5daab; color:var(--ok-700); }
.alert.danger { background:var(--danger-50); border:1px solid #efb3ab; color:var(--danger-700); }

/* ===== site ===== */
.site-header { background:var(--surface); border-bottom:1px solid var(--sand-200); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--ink); }
.brand:hover { text-decoration:none; }
.brand .mark { width:30px; height:30px; }
.site-nav { display:flex; gap:20px; font-size:14px; align-items:center; }
.hero { background:linear-gradient(168deg,var(--primary-50),var(--shell) 62%); padding:60px 0 52px; }
.hero .kick { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-600); }
.hero h1 { font-size:clamp(30px,5vw,46px); font-weight:800; letter-spacing:-0.03em; margin-top:12px; max-width:16ch; }
.hero p { margin-top:16px; max-width:56ch; color:var(--ink-soft); font-size:16px; }
.hero .cta { display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:34px 0; }
.feature h3 { font-size:15px; margin-bottom:6px; }
.feature p { font-size:13.5px; color:var(--ink-soft); margin:0; }
.section-title { font-size:24px; font-weight:800; letter-spacing:-0.02em; }
.prop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-top:22px; }
.prop-card { background:var(--surface); border:1px solid var(--sand-200); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); }
.prop-card:hover { box-shadow:var(--shadow-lift); text-decoration:none; }
.prop-card .photo { height:180px; background:var(--sand-200); position:relative; background-size:cover; background-position:center; }
.prop-card .photo .tag { position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,.93); border-radius:999px; padding:3px 10px; font-size:11px; font-weight:600; color:var(--primary-900); }
.prop-card .body { padding:14px 16px 16px; }
.prop-card h3 { font-size:16px; }
.prop-card .meta { margin-top:6px; font-size:12.5px; color:var(--ink-faint); display:flex; gap:12px; flex-wrap:wrap; }
.prop-card .price { margin-top:12px; font-family:var(--mono); }
.prop-card .price b { font-size:19px; font-weight:600; color:var(--primary-800); }
.site-footer { background:var(--primary-900); color:#cfe0e2; margin-top:60px; }
.site-footer .wrap { padding:34px 20px; display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; }
.site-footer a { color:#e8f0f1; }

/* calendar (public) */
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal .dow { font-size:10px; text-align:center; color:var(--ink-faint); font-weight:700; text-transform:uppercase; }
.cal .day { aspect-ratio:1/1.05; border-radius:7px; border:1px solid var(--sand-200); background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.cal .day.empty { border:none; background:transparent; }
.cal .day.off { background:var(--sand-100); color:var(--ink-faint); }
.cal .day.off .d { text-decoration:line-through; }
.cal .day .d { font-size:12px; font-weight:600; }
.cal .day .p { font-family:var(--mono); font-size:9.5px; color:var(--primary-600); }
.cal-legend { display:flex; gap:14px; margin-top:12px; font-size:11px; color:var(--ink-faint); flex-wrap:wrap; }
.cal-legend i { width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }

/* gallery */
.gallery { display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:120px; gap:8px; }
.gallery .g { border-radius:10px; background-size:cover; background-position:center; background-color:var(--sand-200); }
.gallery .g.big { grid-row:span 2; }
.amenities { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.amenities span { font-size:12.5px; padding:6px 11px; border-radius:8px; background:var(--sand-100); border:1px solid var(--sand-200); color:var(--ink-soft); }

/* ===== admin ===== */
.admin { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.sidebar { background:var(--primary-950); padding:16px 0; }
.sidebar .brand { color:#fff; padding:0 18px 16px; }
.sidebar a { display:flex; align-items:center; gap:10px; padding:8px 18px; font-size:14px; color:#9fb6ba; position:relative; }
.sidebar a:hover { color:#fff; text-decoration:none; background:rgba(255,255,255,.04); }
.sidebar a.active { color:#fff; background:rgba(255,255,255,.06); }
.sidebar a.active::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--accent-400); border-radius:0 3px 3px 0; }
.sidebar .group { padding:14px 18px 5px; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:#5d7175; font-weight:700; }
.main { background:var(--shell); min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:13px 24px; border-bottom:1px solid var(--sand-200); background:var(--surface); }
.topbar .title { font-size:18px; font-weight:700; }
.who { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-soft); }
.avatar { width:28px; height:28px; border-radius:50%; background:var(--primary-200); color:var(--primary-900); display:grid; place-items:center; font-size:12px; font-weight:700; }
.content { padding:22px 24px 40px; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.page-head h1 { font-size:23px; font-weight:800; letter-spacing:-0.02em; }
.page-head p { color:var(--ink-soft); font-size:14px; margin:4px 0 0; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.stat { background:var(--surface); border:1px solid var(--sand-200); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow-soft); }
.stat .k { font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }
.stat .v { font-family:var(--mono); font-size:26px; font-weight:500; margin-top:5px; color:var(--primary-800); }
.stat .s { font-size:12px; color:var(--ink-faint); margin-top:2px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.form-grid .full { grid-column:1 / -1; }

/* unified calendar */
.ucal-wrap { overflow-x:auto; }
.ucal { display:grid; gap:3px; min-width:900px; }
.ucal .hd { font-size:10px; text-align:center; color:var(--ink-faint); font-weight:700; padding-bottom:3px; }
.ucal .hd.we { color:var(--accent-600); }
.ucal .rl { font-size:13px; font-weight:600; display:flex; align-items:center; padding-right:8px; }
.ucal .cell { height:30px; border-radius:5px; background:var(--surface); border:1px solid var(--sand-200); }
.ucal .cell.airbnb { background:var(--airbnb); border-color:var(--airbnb); }
.ucal .cell.booking { background:var(--booking); border-color:var(--booking); }
.ucal .cell.manual { background:var(--primary-600); border-color:var(--primary-600); }
.ucal .cell.shadow { background:repeating-linear-gradient(45deg,var(--sand-200),var(--sand-200) 3px,var(--sand-100) 3px,var(--sand-100) 6px); }
.ucal .cell.today { box-shadow:inset 0 0 0 2px var(--accent-400); }

/* login */
.login-wrap { min-height:100vh; display:grid; place-items:center; background:linear-gradient(168deg,var(--primary-50),var(--shell)); padding:20px; }
.login-card { width:100%; max-width:380px; }

@media (max-width:820px){
  .admin { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .features { grid-template-columns:1fr; }
  .grid-2,.grid-3,.form-grid { grid-template-columns:1fr; }
  .gallery { grid-template-columns:1fr 1fr; }
}