/* ====== FONT ====== */
@font-face{
  font-family: 'BPG Nino Mtavruli';
  src: url('/assets/fonts/bpg_nino_mtavruli_bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ====== THEME ====== */
:root{
  --bg:#0b1220;
  --panel:#0f1a2a;
  --panel-2:#121f33;
  --text:#e8f0ff;
  --muted:#9fb3c8;

  --teal:#006666;
  --yellow:#f2c300;
  --yellow-dark:#a07b00;
  --green:#14b86c;
  --green-dark:#0f8d50;
  --red:#b22e2e;
  --red-dark:#7f1f1f;
  --blue:#1b6aa3;
  --blue-dark:#114462;

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
}

html, body {
  font-family: 'BPG Nino Mtavruli', sans-serif;
}

.lead-call-blink {
    animation: callBlink 1s infinite;
    background:#ff1a1a !important;
    color:white !important;
    border-radius:8px;
    padding:3px 8px;
    font-weight:bold;
}

@keyframes callBlink {
    0% { opacity:1; }
    50% { opacity:0.25; }
    100% { opacity:1; }
}


.geo-bold,
button,
input,
select,
textarea {
  font-family: 'BPG Nino Mtavruli', sans-serif !important;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: 'BPG Nino Mtavruli', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:700;
}

/* ====== FILTERS ====== */
.filters{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px 18px;
  padding:18px 16px 10px;
}
.filters .field label{
  display:block; color:var(--muted); margin-bottom:6px; font-size:14px;
}
.filters .field input[type="date"],
.filters .field select{
  width:100%; height:44px;
  background:var(--panel);
  color:var(--text);
  border:2px solid var(--teal);
  border-radius:14px;
  padding:0 12px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; border-radius:14px; border:none; cursor:pointer;
  color:#fff; font-weight:700; text-decoration:none;
}
.btn--blue{ background:var(--blue); }
.btn--blue:hover{ filter:brightness(1.07); }

/* ====== STATUS CHIPS (big pills) ====== */
.chips{ display:flex; gap:14px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:130px; padding:10px 18px; border-radius:40px; position:relative;
  color:#fff; user-select:none; cursor:pointer; transition:transform .1s ease;
  box-shadow: inset 0 -8px rgba(0,0,0,.18), 0 3px 0 rgba(255,255,255,.05);
}
.chip span{ font-size:22px; letter-spacing:.5px; }
.chip:active{ transform:translateY(1px); }
.chip--all{ background:#2a3446; box-shadow: inset 0 -8px rgba(0,0,0,.25); }
.chip--yellow{background: var(--panel);border: 2px solid var(--teal);border-radius: 14px;}

.chip--green{background: var(--panel);border: 2px solid var(--teal);border-radius: 14px;}
.chip--red{background: var(--panel);border: 2px solid var(--teal);border-radius: 14px;}
.chip--blue{background: var(--panel);border: 2px solid var(--teal);border-radius: 14px;}
.chip.is-active{ outline:3px solid rgba(255,255,255,.15); }

/* ====== LEADS GRID/BLOCK ====== */
.leads-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px; padding:12px 16px 40px;
}


/* ====== LEADS: clearer separation & stronger meta ====== */

/* ბარათს უფრო მკაფიო საზღვარი + ჩრდილი */
.lead{
  border:2px solid #55595f;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
   margin-top: 30px;
}

/* ბარათებს შორის მეტი დაშორება მობილურზე */
@media (max-width: 680px){
  .leads-grid{ gap:38px; }
}

/* სათაური უკვე თეთრია; კლიენტის ბლოკი მკაფიოდ იკითხებოდეს */
.lead-meta{
  color:#d6e2ff;   /* უფრო ნათელი ვიდრე muted */
  font-size:16px;  /* გაიზარდა */
  line-height:1.55;
}
.lead-meta .phone,
.lead-meta .client,
.lead-meta b,
.lead-meta strong{
  color:#ffffff;           /* სახელ-გვარი/ნომერი თეთრად */
  font-size:17px;          /* ოდნავ დიდი */
}

/* კომენტარების სია — მყარი, არ უნდა დაიმალოს */
.lead-comments{
  margin-top:10px;
}
.lead-comments-list{
  list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.lead-comment-item{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  padding:8px 10px;
  display:flex; align-items:flex-start; gap:10px;
}
.lead-comment-item .body{
  flex:1; white-space:pre-wrap; color:#fff;
}
.lead-comment-item .meta{
  color:#9fb3c8; font-size:12px;
}
.lead-comment-actions{
  display:flex; gap:6px;
}
.lead-comment-actions .btn{
  height:30px; padding:0 10px; border-radius:8px;
}

/* კომენტარის ჩასაწერი */
.lead-comment{ margin-top:8px; }
.lead-comment input{
  height:44px;
}

/* დაგეგმილი თარიღის ბაბლი (უკვე წითლდება), ოდნავ გამსუბუქებული */
.lead.status-SCHEDULED .lead-head .date{
  background:#b22e2e;
}

/* პატარა ტელეფონებზე კიდევ უფრო მკაფიო დაშორება */
@media (max-width:360px){
  .lead-comment-item{ padding:8px; }
  .lead-meta{ font-size:15.5px; }
}



.lead{
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

/* header: pill + middle bar + date bubble */
.lead-head{
  display:grid;
  grid-template-columns: 210px 1fr 120px;
  align-items:center;
  gap:12px;
  padding:10px 12px;
}
.lead-head .pill{
  background:#2a3446; color:#fff; border-radius:40px; padding:8px 16px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; font-size:20px;
}
.lead.status-TO_CALL  .pill{ background:var(--yellow); color:#0c0c0c; }
.lead.status-CONTACTED .pill{ background:var(--green); }
.lead.status-NO_CONTACT .pill{ background:var(--red); }
.lead.status-SCHEDULED .pill{ background:var(--blue); }

.lead-head .bar{
background: var(--panel);
    border: 2px solid var(--teal);
    border-radius: 14px;
  font-size:18px; text-align:center;
  padding: 8px 12px;
}
.lead-head .date{
  background:var(--blue); border-radius:40px; color:#fff; text-align:center;
  padding:8px 14px; font-size:16px;
}
.lead.status-SCHEDULED .lead-head .date{ background:var(--red); }

/* body */
.lead-body{ padding:12px; }
.lead-title{ font-size:18px; line-height:1.35; color:#fff; margin-bottom:6px; }
.lead-meta{ color:var(--muted); font-size:14px; margin-bottom:10px; }

/* actions & comment */
.lead-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 10px; }
.btn--green{ background:var(--green); }
.btn--lightgreen{ background:#106029 }
.btn--lightred{ background:#9b5151 }
.btn--red{ background:var(--red); }
.btn--call{ background: var(--panel); border: 2px solid var(--teal); border-radius: 14px; color: #07ff07; }
.lead-comment{ display:flex; gap:10px; }
.lead-comment input{
  flex:1; height:44px; background:var(--panel);
  color:var(--text); border:2px solid var(--teal); border-radius:12px; padding:0 12px;
}

/* utility */
.is-hidden{ display:none !important; }

/* ====== MOBILE ====== */
@media (max-width: 680px){

  /* grid to single column */
  .filters{
    grid-template-columns: 1fr;
    gap:12px;
    padding:14px 12px 6px;
  }
  .filters .field input[type="date"],
  .filters .field select,
  .btn{ height:48px; }
  #btn-apply{ width:100%; }

  /* chips 2-column (then 1-col if space is small) */
  .chips{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    margin-top:2px;
  }
  .chip{ width:100%; padding:12px 14px; }
  .chip span{ font-size:20px; }
  @media (max-width: 420px){
    .chips{ grid-template-columns: 1fr; }
  }

  /* leads list 1-col */
  .leads-grid{ grid-template-columns: 1fr; gap:14px; padding:10px 12px 24px; }

  .lead-head{
    grid-template-columns: 1fr; gap:10px;
    padding:12px 12px 6px;
  }
  .lead-head .pill{ width:100%; justify-content:center; }
  .lead-head .bar{ width:100%; }
  .lead-head .date{
    width:fit-content; align-self:flex-start;
    padding:8px 14px; font-size:15px;
  }

  .lead-title{ font-size:17px; }
  .lead-meta{ font-size:13px; }

  .lead-actions{ flex-direction:column; }
  .lead-actions .btn{ width:100%; }

  .lead-comment{ flex-direction:column; }
  .lead-comment input, .lead-comment .btn{ width:100%; }
}

/* ====== VERY SMALL PHONES ====== */
@media (max-width:360px){
  .chip span{ font-size:18px; }
  .lead-head .pill{ font-size:18px; }
  .lead-head .bar{ font-size:16px; }
  .lead-head .date{ font-size:14px; }
}


/* ==== MOBILE ONLY TWEAKS (spacing + stronger borders) ==== */
@media (max-width: 680px){

  /* მეტი დაშორება ფილტრებიდან ლიდებამდე */
  .filters{
    margin-bottom: 16px;   /* დამატებითი სივრცე ფილტრებს ქვემოთ */
    padding-bottom: 8px;
  }

  /* ლიდების შორის უფრო დიდი ინტერვალი */
  .leads-grid{
    gap: 22px;             /* იყო 14px — ოდნავ გავზარდეთ */
    padding-top: 6px;      /* მცირე ჰაერი ფილტრების შემდეგ */
  }

  /* თითო ბარათს მკვეთრი საზღვარი და მეტი „ჰაერი“ */
  .leads-grid .lead{
    margin: 6px 0 20px;    /* ზემოთ/ქვემოთ აშკარა დაშორება */
    border-width: 2px;
    border-color: rgba(0, 102, 102, 0.7);   /* var(--teal) ტონში ძლიერი ბორდერი */
    box-shadow: 0 10px 26px rgba(0,0,0,.38);/* ოდნავ უფრო მკვეთრი ჩრდილი მობილურზე */
  }

  /* შიგნითაც ცოტა ჰაერი, რომ ბორდერი „გაჩკვეტდეს“ */
  .leads-grid .lead .lead-body{
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

@media (max-width: 680px){
  .lead-comment input{
    height: 20px;           /* უფრო მაღალი, ადვილად შესაყვანი ტექსტისთვის */
    font-size: 16px;        /* ოდნავ დიდი ასოები */
    line-height: 2.4;
    padding: 0 14px;
  }
}

@media (max-width: 640px) {
  /* დააყენე ვერტიკალური განლაგება მხოლოდ მობილურზე */
  .lead-comment-actions {
    display: flex;
    flex-direction: column;   /* ვერტიკალურად */
    gap: 6px;
    margin-top: 6px;
  }

  /* პირველზე იყოს რედაქტირება, ქვემოთ – წაშლა */
  .lead-comment-actions .js-c-edit { order: 1; }
  .lead-comment-actions .js-c-del  { order: 2; }

  /* პატარა UX გაუმჯობესებები მობილურზე */
  .lead-comment-actions .btn { width: 100%; min-height: 36px; }
  .lead-comment-item { overflow: visible; }
}