/* FOX FINANCE — Admin paneli + responsiv komponentlər
   (index.html-dən çıxarılıb; sıra vacibdir — layout.php-dəki yükləmə sırasını dəyişmə) */
/* ============================================================
   ADMIN PANEL + RESPONSIVE-FIRST COMPONENTS
   ============================================================ */

.f-error{color:var(--red); font-size:12.5px; margin-top:10px; display:none;}
.f-error.show{display:block;}

.footer-admin-link{font-size:12.5px; color:rgba(255,255,255,.35); display:inline-flex; align-items:center; gap:6px; transition:color .3s ease;}
.footer-admin-link:hover{color:var(--orange);}

.sf-bar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:26px;}
.sf-search{flex:1 1 240px; position:relative;}
.sf-search i{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--grey-400); font-size:14px;}
.sf-search input{width:100%; padding:13px 16px 13px 42px; border-radius:100px; border:1.5px solid var(--grey-200); font-size:14px; background:var(--white);}
.sf-search input:focus{border-color:var(--orange);}
#vehSearch{-webkit-appearance:none; appearance:none;}
.sf-select{padding:13px 18px; border-radius:100px; border:1.5px solid var(--grey-200); font-size:14px; background:var(--white); color:var(--ink-soft); flex:0 0 auto;}
.sf-actions{flex:0 0 auto; margin-left:auto;}

.cust-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px;}
.cust-card{background:var(--white); border:1px solid var(--grey-200); border-radius:var(--radius-m); padding:22px; transition:all .35s var(--ease);}
.cust-card:hover{box-shadow:var(--shadow-tight); transform:translateY(-4px);}
.cust-card .cc-top{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
.cust-card .cc-avatar{width:48px;height:48px;border-radius:14px; background:linear-gradient(145deg,var(--orange),var(--orange-dark)); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:700; font-family:var(--font-display); flex-shrink:0;}
.cust-card h4{font-size:16px;}
.cust-card .cc-fin{font-size:12px; color:var(--grey-600); font-family:var(--font-mono); margin-top:2px;}
.cust-card .cc-status{margin-left:auto;}
.cust-card .cc-meta{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--grey-600); margin-bottom:16px; border-top:1px dashed var(--grey-200); padding-top:14px;}
.cust-card .cc-meta div{display:flex; justify-content:space-between; gap:10px;}
.cust-card .cc-meta div span:first-child{color:var(--grey-400);}
.cust-card .cc-meta div span:last-child{color:var(--ink-soft); font-weight:600; text-align:right;}
.cust-card .cc-actions{display:flex; gap:8px; flex-wrap:wrap;}
.cust-card .cc-actions button{flex:1 1 auto; padding:9px 10px; border-radius:9px; background:var(--grey-100); font-size:12px; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; gap:6px; transition:all .3s ease; white-space:nowrap;}
.cust-card .cc-actions button:hover{background:var(--ink); color:#fff;}
.cust-card .cc-actions button.danger:hover{background:var(--red);}
.cust-card .cc-actions button.warn:hover{background:var(--orange);}
.cust-card .cc-actions button.ok:hover{background:var(--green);}

.status-pill.active{background:rgba(31,170,89,.12); color:var(--green);}
.status-pill.completed{background:rgba(66,133,244,.12); color:#4285F4;}
.status-pill.suspended{background:rgba(255,107,0,.12); color:var(--orange);}
.status-pill.terminated{background:rgba(225,74,59,.12); color:var(--red);}

.empty-state{text-align:center; padding:60px 20px; color:var(--grey-600);}
.empty-state i{font-size:34px; color:var(--grey-200); margin-bottom:14px;}

.cform-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:16px; margin-bottom:16px;}
.cform-section{margin-bottom:22px;}
.cform-section h5{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--orange); margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.cform-section h5::after{content:''; flex:1; height:1px; background:var(--grey-200);}
.pm-month-list{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px;}
.pm-month-row{border:1.5px solid var(--grey-200); border-radius:var(--radius-m); padding:16px; background:var(--grey-100); transition:all .25s ease;}
.pm-month-row.paid{border-color:var(--green); background:rgba(31,170,89,.08);}
.pm-month-row .pm-idx{font-family:var(--font-display); font-weight:700; font-size:14.5px;}
.pm-month-row.paid .pm-idx{color:var(--green);}
.pm-month-row .pm-label{font-size:12px; color:var(--grey-600); margin-bottom:10px;}
.pm-month-row .pm-ref{font-size:11.5px; color:var(--grey-600); margin-bottom:8px;}
.pm-month-row input{width:100%; background:var(--white); border:1px solid var(--grey-200); border-radius:10px; padding:10px 12px; font-size:13.5px; color:var(--ink);}
.pm-month-row input:focus{border-color:var(--orange);}
.pm-status-badge{display:inline-block; margin-top:10px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; background:var(--grey-200); color:var(--grey-600);}
.pm-month-row.paid .pm-status-badge{background:rgba(31,170,89,.15); color:var(--green);}
/* Payment record (Ödənişi qeyd et) additions */
.pm-month-row.late{border-color:var(--yellow); background:rgba(232,168,0,.18);}
.pm-month-row.late .pm-idx{color:#8a6300;}
.pm-month-row.late .pm-status-badge{background:rgba(232,168,0,.28); color:#8a6300;}
.pm-rec-info{font-size:12px; color:var(--grey-600); margin-top:10px; line-height:1.5;}
.pm-rec-info b{color:#8a6300;}
.pm-record-btn{width:100%; margin-top:10px; justify-content:center; padding:9px 12px; font-size:12.5px;}
.pr-planned{background:var(--grey-100); border:1px solid var(--grey-200); border-radius:12px; padding:12px 14px; font-size:13px; margin-bottom:16px; line-height:1.6;}
.pr-planned span{color:var(--grey-600);}
.pr-hint{font-size:11.5px; color:var(--grey-600); margin-top:6px;}
.pr-error{color:var(--red); font-size:12.5px; margin:4px 0 10px; display:none;}
.pr-error.show{display:block;}
#paymentRecordModal .f-group input{background:var(--grey-100); border:1px solid var(--grey-200); border-radius:12px; padding:14px 16px; width:100%; font-size:14.5px; color:var(--ink);}
#paymentRecordModal .f-group input:focus{border-color:var(--orange); background:var(--white);}
#paymentRecordModal .pr-actions{display:flex; gap:12px; margin-top:8px;}
#paymentRecordModal .pr-actions .btn{flex:1; margin-top:0; width:auto; justify-content:center;}
.hist-table tr.hist-row-late td{background:rgba(232,168,0,.18);}
.status-pill.late-paid{background:rgba(232,168,0,.3); color:#7a5500; display:inline-block; line-height:1.35;}
@media (max-width:640px){
  #paymentRecordModal .modal-box{padding:28px 20px;}
  #paymentRecordModal input{font-size:16px;}
  .hist-table th, .hist-table td{padding:12px 10px; font-size:12.5px;}
}
.pm-chips-wrap{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
.pm-chip{font-size:11px; font-weight:700; padding:5px 11px; border-radius:100px; background:rgba(31,170,89,.12); color:var(--green);}

.file-drop{border:1.5px dashed var(--grey-200); border-radius:14px; padding:18px; text-align:center; cursor:pointer; transition:all .3s ease; position:relative;}
.file-drop:hover{border-color:var(--orange); background:rgba(255,107,0,.03);}
.file-drop input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.file-drop i{color:var(--orange); font-size:20px; margin-bottom:8px; display:block;}
.file-drop .fd-label{font-size:12.5px; color:var(--grey-600);}
.file-drop .fd-list{margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center;}
.file-drop .fd-chip{background:var(--grey-100); border-radius:100px; padding:4px 11px; font-size:11px; color:var(--ink-soft); display:flex; align-items:center; gap:6px;}

.confirm-box{max-width:380px; text-align:center;}
/* The generic confirm dialog is opened on top of other modals (e.g. Admin Notifications). Both use
   .modal-overlay (z-index:2000) and the confirm markup comes earlier in the DOM, so it rendered behind.
   One step above the shared modal layer (still below the toast at 3000) fixes the stacking. */
#confirmModal{z-index:2100;}
/* Admin Notifications: bulk-selection toolbar + per-item checkbox */
.notif-bulk{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 12px;}
.notif-bulk .btn{white-space:normal;}
.notif-bulk .btn[disabled]{opacity:.45; cursor:not-allowed; pointer-events:none;}
.notif-item .ni-check{width:18px; height:18px; accent-color:var(--orange); flex-shrink:0; margin-top:2px; cursor:pointer;}
.notif-item .ni-body{min-width:0; overflow-wrap:anywhere;}
.confirm-box .cf-icon{width:60px;height:60px;border-radius:50%; background:rgba(225,74,59,.1); color:var(--red); display:flex;align-items:center;justify-content:center; font-size:24px; margin:0 auto 18px;}
.confirm-box h3{font-size:19px;}
.confirm-box p{font-size:13.5px; color:var(--grey-600); margin-top:8px;}
.confirm-actions{display:flex; gap:10px; margin-top:26px;}
.confirm-actions button{flex:1;}

.d-card .dc-lbl i{color:var(--orange);}
.d-card.info .dc-val{color:#4285F4;}

.modal-box.cform-box{max-width:760px;}

@media (max-width:640px){
  #vehSearch{font-size:16px;}
  .sf-bar{flex-direction:column; align-items:stretch;}
  /* .sf-search's flex-basis:240px is meant as a width for row layout; in the column layout
     above it gets read as a height, stretching the search box and dropping its icon into the
     empty space below the input. Reset it to a natural, content-sized height at full width. */
  .sf-search{flex:0 0 auto; width:100%;}
  .sf-actions{margin-left:0; width:100%;}
  .sf-actions .btn{width:100%;}
  .cust-card .cc-actions button{flex:1 1 45%;}
  .dash-top{flex-direction:column; align-items:flex-start;}

  /* Admin panel mobile fix: hide logout text (icon stays), same pattern as the customer cabinet */
  #adminLogoutBtn .alb-text{display:none;}

  /* Customer cabinet mobile fix: hide logout button, keep the 6 tabs in one scrollable row */
  #dashboardPage #logoutBtn{display:none;}
  #dashboardPage .dash-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    max-width:100%;
  }
  #dashboardPage .dash-tabs::-webkit-scrollbar{display:none;}
  #dashboardPage .dtab{
    flex:0 0 auto;
    white-space:nowrap;
  }
}