/* Motorcycle Garage Management - Responsive, Arabic-friendly */ :root { --bg: #000000; --bg-gradient: none; --surface: #1a1a1a; --surface2: #262626; --surface3: #333333; --text: #f5f5f5; --text-muted: #a3a3a3; --primary: #0d9488; --primary-hover: #0f766e; --primary-glow: rgba(13, 148, 136, 0.25); --success: #34d399; --success-dim: rgba(52, 211, 153, 0.15); --danger: #f87171; --danger-dim: rgba(248, 113, 113, 0.15); --warning: #fbbf24; --warning-dim: rgba(251, 191, 36, 0.15); --radius: 12px; --radius-sm: 8px; --shadow: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5); --nav-height: 52px; --header-height: 48px; --border: rgba(255, 255, 255, 0.08); } * { box-sizing: border-box; } /* Page color on ; watermark sits behind so it shows through */ html { background: var(--bg); min-height: 100%; } /* Centered watermark — on html so it stays below body/content stacking */ html::before { content: ''; position: fixed; inset: 0; background: transparent url('/images/almalik-logo.png') center center / min(80vw, min(560px, 75vh)) no-repeat; opacity: 0.42; pointer-events: none; z-index: 0; } body { margin: 0; font-family: 'Segoe UI', 'Dubai', 'Tahoma', sans-serif; background: transparent; color: var(--text); min-height: 100vh; line-height: 1.5; position: relative; z-index: 1; } [dir="rtl"] { text-align: right; } /* Header */ .site-header { background: var(--surface); padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow); } .header-inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; } .header-user-display { color: var(--text-muted); font-size: 0.95rem; margin-inline-end: auto; } .user-info { color: var(--text-muted); font-size: 0.9rem; } /* Nav - large touch targets for iPad */ .main-nav { background: var(--surface2); padding: 0.5rem 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid var(--border); } .main-nav a { color: var(--text); text-decoration: none; padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; transition: background 0.2s, color 0.2s; } .main-nav a:hover { background: var(--surface3); color: var(--primary); } /* Main content — no z-index so it doesn’t trap the watermark above html::before */ .main-content { max-width: 1200px; margin: 0 auto; padding: 1.5rem; padding-bottom: 3rem; position: relative; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.2rem; border-radius: var(--radius); font-size: 1rem; font-weight: 500; text-decoration: none; border: none; cursor: pointer; min-height: 44px; transition: background 0.2s, color 0.2s; } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px var(--primary-glow); } .btn-primary:hover { background: var(--primary-hover); box-shadow: 0 4px 16px var(--primary-glow); } .btn-ghost { background: transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--surface2); color: var(--text); } .btn-block { width: 100%; } .btn-lg { padding: 0.85rem 1.5rem; font-size: 1.1rem; min-height: 52px; } /* Flash messages */ .flash-messages { margin-bottom: 1rem; } .flash { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 0.5rem; } .flash-success { background: var(--success-dim); color: var(--success); border: 1px solid rgba(52, 211, 153, 0.3); } .flash-error { background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(248, 113, 113, 0.3); } .flash-warning { background: var(--warning-dim); color: var(--warning); border: 1px solid rgba(251, 191, 36, 0.3); } .flash-info { background: var(--primary-glow); color: var(--primary); border: 1px solid rgba(13, 148, 136, 0.4); } /* Page header */ .page-header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .page-header h1 { margin: 0; font-size: 1.75rem; } /* Login */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; } .login-card { background: var(--surface); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border); width: 100%; max-width: 380px; } .login-card h1 { margin: 0 0 0.25rem 0; font-size: 1.5rem; } .subtitle { color: var(--text-muted); margin: 0 0 1.5rem 0; font-size: 0.95rem; } .login-form label { display: block; margin-top: 1rem; margin-bottom: 0.35rem; font-size: 0.9rem; } .login-form input { width: 100%; padding: 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 1rem; } .login-form input:focus { outline: none; border-color: var(--primary); } .login-form .btn { margin-top: 1.5rem; } /* Forms */ .form-card { background: var(--surface); padding: 1.5rem; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); margin-bottom: 1.5rem; } .form-card label { display: block; margin-bottom: 0.35rem; font-size: 0.9rem; } .form-card input, .form-card select, .form-card textarea { width: 100%; padding: 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 1rem; } .form-card input:focus, .form-card textarea:focus, .form-card select:focus { outline: none; border-color: var(--primary); } .form-card input.input-calculated, .form-card input[readonly].input-calculated { background: var(--surface2); cursor: default; color: var(--text-muted); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { margin-bottom: 0.5rem; } .form-group.full { grid-column: 1 / -1; } .form-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .form-actions-center { justify-content: center; } .finish-day-form { margin-bottom: 1.5rem; } .finish-pending { color: var(--warning); padding: 0.75rem; margin-bottom: 1rem; background: var(--warning-dim); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: var(--radius); } .section-desc { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; } .bill-number-link { background: none; border: none; color: var(--primary); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; } .bill-number-link:hover { color: var(--primary-hover); } .invoice-service-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0.2s; } .invoice-service-modal.invoice-service-modal-visible { visibility: visible; opacity: 1; } .invoice-service-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); } .invoice-service-modal-box { position: relative; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border); max-width: 480px; width: 100%; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; } .invoice-service-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--surface2); } .invoice-service-modal-header h2 { margin: 0; font-size: 1.1rem; } .invoice-service-modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0.25rem; } .invoice-service-modal-close:hover { color: var(--text); } .invoice-service-modal-body { padding: 1.25rem; overflow-y: auto; } .invoice-service-modal-text { margin: 0; white-space: pre-wrap; word-break: break-word; } /* Week breakdown modal: wider so table fits on one line */ #week-breakdown-modal .invoice-service-modal-box { max-width: 580px; min-width: 420px; } #week-breakdown-modal .data-table td:first-child, #week-breakdown-modal .data-table th:first-child { white-space: nowrap; } /* Month breakdown modal: same as week, scrollable body for many days */ #month-breakdown-modal .invoice-service-modal-box { max-width: 580px; min-width: 420px; } #month-breakdown-modal .data-table td:first-child, #month-breakdown-modal .data-table th:first-child { white-space: nowrap; } .form-inline { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .form-inline .form-group { margin-bottom: 0; min-width: 140px; } .error { color: var(--danger); font-size: 0.85rem; display: block; margin-top: 0.25rem; } /* Filter form */ .filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 1.5rem; } .filter-form label { margin-bottom: 0.35rem; font-size: 0.9rem; } .filter-form input { padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); } /* Tables */ .table-wrap { overflow-x: auto; margin-bottom: 1rem; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .data-table th, .data-table td { padding: 0.75rem; text-align: right; border-bottom: 1px solid var(--border); } .data-table th { background: var(--surface2); color: var(--text-muted); font-weight: 600; } .data-table tbody tr:hover td { background: rgba(13, 148, 136, 0.08); } .summary-line { color: var(--text-muted); margin-top: 0.5rem; } /* Dashboard cards */ /* Admin dashboard: 3 period cards + details panel */ .dashboard-period-cards { margin-bottom: 1.5rem; } .dashboard-overview-cards { margin-bottom: 1.5rem; } .dashboard-overview-cards .details-panel-grid { max-width: 900px; margin-left: auto; margin-right: auto; } .period-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .period-card { display: block; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; text-align: center; font: inherit; color: var(--text); text-decoration: none; box-shadow: var(--shadow); } .period-card:hover { border-color: var(--primary); background: var(--surface2); box-shadow: 0 4px 20px var(--primary-glow); } .period-card-active, .period-card[aria-pressed="true"] { border-color: var(--primary); background: rgba(13, 148, 136, 0.1); box-shadow: 0 0 0 1px var(--primary), 0 4px 20px var(--primary-glow); } .period-card-title { display: block; font-weight: 600; font-size: 1.1rem; margin-bottom: 0.25rem; } .period-card-sub { display: block; font-size: 0.9rem; color: var(--text-muted); } .dashboard-details-panel { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); padding: 1.5rem; margin-bottom: 2rem; box-shadow: var(--shadow); } .details-panel-title { margin: 0 0 1rem 0; font-size: 1.15rem; color: var(--text-muted); } .details-panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; } .detail-item { background: var(--surface2); padding: 1rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--border); text-align: center; } .detail-item-link { display: block; text-decoration: none; color: inherit; text-align: center; } .detail-item-link:hover .detail-label, .detail-item-link:hover .detail-value { color: var(--primary); } .detail-item-clickable { cursor: pointer; transition: background 0.2s; } .detail-item-clickable:hover { background: var(--surface); } .detail-item-clickable:hover .detail-label, .detail-item-clickable:hover .detail-value { color: var(--primary); } .detail-label { display: block; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.35rem; } .detail-value { font-size: 1.35rem; font-weight: 600; } .detail-value-amount { color: var(--success); } .dashboard-picker-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .dashboard-picker-form label { font-size: 0.95rem; color: var(--text-muted); } .dashboard-picker-form input[type="date"], .dashboard-picker-form input[type="month"] { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 1rem; } .picker-week-end { color: var(--text-muted); font-size: 0.9rem; } .dashboard-day-bills-section { margin-top: 1.25rem; } .dashboard-day-bills-section--hidden { display: none; } .dashboard-day-bills-title { margin: 0 0 0.75rem 0; font-size: 1.05rem; } @media (max-width: 700px) { .period-cards-grid { grid-template-columns: 1fr; } } /* SPA views */ .app-view-hidden { display: none !important; } /* Full-screen placeholder while Firebase restores auth (no login flash on F5) */ .auth-boot-screen { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-muted); } .auth-boot-screen.app-view-hidden { display: none !important; } .auth-boot-inner { text-align: center; } .auth-boot-text { margin: 0; font-size: 1rem; letter-spacing: 0.02em; } .dashboard-cards { margin-bottom: 2rem; } .dashboard-cards h2 { margin: 0 0 1rem 0; font-size: 1.15rem; color: var(--text-muted); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; } .card { background: var(--surface); padding: 1.25rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); border: 1px solid var(--border); } .card-label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem; } .card-value { font-size: 1.35rem; font-weight: 600; } .card-value.positive { color: var(--success); } .card-value.negative { color: var(--danger); } /* Dashboard tables side by side */ .dashboard-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .dashboard-tables .half h3, .report-tables .half h3 { margin: 0 0 0.75rem 0; font-size: 1.1rem; } .report-summary { margin-bottom: 2rem; } .report-summary h2 { margin: 0 0 1rem 0; font-size: 1.15rem; } .report-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } /* Saved confirmation */ .saved-confirm { display: flex; justify-content: center; padding: 2rem 0; } .saved-card { background: var(--surface); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border); text-align: center; max-width: 420px; } .saved-card h2 { margin: 0 0 1rem 0; color: var(--success); } .saved-card p { margin: 0.5rem 0; } .saved-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } /* Add expense block */ .add-expense { margin-bottom: 2rem; } .add-expense h3 { margin: 0 0 1rem 0; font-size: 1.1rem; } .empty-state { color: var(--text-muted); padding: 2rem; text-align: center; } .note { color: var(--text-muted); font-size: 0.9rem; margin-top: 1rem; } /* Responsive - iPad and below */ @media (max-width: 900px) { .dashboard-tables, .report-tables { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .main-content { padding: 1rem; } .page-header { flex-direction: column; align-items: stretch; } .card-grid { grid-template-columns: 1fr; } .form-inline { flex-direction: column; align-items: stretch; } .form-inline .form-group { min-width: auto; } .data-table th, .data-table td { padding: 0.5rem; font-size: 0.9rem; } } /* إزالة أزرار زيادة/نقصان الأرقام (السبنر) من حقول الأرقام */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; }