/* =====================================================================
   GIK HOME — paneli i administrimit
   Paletë dhe tipografi sipas Brand Guidelines v2.0
   ===================================================================== */

:root {
  --ivory:#F5F2EC; --beige:#E8DFD2; --taupe:#B7AEA2; --wood:#8B5E3C;
  --charcoal:#1E1E1E; --brass:#C9A968;
  --ivory-pure:#FFFFFF; --taupe-light:#D7D1C8; --wood-deep:#6F4A2F;
  --charcoal-mid:#3A3A38; --charcoal-soft:#5C5A55; --brass-deep:#A8873F;
  --line:#DDD6CA; --danger:#9A4A2C; --danger-bg:#FAEDE7;
  --r-sm:3px; --r-md:6px; --r-lg:10px;
  --display:"Playfair Display", Georgia, "Noto Serif", serif;
  --body:"Montserrat", Arial, "Noto Sans", sans-serif;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--ivory); color:var(--charcoal); font-family:var(--body); font-size:15px; line-height:1.6; }
a { color:var(--wood); }
img { max-width:100%; display:block; }
h1,h2,h3 { font-family:var(--display); font-weight:400; margin:0; line-height:1.2; }
.num { font-variant-numeric:tabular-nums; }
.eyebrow { font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--wood); }

/* ---------- Struktura ---------- */
.shell { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.side { background:var(--charcoal); color:rgba(245,242,236,.62); padding:26px 0; position:sticky; top:0; height:100vh; overflow-y:auto; }

.side-brand { padding:0 22px 22px; border-bottom:1px solid rgba(245,242,236,.12); }
.side-brand img { height:44px; width:auto; margin-bottom:12px; }
.side-brand small { display:block; font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }

.side nav { padding:18px 12px; }
.side nav a {
  display:block; padding:11px 14px; border-radius:var(--r-sm);
  color:rgba(245,242,236,.62); text-decoration:none;
  font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:2px;
}
.side nav a:hover { background:rgba(245,242,236,.06); color:var(--ivory); }
.side nav a.active { background:var(--brass); color:var(--charcoal); }

.side-foot { padding:18px 22px; border-top:1px solid rgba(245,242,236,.12); font-size:.8rem; }
.side-foot a { color:rgba(245,242,236,.5); text-decoration:none; display:block; padding:4px 0; }
.side-foot a:hover { color:var(--brass); }
.side-user { color:rgba(245,242,236,.82); margin-bottom:8px; font-weight:500; }

.main { padding:34px 38px 66px; max-width:1240px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.page-head h1 { font-size:2rem; }
.page-head p { color:var(--charcoal-soft); margin:8px 0 0; font-size:.9rem; }

@media (max-width:940px) {
  .shell { grid-template-columns:1fr; }
  .side { position:static; height:auto; }
  .side nav { display:flex; flex-wrap:wrap; gap:4px; }
  .side nav a { flex:1 1 auto; text-align:center; }
  .main { padding:24px 18px 54px; }
}

/* ---------- Kartat ---------- */
.card { background:var(--ivory-pure); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; margin-bottom:22px; }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.card-head h2 { font-size:1.3rem; }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:24px; }
.stat { background:var(--ivory-pure); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px; }
.stat b { display:block; font-family:var(--display); font-size:2.1rem; font-weight:400; font-variant-numeric:tabular-nums; margin-top:6px; }
.stat.accent { background:var(--charcoal); border-color:var(--charcoal); color:var(--ivory); }
.stat.accent .eyebrow { color:var(--brass); }

/* ---------- Format ---------- */
.field { margin-bottom:16px; }
.field label { display:block; font-size:.65rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--charcoal-soft); margin-bottom:6px; }
.field input, .field select, .field textarea {
  width:100%; font-family:var(--body); font-size:.92rem; color:var(--charcoal); padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--ivory);
}
.field input:focus, .field select:focus, .field textarea:focus { background:var(--ivory-pure); border-color:var(--charcoal); outline:none; }
.field textarea { resize:vertical; min-height:84px; font-size:.9rem; }
.field .hint { font-size:.78rem; color:var(--taupe); margin-top:6px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:800px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--body);
  font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:11px 22px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:background .18s, border-color .18s, color .18s;
}
.btn-primary { background:var(--charcoal); color:var(--ivory); }
.btn-primary:hover { background:var(--charcoal-mid); }
.btn-brass { background:var(--brass); color:var(--charcoal); }
.btn-brass:hover { background:var(--brass-deep); color:var(--ivory); }
.btn-ghost { background:transparent; color:var(--charcoal); border-color:var(--taupe); }
.btn-ghost:hover { border-color:var(--charcoal); }
.btn-danger { background:transparent; color:var(--danger); border-color:#E3C6B8; }
.btn-danger:hover { background:var(--danger-bg); }
.btn-sm { padding:7px 15px; font-size:.68rem; }
.btn-icon { padding:5px 10px; font-size:.8rem; letter-spacing:0; }
.btn-block { width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
:where(a,button,input,select,textarea):focus-visible { outline:2px solid var(--brass-deep); outline-offset:2px; }

/* ---------- Tabelat ---------- */
.table { width:100%; border-collapse:collapse; font-size:.88rem; }
.table th { text-align:left; font-size:.64rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--taupe); padding:0 12px 11px; border-bottom:1px solid var(--line); }
.table td { padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr:last-child td { border-bottom:0; }
.table tbody tr:hover { background:var(--ivory); }
.table-scroll { overflow-x:auto; }
.table-plain td { border-bottom:1px solid var(--line); }
.table-plain tr:last-child td { border-bottom:0; }

.pill { display:inline-block; padding:4px 12px; border-radius:999px; font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.pill-ok   { background:#E9EDE3; color:var(--wood-deep); }
.pill-wait { background:#F6EEDD; color:var(--brass-deep); }
.pill-off  { background:var(--beige); color:var(--charcoal-soft); }
.pill-bad  { background:var(--danger-bg); color:var(--danger); }

.empty { text-align:center; padding:48px 20px; color:var(--charcoal-soft); }
.empty b { display:block; font-family:var(--display); font-size:1.3rem; color:var(--charcoal); margin-bottom:8px; }

.notice { padding:13px 17px; border-radius:var(--r-md); font-size:.89rem; margin-bottom:20px; }
.notice-ok      { background:#EDEFE6; color:var(--wood-deep); border:1px solid #D5D8C6; }
.notice-error   { background:var(--danger-bg); color:var(--danger); border:1px solid #E8CDC0; }
.notice-warning { background:#F6EEDD; color:var(--wood-deep); border:1px solid #E4D3B0; }

/* ---------- Kalendari i panelit ---------- */
.acal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.acal-dow { text-align:center; font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--taupe); padding-bottom:10px; }
.acal-day { position:relative; aspect-ratio:1; border:1px solid var(--line); border-radius:var(--r-md); background:var(--ivory-pure); padding:8px; cursor:pointer; text-align:left; font-family:var(--body); transition:border-color .14s; }
.acal-day:hover { border-color:var(--charcoal); }
.acal-day.is-empty { visibility:hidden; }
.acal-day.past { opacity:.32; cursor:not-allowed; }
.acal-day.booked  { background:#EDEFE6; border-color:#D3D8C6; }
.acal-day.blocked { background:var(--beige); border-color:var(--taupe-light); }
.acal-day.closed  { background:var(--danger-bg); border-color:#E8CDC0; }
.acal-day.sel { border-color:var(--brass-deep); border-width:2px; background:#F6EEDD; }
.acal-day .d { font-size:.86rem; font-weight:600; font-variant-numeric:tabular-nums; }
.acal-day .p { position:absolute; left:8px; bottom:7px; font-size:.68rem; color:var(--charcoal-soft); font-variant-numeric:tabular-nums; }
.acal-day .tag { position:absolute; right:7px; top:7px; font-size:.54rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--taupe); }

.legend { display:flex; gap:18px; flex-wrap:wrap; font-size:.76rem; color:var(--charcoal-soft); margin-top:16px; }
.legend i { display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:7px; vertical-align:-1px; border:1px solid var(--line); }
.legend-free    { background:var(--ivory-pure); }
.legend-booked  { background:#EDEFE6; border-color:#D3D8C6; }
.legend-blocked { background:var(--beige); }
.legend-closed  { background:var(--danger-bg); border-color:#E8CDC0; }

/* ---------- Fotot ---------- */
.imgs { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:15px; }
.img-item { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--ivory-pure); }
.img-item img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.img-item .meta { padding:11px; display:flex; gap:8px; align-items:center; justify-content:space-between; font-size:.78rem; }
.caption-form { padding:11px 11px 0; }
.caption-form input { width:100%; padding:7px 9px; font-size:.8rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--ivory); font-family:var(--body); }
.img-actions { display:flex; gap:4px; }

/* ---------- Ndihmëse ---------- */
.muted { color:var(--charcoal-soft); margin:0 0 15px; font-size:.9rem; }
.cell-sub { color:var(--taupe); font-size:.8rem; }
.cell-right { text-align:right; }
.cell-total { font-size:1.15rem; }
.text-pine, .text-wood { color:var(--wood); }

.tabs { display:flex; gap:6px; flex-wrap:wrap; }
.detail-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:22px; align-items:start; }
@media (max-width:940px) { .detail-grid { grid-template-columns:1fr; } }
.calendar-grid { display:grid; grid-template-columns:1.5fr .8fr; gap:22px; align-items:start; }
@media (max-width:1040px) { .calendar-grid { grid-template-columns:1fr; } }

.action-form { margin-bottom:10px; }
.form-narrow { max-width:660px; }
.button-row { display:flex; gap:10px; flex-wrap:wrap; }
.spaced { margin-top:8px; }
.spaced-top { margin-top:24px; }
.divider { border-top:1px solid var(--line); margin:20px 0; }

.checkbox { display:flex; gap:10px; align-items:center; font-size:.88rem; color:var(--charcoal-soft); margin-bottom:16px; }
.checkbox input { accent-color:var(--charcoal); }
.checkbox-sm { margin-bottom:10px; font-size:.83rem; }

.quote-block { margin-top:15px; padding:15px; background:var(--ivory); border:1px solid var(--line); border-radius:var(--r-md); font-size:.9rem; }
.intent-id { font-size:.72rem; color:var(--taupe); margin:18px 0 0; word-break:break-all; }

.month-nav { display:flex; gap:8px; }
.range-label { color:var(--taupe); font-size:.88rem; margin:0 0 18px; }
.block-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
.block-row:last-child { border-bottom:0; }

.copy-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.copy-row input { flex:1; min-width:280px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--ivory); font-family:var(--body); font-size:.84rem; }

.code-block { background:var(--charcoal); color:#DDD5C4; padding:15px 17px; border-radius:var(--r-md); overflow-x:auto; font-size:.8rem; margin:0; }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.chip-form { display:inline-flex; }
.chip { display:inline-flex; align-items:center; gap:8px; background:var(--ivory); border:1px solid var(--line); border-radius:999px; padding:7px 9px 7px 15px; font-size:.85rem; }
.chip button { background:none; border:0; cursor:pointer; color:var(--taupe); font-size:1.1rem; line-height:1; padding:0 4px; }
.chip button:hover { color:var(--danger); }

.inline-form { display:flex; gap:10px; max-width:470px; }
.inline-form input { flex:1; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--ivory); font-family:var(--body); }

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--ivory); }
.login-card { background:var(--ivory-pure); border:1px solid var(--line); border-radius:var(--r-lg); padding:40px; width:100%; max-width:400px; box-shadow:0 22px 60px rgba(30,30,30,.1); }
.login-logo { display:block; height:130px; width:auto; margin:0 auto 26px; }
.login-card h1 { font-size:1.4rem; margin:0 0 24px; text-align:center; }
.login-back { text-align:center; margin:20px 0 0; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.login-back a { color:var(--taupe); text-decoration:none; }
.login-back a:hover { color:var(--charcoal); }

/* ---------- Menaxhimi i komoditeteve ---------- */
.amenity-add { border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:24px; }
.amenity-add-row { display:grid; grid-template-columns:1.1fr 1.6fr 1fr 1fr auto; gap:12px; align-items:end; }
.amenity-add-row .field { margin-bottom:0; }
.amenity-add-submit { display:flex; align-items:center; gap:14px; }
.amenity-add-submit .checkbox { margin:0; white-space:nowrap; }
@media (max-width:1100px) { .amenity-add-row { grid-template-columns:1fr 1fr; } }

.amenity-group { margin-bottom:26px; }
.amenity-group-title {
  display:flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:.68rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--charcoal);
  padding-bottom:10px; margin:0 0 10px; border-bottom:1px solid var(--line);
}
.amenity-group-title .group-icon { width:18px; height:18px; color:var(--wood); flex:none; }
.amenity-group-title em { font-style:normal; color:var(--taupe); font-size:.7rem; letter-spacing:0; }

.amenity-row {
  display:grid; grid-template-columns:32px 1.7fr 1.1fr 1fr .9fr 40px auto;
  gap:8px; align-items:center; padding:7px 0;
}
.amenity-row.is-off { opacity:.45; }
.amenity-icon { display:flex; justify-content:center; }
.amenity-icon .row-icon { width:19px; height:19px; color:var(--brass-deep); }

.amenity-row input[type=text], .amenity-row select {
  width:100%; padding:8px 10px; font-size:.84rem; font-family:var(--body);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--ivory); color:var(--charcoal);
}
.amenity-row input[type=text]:focus, .amenity-row select:focus { background:var(--ivory-pure); border-color:var(--charcoal); outline:none; }
.amenity-note::placeholder { color:var(--taupe); }

.amenity-star { display:flex; align-items:center; justify-content:center; cursor:pointer; }
.amenity-star input { display:none; }
.amenity-star span { font-size:1.15rem; color:var(--taupe-light); line-height:1; }
.amenity-star input:checked + span { color:var(--brass); }

.amenity-actions { display:flex; gap:5px; }

@media (max-width:1100px) {
  .amenity-row { grid-template-columns:32px 1fr auto; grid-template-areas:
    "icon label actions" ". cat cat" ". icn icn" ". note star"; }
  .amenity-icon { grid-area:icon; } .amenity-label { grid-area:label; }
  .amenity-cat { grid-area:cat; } .amenity-iconpick { grid-area:icn; }
  .amenity-note { grid-area:note; } .amenity-star { grid-area:star; }
  .amenity-actions { grid-area:actions; }
}

/* ---------- Përkthimet ---------- */
.lang-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; }
.lang-tab {
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--ivory-pure);
  font-size:.76rem; font-weight:600; letter-spacing:.06em; color:var(--charcoal); text-decoration:none;
}
.lang-tab:hover { border-color:var(--charcoal); }
.lang-tab.is-active { background:var(--charcoal); border-color:var(--charcoal); color:var(--ivory); }
.lang-tab em { font-style:normal; font-size:.68rem; font-weight:600; color:var(--brass-deep); }
.lang-tab.is-active em { color:var(--brass); }

.tr-group { margin-bottom:26px; }
.tr-group-title {
  font-family:var(--body); font-size:.68rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--charcoal); padding-bottom:10px; margin:0 0 14px;
  border-bottom:1px solid var(--line);
}
.tr-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; padding:11px 0; border-bottom:1px solid var(--line); }
.tr-row:last-child { border-bottom:0; }
.tr-source { font-size:.86rem; color:var(--charcoal-soft); white-space:pre-line; }
.tr-source b { display:block; font-size:.64rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--taupe); margin-bottom:5px; }
.tr-row textarea, .tr-row input[type=text] {
  width:100%; font-family:var(--body); font-size:.88rem; color:var(--charcoal);
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--ivory);
}
.tr-row textarea:focus, .tr-row input[type=text]:focus { background:var(--ivory-pure); border-color:var(--charcoal); outline:none; }
.tr-row textarea { resize:vertical; }
@media (max-width:860px) { .tr-row { grid-template-columns:1fr; gap:8px; } }