/* ======================================================================
   খেদমত খাতা — সদস্য ও মাসিক ভাড়ার হিসাব
   Stylesheet
   এই ফাইলে অ্যাপের সব ভিজ্যুয়াল স্টাইল আছে (আগের inline <style> থেকে
   হুবহু নেওয়া হয়েছে — ডিজাইন/লেআউট/কালার/অ্যানিমেশনে কোনো পরিবর্তন নেই)।
   ====================================================================== */

  :root{
    --ink:#22261f;
    --paper:#f8f9fa;
    --paper-line:#e2e8f0;
    --green:#0f766e;
    --green-deep:#115e59;
    --sage:#f0fdfa;
    --gold:#d97706;
    --gold-soft:#fef3c7;
    --paid:#16a34a;
    --due:#dc2626;
    --shadow:0 10px 25px -5px rgba(15,118,110,0.1), 0 8px 10px -6px rgba(15,118,110,0.1);
    --radius:16px;
    --card-bg:#ffffff;
  }
  
  /* Modern Premium Dark Mode */
  body.dark {
    --ink:#f8fafc;
    --paper:#0f172a;
    --paper-line:#1e293b;
    --green:#0d9488;
    --green-deep:#2dd4bf;
    --sage:#1e293b;
    --gold:#fbbf24;
    --gold-soft:#334155;
    --paid:#4ade80;
    --due:#f87171;
    --shadow:0 10px 25px -5px rgba(0,0,0,0.5);
    --card-bg:#1e293b;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background: var(--paper);
    color:var(--ink);
    font-family:'Hind Siliguri','Inter',sans-serif;
    min-height:100vh;
    transition: background 0.3s ease, color 0.3s ease;
    padding: 0;
  }
  h1,h2,h3,.display{font-family:'Fraunces',serif;}
  ::selection{background:var(--gold-soft); color: var(--ink);}

  /* ---------- Login ---------- */
  #loginScreen{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:16px;
    background: var(--paper);
  }
  .login-card{
    background:var(--green);
    color:#f4f1e8;
    width:100%;max-width:400px;
    border-radius:var(--radius);
    padding:40px 32px;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
    transition: all 0.3s ease;
  }
  body.dark .login-card { background: #1e293b; border: 1px solid var(--paper-line); }
  
  .login-card::before{
    content:"";
    position:absolute;top:-60px;right:-60px;
    width:180px;height:180px;border-radius:50%;
    border:2px solid rgba(255,255,255,0.1);
  }
  .login-card h1{font-size:28px;margin:0 0 6px;color:#fff;}
  .login-card p{margin:0 0 26px;color:#ccfbf1;font-size:14px;line-height:1.6;}
  body.dark .login-card p { color: #94a3b8; }
  
  .login-card select, .login-card input{
    width:100%;padding:14px;margin-bottom:16px;
    border-radius:12px;border:1px solid rgba(255,255,255,0.25);
    background:rgba(255,255,255,0.1);color:#fff;font-size:15px;
    font-family:inherit;
    outline: none;
  }
  body.dark .login-card select, body.dark .login-card input { background: #0f172a; border-color: var(--paper-line); }
  .login-card select option { color: #000; }
  .login-card input::placeholder{color:#99f6e4;}
  body.dark .login-card input::placeholder{color:#64748b;}
  
  .login-card button{
    width:100%;padding:14px;border:none;border-radius:12px;
    background:var(--gold);color:#fff;font-weight:700;
    font-size:16px;cursor:pointer;font-family:'Hind Siliguri',sans-serif;
    transition: all .15s ease;
  }
  .login-card button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.2);}
  .login-error{color:#fecdd3;font-size:13px;margin-top:10px;min-height:16px;text-align:center;}
  .login-hint{margin-top:20px;font-size:12px;color:#ccfbf1;border-top:1px solid rgba(255,255,255,0.15);padding-top:14px; line-height: 1.8;}
  body.dark .login-hint { color: #8492a6; }
  .reset-link{color:#fde047; cursor:pointer; text-decoration:none; font-weight:600; display: inline-block; margin-top: 5px;}
  .reset-link:hover{text-decoration:underline;}

  /* ---------- App shell ---------- */
  #app{display:none;max-width:1240px;margin:0 auto;padding:24px 16px 60px;}
  header.top{
    display:flex;justify-content:space-between;align-items:center;
    gap:20px;flex-wrap:wrap;margin-bottom:24px;
    background: var(--card-bg); padding: 20px; border-radius: var(--radius); border: 1px solid var(--paper-line);
  }
  header.top .title-block h1{font-size:28px;margin:0;color:var(--green-deep);}
  header.top .title-block span{font-size:13px;color:#64748b;letter-spacing:.04em;}
  body.dark header.top .title-block h1 { color: var(--green-deep); }
  
  .top-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .btn{
    border:none;border-radius:10px;padding:10px 16px;font-size:14px;
    font-family:'Hind Siliguri',sans-serif;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;
  }
  .btn:active{transform:scale(.97);}
  .btn-primary{background:var(--green);color:#fff;}
  .btn-primary:hover{background:var(--green-deep); filter:brightness(1.1);}
  .btn-ghost{background:var(--paper);color:var(--ink);border:1px solid var(--paper-line);}
  .btn-ghost:hover{background:var(--sage);color:var(--green);}
  body.dark .btn-ghost { background: #0f172a; }
  body.dark .btn-ghost:hover { background: #1e293b; color: var(--green-deep); }
  
  .btn-danger{background:#fff;color:var(--due);border:1px solid var(--due);}
  .btn-danger:hover{background:#fef2f2;}
  body.dark .btn-danger { background: #7f1d1d; border-color: #f87171; color: #f87171;}
  body.dark .btn-danger:hover { background: #991b1b; }

  /* ---------- Role Visibility Rules ---------- */
  body.view-only .admin-only, body.view-only .regular-only { display: none !important; }
  body.view-only .pay-cell { pointer-events: none; }
  body.view-only .pay-cell .edit-ic { display: none !important; }
  
  body.no-settings .settings-only { display: none !important; }

  /* ---------- Stats ---------- */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px;}
  .stat-card{
    background:var(--card-bg);border-radius:var(--radius);padding:20px;
    border:1px solid var(--paper-line);position:relative;
    box-shadow: var(--shadow);
  }
  .stat-card .label{font-size:13px;color:#64748b;text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
  .stat-card .value{font-family:'Fraunces',serif;font-size:28px;color:var(--green);margin-top:6px;font-weight:700;}
  body.dark .stat-card .value { color: var(--green-deep); }

  /* ---------- Toolbar ---------- */
  .toolbar{
    display:flex;gap:12px;flex-wrap:wrap;align-items:center;
    margin-bottom:20px;background: var(--card-bg); padding: 16px; border-radius: var(--radius); border: 1px solid var(--paper-line);
  }
  .search-box{
    flex:1;min-width:260px;position:relative;
  }
  .search-box input{
    width:100%;padding:12px 14px 12px 42px;border-radius:10px;
    border:1px solid var(--paper-line);background:var(--paper);color: var(--ink);font-size:14px;
    font-family:'Hind Siliguri',sans-serif; outline: none; transition: border 0.2s;
  }
  .search-box input:focus{ border-color: var(--green); }
  .search-box::before{
    content:"🔍";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.7;
  }
  .area-chips{display:flex;gap:8px;flex-wrap:wrap;}
  .chip{
    padding:8px 16px;border-radius:20px;font-size:13px;cursor:pointer;
    background:var(--paper);border:1px solid var(--paper-line);color:var(--ink);font-weight:500; transition: all 0.2s;
  }
  .chip:hover { border-color: var(--green); }
  .chip.active{background:var(--green);color:#fff;border-color:var(--green);}

  /* ---------- Table ---------- */
  .table-wrap{
    background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--paper-line);
    overflow:auto;box-shadow:var(--shadow);
    -webkit-overflow-scrolling: touch;
  }
  table{border-collapse:collapse;width:100%;min-width:1100px;font-family:'Inter',sans-serif;font-size:13.5px;}
  thead th{
    position:sticky;top:0;background:var(--green);color:#fff;
    padding:14px 10px;font-weight:600;font-size:12px;text-transform:uppercase;
    letter-spacing:.03em;white-space:nowrap;z-index:2;
  }
  body.dark thead th { background: #0f172a; color: var(--green-deep); border-bottom: 2px solid var(--paper-line); }
  
  tbody td{padding:12px 10px;border-bottom:1px solid var(--paper-line);white-space:nowrap; text-align: center;}
  
  tbody tr.area-row td{
    background:var(--sage);font-family:'Hind Siliguri',sans-serif;font-weight:700;
    color:var(--green);padding:10px 14px;font-size:14px; text-align: left;
  }
  body.dark tbody tr.area-row td { background: #1e293b; color: var(--green-deep); }
  
  tbody tr:hover:not(.area-row){background:var(--paper); opacity: 0.95;}
  
  td.name-cell{font-family:'Hind Siliguri',sans-serif;font-weight:600;color:var(--ink); text-align: left;}
  td.name-cell small{display:block;font-weight:400;color:#64748b;font-size:11.5px; margin-top: 2px;}
  td.total-cell{font-weight:700;color:var(--green); font-size: 14px;}
  body.dark td.total-cell { color: var(--green-deep); }

  .pay-cell{position:relative;text-align:center;cursor:pointer;user-select:none;}
  .pay-badge{
    display:inline-block;min-width:55px;padding:6px 8px;border-radius:8px;
    font-weight:600;font-size:12px; transition: all 0.15s;
  }
  .pay-badge.paid{background:#dcfce7;color:var(--paid);}
  .pay-badge.unpaid{background:#f1f5f9;color:#94a3b8;}
  body.dark .pay-badge.paid { background: #14532d; color: #4ade80; }
  body.dark .pay-badge.unpaid { background: #0f172a; color: #475569; }

  .pay-cell .edit-ic{
    display:none;position:absolute;top:-4px;right:2px;font-size:10px;
    background:var(--gold);color:#fff;border-radius:50%;width:18px;height:18px;
    line-height:18px;text-align:center; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
  .pay-cell:hover .edit-ic{display:block;}

  .row-actions{display:flex;gap:6px; justify-content: center;}
  .icon-btn{
    border:none;background:var(--paper);cursor:pointer;font-size:14px;padding:6px 10px;
    border-radius:8px;color:#64748b; border: 1px solid var(--paper-line);
  }
  .icon-btn:hover{background:var(--sage);color:var(--green); border-color: var(--green);}

  .empty-state{padding:60px 20px;text-align:center;color:#64748b;}
  .empty-state .display{font-size:22px;color:var(--green);margin-bottom:8px;}

  /* ---------- Modal ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(15,23,42,0.6);
    display:none;align-items:center;justify-content:center;z-index:50;padding:16px;
    backdrop-filter: blur(4px);
  }
  .overlay.show{display:flex;}
  .modal{
    background:var(--card-bg);border-radius:var(--radius);padding:28px;width:100%;max-width:500px;
    box-shadow:0 25px 50px -12px rgba(0,0,0,0.4);max-height:90vh;overflow:auto;
    border: 1px solid var(--paper-line);
  }
  .modal h2{font-size:22px;margin:0 0 20px;color:var(--green); border-bottom: 1px solid var(--paper-line); padding-bottom: 10px;}
  body.dark .modal h2 { color: var(--green-deep); }
  
  .field{margin-bottom:16px;}
  .field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px; opacity: 0.8;}
  
  .field input,.field select{
    width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--paper-line);
    font-size:14px;font-family:'Hind Siliguri',sans-serif; background: var(--paper); color: var(--ink); outline: none;
  }
  .field input:focus, .field select:focus { border-color: var(--green); }
  
  .field-row{display:flex;gap:12px;}
  .field-row .field{flex:1; min-width: 0;}
  .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px;border-top: 1px solid var(--paper-line); padding-top: 16px;}

  /* ---------- Popover ---------- */
  .popover{
    position:absolute;z-index:60;background:var(--card-bg);color:var(--ink);
    border-radius:10px;padding:12px;box-shadow:0 10px 25px rgba(0,0,0,0.2);
    display:none; border: 1px solid var(--paper-line);
  }
  .popover.show{display:block;}
  .popover input{width:100px;padding:8px;border-radius:8px;border:1px solid var(--paper-line);font-size:14px;margin-right:6px; background: var(--paper); color: var(--ink);}
  .popover button{border:none;background:var(--green);color:#fff;border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer;font-size:13px;}

  footer.credit{text-align:center;font-size:12px;color:#64748b;margin-top:40px; padding: 10px; line-height: 1.6;}

  /* ---------- Mobile Optimization ---------- */
  @media (max-width:768px){
    header.top{flex-direction:column; align-items: flex-start; padding: 16px;}
    .top-actions{width:100%; gap: 6px;}
    .top-actions .btn { flex: 1 1 auto; justify-content: center; font-size: 13px; padding: 8px 12px; }
    .toolbar { flex-direction: column; align-items: stroke; }
    .search-box { min-width: 100%; }
    .area-chips { overflow-x: auto; padding-bottom: 4px; white-space: nowrap; width: 100%; }
    .chip { padding: 6px 12px; font-size: 12px; }
    .field-row{flex-direction: column; gap: 0;}
    .stats { grid-template-columns: 1fr; }
  }

  /* ---------- Print header (visible only when printing) ---------- */
  .print-header{display:none;}
  .print-header h1{font-size:22px;margin:0 0 4px;color:var(--green-deep);}
  .print-header p{margin:0 0 16px;font-size:12px;color:#64748b;}

  /* ---------- Print / PDF export styles ---------- */
  @media print{
    @page{ margin: 14mm 10mm; }
    html,body{background:#fff !important;color:#000 !important;}
    #loginScreen{display:none !important;}
    .no-print{display:none !important;}
    #app{display:block !important;max-width:100%;margin:0;padding:0;}
    header.top{display:none !important;}
    .print-header{display:block !important;}
    .table-wrap{box-shadow:none !important;border:none !important;overflow:visible !important;}
    table{min-width:0 !important;width:100%;font-size:11px;}
    thead th{position:static !important;background:var(--green) !important;color:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    tbody tr.area-row td{background:var(--sage) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    tbody tr{break-inside:avoid;}
    thead{display:table-header-group;}
    .pay-badge.paid{color:var(--paid) !important;font-weight:700;}
    .pay-badge.unpaid{color:#94a3b8 !important;}
  }