/* =========================
   PROFESSIONAL CUSTOMER TABS (CARD STYLE)
========================= */

#customers .customer-tabs{

    display:flex;
    align-items:center;
    gap:10px;
    overflow-x:auto;

    padding:12px 10px;

    margin-bottom:16px;

    background: #f6f7fb;
    border-radius:14px;

    box-shadow: inset 0 0 0 1px #ececec;

    scrollbar-width:none;
}

#customers .customer-tabs::-webkit-scrollbar{
    display:none;
}

/* TAB BUTTON (CARD STYLE) */
#customers .customer-tabs .tab-btn{

    min-width:110px;

    background:#ffffff;

    border:1px solid #eee;
    border-radius:14px;

    padding:12px 10px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:6px;

    cursor:pointer;

    color:#666;

    transition: all 0.25s ease;

    box-shadow: 0 2px 6px rgba(0,0,0,0.05);

}

/* ICON */
#customers .customer-tabs .tab-btn .material-icons{
    font-size:22px;
}

/* TEXT */
#customers .customer-tabs .tab-btn small{
    font-size:12px;
    font-weight:700;
}

/* HOVER EFFECT */
#customers .customer-tabs .tab-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}

/* ACTIVE TAB (MODERN CARD HIGHLIGHT) */
#customers .customer-tabs .tab-btn.active{

    background: linear-gradient(135deg, #ff7a00, #ff4d00);
    color:#fff;

    border:none;

    box-shadow: 0 8px 18px rgba(255,122,0,0.35);
}

/* ACTIVE ICON */
#customers .customer-tabs .tab-btn.active .material-icons{
    color:#fff;
}

/* ACTIVE UNDERLINE REMOVE (OLD STYLE OVERRIDE) */
#customers .customer-tabs .tab-btn.active::after{
    display:none;
}
#customers .customer-tabs .tab-btn{
    backdrop-filter: blur(6px);
}




/* Customer Tab Content */
.customer-tab{
  display:none;
}

.customer-tab.active{
  display:block;
}

/* Grid layout */
#customers .customer-grid{
  display:flex;
  flex-direction:column;
  gap:8px;   /* reduced gap for compact UI */
}

/* ================= CUSTOMER CARD FIX ================= */

#customers .customer-card{
  background:#fff;
  display:flex;
  align-items:center;     /* IMPORTANT: keep everything aligned */
  justify-content:space-between;
  padding:10px;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  gap:10px;
  min-height:60px;        /* ADDED: prevents height shifting */
}

/* Avatar */
.customer-avatar{
  background:#1565c0;
  color:#fff;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  flex-shrink:0;
  line-height:40px;       /* ADDED: perfect text centering */
}

/* Info section */
.customer-info{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;
  min-width:0;
}

/* Name */
.customer-name{
  font-weight:bold;
  line-height:1.2;
  margin:0;
}

/* Email */
.customer-email{
  font-size:11px;
  color:#888;
  margin:0;               /* FIXED: removed extra spacing */
  line-height:1.2;
}

/* Menu (3 dots) alignment FIX */
.customer-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  height:40px;
  flex-shrink:0;
}

/* Dots */
.menu-dots{
  font-size:22px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  height:40px;
  width:30px;
  line-height:40px;       /* FIXED alignment */
  transform:none !important; /* HARD RESET */
}

/* Info section inside card */
.customer-info{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:0px;
}
.customer-name{
  font-weight:bold;
    line-height:1.2;
    margin:0;
}

/* Search icon inside input */
#customers .customer-search{
  position:relative;
    margin-bottom: 20px;  
    margin-top: -10px;    
    }
#customers .customer-search .search-icon{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  color:#1565c0;
  font-size:20px;
  pointer-events:none;
}
#customers .customer-search input{
  width:100%;
  padding:8px 40px 8px 15px;
  border-radius:25px;
  border:1px solid #ccc;
  border-bottom:3px solid #1565c0; /* bold blue bottom border */
  box-sizing:border-box;
  outline:none;
}
/* Floating Button for Add Customer */
.fab-btn{
  position:fixed;
  bottom:90px;
  right:20px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#1565c0;
  color:#fff;
  font-size:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 5px 15px rgba(0,0,0,0.3);
  cursor:pointer;
  z-index:999;
}

/* Form Screen */
.form-screen{
  padding:15px;
}
.form-screen input,
.form-screen select,
.form-screen textarea{
  width:100%;
  padding:10px;
  margin-bottom:10px;
  border-radius:8px;
  border:1px solid #ccc;
}

/* Profit Tag */
.profit-tag{
  background:#e8f5e9;
  color:#2e7d32;
  padding:8px;
  border-radius:8px;
  font-weight:bold;
  margin-bottom:10px;
}
/* 3 Dot Menu */
.customer-menu{
  position:relative;
  margin-left:auto;
  height:40px;              /* avatar کے برابر */
  display:flex;
  align-items:center;       /* vertical center */
}
/* dots fix */
.menu-dots{
  font-size:22px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  width:30px;
  line-height:0;         
  transform: translateY(-3px);
    /* BASELINE ISSUE FIX */
}

.menu-options{
    display:none;
    position:absolute;
    right:0;
    top:30px;
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
    overflow:hidden;
    z-index:1000;
    min-width:100px;
}

.menu-item{
    padding:8px 12px;
    cursor:pointer;
    font-size:14px;
}

.menu-item:hover{
    background:#f0f0f0;
}

.delete-btn{
    color:#d32f2f;
}
/* ================= PERFECT LOAN TAB ALIGNMENT ================= */

/* Only affect Loans tab cards */
#loansTab .customer-card{
    align-items:flex-start;   /* avatar + info top aligned */
}

/* Make info vertical */
#loansTab .loan-info{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    margin-top:2px;
}

/* Customer name stays inline with avatar */
#loansTab .loan-info .customer-name{
    margin-bottom:8px;
}

/* Receivable / Payable row */
#loansTab .loan-tags{
    display:flex;
    width:100%;
    align-items:center;
}

/* Equal width boxes */
#loansTab .loan-box{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Label */
#loansTab .loan-label{
    font-size:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-weight:500;
}

/* Value */
#loansTab .loan-value{
    font-size:16px;
    font-weight:bold;
    margin-top:3px;
    color:#000;
    text-align:center;
}

/* Divider */
#loansTab .loan-divider{
    width:1px;
    height:30px;
    background:#ddd;
    margin:0 10px;
}

/* Dots */
.dot{
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
}

.red-dot{
    background:#d32f2f;
}

.green-dot{
    background:#2e7d32;
}
/*add customer k liya css */
#addCustomerScreen{
  padding:20px 16px;
  padding-top:18px;   /* Top bar سے controlled gap */
}

/* Professional Form Style - Fixed */

.form-group {
  position: relative;
  margin-bottom: 15px;
}

/* Apply to ALL inputs and textareas inside form-group */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 12px;
  font-size: 15px;
  border: 2px solid #1976d2;   /* Bold Blue Border for all fields */
  border-radius: 10px;          /* Consistent radius for all */
  outline: none;
  background: #f5f5f5;          /* Light gray background matching screen */
  transition: 0.3s;
  box-sizing: border-box;
}

/* Focus Effect for all fields */
.form-group input:focus,
.form-group textarea:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
  background: #fff;  /* Focused field white for highlight */
}

/* Floating Label */
.form-group label {
  position: absolute;
  top: -8px;
  left: 14px;
  background: #e0e0e0; /* Slight gray to match screen bg */
  padding: 0 6px;
  font-size: 13px;
  color: #1565c0;      /* Elegant blue shade for all labels */
  font-weight: 600;
  pointer-events: none;
  transition: 0.2s;
}

/* Optional: floating effect on focus */
.form-group input:focus + label,
.form-group textarea:focus + label {
  color: #0d47a1;
}
/* ================= PROFESSIONAL ADD CUSTOMER FORM ONLY ================= */

/* Scope ONLY to Add Customer Screen */
#addCustomerScreen .form-group {
  position: relative;
  margin-bottom: 24px;
}

/* Bigger & Thicker Professional Fields */

#addCustomerScreen input,
#addCustomerScreen textarea {
  width: 96%;              /* تھوڑا سا زیادہ visual width */
  padding: 22px 18px;      /* Height زیادہ */
  font-size: 17px;         /* Text بڑا */
  border: 3px solid #1976d2 !important;
  border-radius: 16px !important;  /* زیادہ smooth rounded */
  background: #f1f3f6;
  box-sizing: border-box;
  transition: 0.3s;
}

/* Focus Effect */
#addCustomerScreen input:focus,
#addCustomerScreen textarea:focus {
  border-color: #0d47a1 !important;
  box-shadow: 0 0 0 4px rgba(25,118,210,0.15);
  background: #ffffff;
}

/* Floating Label */
#addCustomerScreen .form-group label {
  position: absolute;
  top: -10px;
  left: 18px;
  background: #f4f6f9;
  padding: 0 8px;
  font-size: 14px;
  color: #0d47a1;
  font-weight: 600;
  pointer-events: none;
}
/* ===== Form Button Row ===== */
.form-btn-row{
    display:flex;
    gap:10px;
    margin-top:15px;
}

/* Both buttons equal size */
.form-btn-row button{
    flex:1;
    padding:12px;
    border:none;
    border-radius:15%;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
}

/* Save Button - Blue */
.btn-save{
    background:#1e88e5;
    color:#fff;
}

/* Close Button - Red */
.btn-close{
    background:#e53935;
    color:#fff;
}
/* customer tabs css*/
.customer-tab {
    display: none;
}
.customer-tab.active {
    display: block;
}
/*customer tags */
/* ================= CUSTOMER TAGS ================= */

.customer-tags{
    display:flex;
    gap:0.25cm;              /* tags distance reduced */
    margin-top:-30px;          /* topbar se 1cm distance */
    margin-bottom:30px;     
}

/* TAG BOX */

.customer-tag{
    width:105px;
    height:85px;
    border-radius:15%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:600;
    box-shadow:0 3px 10px rgba(0,0,0,0.15);
    transition:0.2s;
}
    .customer-tag:hover{
    transform:translateY(-2px);

}

/* TAG NAME */

.customer-tag .tag-name{
    position:absolute;
    top:6px;
    left:0;
    width:100%;              /* full width so text wrap na ho */
    text-align:center;
    font-size:10px;          /* smaller name */
    line-height:1.1;
    font-weight:500;
}

/* VALUE */

.customer-tag .tag-value{
    font-size:18px;          /* value thori choti */
    font-weight:700;
}

/* COLORS */

.tag-blue{
    background:#2196f3;
}

.tag-green{
    background:#4caf50;
}

.tag-red{
    background:#f44336;
}
/*send whatsapp detail css*/
/* ================= CUSTOMER DETAIL SCREEN ================= */

#customerDetailScreen{
    padding:15px;
    background:#f6f7fb;
}

#customerDetailForm{
    max-width:500px;
    margin:auto;
    background:#fff;
    padding:20px;
    border-radius:16px;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

/* FORM GROUP (ONLY DETAIL SCREEN) */
#customerDetailForm .form-group{
    position:relative;
    margin-bottom:18px;
}

/* INPUT FIELD */
#customerDetailForm .form-group input,
#customerDetailForm .form-group textarea{
    width:100%;
    padding:14px 12px;
    border:2px solid #1976d2 !important;   /* 🔵 FIXED BLUE BORDER */
    border-radius:12px;
    outline:none;
    font-size:14px;
    background:#f9fbff;
    font-weight:500;
    transition:0.2s;
}

/* FOCUS */
#customerDetailForm .form-group input:focus{
    border-color:#0d47a1 !important;
    box-shadow:0 0 0 3px rgba(25,118,210,0.15);
    background:#fff;
}

/* LABEL */
#customerDetailForm .form-group label{
    position:absolute;
    top:-9px;
    left:12px;
    background:#fff;
    padding:0 6px;
    font-size:12px;
    color:#1565c0;
    font-weight:600;
}

/* DUE FIELD SPECIAL */
#detail_due_input{
    border:2px solid #ff3b30 !important;
    color:#ff3b30;
    font-weight:bold;
}

/* BUTTONS */
.form-btn-row{
    display:flex;
    gap:10px;
    margin-top:15px;
}

.btn-save{
    flex:1;
    background:#25D366;
    color:#fff;
    border:none;
    padding:12px;
    border-radius:10px;
    font-weight:bold;
}

.btn-close{
    flex:1;
    background:#e53935;
    color:#fff;
    border:none;
    padding:12px;
    border-radius:10px;
}
/*store customer badge*/
.storeBadge{

    display:inline-block;

    margin-top:4px;

    padding:2px 8px;

    border-radius:20px;

    background:#e8f7ff;

    color:#0094ff;

    font-size:11px;

    font-weight:600;

}
.login-user {
    border-left: 3px solid #0094ff;
}

.manual-user {
    border-left: 3px solid #ff9900;
}

.customer-email {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}