/* Customer Tabs */
#customers .customer-tabs{
  display:flex;
  justify-content:space-around;
  margin-bottom:10px;
}
#customers .customer-tabs .tab-btn{
  flex:1;
  padding:10px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  background:#e0e0e0;
  color:#333;
  font-weight:bold;
  margin:0 2px;
}
#customers .customer-tabs .tab-btn.active{
  background:#1565c0;
  color:#fff;
}

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

/* Grid layout for customer cards */
#customers .customer-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Individual customer card */
#customers .customer-card{
  background:#fff;
  flex:1 1 calc(50% - 10px);
  display:flex;
  align-items:center;
  padding:10px;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* Avatar for first letter */
.customer-avatar{
  background:#1565c0;
  color:#fff;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  margin-right:10px;
}

/* Info section inside card */
.customer-info{
    flex:1;
    display:flex;
    align-items:center;   /* vertical center */
}
.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;
}