/* ======================================================
   TEXTILE ERP - MASTER CSS FILE
====================================================== */

/* 1. BASE STYLES */
body { 
    background: #F4F7F9; 
    color: #0F172A; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    margin: 0; 
    padding: 0; 
}
.app-container { 
    max-width: 600px; 
    margin: 0 auto; 
    padding: 15px; 
    padding-bottom: 80px; 
}
.page-title { 
    font-size: 22px; 
    font-weight: 900; 
    margin: 0 0 15px 0; 
    color: #1E293B; 
    letter-spacing: -0.5px; 
}

/* 2. CARDS */
.app-card { 
    background: #FFF; 
    border: 1px solid #E2E8F0; 
    border-radius: 12px; 
    padding: 15px; 
    margin-bottom: 15px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); 
    border-top: 4px solid #CBD5E1; 
}
.card-top-blue { border-top-color: #2563EB; }
.card-top-indigo { border-top-color: #4F46E5; }
.card-top-purple { border-top-color: #9333EA; }
.card-top-green { border-top-color: #10B981; }

/* 3. FORMS & INPUTS */
.input-row { 
    display: flex; 
    gap: 12px; 
    margin-bottom: 12px; 
}
.input-row > .input-group,
.input-row > .form-group { 
    flex: 1; 
    margin-bottom: 0; 
}
.input-group, .form-group { 
    margin-bottom: 12px; 
}
.input-group label, .form-group label { 
    display: block; 
    font-size: 11px; 
    font-weight: 700; 
    color: #64748B; 
    margin-bottom: 6px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}
.input-group input, .input-group select, .input-group textarea,
.form-group input, .form-group select, .form-group textarea { 
    width: 100%; 
    padding: 12px 14px; 
    border: 1px solid #CBD5E1; 
    border-radius: 8px; 
    font-size: 14px; 
    font-weight: 600; 
    box-sizing: border-box; 
    background: #F8FAFC; 
    color: #0F172A; 
    outline: none; 
    transition: 0.2s; 
}
.input-group input:focus, .input-group select:focus, .input-group textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { 
    border-color: #2563EB; 
    background: #FFF; 
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1); 
}
.input-group select:disabled, .input-group input[readonly],
.form-group select:disabled, .form-group input[readonly] { 
    background: #E2E8F0; 
    color: #94A3B8; 
    cursor: not-allowed; 
}

/* 4. BUTTONS */
.btn-submit { 
    background: #2563EB; 
    color: white; 
    border: none; 
    padding: 14px; 
    border-radius: 8px; 
    font-size: 14px; 
    font-weight: 800; 
    cursor: pointer; 
    transition: 0.2s; 
    width: 100%; 
    box-shadow: 0 2px 4px rgba(37,99,235,0.2); 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}
.btn-submit:active { transform: scale(0.97); }
.btn-submit:disabled { background: #94A3B8 !important; cursor: not-allowed; box-shadow: none; }

/* 5. TABS / SEGMENTED CONTROL */
.seg-control { 
    display: flex; 
    background: #FFF; 
    border: 1px solid #E2E8F0; 
    border-radius: 25px; 
    padding: 4px; 
    margin-bottom: 20px; 
    overflow-x: auto; 
    white-space: nowrap; 
}
.seg-btn { 
    flex: 1; 
    padding: 10px 15px; 
    font-size: 13px; 
    font-weight: 700; 
    color: #64748B; 
    background: transparent; 
    border: none; 
    border-radius: 20px; 
    cursor: pointer; 
    text-align: center; 
    transition: 0.2s; 
}
.seg-btn.active { 
    background: #1E293B; 
    color: #FFF; 
}

/* 6. SEARCH BAR */
.search-wrapper { 
    position: relative; 
    margin-bottom: 15px; 
}
.search-wrapper span { 
    position: absolute; 
    left: 15px; 
    top: 12px; 
    font-size: 16px; 
    color: #94A3B8; 
}
.search-wrapper input { 
    width: 100%; 
    padding: 12px 15px 12px 40px; 
    border: 1px solid #CBD5E1; 
    border-radius: 25px; 
    font-size: 14px; 
    box-sizing: border-box; 
    outline: none; 
    transition: 0.2s; 
}
.search-wrapper input:focus { 
    border-color: #2563EB; 
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1); 
}

/* 7. ALERTS & BADGES */
.alert-success { 
    font-size: 13px; 
    padding: 12px; 
    background: #DCFCE7; 
    color: #166534; 
    border-radius: 8px; 
    margin-bottom: 15px; 
    font-weight: 700; 
    border: 1px solid #86EFAC;
}
.alert-error { 
    font-size: 13px; 
    padding: 12px; 
    background: #FEF2F2; 
    color: #991B1B; 
    border-radius: 8px; 
    margin-bottom: 15px; 
    font-weight: 700; 
    border: 1px solid #FCA5A5;
}
.empty-state { 
    text-align: center; 
    padding: 30px 20px; 
    color: #94A3B8; 
    font-size: 13px; 
    background: #FFF; 
    border-radius: 12px; 
    border: 1px dashed #CBD5E1; 
}

/* 8. MODAL (POPUP) STYLES */
.modal-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(15, 23, 42, 0.6); 
    z-index: 9999; 
    justify-content: center; 
    align-items: flex-end; /* Slides from bottom in mobile */
}
.modal-content { 
    background: #FFF; 
    width: 100%; 
    max-width: 600px; 
    border-radius: 20px 20px 0 0; 
    display: flex; 
    flex-direction: column; 
    max-height: 85vh; 
}
.modal-header { 
    padding: 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid #E2E8F0; 
    background: #F8FAFC; 
    border-radius: 20px 20px 0 0;
}
.modal-header h3 { margin: 0; font-size: 18px; font-weight: 800; color: #0F172A; }
.close-btn { 
    width: 32px; 
    height: 32px; 
    background: #E2E8F0; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-weight: bold; 
    cursor: pointer; 
    color: #475569;
}
.modal-body { padding: 20px; overflow-y: auto; }


/* ======================================================
   FIX FOR LINE LENGTHS & RADIO BUTTONS (CALCULATOR)
====================================================== */

/* 1. Size Mode Radio Buttons Container */
.size-mode-wrap { 
    display: flex; 
    gap: 8px; 
    margin-bottom: 12px; 
    flex-wrap: wrap; 
}

/* 2. Individual Radio Button Label Box */
.size-mode-lbl { 
    font-size: 11px; 
    font-weight: 800; 
    color: #475569; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    background: #F8FAFC; 
    border: 1px solid #CBD5E1; 
    padding: 6px 12px; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: 0.2s; 
    user-select: none; 
}
.size-mode-lbl:hover { background: #E2E8F0; }
.size-mode-lbl input { margin: 0; width: 14px; height: 14px; accent-color: #2563EB; cursor: pointer; }
.size-mode-lbl.active-mode { background: #EFF6FF; border-color: #93C5FD; color: #1D4ED8; }

/* 3. Line Inputs Grid Layout (Side-by-Side Cards) */
.lines-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
}

/* 4. Individual Line Input Box Card */
.line-box { 
    background: #FFF; 
    padding: 8px; 
    border-radius: 8px; 
    border: 1px solid #CBD5E1; 
    text-align: center; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); 
}
.line-box label { 
    font-size: 10px; 
    color: #64748B; 
    font-weight: 700; 
    display: block; 
    margin-bottom: 4px; 
    text-transform: uppercase; 
}
.line-box input { 
    width: 100%; 
    border: none; 
    background: transparent; 
    font-size: 16px; 
    font-weight: 900; 
    color: #0F172A; 
    text-align: center; 
    outline: none; 
    padding: 4px 0; 
    border-bottom: 2px solid transparent; 
    transition: 0.2s; 
}
.line-box input:focus { border-bottom-color: #2563EB; }
.line-box input[readonly] { color: #2563EB; background: #F8FAFC; cursor: not-allowed; }

/* 5. Same Average Mode Grid */
.lines-grid-same-avg { display: flex; flex-direction: column; gap: 10px; }
.same-avg-row { display: flex; align-items: center; gap: 10px; background: #FFF; border: 1px solid #CBD5E1; border-radius: 8px; padding: 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); position: relative; }
.same-avg-row .line-input-wrap { display:flex; flex-direction:column; align-items:center; flex: 1;}
.same-avg-row label { font-size: 10px; color: #64748B; font-weight: 700; text-transform: uppercase; }
.same-avg-row input[type="text"] { width: 100%; border: none; font-size: 16px; font-weight: 900; text-align: center; border-bottom: 2px solid transparent; padding: 4px 0; outline: none; }
.same-avg-row input[type="text"]:focus { border-bottom-color: #2563EB; }
.same-avg-row .thaan-wrap { display:flex; flex-direction:column; align-items:center; border-left: 1px dashed #CBD5E1; padding-left: 10px; width: 60px;}
.same-avg-row input[type="number"] { width: 100%; border: 1px solid #CBD5E1; border-radius: 6px; font-size: 14px; font-weight: 800; text-align: center; padding: 4px; color: #16A34A; }


/* ======================================================
   FIX FOR "ADD MORE LINES" BUTTON
====================================================== */
.btn-add-more { 
    background: #EEF2FF; 
    color: #4F46E5; 
    border: 1px dashed #A5B4FC; 
    width: 100%; 
    padding: 12px; 
    border-radius: 8px; 
    font-weight: 800; 
    font-size: 13px; 
    text-transform: uppercase; 
    cursor: pointer; 
    transition: 0.2s; 
    margin-top: 10px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px; 
}
.btn-add-more:hover { 
    background: #E0E7FF; 
    border-color: #818CF8; 
}
.btn-add-more:active { 
    transform: scale(0.98); 
}

/* ======================================================
   FIX FOR BASE LAMBAI ADJUSTER (+ / - BUTTONS)
====================================================== */
.adjust-wrap { 
    display: flex; 
    align-items: center; 
    background: #F8FAFC; 
    border: 1px solid #CBD5E1; 
    border-radius: 8px; 
    padding: 6px; 
    box-sizing: border-box;
}
.adj-input { 
    flex: 1; 
    border: none !important; 
    background: transparent !important; 
    text-align: center; 
    font-size: 16px; 
    font-weight: 900; 
    color: #1E40AF; 
    outline: none; 
    pointer-events: none; 
    box-shadow: none !important;
}
.adj-btn { 
    background: #FFF; 
    border: 1px solid #E2E8F0; 
    width: 36px; 
    height: 36px; 
    border-radius: 6px; 
    font-size: 18px; 
    font-weight: bold; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    color: #475569; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
    user-select: none;
    transition: 0.1s;
}
.adj-btn:active { 
    transform: scale(0.95); 
}
.adj-btn.minus { 
    color: #DC2626; 
}
.adj-btn.plus { 
    color: #16A34A; 
}