/* ========================================================= app.css — shared visual identity Link this AFTER Bootstrap's CSS on every page: ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap'); :root { --brand-primary: #0F6E56; /* deep teal — primary actions, headings accents */ --brand-primary-light: #E1F5EE; --brand-secondary: #185FA5; /* blue — secondary info, deposits */ --brand-warning: #854F0B; /* amber text on warning fills */ --brand-warning-bg:#FAEEDA; --brand-danger: #993C1D; /* coral text on danger fills */ --brand-danger-bg: #FAECE7; --brand-success: #3B6D11; --brand-success-bg:#EAF3DE; --surface: #FFFFFF; --surface-muted: #F7F7F5; --border-soft: #E5E3DC; --text-primary: #232220; --text-secondary: #6B6A65; --radius-md: 10px; --radius-lg: 14px; --font-arabic: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; --font-display: 'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; } body { background: var(--surface-muted); color: var(--text-primary); font-family: var(--font-arabic); } h1, h2, h3, h4, h5, h6, .fw-bold, .fw-bolder, .app-header h1, .app-header h2, .app-header h3, .metric-tile .metric-value, .navbar-brand { font-family: var(--font-display); } /* RTL pages set dir="rtl" on ; this keeps spacing logical either direction without per-page overrides */ [dir="rtl"] body { text-align: right; } /* ---------- Secondary page rows: action buttons and, occasionally, a dynamic sub-heading (e.g. a specific person's name) shown below the main .app-topbar banner. Deliberately plain (no gradient) so it doesn't duplicate the banner above it. ---------- */ .app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem; } .app-header h1, .app-header h2, .app-header h3 { margin: 0; font-weight: 600; color: var(--text-primary); } .app-header .actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ---------- Cards ---------- */ .card { border: 1px solid var(--border-soft) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; } .card-body, .card.p-3, .card.p-4 { background: var(--surface); } /* ---------- Metric tiles (dashboard summary numbers) ---------- */ .metric-tile { border-radius: var(--radius-md); padding: 1rem 1.1rem; border: none; } .metric-tile .metric-label { font-size: 13px; margin: 0 0 4px; opacity: 0.85; } .metric-tile .metric-value { font-size: 22px; font-weight: 600; margin: 0; } .metric-tile.tile-balance { background: var(--brand-primary-light); color: var(--brand-primary); } .metric-tile.tile-deposit { background: #E6F1FB; color: var(--brand-secondary); } .metric-tile.tile-deduct { background: var(--brand-danger-bg); color: var(--brand-danger); } .metric-tile.tile-orders { background: var(--brand-warning-bg); color: var(--brand-warning); } /* ---------- Buttons: replace Bootstrap's saturated solids with calmer outline-first style, matching the dashboard mock ---------- */ .btn { border-radius: var(--radius-md); font-size: 14px; font-weight: 500; box-shadow: none; } /* Preserve keyboard focus visibility — Bootstrap uses box-shadow for its focus ring too, so the rule above must not use !important or focus becomes invisible for keyboard users. */ .btn:focus, .btn:focus-visible { box-shadow: 0 0 0 0.2rem rgba(15, 110, 86, 0.35) !important; } .btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); } .btn-primary:hover { background: #0c5c47; border-color: #0c5c47; } .btn-success { background: var(--brand-success); border-color: var(--brand-success); } .btn-secondary { background: var(--surface); border-color: var(--border-soft); color: var(--text-primary); } .btn-secondary:hover { background: var(--surface-muted); } .btn-outline-danger { color: var(--brand-danger); border-color: var(--brand-danger); } .btn-outline-danger:hover { background: var(--brand-danger-bg); color: var(--brand-danger); } .btn-danger { background: #B0452A; border-color: #B0452A; color: #fff; } .btn-danger:hover { background: #993C1D; border-color: #993C1D; } .btn-warning { background: #C98A2E; border-color: #C98A2E; color: #fff; } .btn-warning:hover { background: #854F0B; border-color: #854F0B; color: #fff; } .btn-info { background: var(--brand-secondary); border-color: var(--brand-secondary); color: #fff; } .btn-info:hover { background: #134a82; border-color: #134a82; color: #fff; } .btn-dark { background: #2C2C2A; border-color: #2C2C2A; } .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-soft); } .btn-outline-secondary:hover { background: var(--surface-muted); color: var(--text-primary); } .btn-outline-primary { color: var(--brand-primary); border-color: var(--brand-primary); } .btn-outline-primary:hover { background: var(--brand-primary-light); color: var(--brand-primary); } /* ---------- Tables ---------- */ .table thead.table-dark th, .table thead th { background: #2C2C2A !important; color: #fff !important; border-color: #2C2C2A !important; font-weight: 500; font-size: 13px; } .table td, .table th { vertical-align: middle; } .low-balance { background: var(--brand-warning-bg) !important; } /* ---------- List groups (used in dashboard / compare pages) ---------- */ .list-group-item { border-color: var(--border-soft); font-size: 14px; } /* ---------- Home page link cards (index.php) ---------- */ .card-link-box { transition: 0.15s ease; border-radius: var(--radius-lg); cursor: pointer; border: none !important; } .card-link-box:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important; } /* Replace the old saturated bg-primary/bg-success/etc. blocks used on index.php cards with the same calm tile palette as the dashboard */ .card-link-box.bg-primary { background: var(--brand-primary-light) !important; color: var(--brand-primary) !important; } .card-link-box.bg-success { background: var(--brand-success-bg) !important; color: var(--brand-success) !important; } .card-link-box.bg-info { background: #E6F1FB !important; color: var(--brand-secondary) !important; } .card-link-box.bg-warning { background: var(--brand-warning-bg) !important; color: var(--brand-warning) !important; } .card-link-box.bg-danger { background: var(--brand-danger-bg) !important; color: var(--brand-danger) !important; } .card-link-box.bg-dark { background: var(--surface-muted) !important; color: var(--text-primary) !important; border: 1px solid var(--border-soft) !important; } .card-link-box.bg-secondary{ background: var(--surface-muted) !important; color: var(--text-primary) !important; } .card-link-box h4 { font-weight: 600; font-size: 17px; } .card-link-box p { font-size: 13px; opacity: 0.8; margin: 0; } /* ---------- Login page ---------- */ .login-page-bg { min-height: 100vh; display: flex; align-items: center; background: radial-gradient(circle at 15% 15%, var(--brand-primary-light) 0%, transparent 45%), radial-gradient(circle at 85% 85%, #E6F1FB 0%, transparent 45%), var(--surface-muted); } .login-box { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: 0 8px 28px rgba(35, 34, 32, 0.08) !important; background: var(--surface); } .login-icon-badge { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-primary-light); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 26px; } .login-brand-name { font-family: var(--font-display); font-weight: 800; color: var(--text-primary); } /* ---------- Form controls: consistent focus ring app-wide ---------- */ .form-control, .form-select { border-radius: var(--radius-md); border-color: var(--border-soft); } .form-control:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 0.2rem rgba(15, 110, 86, 0.15); } .form-label { color: var(--text-secondary); } /* ---------- Badges ---------- */ .badge.bg-warning { background: var(--brand-warning-bg) !important; color: var(--brand-warning) !important; } .badge.bg-danger { background: var(--brand-danger-bg) !important; color: var(--brand-danger) !important; } .badge.bg-success { background: var(--brand-success-bg) !important; color: var(--brand-success) !important; } .badge.bg-info { background: #E6F1FB !important; color: var(--brand-secondary) !important; } .badge.bg-secondary { background: var(--surface-muted) !important; color: var(--text-secondary) !important; } /* ---------- Shared welcome/account topbar (topbar.php) ---------- */ .app-topbar { background: linear-gradient(135deg, var(--brand-primary) 0%, #0A4747 100%); border-radius: var(--radius-lg); color: #fff; box-shadow: 0 16px 32px rgba(16,24,40,.12), 0 4px 10px rgba(16,24,40,.06); position: relative; overflow: hidden; border: 0 !important; } .app-topbar::after { content: ""; position: absolute; inset: 0; background: radial-gradient(650px 220px at 88% -25%, rgba(255,255,255,.14), transparent 60%); pointer-events: none; } .app-topbar h2, .app-topbar h4 { color: #fff; position: relative; font-family: var(--font-display); } .app-topbar p { color: rgba(255,255,255,.82); position: relative; } .app-topbar .btn-outline-secondary, .app-topbar .btn-outline-danger { border-color: rgba(255,255,255,.35); color: #fff; position: relative; } .app-topbar .btn-outline-secondary:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.5); } .app-topbar .btn-outline-danger:hover { background: #e05252; border-color: #e05252; } .app-topbar .badge { position: relative; } /* ---------- Cost breakdown boxes (order.php) ---------- */ .cost-box { background: var(--surface); border-radius: var(--radius-md); padding: 8px 12px; border: 1px solid var(--border-soft); } .cost-box strong { color: var(--brand-primary); } .cost-box.bg-light.border-success { background: var(--brand-success-bg) !important; border-color: var(--brand-success) !important; }