/* ==========================================================
leave.css — অনলাইন ছুটি ব্যবস্থাপনা (leave*.php পেজগুলোর স্টাইল)
সাইটের theme.css এর কালার ভ্যারিয়েবল ও ডার্ক মোডের সাথে মিলিয়ে বানানো।
========================================================== */
body { background: #eef4f2; animation: none; }
body.dark-mode { background: #0e1614; }
main.lv-main { flex: 1; width: 100%; display: flex; justify-content: center; padding: 14px 12px 44px; }
.lv-wrap { width: 100%; max-width: 920px; }
.lv-wrap.narrow { max-width: 520px; }
/* ---------- শীর্ষ কার্ড ---------- */
.lv-hero { display: flex; align-items: center; gap: 14px; background: var(--white); border-radius: 18px; padding: 14px 16px; box-shadow: var(--card-shadow); border-top: 4px solid var(--primary-green); margin-bottom: 12px; flex-wrap: wrap; }
.lv-hero-icon { width: 50px; height: 50px; border-radius: 15px; background: linear-gradient(135deg, var(--primary-green), var(--secondary-green)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.lv-hero-text { flex: 1; min-width: 200px; }
.lv-hero-text h2 { font-size: 18px; color: var(--primary-green); line-height: 1.35; }
body.dark-mode .lv-hero-text h2 { color: #4fd1a5; }
.lv-hero-text p { font-size: 12.5px; color: var(--muted-text); margin-top: 2px; line-height: 1.6; }
.lv-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ---------- কার্ড ---------- */
.lv-card { background: var(--white); border-radius: 16px; box-shadow: var(--card-shadow); padding: 15px; margin-bottom: 12px; }
.lv-card > h3 { font-size: 15.5px; color: var(--text-dark); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-card > h3 i { color: var(--primary-green); }
body.dark-mode .lv-card > h3 i { color: #4fd1a5; }
.lv-count { background: var(--primary-green); color: #fff; font-size: 11.5px; padding: 2px 9px; border-radius: 20px; font-weight: 700; }
.lv-count.alert { background: var(--ansar-red); }
.lv-sub { font-size: 12px; color: var(--muted-text); line-height: 1.6; margin-bottom: 8px; }
.lv-empty { text-align: center; color: var(--muted-text); font-size: 13px; padding: 12px 8px; }
.lv-empty i { display: block; font-size: 26px; color: #cdd8d5; margin-bottom: 6px; }
/* ---------- মেনু-চিপ (পেজের ভেতরের নেভিগেশন) ---------- */
.lv-nav { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }
.lv-nav a { flex-shrink: 0; text-decoration: none; background: var(--white); color: var(--text-dark); font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 30px; box-shadow: var(--card-shadow); display: inline-flex; align-items: center; gap: 6px; }
.lv-nav a i { color: var(--primary-green); }
.lv-nav a .lv-count { font-size: 10.5px; padding: 1px 7px; }
/* ---------- পরিসংখ্যান ---------- */
.lv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 12px; }
.lv-stat { background: var(--white); border-radius: 16px; box-shadow: var(--card-shadow); padding: 13px 14px; }
.lv-stat b { display: block; font-size: 22px; color: var(--primary-green); line-height: 1.2; }
body.dark-mode .lv-stat b { color: #4fd1a5; }
.lv-stat span { font-size: 11.5px; color: var(--muted-text); }
.lv-stat.warn b { color: var(--ansar-red); }
.lv-stat.gold b { color: #b87b00; }
/* ---------- ফর্ম ---------- */
.lv-form .lv-field { margin-bottom: 10px; }
.lv-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-dark); margin-bottom: 5px; }
.lv-form label small { font-weight: 400; color: var(--muted-text); }
.lv-form input[type=text], .lv-form input[type=password], .lv-form input[type=tel], .lv-form input[type=date], .lv-form input[type=number], .lv-form input[type=search], .lv-form input[type=file], .lv-form select, .lv-form textarea {
width: 100%; border: 1.5px solid rgba(0, 106, 78, 0.22); background: var(--light-bg); color: var(--text-dark);
border-radius: 11px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.lv-form textarea { min-height: 86px; resize: vertical; line-height: 1.6; }
.lv-form input:focus, .lv-form select:focus, .lv-form textarea:focus { border-color: var(--primary-green); box-shadow: 0 0 0 3px rgba(0, 106, 78, 0.12); }
.lv-form .lv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .lv-form .lv-row { grid-template-columns: 1fr; gap: 0; } }
.lv-hint { font-size: 11.5px; color: var(--muted-text); margin-top: 3px; line-height: 1.55; }
.lv-pin { letter-spacing: 6px; font-size: 18px !important; text-align: center; }
.lv-inline { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.lv-inline input[type=search], .lv-inline input[type=text] { flex: 1; min-width: 150px; }
/* ---------- বাটন ---------- */
.lv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; border-radius: 11px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--primary-green), var(--secondary-green)); transition: transform .15s ease, box-shadow .15s ease; }
.lv-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 106, 78, 0.25); }
.lv-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.lv-btn.block { width: 100%; }
.lv-btn.red { background: linear-gradient(135deg, var(--ansar-red), #c91a2f); }
.lv-btn.gold { background: linear-gradient(135deg, #f2a900, #d68b00); }
.lv-btn.ghost { background: transparent; color: var(--primary-green); border: 1.5px solid var(--primary-green); }
.lv-btn.gray { background: rgba(120, 140, 135, 0.16); color: var(--text-dark); }
.lv-btn.sm { padding: 7px 13px; font-size: 12.5px; border-radius: 9px; }
body.dark-mode .lv-btn.ghost { color: #4fd1a5; border-color: #4fd1a5; }
/* ---------- ব্যাজ ---------- */
.lv-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.lv-b-ok { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.lv-b-wait { background: rgba(242, 169, 0, 0.18); color: #a06b00; }
.lv-b-wait2 { background: rgba(30, 100, 220, 0.13); color: #1d4ed8; }
.lv-b-no { background: rgba(244, 42, 65, 0.13); color: #c91a2f; }
.lv-b-gray { background: rgba(120, 140, 135, 0.18); color: var(--muted-text); }
body.dark-mode .lv-b-ok { color: #4ade80; } body.dark-mode .lv-b-wait { color: #fbbf24; } body.dark-mode .lv-b-wait2 { color: #93c5fd; } body.dark-mode .lv-b-no { color: #fda4af; }
/* ---------- তালিকার আইটেম (আবেদন / সদস্য) ---------- */
.lv-item { border: 1.5px solid rgba(0, 106, 78, 0.13); border-radius: 14px; padding: 11px 13px; margin-bottom: 9px; background: var(--light-bg); }
.lv-item.alert { border-color: rgba(244, 42, 65, 0.4); }
.lv-item-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.lv-item-title { font-size: 14.5px; font-weight: 700; color: var(--text-dark); }
.lv-item-title a { color: inherit; text-decoration: none; }
.lv-item-title a:hover { color: var(--primary-green); text-decoration: underline; }
.lv-item-meta { font-size: 12px; color: var(--muted-text); margin-top: 3px; line-height: 1.7; }
.lv-item-side { margin-left: auto; text-align: right; }
.lv-reason { background: var(--white); border-radius: 10px; padding: 9px 12px; margin-top: 9px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.lv-note { font-size: 12px; margin-top: 7px; color: var(--muted-text); line-height: 1.6; }
.lv-note b { color: var(--text-dark); }
.lv-warnline { font-size: 12px; color: #c91a2f; background: rgba(244, 42, 65, 0.09); border-radius: 9px; padding: 6px 10px; margin-top: 8px; }
.lv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.lv-actions form { margin: 0; }
details.lv-more { margin-top: 9px; }
details.lv-more > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--primary-green); list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; background: rgba(0, 106, 78, 0.09); }
details.lv-more > summary::-webkit-details-marker { display: none; }
details.lv-more[open] > summary { margin-bottom: 9px; }
details.lv-more.red > summary { color: #c91a2f; background: rgba(244, 42, 65, 0.09); }
body.dark-mode details.lv-more > summary { color: #4fd1a5; }
/* ---------- ধাপ-চিহ্ন ---------- */
.lv-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.lv-step { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; background: rgba(120, 140, 135, 0.15); color: var(--muted-text); }
.lv-step.done { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.lv-step.current { background: rgba(242, 169, 0, 0.2); color: #a06b00; }
.lv-step.fail { background: rgba(244, 42, 65, 0.13); color: #c91a2f; }
/* ---------- ছুটির হিসাব বার ---------- */
.lv-balance { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lv-balance-num { font-size: 34px; font-weight: 800; color: var(--primary-green); line-height: 1; }
body.dark-mode .lv-balance-num { color: #4fd1a5; }
.lv-balance-num small { font-size: 13px; font-weight: 600; color: var(--muted-text); }
.lv-bar { flex: 1; min-width: 200px; }
.lv-bar-track { height: 12px; border-radius: 10px; background: rgba(120, 140, 135, 0.2); overflow: hidden; display: flex; }
.lv-bar-used { background: linear-gradient(90deg, var(--primary-green), #0f9b6e); }
.lv-bar-pend { background: repeating-linear-gradient(45deg, #f2a900, #f2a900 5px, #f7c94a 5px, #f7c94a 10px); }
.lv-bar-legend { font-size: 11.5px; color: var(--muted-text); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
/* ---------- টেবিল ---------- */
.lv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.lv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lv-table th { text-align: left; background: rgba(0, 106, 78, 0.09); color: var(--primary-green); font-size: 12px; padding: 9px 10px; white-space: nowrap; }
table.lv-table td { padding: 9px 10px; border-bottom: 1px solid rgba(120, 140, 135, 0.18); vertical-align: top; }
body.dark-mode table.lv-table th { color: #4fd1a5; }
/* ---------- বার্তা ---------- */
.lv-flash { border-radius: 12px; padding: 9px 13px; margin-bottom: 10px; font-size: 13.5px; font-weight: 600; display: flex; gap: 9px; align-items: flex-start; line-height: 1.6; }
.lv-flash.ok { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.lv-flash.err { background: rgba(244, 42, 65, 0.12); color: #c91a2f; }
body.dark-mode .lv-flash.ok { color: #4ade80; } body.dark-mode .lv-flash.err { color: #fda4af; }
.lv-banner { border-radius: 14px; padding: 10px 13px; margin-bottom: 10px; font-size: 13px; line-height: 1.6; background: rgba(242, 169, 0, 0.16); color: #7a5300; }
.lv-banner.red { background: rgba(244, 42, 65, 0.1); color: #a4162a; }
.lv-banner.green { background: rgba(22, 163, 74, 0.12); color: #166534; }
body.dark-mode .lv-banner { color: #fde68a; } body.dark-mode .lv-banner.red { color: #fda4af; } body.dark-mode .lv-banner.green { color: #86efac; }
.lv-newpin { font-size: 22px; letter-spacing: 6px; font-weight: 800; }
/* ---------- স্বাক্ষর প্রিভিউ ---------- */
.lv-sig { display: inline-block; background: #fff; border: 1.5px dashed rgba(0, 106, 78, 0.35); border-radius: 10px; padding: 6px 10px; }
.lv-sig img { display: block; max-height: 64px; max-width: 200px; }
/* ---------- স্বাক্ষরের ছবি: আপলোড/ক্যামেরা + ক্রপ উইজেট ---------- */
.lv-sigcap { border: 1.5px dashed rgba(0, 106, 78, 0.35); border-radius: 14px; padding: 12px; background: rgba(0, 106, 78, 0.03); }
body.dark-mode .lv-sigcap { background: rgba(79, 209, 165, 0.05); border-color: rgba(79, 209, 165, 0.3); }
.lv-sigcap-preview { min-height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.lv-sigcap-preview:empty::before { content: 'এখনো কোনো ছবি বাছাই করা হয়নি'; font-size: 12px; color: var(--muted-text); }
.lv-sigcap-preview img { display: block; max-height: 90px; max-width: 100%; background: #fff; border-radius: 8px; padding: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.lv-sigcap-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lv-sigcap-btns label.lv-btn { cursor: pointer; }
.lv-sigcap.has-image { border-style: solid; border-color: rgba(0, 106, 78, 0.25); }
/* ---------- ক্রপ মডাল ---------- */
.lv-sigmodal { position: fixed; inset: 0; background: rgba(10, 18, 16, 0.72); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 16px; }
.lv-sigmodal.open { display: flex; }
.lv-sigmodal-box { background: var(--white); border-radius: 18px; width: 100%; max-width: 480px; padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.lv-sigmodal-head { font-size: 14.5px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.lv-sigmodal-hint { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted-text); margin-top: 3px; line-height: 1.6; }
.lv-sigmodal-stage { position: relative; width: 100%; height: 280px; background: #222 repeating-conic-gradient(#2a2a2a 0% 25%, #222 0% 50%) 50% / 16px 16px; border-radius: 12px; overflow: hidden; }
.lv-sigmodal-stage img { display: block; max-width: 100%; }
.lv-sigmodal-tools { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.lv-sigmodal-actions { display: flex; gap: 10px; margin-top: 12px; }
.lv-sigmodal-actions .lv-btn { flex: 1; }
@media (max-width: 480px) { .lv-sigmodal-stage { height: 220px; } }
/* ---------- হাব পেজের কার্ড ---------- */
.lv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-bottom: 16px; }
.lv-tile { display: flex; gap: 13px; align-items: flex-start; text-decoration: none; background: var(--white); border-radius: 18px; padding: 16px; box-shadow: var(--card-shadow); color: var(--text-dark); transition: transform .18s ease, box-shadow .18s ease; }
.lv-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 106, 78, 0.16); }
.lv-tile-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex-shrink: 0; background: linear-gradient(135deg, var(--primary-green), var(--secondary-green)); }
.lv-tile-icon.gold { background: linear-gradient(135deg, #f2a900, #d68b00); }
.lv-tile-icon.blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.lv-tile-icon.red { background: linear-gradient(135deg, var(--ansar-red), #c91a2f); }
.lv-tile b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.lv-tile span.s { font-size: 12px; color: var(--muted-text); line-height: 1.6; display: block; }
.lv-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; }
.lv-flow .arrow { color: var(--muted-text); }
.lv-flow .node { background: rgba(0, 106, 78, 0.1); padding: 6px 12px; border-radius: 20px; color: var(--primary-green); }
body.dark-mode .lv-flow .node { color: #4fd1a5; }
/* ---------- হাব পেজের ভূমিকা-কার্ড (উপজেলা কর্মকর্তা / ক্যাম্প কমান্ডার / আনসার সদস্য) ---------- */
/* প্রতিটি ভূমিকা আলাদা রঙে, বেশি গোলাকার কোণায় (রাউন্ড কর্নার), যাতে সহজেই আলাদা করে চেনা যায়। */
.lv-role { background: var(--white); border-radius: 26px; box-shadow: var(--card-shadow); padding: 18px 20px; margin-bottom: 14px; border-left: 6px solid var(--primary-green); transition: transform .15s ease, box-shadow .15s ease; }
.lv-role:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,0.1); }
.lv-role-head { display: flex; gap: 13px; align-items: flex-start; }
.lv-role-head h3 { font-size: 16px; color: var(--text-dark); margin-bottom: 3px; }
.lv-role-head p { font-size: 12.5px; color: var(--muted-text); line-height: 1.7; }
.lv-role .lv-actions { margin-top: 12px; }
.lv-role .lv-hint { margin-top: 8px; }
.lv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.lv-chips span { font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 20px; background: rgba(0, 106, 78, 0.1); color: var(--primary-green); }
body.dark-mode .lv-chips span { color: #4fd1a5; }
/* ১) উপজেলা কর্মকর্তা — লাল */
.lv-role.role-officer { border-left-color: var(--ansar-red); background: linear-gradient(135deg, rgba(244,42,65,0.07), rgba(244,42,65,0.015) 55%), var(--white); }
body.dark-mode .lv-role.role-officer { background: linear-gradient(135deg, rgba(244,42,65,0.14), rgba(244,42,65,0.02) 55%), var(--white); }
/* ২) ক্যাম্প কমান্ডার (ক্যাম্প ইনচার্জ) — নীল */
.lv-role.role-commander { border-left-color: #2563eb; background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(37,99,235,0.015) 55%), var(--white); }
body.dark-mode .lv-role.role-commander { background: linear-gradient(135deg, rgba(37,99,235,0.16), rgba(37,99,235,0.02) 55%), var(--white); }
/* ৩) আনসার সদস্য / সদস্য নিবন্ধন — বেগুনি */
.lv-role.role-member { border-left-color: #9333ea; background: linear-gradient(135deg, rgba(147,51,234,0.08), rgba(147,51,234,0.015) 55%), var(--white); }
body.dark-mode .lv-role.role-member { background: linear-gradient(135deg, rgba(147,51,234,0.16), rgba(147,51,234,0.02) 55%), var(--white); }
.lv-tile-icon.purple { background: linear-gradient(135deg, #9333ea, #7e22ce); }
/* ---------- প্রতিটি ভূমিকার পেজের ব্যাকগ্রাউন্ড আলাদা — সহজে বোঝা যাবে কোনটা কার পেজ ---------- */
body.lv-bg-officer { background: #fdf1f2; }
body.dark-mode.lv-bg-officer { background: #1c1113; }
body.lv-bg-commander { background: #eef3fd; }
body.dark-mode.lv-bg-commander { background: #10151f; }
body.lv-bg-member { background: #f6eefd; }
body.dark-mode.lv-bg-member { background: #17111e; }
body.lv-bg-commandant { background: #fdf7e8; }
body.dark-mode.lv-bg-commandant { background: #1c1810; }
body.lv-bg-range { background: #ecfbf6; }
body.dark-mode.lv-bg-range { background: #0e1c18; }
body.lv-bg-admin { background: #eef1f5; }
body.dark-mode.lv-bg-admin { background: #10131a; }
@media print { .lv-nav, .lv-hero-actions, .lv-actions, details.lv-more, .lv-noprint { display: none !important; } body { background: #fff !important; } .lv-card { box-shadow: none; border: 1px solid #ccc; } }
/* ---------- ইমেইল ইনপুটও অন্য ইনপুটের মতো (আগে স্টাইল ছিল না) ---------- */
.lv-form input[type=email] {
width: 100%; border: 1.5px solid rgba(0, 106, 78, 0.22); background: var(--light-bg); color: var(--text-dark);
border-radius: 11px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.lv-form input[type=email]:focus { border-color: var(--primary-green); box-shadow: 0 0 0 3px rgba(0, 106, 78, 0.12); }
/* ---------- জেলা কমান্ড্যান্ট লগইন/রেজিস্ট্রেশন: সুন্দর, বড় ও আরামদায়ক ইনপুট ---------- */
.lv-bg-commandant .lv-form label { font-size: 13.5px; margin-bottom: 5px; }
.lv-bg-commandant .lv-form input[type=email],
.lv-bg-commandant .lv-form input[type=text],
.lv-bg-commandant .lv-form select {
height: 46px; padding: 0 14px; font-size: 15px; border-radius: 12px; border: 1.5px solid rgba(0, 106, 78, 0.28);
background: #fff; box-shadow: 0 2px 6px rgba(0, 106, 78, 0.06); -webkit-appearance: none; appearance: none;
}
.lv-bg-commandant .lv-form input[type=email]::placeholder,
.lv-bg-commandant .lv-form input[type=text]::placeholder { color: #9aa8a3; font-weight: 400; }
.lv-bg-commandant .lv-form input[type=email]:focus,
.lv-bg-commandant .lv-form input[type=text]:focus,
.lv-bg-commandant .lv-form select:focus { border-color: var(--primary-green); box-shadow: 0 0 0 4px rgba(0, 106, 78, 0.14); background: #fff; }
.lv-bg-commandant .lv-form select {
padding-right: 42px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 9px;
}
.lv-bg-commandant .lv-form input[name=otp] { height: 58px; border-radius: 16px; }
.lv-bg-commandant .lv-form .lv-btn.block { height: 52px; border-radius: 14px; font-size: 15.5px; }
body.dark-mode .lv-bg-commandant .lv-form input[type=email],
body.dark-mode .lv-bg-commandant .lv-form input[type=text],
body.dark-mode .lv-bg-commandant .lv-form select { background: rgba(255, 255, 255, 0.06); border-color: rgba(79, 209, 165, 0.35); box-shadow: none; }
body.dark-mode .lv-bg-commandant .lv-form select { background-color: rgba(255, 255, 255, 0.06); }
/* ==========================================================
রেশন ব্যবস্থা (সার্কেল অ্যাডজুটেন্ট) — বার্তার কার্ড, ব্যাজ, উপজেলা বাছাই, "কতজন পড়েছেন"
========================================================== */
.lv-rn-card { border: 2px solid rgba(245, 158, 11, .45); background: linear-gradient(180deg, #fffaf0, var(--white) 60%); }
.lv-rn-item { border: 1.5px solid rgba(0, 106, 78, .15); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: var(--white); }
.lv-rn-item.is-new { border-color: var(--ansar-red); box-shadow: 0 0 0 3px rgba(214, 27, 48, .10); }
.lv-rn-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 15px; color: var(--text-dark); margin-bottom: 6px; }
.lv-rn-meta { font-size: 12.5px; color: #475569; line-height: 1.7; margin-bottom: 8px; }
.lv-rn-meta i { color: var(--primary-green); }
.lv-rn-body { font-size: 14px; line-height: 1.75; color: var(--text-dark); word-break: break-word; }
.lv-rn-by { margin-top: 8px; font-size: 12px; color: #64748b; text-align: right; }
.lv-rn-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 20px; background: #e2e8f0; color: #334155; white-space: nowrap; }
.lv-rn-badge.new { background: var(--ansar-red); color: #fff; animation: lvRnPulse 1.6s ease-in-out infinite; }
.lv-rn-badge.today { background: #16a34a; color: #fff; }
.lv-rn-badge.tomorrow { background: #f59e0b; color: #fff; }
.lv-rn-badge.edited { background: #2563eb; color: #fff; }
.lv-rn-badge.cancelled { background: #94a3b8; color: #fff; }
.lv-rn-badge.ended { background: #cbd5e1; color: #475569; }
@keyframes lvRnPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .lv-rn-badge.new { animation: none; } }
.lv-pick-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.lv-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px; max-height: 280px; overflow-y: auto; padding: 4px; border: 1.5px solid rgba(0, 106, 78, .15); border-radius: 12px; background: var(--white); }
.lv-pick { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; background: var(--light-bg); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-dark); }
.lv-pick input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--primary-green); }
.lv-pick small { margin-left: auto; font-size: 11px; color: #64748b; font-weight: 500; white-space: nowrap; }
.lv-rn-stats { margin-top: 8px; border: 1.5px solid rgba(0, 106, 78, .13); border-radius: 12px; overflow: hidden; background: var(--white); }
.lv-rn-stat-row { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 6px; padding: 8px 10px; font-size: 12.5px; border-top: 1px solid rgba(0, 106, 78, .09); }
.lv-rn-stat-row:first-child { border-top: none; }
.lv-rn-stat-row.head { background: rgba(0, 106, 78, .08); font-weight: 800; color: var(--text-dark); }
@media (max-width: 480px) { .lv-rn-stat-row { font-size: 11.5px; padding: 7px 8px; } }
/* ===== জেলা কমান্ড্যান্টের নোটিশ কার্ড ===== */
.lv-nt-item.is-urgent { border-left: 4px solid var(--ansar-red); }
.lv-nt-card > h3 .lv-count { margin-left: 4px; }
/* ===== জেলা কমান্ড্যান্ট প্যানেল — ধাপে ধাপে নেভিগেশন ===== */
.lv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; margin: 0 0 12px; color: var(--muted-text); }
.lv-crumbs a { color: var(--primary-green); font-weight: 700; text-decoration: none; }
.lv-crumbs a:hover { text-decoration: underline; }
.lv-crumbs i { font-size: 9px; opacity: .6; }
body.dark-mode .lv-crumbs a { color: #4fd1a5; }
.lv-tile .lv-tile-badge { margin-left: auto; align-self: flex-start; }
.lv-pick { border: 1.5px solid rgba(0, 106, 78, 0.18); border-radius: 12px; padding: 10px 12px; margin: 8px 0; background: var(--light-bg); }
.lv-pick > label.lv-pick-head { display: flex; gap: 8px; align-items: center; font-weight: 700; cursor: pointer; }
.lv-pick-body { margin-top: 8px; padding-left: 4px; }
.lv-pick-body label { display: flex; gap: 7px; align-items: center; font-size: 13px; padding: 3px 0; cursor: pointer; }
.lv-pick-list { max-height: 240px; overflow-y: auto; border: 1px dashed rgba(0, 106, 78, 0.25); border-radius: 10px; padding: 8px 10px; margin-top: 6px; }
.lv-pick-list .lv-pick-grp { font-weight: 700; font-size: 12.5px; color: var(--primary-green); margin-top: 6px; }
.lv-pick input[type=checkbox], .lv-pick input[type=radio] { width: 18px; height: 18px; flex: none; }
/* ==========================================================
জেলা কমান্ড্যান্টের প্যানেলের মতো সাজানো রূপ — উপজেলা কর্মকর্তা, ক্যাম্প ইনচার্জ, আনসার সদস্য ও সার্কেল অ্যাডজুটেন্ট
(leave-sections.js ড্যাশবোর্ড/অংশ বদলায়; এখানে টাইল-মেনু ও ফর্মের স্টাইল)
========================================================== */
.lv-sec-hidden { display: none !important; }
/* স্ক্রিপ্ট চালু হওয়ার আগে লম্বা পেজ ঝলকে না দেখানোর জন্য (স্ক্রিপ্ট নিজেই এটি সরিয়ে দেয়) */
html.lv-pre .lv-wrap > .lv-card[id]:not(#notice):not(#ration):not(#camp-summary) { display: none; }
/* ---------- টাইল-মেনু (আগের চিপ-মেনুর জায়গায়) ---------- */
.lv-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; overflow: visible; padding: 0; margin: 0 0 12px; }
.lv-nav a { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 80px; padding: 12px 12px 11px; border-radius: 16px; font-size: 13.5px; font-weight: 700; line-height: 1.45; transition: transform .18s ease, box-shadow .18s ease; }
.lv-nav a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 106, 78, 0.16); }
.lv-nav a:focus-visible { outline: 3px solid rgba(0, 106, 78, 0.35); outline-offset: 2px; }
.lv-nav a > i:first-child { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; flex-shrink: 0; background: linear-gradient(135deg, var(--primary-green), var(--secondary-green)); }
.lv-nav a:nth-child(5n+2) > i:first-child { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.lv-nav a:nth-child(5n+3) > i:first-child { background: linear-gradient(135deg, #f2a900, #d68b00); }
.lv-nav a:nth-child(5n+4) > i:first-child { background: linear-gradient(135deg, #9333ea, #7e22ce); }
.lv-nav a:nth-child(5n+5) > i:first-child { background: linear-gradient(135deg, #64748b, #475569); }
.lv-nav a .lv-count { position: absolute; top: 12px; right: 12px; font-size: 11.5px; padding: 2px 9px; }
@media (prefers-reduced-motion: reduce) { .lv-nav a, .lv-nav a:hover { transition: none; transform: none; } }
/* ---------- ফর্মের ইনপুট: কমান্ড্যান্ট প্যানেলের মতো বড় ও আরামদায়ক ---------- */
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form label { font-size: 13.5px; margin-bottom: 5px; }
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form input[type=email],
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form input[type=text],
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form input[type=tel],
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form input[type=number],
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form input[type=date],
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form input[type=search],
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form input[type=password],
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form select {
height: 46px; padding: 0 14px; font-size: 15px; border-radius: 12px; border: 1.5px solid rgba(0, 106, 78, 0.28);
background: #fff; box-shadow: 0 2px 6px rgba(0, 106, 78, 0.06); -webkit-appearance: none; appearance: none;
}
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form textarea { padding: 12px 16px; font-size: 15px; border-radius: 14px; border: 1.5px solid rgba(0, 106, 78, 0.28); background: #fff; box-shadow: 0 2px 6px rgba(0, 106, 78, 0.06); }
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form input::placeholder,
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form textarea::placeholder { color: #9aa8a3; font-weight: 400; }
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form input:focus,
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form select:focus,
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form textarea:focus { border-color: var(--primary-green); box-shadow: 0 0 0 4px rgba(0, 106, 78, 0.14); background: #fff; }
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form select {
padding-right: 42px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 9px;
}
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form .lv-btn.block { height: 52px; border-radius: 14px; font-size: 15.5px; }
body.dark-mode:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form input,
body.dark-mode:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form select,
body.dark-mode:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form textarea { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(79, 209, 165, 0.35); box-shadow: none; }
/* ফাইল ইনপুট ও চেকবক্স/রেডিও যেন বড় হয়ে না যায় */
body:is(.lv-bg-officer, .lv-bg-commander, .lv-bg-member) .lv-form input[type=file] { height: auto; padding: 10px 12px; }
/* ===== সদস্যের প্রোফাইল ছবি ===== */
.lv-avatar { display: inline-block; border-radius: 12px; object-fit: cover; background: #e5efe9; flex-shrink: 0; vertical-align: middle; border: 1px solid rgba(0, 106, 78, 0.18); }
.lv-avatar-ph { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary-green); background: rgba(0, 106, 78, 0.10); }
body.dark-mode .lv-avatar { background: #1d2b26; border-color: rgba(79, 209, 165, 0.25); }
body.dark-mode .lv-avatar-ph { color: #4fd1a5; background: rgba(79, 209, 165, 0.10); }
.lv-avatar-lg { border-radius: 16px; }
.lv-with-avatar { display: flex; align-items: center; gap: 12px; }
.lv-with-avatar > div { min-width: 0; }
.lv-hero-photo { flex-shrink: 0; }
.lv-hero-photo .lv-avatar { width: 84px !important; height: 104px !important; border-radius: 14px; }
.lv-sigcap[data-aspect] .lv-sigcap-preview img { max-height: 150px; }
.lv-hist-box { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.lv-hist-box > div { flex: 1 1 200px; border: 1px solid rgba(0, 106, 78, 0.18); border-radius: 12px; padding: 10px 12px; background: rgba(0, 106, 78, 0.04); }
.lv-hist-box small { display: block; color: var(--muted-text); font-size: 12px; margin-bottom: 2px; }
.lv-hist-box b { font-size: 14.5px; }
body.dark-mode .lv-hist-box > div { background: rgba(79, 209, 165, 0.05); border-color: rgba(79, 209, 165, 0.25); }
@media print { .lv-hero-photo .lv-avatar { width: 70px !important; height: 88px !important; } }
/* ===== "আমার ছুটি" (leave-my.php) — ভূমিকা-কার্ড ===== */
.lm-sec { font-size: 15px; color: var(--text-dark); margin: 18px 2px 10px; display: flex; align-items: center; gap: 8px; }
.lm-sec i { color: var(--primary-green); }
body.dark-mode .lm-sec i { color: #4fd1a5; }
.lm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; margin-bottom: 6px; }
.lm-card { background: var(--white); border-radius: 20px; box-shadow: var(--card-shadow); padding: 16px 16px 14px; border-top: 5px solid var(--primary-green); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.lm-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1); }
.lm-card.c-purple { border-top-color: #9333ea; }
.lm-card.c-blue { border-top-color: #2563eb; }
.lm-card.c-red { border-top-color: var(--ansar-red); }
.lm-card.c-gold { border-top-color: #f2a900; }
.lm-head { display: flex; align-items: center; gap: 12px; }
.lm-t { flex: 1; min-width: 0; }
.lm-t b { display: block; font-size: 15px; color: var(--text-dark); line-height: 1.35; }
.lm-who { display: block; font-size: 12px; color: var(--muted-text); margin-top: 1px; }
.lm-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; align-self: flex-start; }
.lm-pill.ok { background: rgba(22, 163, 74, 0.14); color: #166534; }
.lm-pill.wait { background: rgba(242, 169, 0, 0.18); color: #7a5300; }
body.dark-mode .lm-pill.ok { color: #86efac; } body.dark-mode .lm-pill.wait { color: #fde68a; }
.lm-desc { font-size: 12.5px; color: var(--muted-text); line-height: 1.7; margin: 10px 0 0; }
.lm-card .lv-actions { margin-top: auto; padding-top: 12px; }
.lm-card .lv-hint { margin-top: 8px; }
details.lm-more > summary { cursor: pointer; font-weight: 700; font-size: 15px; color: var(--text-dark); list-style: none; display: flex; align-items: center; gap: 8px; }
details.lm-more > summary::-webkit-details-marker { display: none; }
details.lm-more > summary i { color: var(--primary-green); }
details.lm-more[open] > summary { margin-bottom: 12px; }
.lm-set { padding: 12px 0; border-top: 1px solid rgba(0, 0, 0, .07); }
.lm-set > b { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin-bottom: 6px; }
.lm-set .lv-sub { margin-bottom: 8px; }