/* =====================================================================
   SMART CATALOG (Profitbase-style) — style.css
   Полный стиль под UI Profitbase smallGrid: Sidebar + Filters + Grid + Modal
   ===================================================================== */

/* ---------------- RESET & BASE TYPOGRAPHY ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Inter", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.45;color:#262626;background:#ffffff;
  max-width:1440px;margin-inline:auto;padding:32px 24px;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
button,select,input{font:inherit;}

/* ---------------- DESIGN TOKENS ---------------- */
:root{
  /* Brand palette */
  --clr-brand-primary:#009944;
  --clr-brand-primary-hover:#007937;
  --clr-brand-primary-light:#E6F6EE;
  --clr-brand-secondary:#FFC20E;

  --clr-bg-light:#F8F9FA;
  --clr-bg-card:#FFFFFF;
  --clr-bg-dark:#F1F3F5;

  --clr-border:#E5E7EB;
  --clr-text-base:#262626;
  --clr-text-muted:#6C757D;

  --clr-success-bg:#E7F6E7;
  --clr-success-text:#1E7E34;
  --clr-warning-bg:#FFF8E5;
  --clr-warning-text:#B28C06;
  --clr-danger-bg:#F3F3F3;
  --clr-danger-text:#777;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --transition:all .2s cubic-bezier(.4,0,.2,1);
}

/* ---------------- LAYOUT ---------------- */
.catalog-header{margin-bottom:32px;}
.catalog-header h1{font-size:2rem;font-weight:700;margin-bottom:6px;}
.breadcrumbs{font-size:.875rem;color:var(--clr-text-muted);}

.catalog-wrapper{display:flex;gap:32px;align-items:flex-start;}

/* Sidebar */
.catalog-sidebar{
  flex:0 0 260px;
  background:var(--clr-bg-card);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);
  padding:24px 20px;
  position:sticky;
  top:24px;
}
.sidebar-title{font-size:1.125rem;font-weight:600;margin-bottom:16px;}

/* Fields & selects */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.field label{font-weight:500;font-size:.9rem;}
.select,select{
  padding:8px 36px 8px 12px;
  border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M4 5l3 3 3-3' fill='none' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center/10px 10px;
  appearance:none;cursor:pointer;transition:var(--transition);
}
.select:hover{border-color:var(--clr-brand-primary);}

hr{border:none;border-top:1px solid var(--clr-border);margin:24px 0;}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:24px;user-select:none;margin-bottom:24px;}
.filters__group{border:none;display:flex;flex-direction:column;gap:8px;min-width:160px;}
.filters__group legend{font-weight:600;font-size:.9rem;margin-bottom:4px;}
.filters__item{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;cursor:pointer;transition:var(--transition);} 
.filters__item:hover{color:var(--clr-brand-primary);}
.filters__item input{accent-color:var(--clr-brand-primary);width:18px;height:18px;cursor:pointer;}

/* Range sliders */
input[type="range"]{width:100%;height:4px;border-radius:2px;background:var(--clr-bg-dark);outline:none;cursor:pointer;}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--clr-brand-primary);box-shadow:0 0 0 3px var(--clr-brand-primary-light);border:none;transition:var(--transition);} 
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.15);} 
.range-values{font-size:.8rem;margin-top:4px;color:var(--clr-text-muted);} 

/* Reset button */
.btn-reset{margin-top:12px;width:100%;padding:10px 14px;border:2px solid var(--clr-brand-primary);border-radius:var(--radius-md);background:#fff;font-weight:600;cursor:pointer;transition:var(--transition);} 
.btn-reset:hover{background:var(--clr-brand-primary);color:#fff;}

/* Main */
.catalog-main{flex:1;}
.grid-wrapper{position:relative;background:var(--clr-bg-light);padding:24px;border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(0,0,0,.05);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;}

/* Unit card */
.unit{position:relative;padding:16px 10px;border-radius:var(--radius-md);text-align:center;font-size:.813rem;line-height:1.25;cursor:pointer;border:2px solid transparent;transition:var(--transition);} 
.unit:hover{transform:translateY(-2px) scale(1.03);} 
.unit__number{font-weight:700;font-size:1rem;display:block;margin-bottom:6px;}

.badge{display:inline-block;background:rgba(0,0,0,.05);border-radius:var(--radius-sm);font-size:.75rem;padding:2px 6px;margin-inline:2px;}

/* Status colours */
.unit--available{background:var(--clr-success-bg);color:var(--clr-success-text);border-color:var(--clr-success-text);} 
.unit--available:hover{box-shadow:0 0 0 3px rgba(30,126,52,.2);} 

.unit--reserved{background:var(--clr-warning-bg);color:var(--clr-warning-text);border-color:var(--clr-warning-text);} 
.unit--reserved:hover{box-shadow:0 0 0 3px rgba(178,140,6,.2);} 

.unit--sold{background:var(--clr-danger-bg);color:var(--clr-danger-text);cursor:default;}
.unit--sold:hover{transform:none;box-shadow:none;}
.unit--sold::after{content:\"\";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,#e0e0e0 0 8px,#f8f8f8 8px 16px);opacity:.25;border-radius:inherit;pointer-events:none;}

/* Tooltip */
.tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#262626;color:#fff;font-size:.75rem;padding:6px 8px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:var(--transition);z-index:5;}
.unit:hover .tooltip{opacity:1;}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:100;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;}
.modal.is-open{opacity:1;visibility:visible;}
.modal__dialog{background:#fff;width:100%;max-width:440px;border-radius:var(--radius-lg);padding:36px 28px;position:relative;animation:dialogEnter .3s cubic-bezier(.4,0,.2,1);} 
@keyframes dialogEnter{from{transform:translateY(16px) scale(.95);opacity:0;}to{transform:none;opacity:1;}}
.modal__close{position:absolute;right:16px;top:12px;border:none;background:none;font-size:1.75rem;line-height:1;color:var(--clr-text-muted);cursor:pointer;transition:var(--transition);} 
.modal__close:hover{color:var(--clr-text-base);} 
.modal__header h2{font-size:1.25rem;font-weight:600;margin-bottom:2px;}
.lot-status{font-size:.875rem;color:var(--clr-text-muted);}
.modal-plan{margin:12px 0 18px;}
.modal-plan img{width:100%;border-radius:var(--radius-sm);border:1px solid var(--clr-border);} 
.details{list-style:none;margin:18px 0 24px;padding:0;border-top:1px solid var(--clr-border);} 
.details li{padding:10px 0;border-bottom:1px solid var(--clr-border);font-size:.9rem;display:flex;justify-content:space-between;}
.details li strong{font-weight:600;}

.cta-buttons{display:flex;gap:12px;flex-wrap:wrap;}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;padding:12px 20px;border-radius:var(--radius-md);border:none;font-weight:600;font-size:1rem;cursor:pointer;transition:var(--transition);} 
.btn--primary{background:var(--clr-brand-primary);color:#fff;}
.btn--primary:hover{background:var(--clr-brand-primary-hover);} 
.btn--outline {
  background: #fff;
  border: 2px solid var(--clr-brand-primary);
  color: var(--clr-brand-primary);
  transition: var(--transition);
}

.btn--outline:hover {
  background: var(--clr-brand-primary);
  color: #fff;
}

.btn--outline:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--clr-brand-primary-light);
}

/* Loader */
.loader{width:48px;height:48px;border:4px solid var(--clr-bg-dark);border-top-color:var(--clr-brand-primary);border-radius:50%;animation:spin .9s linear infinite;margin-inline:auto;margin-block:48px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ----------- Responsive adjustments ----------- */
@media (max-width:900px){
  .catalog-wrapper{flex-direction:column;}
  .catalog-sidebar{position:relative;top:auto;width:100%;display:block;}
}

/* <600 px — выводим сетку в два столбца */
@media (max-width:600px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .unit{padding:12px 6px;}
  .unit__number{font-size:.9rem;}
}

/* <420 px — fallback на auto-fill, чтобы карточки не обрезались */
@media (max-width:420px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
}
