/* ============================================
   AYNLUGINA — additions.css v3
   Dashboard, Admin, CRUD, Mobile Nav,
   Listing cards, History, Subscriptions
   ============================================ */

/* ============================================
   SEARCHABLE SELECT
   ============================================ */
.ss-wrap { position:relative; width:100% }
.ss-display {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border:1.5px solid var(--gray-200);
  border-radius:var(--r); background:var(--white);
  cursor:pointer; transition:var(--t);
  font-size:.9rem; color:var(--black); min-height:44px; user-select:none;
}
.ss-display:hover { border-color:var(--gray-300) }
.ss-wrap:focus-within .ss-display { border-color:var(--brand); box-shadow:0 0 0 3px rgba(232,98,42,.1) }
.ss-arrow { color:var(--gray-400); font-size:.75rem; flex-shrink:0; margin-left:8px; transition:var(--t) }
.ss-val { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ss-dropdown {
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--white); border:1.5px solid var(--gray-200);
  border-radius:var(--r-lg); box-shadow:var(--shadow); z-index:500; overflow:hidden;
}
.ss-dropdown.open { display:block }
.ss-search-wrap { padding:8px; border-bottom:1px solid var(--gray-200) }
.ss-search { width:100%; border:1.5px solid var(--gray-200); border-radius:var(--r); padding:7px 12px; font-size:.85rem; outline:none; font-family:var(--font-body); transition:var(--t) }
.ss-search:focus { border-color:var(--brand) }
.ss-list { max-height:200px; overflow-y:auto; padding:4px 0 }
.ss-item { padding:9px 14px; font-size:.86rem; cursor:pointer; transition:var(--t); color:var(--black) }
.ss-item:hover { background:var(--gray-100); color:var(--brand) }
.ss-item.selected { background:var(--brand-light); color:var(--brand); font-weight:700 }
.ss-empty { padding:14px; font-size:.84rem; color:var(--gray-400); text-align:center }

/* ============================================
   NAVBAR HAMBURGER
   ============================================ */
.navbar__hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  padding:8px; border:none; background:none; flex-shrink:0;
}
.navbar__hamburger span {
  width:22px; height:2px; background:var(--black);
  border-radius:100px; transition:var(--t); display:block;
}
.navbar__hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.navbar__hamburger.open span:nth-child(2) { opacity:0 }
.navbar__hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }

.navbar__mobile-menu {
  display:none; flex-direction:column;
  position:fixed; top:62px; left:0; right:0;
  background:var(--white); border-bottom:1.5px solid var(--gray-200);
  padding:10px 16px 16px; gap:2px; z-index:199;
  box-shadow:var(--shadow); max-height:calc(100vh - 62px); overflow-y:auto;
}
.navbar__mobile-menu.open { display:flex }
.navbar__mobile-menu a {
  padding:11px 14px; border-radius:var(--r);
  font-size:.92rem; font-weight:600; color:var(--gray-700);
  border-bottom:1px solid var(--gray-100); display:block; transition:var(--t);
}
.navbar__mobile-menu a:last-child { border-bottom:none }
.navbar__mobile-menu a:hover { color:var(--brand); background:var(--brand-light) }
.navbar__mobile-menu .mob-divider { border:none; border-top:1.5px solid var(--gray-200); margin:6px 0 }

/* ============================================
   PROFILE PAGE
   ============================================ */
.profile-page-grid { display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start }
.profile-sidebar { position:sticky; top:80px }

/* ============================================
   DASHBOARD
   ============================================ */
.dash-wrap { display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 62px) }
.dash-side { background:var(--gray-100); border-right:1.5px solid var(--gray-200); padding:20px 0 }
.dash-content { padding:32px; background:var(--white) }
.dash-section { display:none }
.dash-section.active { display:block }

.dash-nav-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 20px; font-size:.875rem; font-weight:500;
  color:var(--gray-700); cursor:pointer; transition:var(--t);
  border:none; background:none; width:100%; text-align:left;
  font-family:var(--font-body); border-radius:0;
}
.dash-nav-item:hover { color:var(--brand); background:var(--white) }
.dash-nav-item.active { color:var(--brand); background:var(--white); font-weight:700; border-right:2px solid var(--brand) }
.dash-nav-item .badge { margin-left:auto }

.dash-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px }
.dash-stat { background:var(--gray-100); border-radius:var(--r-xl); padding:18px 20px }
.dash-stat__n { font-family:var(--font-head); font-size:1.7rem; font-weight:800; color:var(--brand) }
.dash-stat__l { font-size:.75rem; color:var(--gray-500); margin-top:2px }

/* Mobile topbar */
.dash-mobile-topbar {
  display:none; background:var(--white); border-bottom:1.5px solid var(--gray-200);
  padding:0; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; position:sticky; top:62px; z-index:100;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.dash-mobile-topbar::-webkit-scrollbar { display:none }
.dash-mobile-topbar a {
  display:inline-flex; align-items:center; gap:5px;
  padding:13px 15px; font-size:.8rem; font-weight:700;
  color:var(--gray-500); text-decoration:none;
  border-bottom:2.5px solid transparent; transition:var(--t); white-space:nowrap;
}
.dash-mobile-topbar a.active { color:var(--brand); border-bottom-color:var(--brand); background:var(--brand-light) }

/* ============================================
   ADMIN RESPONSIVE
   ============================================ */
.admin-wrap { display:flex; min-height:100vh }
.admin-side {
  width:240px; background:var(--gray-900); color:#fff;
  padding:0; position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:150;
  transition:transform .3s var(--ease);
}
.admin-main { margin-left:240px; padding:28px; flex:1; background:var(--gray-100); min-height:100vh }

.admin-hamburger-btn {
  display:none; position:fixed; top:12px; right:16px; z-index:300;
  background:var(--brand); color:#fff; border:none; border-radius:var(--r);
  width:42px; height:42px; font-size:1.1rem; cursor:pointer;
  box-shadow:var(--shadow); align-items:center; justify-content:center;
}
.admin-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:140 }
.admin-overlay.open { display:block }

/* ============================================
   TYPE BADGES
   ============================================ */
.type-badge--biznes { background:#fef3c7; color:#92400e }
.type-badge--person { background:#dbeafe; color:#1e40af }

/* ============================================
   HISTORY / SUBSCRIPTION
   ============================================ */
.hist-item {
  border-left:3px solid var(--gray-200); padding:10px 14px; margin-bottom:8px;
  border-radius:0 8px 8px 0; background:var(--gray-100);
}
.hist-item--aprovim     { border-color:var(--green) }
.hist-item--cmaktivizim { border-color:var(--red) }
.hist-item--aktivizim   { border-color:var(--blue) }
.hist-item--abonim_ri   { border-color:var(--gold) }
.sub-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-radius:var(--r-lg); border:1.5px solid var(--gray-200);
  margin-bottom:8px; background:#fff; flex-wrap:wrap; gap:8px;
}
.sub-row--aktiv  { border-color:var(--green); background:#f0fdf4 }
.sub-row--skaduar { border-color:var(--gray-200); opacity:.7 }

/* ============================================
   CRUD TABLES
   ============================================ */
.crud-table { width:100%; border-collapse:collapse }
.crud-table th { background:var(--gray-100); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; padding:10px 14px; text-align:left; color:var(--gray-500); border-bottom:1.5px solid var(--gray-200) }
.crud-table td { padding:10px 14px; font-size:.875rem; border-bottom:1px solid var(--gray-200); vertical-align:middle }
.crud-table tr:hover td { background:var(--gray-100) }
.crud-table tr:last-child td { border-bottom:none }

/* CRUD modals */
.crud-modal-bg {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px); z-index:500; align-items:center; justify-content:center; padding:20px;
}
.crud-modal-bg.open { display:flex }
.crud-modal {
  background:#fff; border-radius:var(--r-2xl); padding:28px;
  max-width:640px; width:100%; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg); animation:mIn .25s var(--ease);
}
.crud-modal h3 { font-family:var(--font-head); font-size:1.3rem; font-weight:800; margin-bottom:20px }

/* ============================================
   LOKACIONE
   ============================================ */
.location-card {
  background:var(--white); border:1.5px solid var(--gray-200);
  border-radius:var(--r-xl); overflow:hidden;
  transition:var(--t); text-decoration:none; color:var(--black); display:flex; flex-direction:column;
}
.location-card:hover { border-color:var(--brand); box-shadow:var(--shadow); transform:translateY(-2px) }
.location-card__img { height:150px; background:var(--gray-200); overflow:hidden; position:relative }
.location-card__img img { width:100%; height:100%; object-fit:cover }
.location-card__img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; background:var(--brand-light) }
.location-card__body { padding:14px; flex:1; display:flex; align-items:flex-start; gap:10px }
.location-card__icon { width:40px; height:40px; border-radius:10px; background:var(--brand-light); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0 }
.location-card__name { font-family:var(--font-head); font-weight:700; font-size:.92rem; margin-bottom:3px }
.location-card__addr { font-size:.78rem; color:var(--gray-500) }
.location-card__komuna { font-size:.68rem; font-weight:700; color:var(--brand); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px }

/* Map */
#leafletMap { width:100%; height:360px; border-radius:var(--r-xl); z-index:1 }
#mapPreview { display:none; background:var(--brand-light); border-radius:var(--r); padding:10px 14px; font-size:.84rem; font-weight:600; color:var(--brand); margin-top:8px }
.srch-results {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:600;
  background:var(--white); border:1.5px solid var(--gray-200);
  border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.15);
  max-height:260px; overflow-y:auto;
}
.srch-item { padding:11px 14px; cursor:pointer; font-size:.84rem; border-bottom:1px solid var(--gray-100); transition:background .12s; display:flex; flex-direction:column; gap:2px; }
.srch-item:last-child { border-bottom:none; }
.srch-item:hover { background:var(--brand-light); }
.srch-item:hover div:first-child { color:var(--brand); }

/* ============================================
   LISTINGS (shit-blerje listings admin)
   ============================================ */
.listing-admin-card {
  background:#fff; border:1.5px solid var(--gray-200); border-radius:var(--r-xl);
  padding:16px; display:flex; gap:14px; align-items:flex-start; margin-bottom:10px;
  transition:var(--t);
}
.listing-admin-card:hover { border-color:var(--gray-300); box-shadow:var(--shadow-xs) }
.listing-admin-img { width:80px; height:64px; border-radius:var(--r-lg); object-fit:cover; background:var(--gray-100); flex-shrink:0 }
.listing-admin-img-ph { width:80px; height:64px; border-radius:var(--r-lg); background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:1.8rem; flex-shrink:0; color:var(--gray-300) }

/* Image slider (profili.php) */
.img-slider { position:relative; background:#111; border-radius:var(--r-xl); overflow:hidden }
.img-slider__track { display:flex; transition:transform .35s var(--ease) }
.img-slider__slide { min-width:100% }
.img-slider__slide img { width:100%; height:400px; object-fit:contain }
.img-slider__btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.9); border:none; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:var(--t); box-shadow:var(--shadow-sm) }
.img-slider__btn:hover { background:#fff }
.img-slider__prev { left:12px }
.img-slider__next { right:12px }
.img-slider__dots { display:flex; justify-content:center; gap:6px; padding:10px 0 }
.img-slider__dot { width:7px; height:7px; border-radius:50%; background:var(--gray-200); cursor:pointer; transition:var(--t); border:none }
.img-slider__dot.active { background:var(--brand); width:18px; border-radius:100px }

/* Region tabs */
.region-tabs { display:flex; gap:0; border-bottom:1.5px solid var(--gray-200); margin-bottom:28px; overflow-x:auto }
.region-tab { padding:13px 24px; font-family:var(--font-head); font-size:.95rem; font-weight:700; cursor:pointer; border:none; background:none; color:var(--gray-500); position:relative; transition:var(--t); white-space:nowrap; text-decoration:none; display:inline-block }
.region-tab.active { color:var(--brand) }
.region-tab.active::after { content:''; position:absolute; bottom:-1.5px; left:0; right:0; height:2px; background:var(--brand) }

/* Empty state */
.empty-state { text-align:center; padding:70px 20px }
.empty-state__icon { font-size:3.5rem; margin-bottom:14px }
.empty-state__title { font-family:var(--font-head); font-size:1.3rem; font-weight:800; margin-bottom:8px }
.empty-state__sub { color:var(--gray-500); margin-bottom:22px }

/* Misc */
.price-input-wrap { position:relative }
.price-input-wrap input { padding-right:46px }
.price-input-wrap .currency { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-weight:700; color:var(--gray-500); pointer-events:none; font-size:.84rem }
.sold-badge { background:var(--red); color:#fff; font-size:.68rem; font-weight:700; padding:3px 9px; border-radius:100px; text-transform:uppercase; letter-spacing:.04em }
.tab-pills { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:24px }
.tab-pill-btn { padding:8px 16px; border-radius:100px; border:1.5px solid var(--gray-200); background:var(--white); font-size:.82rem; font-weight:600; color:var(--gray-700); text-decoration:none; transition:var(--t); cursor:pointer }
.tab-pill-btn:hover { border-color:var(--brand); color:var(--brand) }
.tab-pill-btn.active { background:var(--brand); color:#fff; border-color:var(--brand) }
.icon-preview { font-size:1.8rem; min-width:44px; text-align:center }
#loc-map { width:100%; height:280px; border-radius:var(--r-xl); z-index:1 }

/* ============================================
   RESPONSIVE — COMPLETE & FINAL
   ============================================ */

/* ---- Tablet 1024px ---- */
@media(max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr) }
  .footer__grid { grid-template-columns:1fr 1fr }
  .stat-cards { grid-template-columns:repeat(2,1fr) }
  .profile-page-grid { grid-template-columns:1fr 260px; gap:20px }
  .dash-stats-grid { grid-template-columns:repeat(2,1fr) }
  .admin-main { padding:20px }
  .prof-layout { grid-template-columns:1fr 300px; gap:24px }
}

/* ---- Mobile 768px ---- */
@media(max-width:768px) {
  /* Navbar — hamburger visible, desktop nav hidden */
  .navbar__nav { display:none !important }
  .navbar__hamburger { display:flex !important }
  .navbar__inner { padding:0 14px }
  /* Hide desktop auth buttons, keep hamburger area clean */
  .navbar__actions .btn--white { display:none }

  /* Grids */
  .grid-2, .grid-3 { grid-template-columns:1fr }
  .grid-4 { grid-template-columns:repeat(2,1fr) }

  /* Profile page */
  .prof-layout { grid-template-columns:1fr !important; padding:20px 16px 40px }
  .prof-sidebar-card { position:static !important }
  .prof-stats { grid-template-columns:repeat(3,1fr) }
  .profile-page-grid { grid-template-columns:1fr !important }
  .profile-sidebar { position:static !important }
  .profile-name { font-size:1.35rem }

  /* Dashboard */
  .dash-wrap { grid-template-columns:1fr !important }
  .dash-side { display:none !important }
  .dash-content { padding:16px }
  .dash-mobile-topbar { display:block !important }
  .dash-stats-grid { grid-template-columns:repeat(2,1fr) !important }

  /* Admin panel */
  .admin-wrap { flex-direction:column }
  .admin-side { transform:translateX(-100%); position:fixed; top:0; bottom:0; width:260px; z-index:200 }
  .admin-side.open { transform:translateX(0) }
  .admin-main { margin-left:0 !important; padding:16px; padding-top:60px }
  .admin-hamburger-btn { display:flex !important }
  .stat-cards { grid-template-columns:repeat(2,1fr) }
  .data-table { font-size:.8rem }
  .data-table td, .data-table th { padding:8px 10px }
  .dataTables_wrapper { overflow-x:auto }

  /* CRUD modals — bottom sheet style */
  .crud-modal-bg { align-items:flex-end !important; padding:0 !important }
  .crud-modal { border-radius:24px 24px 0 0 !important; max-width:100% !important; width:100%; max-height:92vh; border-bottom-left-radius:0; border-bottom-right-radius:0; }

  /* Auth modals — bottom sheet */
  .modal-ov { align-items:flex-end !important; padding:0 !important }
  .modal { border-radius:24px 24px 0 0 !important; max-width:100% !important; width:100%; max-height:92vh; border-bottom-left-radius:0; border-bottom-right-radius:0; }

  /* CRUD grids */
  .crud-wrap-grid { grid-template-columns:1fr !important }

  /* Footer */
  .footer__grid { grid-template-columns:1fr }

  /* Forms */
  .orari-grid { grid-template-columns:1fr }
  .search-bar { flex-direction:column }
  .search-bar .form-group { min-width:100% }

  /* Listing card image */
  .img-slider__slide img { height:240px }

  /* Maps */
  #leafletMap { height:240px }
  #loc-map, #loc-map-add, #loc-map-edit { height:240px }

  /* Register card */
  .register-card { padding:20px; border-radius:var(--r-xl) }

  /* Tables scrollable */
  .data-table-wrap, table.dataTable { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ---- Small mobile 480px ---- */
@media(max-width:480px) {
  .dash-stats-grid { grid-template-columns:1fr !important }
  .stat-cards { grid-template-columns:1fr }
  .grid-4 { grid-template-columns:1fr }
  .profile-cover { height:200px }
  .profile-logo, .profile-logo-ph { width:72px; height:72px; margin-top:-36px; border-radius:14px }
  .prof-stats { grid-template-columns:repeat(3,1fr) }
  .prof-stat-n { font-size:1.3rem }
  .dash-mobile-topbar a { padding:11px 12px; font-size:.76rem }
  .admin-main { padding:12px; padding-top:58px }
  .btn--lg { padding:12px 22px }
  .data-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
  .sb-header__inner { flex-direction:column; gap:14px }
  .sb-header__title { font-size:1.8rem }
  .loc-detail-layout { grid-template-columns:1fr; padding:16px }
}

/* ============================================
   FOOTER MOBILE — fsheh kolonat e tepërta
   ============================================ */
@media(max-width:768px) {
  .footer .footer__col-shfleto,
  .footer .footer__col-biznes {
    display: none !important;
  }
  .footer .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}
@media(max-width:480px) {
  .footer .footer__grid {
    grid-template-columns: 1fr !important;
  }
}