/* Supplemental layout for gas-specific columns. Original Biyamaal CSS files remain unchanged. */
*{box-sizing:border-box}body{margin:0}.main-content{min-width:0}.navbar{justify-content:space-between;gap:10px}.gas-logo{margin:auto;width:72px;height:72px;display:grid;place-items:center;border:3px solid white;border-radius:50%;font-size:40px}.page-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}.page-title h2{margin:0}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.field{display:flex;flex-direction:column;gap:6px;min-width:0;font-weight:600;font-size:14px}.field input,.field select{min-width:0;width:100%;font-size:16px}.form-actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.panel{background:white;border:1px solid #e5e7eb;border-radius:16px;padding:20px;box-shadow:0 12px 30px rgba(15,23,42,.07);margin-bottom:20px}.inline-form{display:inline}.record-actions{display:flex;gap:5px;flex-wrap:wrap}.table-responsive{overflow:auto}.gas-table{width:100%!important;min-width:0!important;table-layout:fixed!important;border-collapse:collapse}.gas-table th,.gas-table td{width:auto!important;overflow-wrap:anywhere;white-space:normal!important;border:1px solid #000!important}.gas-table td{font-size:13px}.gas-table thead th{background:linear-gradient(135deg,#1e293b,#2563eb);color:white;padding:12px 8px;font-size:11px;font-weight:800;text-transform:uppercase}.gas-table td{padding:10px 8px;vertical-align:middle}.gas-table .btn{padding:4px 7px;line-height:1.4;min-height:30px;font-size:11px}.gas-table small{display:block;color:#64748b}.empty-state{padding:35px!important;text-align:center}.badge{white-space:normal}.print-heading{display:none}.search-control{max-width:420px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#2c3e50,#3498db)}.login-card{background:white;padding:32px;border-radius:20px;width:min(100%,420px);box-shadow:0 15px 45px #0003}.login-card form{display:grid;gap:18px}.password-row{display:flex;gap:5px}.hint{font-size:13px;color:#64748b}.summary-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.summary-card{min-width:0}.audit-details{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;font-size:12px}.permission-item{align-items:start}.permission-item label{overflow-wrap:anywhere}.page-container{max-width:1500px;margin:auto}.customer-selected{padding:16px;border-left:4px solid #2563eb;background:#eff6ff;border-radius:10px;margin-bottom:20px}.gas-table tfoot td{font-weight:800;background:#f8fafc}
@media(max-width:991px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.summary-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.navbar{padding-left:62px;min-height:62px}.main-content{padding:12px}.form-grid{grid-template-columns:1fr}.panel{padding:16px}.form-actions .btn{min-height:44px}.page-title .btn{font-size:13px}.summary-cards{gap:10px}.summary-card{padding:12px;gap:8px}.summary-icon{width:32px;height:32px;font-size:16px}.summary-content h3{font-size:16px}.summary-content p{font-size:9px}.table-responsive{padding:0;overflow:visible}.gas-table th{padding:7px 3px!important;font-size:8px!important}.gas-table td{padding:7px 3px!important;font-size:10px!important;line-height:1.35!important;overflow:visible!important}.gas-table .badge{font-size:8px!important;padding:3px!important}.gas-table small{font-size:8px!important}.gas-table .btn{font-size:9px!important;padding:5px 3px!important;min-height:32px}.record-actions{gap:3px;flex-direction:column}.gas-table th:first-child,.gas-table td:first-child{width:11%!important}.permissions-grid{grid-template-columns:1fr!important}.users-container,.access-page,.payments-container,.history-container,.statement-container{padding:0}.history-table-wrapper,.statement-table-wrapper{padding:0}.filter-card{padding:14px}.search-control{max-width:100%;font-size:16px}.sidebar .nav-link{min-height:44px}.gas-table .record-actions a,.gas-table .record-actions button{width:100%}.gas-table .inline-form{width:100%}}
@media print{.sidebar,.navbar,.footer,.no-print,.mobile-menu-toggle,.sidebar-overlay,.alert{display:none!important}.content-wrapper{margin:0!important}.main-content{padding:0!important}.print-heading{display:block;text-align:center;border-bottom:2px solid #2563eb;margin-bottom:15px}.panel,.customer-table-container,.history-table-wrapper,.statement-table-wrapper{box-shadow:none!important;border:none!important}.table-responsive{padding:0;overflow:visible!important}.gas-table{width:100%!important;font-size:10px!important}.gas-table th,.gas-table td{font-size:10px!important;padding:6px!important;color:black!important;white-space:normal!important}.gas-table th{background:#eee!important}.gas-table .record-actions{display:none!important}.gas-table tr{break-inside:avoid}.summary-card{box-shadow:none!important}.summary-icon{display:none}.print-heading h2{font-size:22px}.gas-table thead{display:table-header-group}@page{size:A4 landscape;margin:12mm}}
@media(max-width:768px){.stat-card-mini{padding:12px!important;min-width:0}.stat-info{min-width:0}.stat-card-mini .stat-icon{width:30px;height:30px;font-size:16px}.stat-card-mini .stat-value{font-size:16px!important;overflow-wrap:anywhere}.stat-card-mini .stat-label{font-size:10px!important}.greeting-date{overflow-wrap:anywhere}.filter-quick-buttons{flex-wrap:wrap}.filter-quick-btn{min-height:40px}}
/* Original water tables have different column positions. Keep every gas column visible. */
.gas-table#transactionsTable th:nth-child(n),.gas-table#transactionsTable td:nth-child(n),.gas-table.payment-table th:nth-child(n),.gas-table.payment-table td:nth-child(n){display:table-cell!important;width:auto!important;max-width:none!important;white-space:normal!important;overflow-wrap:anywhere}
@media(max-width:768px){.gas-table#transactionsTable th:nth-child(n),.gas-table.payment-table th:nth-child(n){font-size:8px!important;padding:7px 3px!important}.gas-table#transactionsTable td:nth-child(n),.gas-table.payment-table td:nth-child(n){font-size:10px!important;padding:7px 3px!important}.gas-table#transactionsTable td:nth-child(1),.gas-table#transactionsTable th:nth-child(1){width:12%!important}.gas-table#transactionsTable td:nth-child(2),.gas-table#transactionsTable th:nth-child(2){width:13%!important}.gas-table#transactionsTable td:nth-child(3),.gas-table#transactionsTable th:nth-child(3){width:15%!important}}
/* Add and edit forms appear in accessible pop-up dialogs. */
.record-dialog{border:0;border-radius:20px;padding:0;width:min(720px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);box-shadow:0 30px 90px rgba(15,23,42,.35);overflow:auto;color:#0f172a;background:#fff}
.record-dialog:not([open]){display:none}.record-dialog[open]{display:block}
.record-dialog::backdrop{background:rgba(15,23,42,.6);backdrop-filter:blur(4px)}
.record-dialog-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;position:sticky;top:0;z-index:2}
.record-dialog-header small{font-size:11px;letter-spacing:.05em;color:#e0e7ff}.record-dialog-header h3{font-size:22px;margin:4px 0 0;color:#fff;font-weight:800}.record-dialog-close{background:rgba(255,255,255,.18);border:0;color:#fff;border-radius:10px;font-size:28px;width:44px;height:44px;flex-shrink:0;cursor:pointer}.record-dialog-close:hover{background:rgba(255,255,255,.3)}
.record-dialog-body{padding:24px}.record-dialog .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0!important}.record-dialog .form-actions{grid-column:1/-1;margin-top:8px;border-top:1px solid #e5e7eb;padding-top:16px;justify-content:flex-end}.record-dialog .form-actions .btn{min-height:44px}.new-record-button{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;border:0!important;font-weight:800!important;min-height:44px;border-radius:12px!important;box-shadow:0 6px 16px #2563eb26}.record-dialog form{margin:0}.record-dialog .field{color:#334155}
body.record-open{overflow:hidden}
/* Four attractive full-color statistics cards on operational pages. */
.summary-cards.colored-summary .summary-card{position:relative;overflow:hidden;border:0;background:linear-gradient(135deg,#2563eb,#0891b2);box-shadow:0 12px 26px #2563eb30;padding:22px;min-height:110px}
.summary-cards.colored-summary .summary-card:nth-child(2){background:linear-gradient(135deg,#16a34a,#059669);box-shadow:0 12px 26px #16a34a30}
.summary-cards.colored-summary .summary-card:nth-child(3){background:linear-gradient(135deg,#f59e0b,#ea580c);box-shadow:0 12px 26px #ea580c30}
.summary-cards.colored-summary .summary-card:nth-child(4){background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 12px 26px #7c3aed30}
.summary-cards.colored-summary .summary-card::after{content:'';position:absolute;right:-25px;top:-25px;width:100px;height:100px;border-radius:50%;background:#ffffff12;pointer-events:none}
.summary-cards.colored-summary .summary-content h3{color:#fff!important;font-size:clamp(18px,2.4vw,25px)}.summary-cards.colored-summary .summary-content p{color:#ffffffdf!important}.summary-cards.colored-summary .summary-icon{background:#ffffff26;color:#fff;border:1px solid #ffffff26}.summary-cards.colored-summary .summary-content{position:relative;z-index:1}
@media(max-width:768px){.record-dialog{width:calc(100% - 20px);max-width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:16px}.record-dialog-header{padding:16px}.record-dialog-header h3{font-size:20px}.record-dialog-body{padding:16px}.record-dialog .form-grid{grid-template-columns:1fr}.record-dialog .form-actions{justify-content:stretch}.record-dialog .form-actions .btn{flex:1}.summary-cards.colored-summary .summary-card{padding:13px;gap:9px;min-height:95px}.summary-cards.colored-summary .summary-content h3{font-size:16px}.summary-cards.colored-summary .summary-content p{font-size:9px}.summary-cards.colored-summary .summary-icon{width:30px;height:30px;flex-shrink:0}.page-title .form-actions{gap:8px}}
@media print{.record-dialog{display:none!important}.summary-cards.colored-summary .summary-card{background:#fff!important;box-shadow:none!important;border:1px solid #aaa!important}.summary-cards.colored-summary .summary-content h3,.summary-cards.colored-summary .summary-content p{color:#000!important}}