﻿body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 8%, rgba(8,145,178,.16), transparent 28%),
        radial-gradient(circle at 92% 92%, rgba(234,179,8,.12), transparent 24%),
        linear-gradient(145deg, #e7f2f5 0%, #f7fbfc 48%, #edf5f4 100%);
    font-family: Tahoma, Arial, sans-serif;
    direction: rtl;
    color: #2d2d2d;
}
* { box-sizing: border-box; }
a { color: #087f9d; }
.app-container { width:1080px; max-width:94%; margin:38px auto; }
.app-card {
    background:rgba(255,255,255,.96);
    border:1px solid rgba(8,47,73,.08);
    border-radius:22px;
    padding:30px;
    margin-bottom:20px;
    box-shadow:0 18px 50px rgba(8,47,73,.11);
}
.app-logo { font-size:26px; font-weight:bold; color:#082f49; margin-bottom:8px; }
.app-subtitle { color:#666; line-height:1.8; }
.app-title { margin-top:0; color:#333; }
.topbar { overflow:hidden; margin-bottom:18px; }
.topbar-brand { float:right; font-size:22px; font-weight:bold; color:#082f49; }
.topbar-actions { float:left; }
.topbar-actions a { margin-right:8px; }
.field { margin-bottom:15px; }
.field label { display:block; margin-bottom:7px; font-weight:bold; }
.textbox {
    width:100%; min-height:44px; padding:9px 10px;
    border:1px solid #cbdde2; border-radius:11px;
    font-family:Tahoma; font-size:14px; background:#fff;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.textbox:focus { outline:none; border-color:#0891b2; box-shadow:0 0 0 4px rgba(8,145,178,.13); }
.btn {
    display:inline-block; min-height:44px; padding:11px 18px; border:0;
    border-radius:11px; background:linear-gradient(135deg,#082f49,#087f9d);
    color:#fff; text-decoration:none; font-family:Tahoma; font-size:14px;
    cursor:pointer; text-align:center; box-shadow:0 8px 18px rgba(8,47,73,.18);
    transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(8,47,73,.24); }
.btn-secondary { background:linear-gradient(135deg,#475569,#334155); }
.btn-danger { background:#c62828; }
.btn-light { background:#eef5f7; color:#082f49; border:1px solid #dce9ed; box-shadow:none; }
.btn-block { width:100%; display:block; }
.grid-2, .grid-3, .grid-4 { overflow:hidden; }
.grid-2 > *, .grid-3 > *, .grid-4 > * { float:right; margin-left:2%; }
.grid-2 > * { width:48%; }
.grid-3 > * { width:31.33%; }
.grid-4 > * { width:23%; }
.menu-item {
    display:block; text-decoration:none; color:#333;
    background:linear-gradient(145deg,#ffffff,#f7fbfc);
    border:1px solid #dce9ed; border-right:4px solid #0891b2;
    border-radius:15px; padding:22px; margin-bottom:15px; min-height:115px;
    box-shadow:0 8px 22px rgba(8,47,73,.06);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.menu-item:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(8,47,73,.12); border-right-color:#eab308; }
.menu-title { color:#0891b2; font-size:17px; font-weight:bold; margin-bottom:7px; }
.stat-card {
    background:linear-gradient(145deg,#ffffff,#f8fcfd);
    border-radius:15px; padding:18px; margin-bottom:15px;
    border:1px solid #dce9ed; min-height:105px;
    box-shadow:0 8px 22px rgba(8,47,73,.05);
}
.stat-label { color:#66757a; margin-bottom:8px; }
.stat-value { color:#087f9d; font-size:25px; font-weight:bold; }
.status { padding:12px; border-radius:8px; margin:15px 0; }
.status-active { background:#e8f5e9; color:#2e7d32; }
.status-inactive { background:#ffebee; color:#c62828; }
.message { display:block; margin-top:15px; font-weight:bold; }
.info-line { padding:9px 0; border-bottom:1px solid #dce8eb; }
.info-label { display:inline-block; min-width:130px; font-weight:bold; color:#475569; }
.badge { background:#d32f2f; color:#fff; display:inline-block; min-width:22px; padding:3px 7px; border-radius:15px; text-align:center; font-size:12px; }
.clear { clear:both; }
.footer { text-align:center; color:#66757a; font-size:12px; padding:8px 0 20px; }
@media screen and (max-width:700px) {
    body { font-size:14px; }
    .app-container { width:100%; max-width:100%; margin:0; padding:12px; }
    .app-card { padding:18px 15px; border-radius:12px; margin-bottom:12px; }
    .app-logo { font-size:23px; }
    .grid-2 > *, .grid-3 > *, .grid-4 > * { width:100%; float:none; margin-left:0; }
    .btn { width:100%; margin:5px 0; }
    .textbox { font-size:16px; min-height:46px; }
    .topbar-brand, .topbar-actions { float:none; width:100%; text-align:center; }
    .topbar-actions { margin-top:10px; }
    h1 { font-size:24px; } h2 { font-size:20px; } h3 { font-size:17px; }
}
@media screen and (max-width:380px) {
    .app-container { padding:8px; }
    .app-card { padding:15px 12px; }
}


/* Batch 2 - customers, debts and payments */
.narrow-container { width: 900px; }
.search-row { display:flex; gap:10px; margin-top:18px; align-items:center; }
.search-row .textbox { flex:1; }
.search-row .btn { white-space:nowrap; }
.table-card { padding:22px; }
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; min-width:760px; }
.data-table th { background:#edf6f8; color:#082f49; font-weight:bold; padding:13px 10px; text-align:right; border-bottom:2px solid #cfe3e8; }
.data-table td { padding:13px 10px; border-bottom:1px solid #e4eef0; vertical-align:middle; }
.data-table tr:hover td { background:#f8fcfd; }
.table-action { display:inline-block; margin:2px; padding:7px 10px; border-radius:8px; background:#e6f4f7; color:#087f9d; text-decoration:none; font-size:12px; font-weight:bold; }
.table-action.secondary { background:#f1f5f9; color:#475569; }
.amount-due { color:#b45309; font-weight:bold; }
.amount-zero { color:#2e7d32; font-weight:bold; }
.status-pill { display:inline-block; padding:4px 9px; border-radius:14px; font-size:12px; font-weight:bold; }
.status-pill.active { background:#e8f5e9; color:#2e7d32; }
.status-pill.inactive { background:#ffebee; color:#c62828; }
.textarea { resize:vertical; min-height:85px; }
.form-grid .field { min-height:78px; }
.check-field { padding:8px 0 14px; }
.customer-meta { display:flex; gap:28px; flex-wrap:wrap; color:#52636a; line-height:1.9; }
.paid-value { color:#2e7d32; }
.balance-card { border-top:3px solid #eab308; }
.account-actions > .app-card { min-height:335px; }
.payment-btn { background:linear-gradient(135deg,#166534,#2e7d32); }
.hint-box { background:#fff8e1; border:1px solid #f3dc98; color:#7c5d0a; padding:10px 12px; border-radius:10px; margin-bottom:15px; font-size:13px; }
.success-message { display:block; padding:11px 14px; background:#e8f5e9; color:#2e7d32; border-radius:9px; margin:0 0 15px; }
.error-message { display:block; padding:11px 14px; background:#ffebee; color:#c62828; border-radius:9px; margin:0 0 15px; }
.tx-type { display:inline-block; min-width:58px; text-align:center; padding:4px 8px; border-radius:12px; font-size:12px; font-weight:bold; }
.tx-type.debt { background:#fff3e0; color:#b45309; }
.tx-type.payment { background:#e8f5e9; color:#2e7d32; }
@media screen and (max-width:700px) {
  .narrow-container { width:100%; }
  .search-row { display:block; }
  .search-row .btn { width:100%; }
  .customer-meta { display:block; }
  .customer-meta span { display:block; margin-bottom:6px; }
  .account-actions > .app-card { min-height:0; }
  .table-card { padding:14px 10px; }
}

/* Batch 3 - dashboard, date filters and printable statements */
.welcome-card { border-right:4px solid #0891b2; }
.dashboard-sections > .app-card { min-height:355px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.section-head .app-title { margin-bottom:0; }
.small-link { font-size:12px; font-weight:bold; text-decoration:none; }
.customer-link { color:#082f49; font-weight:bold; text-decoration:none; }
.customer-link:hover { color:#0891b2; }
.compact-table { min-width:520px; }
.compact-table th, .compact-table td { padding:11px 8px; }
.filter-card { padding-top:22px; padding-bottom:22px; }
.date-filter-row { display:flex; align-items:flex-end; gap:12px; }
.date-filter-row .field { flex:1; margin-bottom:0; }
.filter-buttons { display:flex; gap:8px; }
.filter-buttons .btn { white-space:nowrap; }

.print-page { background:#eef3f5; }
.print-sheet { direction:rtl; width:960px; max-width:96%; margin:25px auto; background:#fff; padding:38px; box-shadow:0 10px 35px rgba(8,47,73,.12); }
.print-toolbar { display:flex; gap:8px; justify-content:flex-start; margin-bottom:25px; }
.print-header { text-align:center; border-bottom:2px solid #082f49; padding-bottom:18px; margin-bottom:22px; }
.print-brand { color:#087f9d; font-size:18px; font-weight:bold; }
.print-header h1 { color:#082f49; margin:8px 0; font-size:26px; }
.print-shop { font-weight:bold; font-size:16px; }
.print-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-bottom:22px; line-height:1.8; }
.print-info-grid .full-row { grid-column:1 / -1; }
.print-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px; }
.print-summary > div { border:1px solid #cfe0e5; border-radius:9px; padding:12px; text-align:center; }
.print-summary span { display:block; color:#66757a; font-size:12px; margin-bottom:7px; }
.print-summary strong { display:block; color:#082f49; font-size:16px; }
.print-table { width:100%; border-collapse:collapse; font-size:12px; }
.print-table th { background:#edf6f8; color:#082f49; padding:10px 7px; border:1px solid #cbdde2; text-align:right; }
.print-table td { padding:9px 7px; border:1px solid #dce7ea; vertical-align:top; }
.print-footer { display:flex; justify-content:space-between; margin-top:25px; border-top:1px solid #ccdce1; padding-top:12px; color:#66757a; font-size:11px; }

@media screen and (max-width:700px) {
  .dashboard-sections > .app-card { min-height:0; }
  .date-filter-row { display:block; }
  .date-filter-row .field { margin-bottom:12px; }
  .filter-buttons { display:block; }
  .filter-buttons .btn { width:100%; }
  .section-head { align-items:flex-start; }
  .print-sheet { max-width:100%; width:100%; margin:0; padding:18px 12px; }
  .print-info-grid { grid-template-columns:1fr; }
  .print-info-grid .full-row { grid-column:auto; }
  .print-summary { grid-template-columns:1fr 1fr; }
}

@media print {
  @page { size:A4; margin:12mm; }
  body.print-page { background:#fff; }
  .no-print { display:none !important; }
  .print-sheet { width:100%; max-width:none; margin:0; padding:0; box-shadow:none; }
  .print-header h1 { font-size:22px; }
  .print-table { font-size:10px; }
  .print-table th, .print-table td { padding:6px 5px; }
  .print-summary > div { break-inside:avoid; }
}


/* Batch 4 - secure debtor link, WhatsApp reminders and calendar inputs */
.access-card { border-right:4px solid #0891b2; }
.access-actions, .access-links { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.public-link-field { margin-top:14px; }
.ltr-field { direction:ltr; text-align:left; font-family:Consolas,monospace; font-size:12px; }
.whatsapp-btn { background:linear-gradient(135deg,#166534,#15803d); color:#fff; }
.security-note, .public-security-note { background:#edf6f8; border:1px solid #cfe3e8; color:#38545e; padding:11px 13px; border-radius:10px; margin-top:12px; font-size:12px; }
.public-debt-container { max-width:980px; }
.public-brand-card { text-align:center; background:linear-gradient(135deg,#082f49,#087f9d); color:#fff; border-radius:16px; padding:24px 18px; margin-bottom:15px; box-shadow:0 10px 28px rgba(8,47,73,.16); }
.public-brand { font-size:20px; font-weight:bold; }
.public-shop { font-size:24px; font-weight:bold; margin:9px 0 4px; }
.public-caption { color:#d9f2f7; }
.invalid-link-card { text-align:center; padding:42px 25px; }
.public-lock { font-size:38px; margin-bottom:10px; }
input[type=date].textbox { direction:ltr; text-align:left; }
@media screen and (max-width:700px) {
  .access-actions, .access-links { display:block; }
  .access-actions .btn, .access-links .btn { width:100%; margin:5px 0; }
  .public-shop { font-size:20px; }
}


/* Batch 4.5 - QR / PWA / Push */
.push-box{border-right:4px solid #0891b2}.push-flex{display:flex;align-items:center;justify-content:space-between;gap:18px}.push-status{display:block;margin-top:10px;color:#5f6b75;font-size:13px;line-height:1.8}.new-notification-box{display:none;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:12px 15px;border-radius:12px;margin-bottom:15px;text-align:center}.notification-button{position:relative}.notification-badge{background:#c2410c;color:#fff;min-width:20px;height:20px;line-height:20px;border-radius:12px;text-align:center;font-size:11px;padding:0 5px}.notification-count-box{background:#e6f7fb;color:#075985;border-radius:10px;padding:9px 12px;font-weight:bold}.notification-unread{border-right:4px solid #0891b2;padding-right:10px}.notification-read{opacity:.72;padding-right:14px}.debtor-qr-panel{text-align:center;background:#f7fbfc;border:1px solid #d8e8ed;border-radius:14px;padding:16px;margin:15px 0}.small-qr-box{width:290px;max-width:100%;margin:0 auto 12px}.qr-page-container{max-width:720px}.qr-card{text-align:center}.qr-box{width:330px;max-width:100%;margin:20px auto;padding:14px;background:#fff;border:1px solid #d8e8ed;border-radius:16px}.qr-image{width:300px;max-width:100%;height:auto;display:block;margin:auto}.qr-expiry{font-weight:bold;color:#075985;margin:10px 0}.url-box{direction:ltr;text-align:left;word-break:break-all;background:#f6f8fa;padding:12px;border-radius:10px;font-size:12px;margin:12px 0}.center-actions{text-align:center;margin-top:15px}@media(max-width:700px){.push-flex{display:block}.push-flex>div:last-child{margin-top:12px}.push-flex .btn{width:100%;margin:4px 0}.small-qr-box,.qr-box{width:270px}}
