| @font-face { |
| font-family: "Bahij TheSansArabic"; |
| src: url("Font/Bahij_TheSansArabic-SemiLight.ttf") format("truetype"); |
| font-weight: 400; |
| } |
|
|
| @font-face { |
| font-family: "Bahij TheSansArabic"; |
| src: url("Font/Bahij_TheSansArabic-SemiBold.ttf") format("truetype"); |
| font-weight: 700; |
| } |
|
|
| :root { |
| --ink: #213547; |
| --muted: #5c6e88; |
| --line: #d7e2ee; |
| --page: #f5f8fb; |
| --surface: #ffffff; |
| --primary: #4137a8; |
| --primary-alt: #1cade4; |
| --accent: #00b050; |
| --info: #27ced7; |
| --danger: #f5544a; |
| --warning: #ffc000; |
| --shadow: 0 1px 2px rgba(15, 35, 45, 0.06), 0 14px 36px rgba(15, 35, 45, 0.08); |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| html { min-height: 100%; background: var(--page); } |
|
|
| body { |
| min-height: 100vh; |
| margin: 0; |
| color: var(--ink); |
| font-family: "Bahij TheSansArabic", "Tajawal", Arial, sans-serif; |
| background: |
| linear-gradient(180deg, rgba(65, 55, 168, 0.07) 0, rgba(65, 55, 168, 0) 260px), |
| linear-gradient(180deg, #fbfcfd 0%, var(--page) 100%); |
| } |
|
|
| button, input, select { font: inherit; } |
| button { cursor: pointer; } |
| [hidden] { display: none !important; } |
| svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } |
| h1, h2, h3, p { overflow-wrap: anywhere; } |
|
|
| .login-view { |
| min-height: 100vh; |
| display: grid; |
| place-items: center; |
| padding: 24px; |
| } |
|
|
| .login-card, .hero-panel, .admin-stats, .controls-panel, .table-section { |
| background: var(--surface); |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| box-shadow: var(--shadow); |
| } |
|
|
| .login-card { |
| position: relative; |
| overflow: hidden; |
| width: min(100%, 450px); |
| padding: 34px; |
| } |
|
|
| .login-card::before { |
| content: ""; |
| position: absolute; |
| inset: 0 0 auto; |
| height: 5px; |
| background: linear-gradient(90deg, var(--accent), var(--primary)); |
| } |
|
|
| .brand-mark { |
| width: 56px; |
| height: 56px; |
| display: grid; |
| place-items: center; |
| margin-bottom: 18px; |
| color: #fff; |
| background: linear-gradient(145deg, var(--primary), var(--primary-alt)); |
| border-radius: 8px; |
| box-shadow: 0 10px 24px rgba(65, 55, 168, 0.2); |
| } |
|
|
| .brand-mark.small { |
| width: 44px; |
| height: 44px; |
| margin: 0; |
| } |
|
|
| .brand-mark svg { width: 32px; height: 32px; } |
|
|
| .eyebrow { |
| margin: 0 0 6px; |
| color: var(--accent); |
| font-size: 13px; |
| font-weight: 700; |
| } |
|
|
| .login-card h1, .topbar-brand h1, .hero-panel h2, .section-heading h2 { |
| margin: 0; |
| color: var(--primary-alt); |
| } |
|
|
| .login-card h1 { font-size: 28px; line-height: 1.35; } |
| .login-description, #heroDescription { color: var(--muted); line-height: 1.8; } |
|
|
| .login-card label, .field-group label { |
| display: block; |
| margin: 16px 0 8px; |
| color: #34495a; |
| font-weight: 700; |
| } |
|
|
| .password-field, .search-wrap, .select-wrap { position: relative; } |
|
|
| input, select { |
| width: 100%; |
| min-height: 50px; |
| color: var(--ink); |
| background: #fbfdfe; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| outline: none; |
| transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; |
| } |
|
|
| input:focus, select:focus { |
| background: #fff; |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.13); |
| } |
|
|
| .password-field input { padding: 0 14px 0 48px; } |
| .select-wrap select { padding: 0 14px 0 40px; appearance: none; } |
| .search-wrap input { padding: 0 42px 0 14px; } |
| .select-wrap > svg, .password-field .icon-button { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); } |
| .search-wrap > svg { position: absolute; right: 13px; top: 50%; color: var(--muted); transform: translateY(-50%); } |
|
|
| .icon-button { |
| width: 36px; |
| height: 36px; |
| display: grid; |
| place-items: center; |
| padding: 0; |
| color: var(--muted); |
| background: transparent; |
| border: 0; |
| border-radius: 8px; |
| } |
|
|
| .form-error { |
| min-height: 22px; |
| margin: 8px 2px; |
| color: var(--danger); |
| font-size: 13px; |
| font-weight: 700; |
| } |
|
|
| .primary-button, .secondary-button { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| min-height: 46px; |
| padding: 0 18px; |
| font-weight: 700; |
| border-radius: 8px; |
| transition: transform 0.18s, color 0.18s, background 0.18s, border-color 0.18s; |
| } |
|
|
| .primary-button { |
| width: 100%; |
| color: #fff; |
| background: var(--primary); |
| border: 0; |
| } |
|
|
| .primary-button:hover, .secondary-button:hover { background: var(--primary-alt); border-color: var(--primary-alt); color: #fff; } |
| .primary-button:disabled { cursor: wait; opacity: 0.65; } |
| .secondary-button { color: var(--primary-alt); background: #fff; border: 1px solid rgba(39, 206, 215, 0.34); } |
| .compact { min-height: 40px; padding: 0 14px; } |
|
|
| .topbar { |
| position: sticky; |
| top: 0; |
| z-index: 20; |
| min-height: 72px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| padding: 12px max(18px, calc((100% - 1280px) / 2)); |
| background: rgba(255, 255, 255, 0.96); |
| border-bottom: 1px solid rgba(92, 110, 136, 0.18); |
| backdrop-filter: blur(14px); |
| } |
|
|
| .topbar-brand, .topbar-actions { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .topbar-brand p { margin: 0; color: var(--accent); font-size: 12px; font-weight: 700; } |
| .topbar-brand h1 { font-size: 20px; } |
|
|
| .dashboard-shell { |
| width: min(1280px, calc(100% - 36px)); |
| margin: 18px auto 40px; |
| } |
|
|
| .hero-panel { |
| display: grid; |
| grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr); |
| gap: 18px; |
| padding: 24px; |
| border-bottom: 4px solid var(--primary); |
| } |
|
|
| .hero-panel h2 { font-size: 28px; line-height: 1.45; } |
|
|
| .quick-stats { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 10px; |
| } |
|
|
| .quick-stats div, .researcher-card { |
| padding: 14px; |
| background: #fbfdfe; |
| border: 1px solid #dbe8ed; |
| border-radius: 8px; |
| } |
|
|
| .quick-stats span, .researcher-card span { |
| display: block; |
| color: var(--muted); |
| font-size: 13px; |
| font-weight: 700; |
| } |
|
|
| .quick-stats strong { |
| display: block; |
| margin-top: 6px; |
| color: var(--primary); |
| font-size: 26px; |
| line-height: 1; |
| } |
|
|
| .progress-wrap { |
| grid-column: 1 / -1; |
| padding: 12px 14px; |
| background: #fbfdfe; |
| border: 1px solid #dbe8ed; |
| border-radius: 8px; |
| } |
|
|
| .progress-wrap span { |
| display: block; |
| margin-bottom: 8px; |
| color: var(--muted); |
| font-size: 13px; |
| font-weight: 700; |
| } |
|
|
| .progress-track { |
| height: 10px; |
| overflow: hidden; |
| background: #edf3f6; |
| border-radius: 99px; |
| } |
|
|
| .progress-track i { |
| display: block; |
| width: 0; |
| height: 100%; |
| background: linear-gradient(90deg, var(--accent), var(--primary-alt)); |
| transition: width 0.25s ease; |
| } |
|
|
| .admin-stats, .controls-panel, .table-section { margin-top: 14px; padding: 18px; } |
|
|
| .section-heading { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 16px; |
| margin-bottom: 14px; |
| } |
|
|
| .export-actions { display: flex; flex-wrap: wrap; gap: 8px; } |
|
|
| .researcher-stats-grid, |
| .leader-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| gap: 10px; |
| } |
|
|
| .leader-grid { |
| margin-top: 10px; |
| } |
|
|
| .researcher-card h3, |
| .leader-card strong { |
| margin: 0 0 10px; |
| color: var(--primary-alt); |
| font-size: 17px; |
| } |
|
|
| .leader-card { |
| padding: 14px; |
| background: rgba(39, 206, 215, 0.08); |
| border: 1px solid rgba(39, 206, 215, 0.28); |
| border-radius: 8px; |
| } |
|
|
| .leader-card span { |
| display: block; |
| margin-bottom: 8px; |
| color: var(--muted); |
| font-size: 13px; |
| font-weight: 700; |
| } |
|
|
| .leader-card strong { |
| display: block; |
| margin-bottom: 0; |
| } |
|
|
| .researcher-card .bar { |
| height: 9px; |
| overflow: hidden; |
| margin-top: 10px; |
| background: #edf3f6; |
| border-radius: 99px; |
| } |
|
|
| .researcher-card .bar i { |
| display: block; |
| height: 100%; |
| background: linear-gradient(90deg, var(--accent), var(--primary-alt)); |
| } |
|
|
| .filters-grid { |
| display: grid; |
| grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(160px, 0.8fr)); |
| gap: 14px; |
| align-items: end; |
| } |
|
|
| .field-group label { margin-top: 0; } |
|
|
| .quick-filter-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-top: 14px; |
| } |
|
|
| .quick-filter { |
| min-height: 40px; |
| padding: 0 16px; |
| color: var(--primary-alt); |
| background: #fff; |
| border: 1px solid rgba(39, 206, 215, 0.34); |
| border-radius: 8px; |
| font-weight: 700; |
| } |
|
|
| .quick-filter.active { |
| color: #fff; |
| background: var(--primary); |
| border-color: var(--primary); |
| } |
|
|
| .save-all-button { |
| width: auto; |
| min-width: 150px; |
| margin-inline-start: auto; |
| } |
|
|
| .results-meta { margin: 0 0 4px; color: var(--accent); font-size: 14px; font-weight: 700; } |
| .compact-heading { margin-bottom: 10px; } |
|
|
| .table-wrap { |
| overflow: auto; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| } |
|
|
| table { |
| width: 100%; |
| min-width: 1180px; |
| border-collapse: collapse; |
| background: #fff; |
| } |
|
|
| th, td { |
| padding: 10px 12px; |
| border-bottom: 1px solid #edf2f5; |
| text-align: right; |
| vertical-align: top; |
| } |
|
|
| th { |
| position: sticky; |
| top: 0; |
| z-index: 2; |
| color: #fff; |
| background: var(--primary); |
| font-size: 13px; |
| white-space: nowrap; |
| } |
|
|
| td { color: #253b4c; font-size: 14px; line-height: 1.55; } |
| tbody tr:hover { background: rgba(39, 206, 215, 0.06); } |
| tbody tr.is-dirty { background: rgba(255, 192, 0, 0.08); } |
|
|
| .ltr-value { direction: ltr; text-align: right; } |
| .row-actions { display: flex; flex-wrap: wrap; gap: 7px; min-width: 170px; } |
| .cell-input { min-width: 150px; min-height: 40px; padding: 0 10px; } |
| .status-badge { |
| display: inline-flex; |
| align-items: center; |
| min-height: 28px; |
| padding: 0 10px; |
| border-radius: 8px; |
| font-size: 12px; |
| font-weight: 700; |
| } |
| .status-entered { color: #08713a; background: rgba(0, 176, 80, 0.12); border: 1px solid rgba(0, 176, 80, 0.24); } |
| .status-missing { color: #7c5d00; background: rgba(255, 192, 0, 0.18); border: 1px solid rgba(255, 192, 0, 0.35); } |
| .map-link { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| color: var(--primary-alt); |
| font-weight: 700; |
| text-decoration: none; |
| } |
| .save-button { min-height: 38px; padding: 0 12px; } |
|
|
| .cards-grid { |
| display: none; |
| gap: 12px; |
| } |
|
|
| .facility-card { |
| padding: 14px; |
| background: #fff; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| box-shadow: var(--shadow); |
| } |
|
|
| .facility-card.incomplete { |
| background: #fffdf4; |
| border-color: rgba(255, 192, 0, 0.45); |
| } |
|
|
| .facility-card.complete { |
| background: #f4fff8; |
| border-color: rgba(0, 176, 80, 0.28); |
| } |
|
|
| .facility-card.is-dirty { |
| box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.22), var(--shadow); |
| } |
|
|
| .facility-card.is-saving, |
| tbody tr.is-saving { |
| opacity: 0.78; |
| } |
|
|
| .facility-card.is-saving::after { |
| content: "جاري الحفظ..."; |
| display: block; |
| margin-top: 10px; |
| color: var(--primary-alt); |
| font-size: 12px; |
| font-weight: 700; |
| text-align: center; |
| } |
|
|
| .facility-card-head { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 10px; |
| margin-bottom: 12px; |
| } |
|
|
| .facility-card-label { |
| display: block; |
| margin-bottom: 5px; |
| color: var(--muted); |
| direction: rtl; |
| font-size: 12px; |
| font-weight: 700; |
| } |
|
|
| .facility-card h3 { |
| margin: 0; |
| color: var(--primary-alt); |
| font-size: 18px; |
| line-height: 1.55; |
| } |
|
|
| .card-info-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 8px; |
| margin-bottom: 12px; |
| } |
|
|
| .card-info-grid div { |
| min-width: 0; |
| padding: 9px 10px; |
| background: rgba(255, 255, 255, 0.72); |
| border: 1px solid rgba(215, 226, 238, 0.9); |
| border-radius: 8px; |
| } |
|
|
| .card-info-grid span, |
| .card-fields label { |
| display: block; |
| margin-bottom: 5px; |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 700; |
| } |
|
|
| .card-info-grid strong { |
| display: block; |
| color: var(--ink); |
| font-size: 14px; |
| line-height: 1.45; |
| } |
|
|
| .card-actions { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 8px; |
| margin-bottom: 12px; |
| } |
|
|
| .facility-card .map-link, |
| .card-action-button { |
| min-height: 42px; |
| justify-content: center; |
| padding: 0 10px; |
| color: var(--primary-alt); |
| background: #fff; |
| border: 1px solid rgba(39, 206, 215, 0.34); |
| border-radius: 8px; |
| } |
|
|
| .facility-card .map-link:hover, |
| .card-action-button:hover { |
| color: #fff; |
| background: var(--primary-alt); |
| border-color: var(--primary-alt); |
| } |
|
|
| .card-fields { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 10px; |
| } |
|
|
| .card-fields label { |
| margin: 0; |
| } |
|
|
| .card-fields .cell-input { |
| min-width: 0; |
| width: 100%; |
| min-height: 46px; |
| } |
|
|
| .card-save-button { |
| margin-top: 12px; |
| } |
|
|
| .empty-state { |
| padding: 34px 20px; |
| text-align: center; |
| } |
|
|
| .empty-state h3 { margin: 0 0 8px; color: var(--primary-alt); } |
| .empty-state p { margin: 0; color: var(--muted); } |
|
|
| .toast { |
| position: fixed; |
| z-index: 30; |
| right: 50%; |
| bottom: 20px; |
| padding: 12px 16px; |
| color: #fff; |
| font-weight: 700; |
| background: var(--primary-alt); |
| border-radius: 8px; |
| box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18); |
| opacity: 0; |
| transform: translate(50%, 18px); |
| transition: opacity 0.22s, transform 0.22s; |
| pointer-events: none; |
| } |
|
|
| .toast.show { opacity: 1; transform: translate(50%, 0); } |
|
|
| @media (max-width: 980px) { |
| .hero-panel, .filters-grid { grid-template-columns: 1fr; } |
| .section-heading { align-items: stretch; flex-direction: column; } |
| .export-actions .secondary-button { width: 100%; } |
| } |
|
|
| @media (max-width: 640px) { |
| .login-view { padding: 18px; } |
| .login-card { padding: 28px 20px 22px; } |
| .topbar { align-items: stretch; flex-direction: column; padding: 10px 12px; } |
| .topbar-actions { display: grid; grid-template-columns: 1fr 1fr; } |
| .dashboard-shell { width: min(100% - 20px, 1180px); } |
| .hero-panel, .admin-stats, .controls-panel, .table-section { padding: 14px; } |
| .quick-stats { grid-template-columns: 1fr 1fr; } |
| .hero-panel h2 { font-size: 22px; } |
| .quick-filter-row { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
| .save-all-button { |
| grid-column: 1 / -1; |
| width: 100%; |
| margin-inline-start: 0; |
| } |
| .table-wrap { |
| display: none; |
| } |
| .cards-grid { |
| display: grid; |
| } |
| table { |
| min-width: 0; |
| } |
| .card-actions { |
| grid-template-columns: 1fr; |
| } |
| .facility-card-head { |
| flex-direction: column; |
| } |
| .facility-card-head .status-badge { |
| align-self: flex-start; |
| } |
| .toast { right: 12px; left: 12px; text-align: center; transform: translateY(18px); } |
| .toast.show { transform: translateY(0); } |
| } |
|
|
| @media (max-width: 420px) { |
| .card-info-grid, |
| .quick-stats { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
