| @font-face { |
| font-family: "TheSansArabic"; |
| src: url("Font/Bahij_TheSansArabic-SemiLight.ttf") format("truetype"); |
| font-weight: 400 600; |
| font-display: swap; |
| } |
|
|
| @font-face { |
| font-family: "TheSansArabic"; |
| src: url("Font/Bahij_TheSansArabic-SemiBold.ttf") format("truetype"); |
| font-weight: 700 900; |
| font-display: swap; |
| } |
|
|
| :root { |
| --primary: #4137a8; |
| --primary-2: #1cade4; |
| --green: #00b050; |
| --mint: #42ba97; |
| --cyan: #27ced7; |
| --purple: #7030a0; |
| --yellow: #ffc000; |
| --red: #f5544a; |
| --slate: #5c6e88; |
| --ink: #183348; |
| --muted: #687b8d; |
| --page: #f4f7f9; |
| --line: #dce6eb; |
| --white: #fff; |
| --shadow: 0 12px 34px rgba(39, 58, 74, 0.09); |
| --lift: 0 18px 42px rgba(39, 58, 74, 0.14); |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| min-width: 320px; |
| margin: 0; |
| color: var(--ink); |
| background: |
| linear-gradient(180deg, rgba(65, 55, 168, 0.08), transparent 260px), |
| var(--page); |
| font-family: "TheSansArabic", "Tahoma", sans-serif; |
| } |
|
|
| button, |
| input, |
| select { |
| font: inherit; |
| } |
|
|
| button, |
| a { |
| -webkit-tap-highlight-color: transparent; |
| } |
|
|
| button { |
| cursor: pointer; |
| } |
|
|
| svg { |
| width: 21px; |
| height: 21px; |
| fill: none; |
| stroke: currentColor; |
| stroke-width: 1.8; |
| stroke-linecap: round; |
| stroke-linejoin: round; |
| } |
|
|
| [hidden] { |
| display: none !important; |
| } |
|
|
| .center-view { |
| min-height: calc(100vh - 48px); |
| display: grid; |
| place-items: center; |
| padding: 34px 18px; |
| } |
|
|
| .access-panel, |
| .researcher-panel { |
| width: min(100%, 520px); |
| padding: 34px; |
| background: var(--white); |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| box-shadow: var(--shadow); |
| } |
|
|
| .access-panel { |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .access-panel::before { |
| content: ""; |
| position: absolute; |
| inset: 0 0 auto; |
| height: 5px; |
| background: linear-gradient(90deg, var(--green), var(--primary), var(--primary-2)); |
| } |
|
|
| .brand-mark { |
| width: 62px; |
| height: 62px; |
| display: grid; |
| place-items: center; |
| color: white; |
| background: linear-gradient(145deg, var(--primary), var(--primary-2)); |
| border-radius: 8px; |
| box-shadow: 0 10px 24px rgba(65, 55, 168, 0.2); |
| } |
|
|
| .brand-mark svg { |
| width: 32px; |
| height: 32px; |
| } |
|
|
| .brand-mark.small { |
| width: 44px; |
| height: 44px; |
| } |
|
|
| .brand-mark.small svg { |
| width: 25px; |
| height: 25px; |
| } |
|
|
| .eyebrow { |
| margin: 20px 0 5px; |
| color: var(--green); |
| font-size: 14px; |
| font-weight: 800; |
| } |
|
|
| h1, |
| h2, |
| h3, |
| p { |
| margin-top: 0; |
| } |
|
|
| .access-panel h1, |
| .panel-heading h1 { |
| margin-bottom: 10px; |
| font-size: 30px; |
| line-height: 1.45; |
| } |
|
|
| .lead, |
| .panel-heading p { |
| color: var(--muted); |
| line-height: 1.8; |
| } |
|
|
| .access-panel label, |
| .field-group > span, |
| .field-label { |
| display: block; |
| margin: 20px 0 8px; |
| color: #344d60; |
| font-weight: 800; |
| } |
|
|
| .input-shell, |
| .search-shell, |
| .select-shell { |
| position: relative; |
| } |
|
|
| .input-shell input, |
| .search-shell input, |
| .select-shell select { |
| width: 100%; |
| min-height: 52px; |
| padding: 0 16px; |
| color: var(--ink); |
| background: #fff; |
| border: 1px solid #cfdee5; |
| border-radius: 8px; |
| outline: none; |
| transition: border-color 0.18s, box-shadow 0.18s; |
| } |
|
|
| .input-shell input { |
| padding-left: 52px; |
| } |
|
|
| .search-shell input { |
| padding-right: 46px; |
| } |
|
|
| .select-shell select { |
| padding-left: 45px; |
| appearance: none; |
| } |
|
|
| .input-shell input:focus, |
| .search-shell input:focus, |
| .select-shell select:focus { |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.12); |
| } |
|
|
| .input-shell .icon-button, |
| .search-shell > svg, |
| .select-shell > svg { |
| position: absolute; |
| top: 50%; |
| transform: translateY(-50%); |
| } |
|
|
| .input-shell .icon-button { |
| left: 5px; |
| } |
|
|
| .search-shell > svg { |
| right: 15px; |
| color: var(--slate); |
| pointer-events: none; |
| } |
|
|
| .select-shell > svg { |
| left: 15px; |
| color: var(--slate); |
| pointer-events: none; |
| } |
|
|
| .icon-button { |
| width: 42px; |
| height: 42px; |
| display: grid; |
| place-items: center; |
| color: var(--slate); |
| background: transparent; |
| border: 0; |
| border-radius: 8px; |
| } |
|
|
| .icon-button:hover { |
| color: var(--primary); |
| background: rgba(65, 55, 168, 0.07); |
| } |
|
|
| .primary-button, |
| .secondary-button, |
| .clear-button, |
| .mini-action { |
| min-height: 44px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| padding: 0 16px; |
| border: 1px solid transparent; |
| border-radius: 8px; |
| font-weight: 800; |
| text-decoration: none; |
| transition: transform 0.18s, box-shadow 0.18s, color 0.18s, background 0.18s, border-color 0.18s; |
| } |
|
|
| .primary-button { |
| width: 100%; |
| margin-top: 12px; |
| color: white; |
| background: linear-gradient(145deg, var(--primary), var(--primary-2)); |
| box-shadow: 0 10px 22px rgba(65, 55, 168, 0.18); |
| } |
|
|
| .primary-button:hover, |
| .tool-action:hover, |
| .researcher-choice:hover { |
| transform: translateY(-2px); |
| } |
|
|
| .form-error { |
| min-height: 22px; |
| margin: 8px 0 0; |
| color: var(--red); |
| font-size: 14px; |
| } |
|
|
| .researcher-panel { |
| width: min(100%, 920px); |
| } |
|
|
| .panel-heading { |
| text-align: center; |
| } |
|
|
| .panel-heading .eyebrow { |
| margin-top: 0; |
| } |
|
|
| .researcher-panel > .search-shell { |
| max-width: 520px; |
| margin: 24px auto; |
| } |
|
|
| .researcher-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 10px; |
| max-height: 58vh; |
| overflow: auto; |
| padding: 2px; |
| } |
|
|
| .researcher-choice { |
| min-height: 70px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| padding: 12px 15px; |
| color: var(--ink); |
| text-align: right; |
| background: #fbfdfe; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; |
| } |
|
|
| .researcher-choice:hover { |
| border-color: var(--cyan); |
| box-shadow: 0 8px 18px rgba(39, 206, 215, 0.11); |
| } |
|
|
| .researcher-choice span { |
| min-width: 0; |
| } |
|
|
| .researcher-choice strong, |
| .researcher-choice small { |
| display: block; |
| } |
|
|
| .researcher-choice strong { |
| line-height: 1.55; |
| } |
|
|
| .researcher-choice small { |
| margin-top: 3px; |
| color: var(--green); |
| } |
|
|
| .researcher-choice > svg { |
| flex: 0 0 auto; |
| color: var(--primary); |
| } |
|
|
| .topbar { |
| position: sticky; |
| top: 0; |
| z-index: 30; |
| min-height: 72px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 20px; |
| padding: 12px max(24px, calc((100% - 1280px) / 2)); |
| background: rgba(255, 255, 255, 0.94); |
| border-bottom: 1px solid rgba(92, 110, 136, 0.17); |
| backdrop-filter: blur(14px); |
| } |
|
|
| .topbar-brand, |
| .topbar-actions { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .topbar-brand p { |
| margin: 0 0 1px; |
| color: var(--green); |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .topbar-brand h1 { |
| margin: 0; |
| font-size: 17px; |
| line-height: 1.5; |
| } |
|
|
| .secondary-button { |
| color: var(--primary); |
| background: #fff; |
| border-color: rgba(65, 55, 168, 0.25); |
| } |
|
|
| .secondary-button:hover, |
| .mini-action:hover { |
| color: white; |
| background: var(--primary); |
| border-color: var(--primary); |
| } |
|
|
| .topbar-icon { |
| border: 1px solid var(--line); |
| } |
|
|
| .dashboard-shell { |
| width: min(1280px, calc(100% - 32px)); |
| margin: 22px auto 45px; |
| } |
|
|
| .workspace-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 28px; |
| padding: 22px 24px; |
| background: white; |
| border: 1px solid var(--line); |
| border-right: 5px solid var(--primary); |
| border-radius: 8px; |
| box-shadow: var(--shadow); |
| } |
|
|
| .workspace-header .eyebrow { |
| margin-top: 0; |
| } |
|
|
| .workspace-header h2 { |
| max-width: 650px; |
| margin-bottom: 0; |
| font-size: 25px; |
| } |
|
|
| .summary-stats { |
| display: grid; |
| grid-template-columns: repeat(5, minmax(90px, 1fr)); |
| gap: 8px; |
| } |
|
|
| .stat-item { |
| min-width: 100px; |
| padding: 10px; |
| text-align: center; |
| background: #f8fafb; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| } |
|
|
| .stat-item strong, |
| .stat-item span { |
| display: block; |
| } |
|
|
| .stat-item strong { |
| color: var(--primary); |
| font-size: 23px; |
| } |
|
|
| .stat-item span { |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.5; |
| } |
|
|
| .stat-item.madon strong { |
| color: var(--green); |
| } |
|
|
| .stat-item.base strong { |
| color: var(--primary-2); |
| } |
|
|
| .stat-item.info strong { |
| color: var(--purple); |
| } |
|
|
| .stat-item.missing strong { |
| color: var(--slate); |
| } |
|
|
| .quick-actions { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 12px; |
| margin-top: 14px; |
| } |
|
|
| .contacts-section { |
| margin-top: 14px; |
| padding: 20px; |
| background: white; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| box-shadow: var(--shadow); |
| } |
|
|
| .section-heading { |
| display: flex; |
| align-items: end; |
| justify-content: space-between; |
| gap: 24px; |
| margin-bottom: 14px; |
| } |
|
|
| .section-heading .eyebrow { |
| margin-top: 0; |
| } |
|
|
| .section-heading h2 { |
| margin-bottom: 0; |
| font-size: 21px; |
| } |
|
|
| .contacts-heading-actions { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
|
|
| .contacts-heading-actions > p { |
| max-width: 470px; |
| margin-bottom: 0; |
| color: var(--muted); |
| font-size: 13px; |
| line-height: 1.7; |
| } |
|
|
| .contacts-toggle { |
| display: none; |
| } |
|
|
| .representatives-directory { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); |
| gap: 10px; |
| } |
|
|
| .representative-card { |
| min-width: 0; |
| padding: 12px; |
| background: #fbfdfe; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; |
| } |
|
|
| .representative-card.recommended { |
| background: rgba(0, 176, 80, 0.06); |
| border-color: var(--green); |
| box-shadow: 0 8px 20px rgba(0, 176, 80, 0.11); |
| transform: translateY(-2px); |
| } |
|
|
| .representative-card.recommended::before { |
| content: "ممثل المدينة المختارة"; |
| display: block; |
| margin-bottom: 8px; |
| color: var(--green); |
| font-size: 11px; |
| font-weight: 900; |
| } |
|
|
| .representative-card-header { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .representative-card-header > div { |
| min-width: 0; |
| } |
|
|
| .representative-card-header small, |
| .representative-card-header strong, |
| .representative-card-header div > span { |
| display: block; |
| } |
|
|
| .representative-card-header small { |
| color: var(--muted); |
| } |
|
|
| .representative-card-header strong { |
| margin: 2px 0; |
| } |
|
|
| .representative-card-header div > span { |
| direction: ltr; |
| color: var(--primary); |
| text-align: right; |
| font-weight: 900; |
| } |
|
|
| .representative-card-actions { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 6px; |
| margin-top: 11px; |
| } |
|
|
| .representative-card-actions .mini-action { |
| min-width: 0; |
| min-height: 38px; |
| padding: 0 8px; |
| font-size: 12px; |
| } |
|
|
| .tool-action { |
| min-height: 88px; |
| display: flex; |
| align-items: center; |
| gap: 13px; |
| padding: 14px 16px; |
| color: var(--ink); |
| text-align: right; |
| background: white; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| box-shadow: 0 8px 24px rgba(39, 58, 74, 0.06); |
| text-decoration: none; |
| transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; |
| } |
|
|
| button.tool-action { |
| width: 100%; |
| } |
|
|
| .tool-action:hover { |
| border-color: var(--cyan); |
| box-shadow: var(--lift); |
| } |
|
|
| .tool-icon { |
| width: 48px; |
| height: 48px; |
| flex: 0 0 auto; |
| display: grid; |
| place-items: center; |
| color: white; |
| background: var(--primary); |
| border-radius: 8px; |
| } |
|
|
| .form-action .tool-icon { |
| background: var(--green); |
| } |
|
|
| .share-action .tool-icon { |
| background: var(--mint); |
| } |
|
|
| .tool-action > span:nth-child(2) { |
| min-width: 0; |
| flex: 1; |
| } |
|
|
| .tool-action strong, |
| .tool-action small { |
| display: block; |
| } |
|
|
| .tool-action small { |
| margin-top: 3px; |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .action-arrow { |
| flex: 0 0 auto; |
| color: var(--slate); |
| } |
|
|
| .controls-panel { |
| margin-top: 14px; |
| padding: 20px; |
| background: white; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| box-shadow: var(--shadow); |
| } |
|
|
| .city-section .field-label { |
| margin-top: 0; |
| } |
|
|
| .city-buttons { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .city-choice { |
| min-height: 44px; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 7px 12px; |
| color: var(--ink); |
| background: #f9fbfc; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| font-weight: 800; |
| } |
|
|
| .city-choice strong { |
| min-width: 29px; |
| padding: 2px 7px; |
| color: var(--green); |
| text-align: center; |
| background: rgba(0, 176, 80, 0.1); |
| border-radius: 6px; |
| } |
|
|
| .city-choice:hover { |
| border-color: var(--cyan); |
| } |
|
|
| .city-choice.active { |
| color: white; |
| background: linear-gradient(145deg, var(--primary), var(--primary-2)); |
| border-color: transparent; |
| } |
|
|
| .city-choice.active strong { |
| color: var(--primary); |
| background: white; |
| } |
|
|
| .filters-grid { |
| display: grid; |
| grid-template-columns: minmax(280px, 1.5fr) minmax(180px, 1fr) minmax(180px, 1fr) auto; |
| align-items: end; |
| gap: 10px; |
| } |
|
|
| .field-group > span { |
| margin-top: 16px; |
| } |
|
|
| .clear-button { |
| color: var(--slate); |
| background: #fff; |
| border-color: var(--line); |
| } |
|
|
| .clear-button:hover { |
| color: white; |
| background: var(--red); |
| border-color: var(--red); |
| } |
|
|
| .representative-icon { |
| width: 44px; |
| height: 44px; |
| display: grid; |
| place-items: center; |
| color: white; |
| background: var(--cyan); |
| border-radius: 8px; |
| } |
|
|
| .mini-action { |
| color: var(--primary); |
| background: white; |
| border-color: rgba(65, 55, 168, 0.22); |
| } |
|
|
| .results-section { |
| margin-top: 24px; |
| } |
|
|
| .results-header { |
| display: flex; |
| align-items: end; |
| justify-content: space-between; |
| margin-bottom: 12px; |
| } |
|
|
| .results-header h2 { |
| margin: 0; |
| font-size: 23px; |
| } |
|
|
| .results-meta { |
| margin-bottom: 3px; |
| color: var(--green); |
| font-size: 14px; |
| font-weight: 800; |
| } |
|
|
| .samples-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); |
| gap: 13px; |
| } |
|
|
| .sample-card { |
| min-width: 0; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| background: white; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| box-shadow: 0 8px 24px rgba(39, 58, 74, 0.07); |
| transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; |
| } |
|
|
| .sample-card:hover { |
| transform: translateY(-2px); |
| border-color: #c5d8e1; |
| box-shadow: var(--lift); |
| } |
|
|
| .sample-card.selected { |
| border-color: var(--primary); |
| box-shadow: 0 0 0 2px rgba(65, 55, 168, 0.1), var(--lift); |
| } |
|
|
| .sample-card.completed { |
| background: #eefcf2; |
| border: 2px solid #22c55e; |
| box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12), var(--lift); |
| } |
|
|
| .sample-card.completed .card-header { |
| background: linear-gradient(180deg, #e8fff1, #ffffff); |
| border-right-color: #22c55e; |
| } |
|
|
| .sample-card.completed::before { |
| content: "✔ تم التوثيق"; |
| display: inline-block; |
| width: fit-content; |
| margin: 10px 12px 0; |
| padding: 5px 12px; |
| color: #ffffff; |
| background: #22c55e; |
| border-radius: 999px; |
| font-size: 12px; |
| font-weight: 900; |
| } |
|
|
| .sample-selector { |
| width: fit-content; |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| margin-bottom: 7px; |
| color: var(--slate); |
| cursor: pointer; |
| font-size: 12px; |
| font-weight: 900; |
| } |
|
|
| .sample-selector input { |
| position: absolute; |
| opacity: 0; |
| pointer-events: none; |
| } |
|
|
| .sample-selector > span:first-of-type { |
| width: 25px; |
| height: 25px; |
| display: grid; |
| place-items: center; |
| color: transparent; |
| background: white; |
| border: 1px solid #bfd0d9; |
| border-radius: 6px; |
| } |
|
|
| .sample-selector > span:first-of-type svg { |
| width: 17px; |
| height: 17px; |
| } |
|
|
| .sample-selector input:checked + span { |
| color: white; |
| background: var(--primary); |
| border-color: var(--primary); |
| } |
|
|
| .card-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 12px; |
| padding: 16px; |
| background: linear-gradient(180deg, #f9fcfd, white); |
| border-right: 4px solid var(--green); |
| border-bottom: 1px solid #e7eef2; |
| } |
|
|
| .card-header > div { |
| min-width: 0; |
| } |
|
|
| .card-badges { |
| flex: 0 0 auto; |
| display: grid; |
| justify-items: end; |
| gap: 6px; |
| } |
|
|
| .sample-index { |
| display: block; |
| margin-bottom: 2px; |
| color: var(--green); |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .card-header h3 { |
| margin: 0; |
| font-size: 17px; |
| line-height: 1.65; |
| } |
|
|
| .status-badge { |
| max-width: 135px; |
| padding: 5px 9px; |
| color: var(--slate); |
| text-align: center; |
| background: rgba(255, 192, 0, 0.13); |
| border: 1px solid rgba(255, 192, 0, 0.55); |
| border-radius: 7px; |
| font-size: 12px; |
| font-weight: 800; |
| line-height: 1.5; |
| } |
|
|
| .location-badge { |
| display: inline-flex; |
| align-items: center; |
| min-height: 26px; |
| padding: 3px 8px; |
| border: 1px solid transparent; |
| border-radius: 7px; |
| font-size: 11px; |
| font-weight: 900; |
| } |
|
|
| .location-badge-madon { |
| color: #087b3c; |
| background: rgba(0, 176, 80, 0.09); |
| border-color: rgba(0, 176, 80, 0.3); |
| } |
|
|
| .location-badge-base { |
| color: #087ca1; |
| background: rgba(28, 173, 228, 0.09); |
| border-color: rgba(28, 173, 228, 0.3); |
| } |
|
|
| .location-badge-statement { |
| color: var(--purple); |
| background: rgba(112, 48, 160, 0.07); |
| border-color: rgba(112, 48, 160, 0.25); |
| } |
|
|
| .location-badge-none { |
| color: var(--slate); |
| background: rgba(92, 110, 136, 0.07); |
| border-color: rgba(92, 110, 136, 0.22); |
| } |
|
|
| .card-details { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| padding: 2px 16px 12px; |
| } |
|
|
| .detail-item { |
| min-width: 0; |
| padding: 12px 0; |
| border-bottom: 1px solid #e8eff2; |
| } |
|
|
| .detail-item:nth-child(odd):not(.wide) { |
| padding-left: 12px; |
| border-left: 1px solid #e8eff2; |
| } |
|
|
| .detail-item:nth-child(even):not(.wide) { |
| padding-right: 12px; |
| } |
|
|
| .detail-item.wide, |
| .location-block { |
| grid-column: 1 / -1; |
| } |
|
|
| .detail-label, |
| .detail-value { |
| display: block; |
| } |
|
|
| .detail-label { |
| margin-bottom: 4px; |
| color: var(--muted); |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .detail-value { |
| overflow-wrap: anywhere; |
| font-weight: 800; |
| line-height: 1.65; |
| } |
|
|
| .ltr-value .detail-value { |
| direction: ltr; |
| text-align: right; |
| } |
|
|
| .location-block { |
| margin-top: 12px; |
| padding: 12px; |
| background: rgba(0, 176, 80, 0.07); |
| border: 1px solid rgba(0, 176, 80, 0.28); |
| border-radius: 8px; |
| } |
|
|
| .location-base { |
| background: rgba(28, 173, 228, 0.07); |
| border-color: rgba(28, 173, 228, 0.28); |
| } |
|
|
| .location-statement { |
| background: rgba(39, 206, 215, 0.08); |
| border-color: rgba(39, 206, 215, 0.35); |
| } |
|
|
| .location-heading { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| margin-bottom: 9px; |
| } |
|
|
| .location-heading span { |
| color: var(--green); |
| font-size: 13px; |
| font-weight: 900; |
| } |
|
|
| .location-base .location-heading span { |
| color: var(--primary-2); |
| } |
|
|
| .location-heading small { |
| color: var(--muted); |
| } |
|
|
| .location-block > .mini-action { |
| width: 100%; |
| } |
|
|
| .madon-info { |
| grid-column: 1 / -1; |
| display: grid; |
| gap: 8px; |
| margin-top: 10px; |
| } |
|
|
| .madon-info-item { |
| padding: 12px; |
| border-radius: 8px; |
| } |
|
|
| .madon-info-item span { |
| display: block; |
| margin-bottom: 4px; |
| font-size: 12px; |
| font-weight: 900; |
| } |
|
|
| .madon-info-item p { |
| margin: 0; |
| line-height: 1.7; |
| } |
|
|
| .madon-report { |
| background: rgba(39, 206, 215, 0.09); |
| border: 1px solid rgba(39, 206, 215, 0.36); |
| } |
|
|
| .madon-report span { |
| color: #078e98; |
| } |
|
|
| .madon-note { |
| background: rgba(112, 48, 160, 0.07); |
| border: 1px solid rgba(112, 48, 160, 0.25); |
| } |
|
|
| .madon-note span { |
| color: var(--purple); |
| } |
|
|
| .card-actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-top: auto; |
| padding: 12px 16px 16px; |
| } |
|
|
| .card-actions .mini-action { |
| flex: 1 1 145px; |
| } |
|
|
| .load-more-wrap { |
| display: grid; |
| place-items: center; |
| gap: 5px; |
| margin-top: 18px; |
| } |
|
|
| .load-more-wrap p { |
| margin: 0; |
| color: var(--muted); |
| font-size: 13px; |
| } |
|
|
| .empty-state { |
| padding: 38px 18px; |
| text-align: center; |
| background: white; |
| border: 1px dashed #cbdbe3; |
| border-radius: 8px; |
| } |
|
|
| .empty-state h3 { |
| margin-bottom: 6px; |
| } |
|
|
| .empty-state p { |
| margin-bottom: 0; |
| color: var(--muted); |
| } |
|
|
| footer { |
| min-height: 48px; |
| display: grid; |
| place-items: center; |
| color: var(--slate); |
| font-size: 13px; |
| } |
|
|
| .selection-bar { |
| position: fixed; |
| right: 50%; |
| bottom: 16px; |
| z-index: 80; |
| width: min(720px, calc(100% - 30px)); |
| min-height: 70px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 18px; |
| padding: 11px 14px; |
| color: white; |
| background: #243b53; |
| border: 1px solid rgba(255, 255, 255, 0.14); |
| border-radius: 8px; |
| box-shadow: 0 20px 50px rgba(24, 51, 72, 0.28); |
| transform: translateX(50%); |
| } |
|
|
| .selection-summary strong, |
| .selection-summary span { |
| display: block; |
| } |
|
|
| .selection-summary span { |
| margin-top: 2px; |
| color: #d7e2e9; |
| font-size: 12px; |
| } |
|
|
| .selection-actions { |
| display: flex; |
| gap: 7px; |
| } |
|
|
| .selection-clear, |
| .selection-send { |
| min-height: 44px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 7px; |
| padding: 0 14px; |
| border-radius: 8px; |
| font-weight: 900; |
| } |
|
|
| .selection-clear { |
| color: white; |
| background: transparent; |
| border: 1px solid rgba(255, 255, 255, 0.38); |
| } |
|
|
| .selection-send { |
| color: white; |
| background: var(--green); |
| border: 1px solid var(--green); |
| } |
|
|
| .has-selection footer { |
| padding-bottom: 90px; |
| } |
|
|
| .dialog-open { |
| overflow: hidden; |
| } |
|
|
| .dialog-backdrop { |
| position: fixed; |
| inset: 0; |
| z-index: 100; |
| display: grid; |
| place-items: center; |
| padding: 18px; |
| background: rgba(24, 51, 72, 0.54); |
| backdrop-filter: blur(4px); |
| } |
|
|
| .share-dialog { |
| width: min(100%, 620px); |
| max-height: calc(100vh - 36px); |
| overflow: auto; |
| padding: 22px; |
| background: white; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| box-shadow: 0 24px 70px rgba(24, 51, 72, 0.28); |
| } |
|
|
| .dialog-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 18px; |
| padding-bottom: 14px; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .dialog-header .eyebrow { |
| margin-top: 0; |
| } |
|
|
| .dialog-header h2 { |
| margin: 0; |
| font-size: 22px; |
| } |
|
|
| .share-form { |
| margin-top: 16px; |
| } |
|
|
| .dialog-field { |
| display: block; |
| } |
|
|
| .dialog-field > span { |
| display: block; |
| margin-bottom: 7px; |
| color: #344d60; |
| font-weight: 900; |
| } |
|
|
| .dialog-field > small { |
| display: block; |
| margin-top: 6px; |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .optional-label { |
| display: inline-flex; |
| margin-right: 5px; |
| padding: 2px 6px; |
| color: #526174; |
| background: #eef3f6; |
| border-radius: 4px; |
| font-size: 10px; |
| font-weight: 800; |
| } |
|
|
| .phone-input-shell { |
| min-height: 52px; |
| display: flex; |
| align-items: center; |
| direction: ltr; |
| overflow: hidden; |
| background: white; |
| border: 1px solid #cfdee5; |
| border-radius: 8px; |
| } |
|
|
| .phone-input-shell:focus-within { |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.12); |
| } |
|
|
| .phone-input-shell > span { |
| align-self: stretch; |
| display: grid; |
| place-items: center; |
| padding: 0 13px; |
| color: var(--slate); |
| background: #f3f6f8; |
| border-right: 1px solid var(--line); |
| font-weight: 900; |
| } |
|
|
| .phone-input-shell input { |
| min-width: 0; |
| flex: 1; |
| min-height: 50px; |
| padding: 0 13px; |
| direction: ltr; |
| color: var(--ink); |
| background: transparent; |
| border: 0; |
| outline: 0; |
| font-weight: 800; |
| } |
|
|
| .dialog-error { |
| min-height: 22px; |
| margin: 5px 0 6px; |
| color: var(--red); |
| font-size: 13px; |
| font-weight: 800; |
| } |
|
|
| #messagePreview { |
| width: 100%; |
| min-height: 235px; |
| resize: vertical; |
| padding: 12px; |
| color: var(--ink); |
| background: #f8fafb; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| outline: 0; |
| line-height: 1.75; |
| } |
|
|
| .dialog-actions { |
| display: flex; |
| justify-content: flex-end; |
| gap: 8px; |
| margin-top: 14px; |
| } |
|
|
| .representative-picker { |
| min-width: 0; |
| margin: 0 0 16px; |
| padding: 0; |
| border: 0; |
| } |
|
|
| .representative-picker legend { |
| margin-bottom: 8px; |
| color: #344d60; |
| font-weight: 900; |
| } |
|
|
| .representative-options { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 8px; |
| } |
|
|
| .representative-option { |
| position: relative; |
| min-width: 0; |
| min-height: 70px; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 11px; |
| background: #fbfdfe; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| cursor: pointer; |
| } |
|
|
| .representative-option input { |
| position: absolute; |
| opacity: 0; |
| pointer-events: none; |
| } |
|
|
| .representative-option > span { |
| min-width: 0; |
| flex: 1; |
| } |
|
|
| .representative-option strong, |
| .representative-option small { |
| display: block; |
| } |
|
|
| .representative-option small { |
| margin-top: 3px; |
| color: var(--muted); |
| font-size: 11px; |
| line-height: 1.55; |
| } |
|
|
| .representative-option > svg { |
| flex: 0 0 auto; |
| color: transparent; |
| } |
|
|
| .representative-option:has(input:checked) { |
| background: rgba(0, 176, 80, 0.06); |
| border-color: var(--green); |
| box-shadow: 0 0 0 2px rgba(0, 176, 80, 0.08); |
| } |
|
|
| .representative-option:has(input:checked) > svg { |
| color: var(--green); |
| } |
|
|
| #madonMessagePreview { |
| width: 100%; |
| min-height: 225px; |
| resize: vertical; |
| padding: 12px; |
| color: var(--ink); |
| background: #f8fafb; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| outline: 0; |
| line-height: 1.75; |
| } |
|
|
| .documentation-entity { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| margin: 14px 0; |
| padding: 2px 13px; |
| background: #f8fafb; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| } |
|
|
| .documentation-entity .detail-item { |
| padding-block: 9px; |
| } |
|
|
| .service-warning { |
| margin-bottom: 14px; |
| padding: 11px 12px; |
| color: #7a5000; |
| background: rgba(255, 192, 0, 0.12); |
| border: 1px solid rgba(255, 192, 0, 0.45); |
| border-radius: 8px; |
| line-height: 1.7; |
| } |
|
|
| #fieldStatement { |
| width: 100%; |
| min-height: 125px; |
| resize: vertical; |
| padding: 12px; |
| color: var(--ink); |
| background: white; |
| border: 1px solid #cfdee5; |
| border-radius: 8px; |
| outline: 0; |
| line-height: 1.75; |
| } |
|
|
| .other-status-field input { |
| width: 100%; |
| min-height: 50px; |
| padding: 0 12px; |
| color: var(--ink); |
| background: #fff; |
| border: 1px solid #cfdee5; |
| border-radius: 8px; |
| outline: 0; |
| font: inherit; |
| } |
|
|
| .other-status-field input:focus { |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.12); |
| } |
|
|
| #fieldStatement:focus { |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.12); |
| } |
|
|
| .visually-hidden { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| overflow: hidden; |
| clip: rect(0 0 0 0); |
| white-space: nowrap; |
| opacity: 0; |
| } |
|
|
| .photo-picker { |
| min-height: 92px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-direction: column; |
| gap: 4px; |
| padding: 13px; |
| color: var(--primary); |
| text-align: center; |
| background: rgba(65, 55, 168, 0.04); |
| border: 1px dashed rgba(65, 55, 168, 0.38); |
| border-radius: 8px; |
| cursor: pointer; |
| } |
|
|
| .photo-picker svg { |
| width: 30px; |
| height: 30px; |
| } |
|
|
| .photo-picker small { |
| color: var(--muted); |
| font-size: 12px; |
| } |
|
|
| .photo-previews { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 8px; |
| margin-top: 9px; |
| } |
|
|
| .photo-preview { |
| position: relative; |
| overflow: hidden; |
| aspect-ratio: 4 / 3; |
| background: #eef3f5; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| } |
|
|
| .photo-preview img { |
| width: 100%; |
| height: 100%; |
| display: block; |
| object-fit: cover; |
| } |
|
|
| .photo-preview.existing-photo { |
| display: grid; |
| place-items: center; |
| padding: 10px; |
| background: #f5f7ff; |
| border-color: rgba(65, 55, 168, 0.25); |
| } |
|
|
| .photo-preview.existing-photo > a { |
| min-width: 0; |
| display: grid; |
| place-items: center; |
| gap: 6px; |
| color: var(--primary); |
| text-align: center; |
| font-size: 11px; |
| font-weight: 900; |
| text-decoration: none; |
| } |
|
|
| .photo-preview.existing-photo > a svg { |
| width: 26px; |
| height: 26px; |
| } |
|
|
| .photo-preview button { |
| position: absolute; |
| top: 5px; |
| left: 5px; |
| width: 32px; |
| height: 32px; |
| display: grid; |
| place-items: center; |
| color: white; |
| background: rgba(24, 51, 72, 0.82); |
| border: 0; |
| border-radius: 7px; |
| } |
|
|
| .upload-progress { |
| height: 7px; |
| overflow: hidden; |
| margin: 6px 0 10px; |
| background: #e7eef2; |
| border-radius: 7px; |
| } |
|
|
| .upload-progress span { |
| width: 0; |
| height: 100%; |
| display: block; |
| background: linear-gradient(90deg, var(--green), var(--primary-2)); |
| transition: width 0.2s; |
| } |
|
|
| .documentation-save:disabled { |
| cursor: not-allowed; |
| opacity: 0.5; |
| } |
|
|
| .whatsapp-button { |
| min-height: 44px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| padding: 0 18px; |
| color: white; |
| background: var(--green); |
| border: 1px solid var(--green); |
| border-radius: 8px; |
| font-weight: 900; |
| } |
|
|
| .group-button { |
| min-height: 44px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| padding: 0 16px; |
| color: white; |
| background: var(--primary); |
| border: 1px solid var(--primary); |
| border-radius: 8px; |
| font-weight: 900; |
| } |
|
|
| .group-button:hover { |
| background: var(--purple); |
| border-color: var(--purple); |
| } |
|
|
| .group-help { |
| margin: 8px 0 0; |
| color: var(--muted); |
| text-align: left; |
| font-size: 12px; |
| line-height: 1.6; |
| } |
|
|
| .whatsapp-button:hover { |
| background: #079243; |
| border-color: #079243; |
| } |
|
|
| .whatsapp-button:disabled { |
| cursor: not-allowed; |
| opacity: 0.48; |
| background: var(--slate); |
| border-color: var(--slate); |
| } |
|
|
| .toast { |
| position: fixed; |
| right: 22px; |
| bottom: 22px; |
| z-index: 50; |
| max-width: calc(100% - 44px); |
| padding: 11px 16px; |
| color: white; |
| background: var(--primary); |
| border-radius: 8px; |
| box-shadow: var(--lift); |
| opacity: 0; |
| pointer-events: none; |
| transform: translateY(16px); |
| transition: opacity 0.18s, transform 0.18s; |
| } |
|
|
| .toast.show { |
| opacity: 1; |
| transform: translateY(0); |
| } |
|
|
| button:focus-visible, |
| a:focus-visible, |
| input:focus-visible, |
| select:focus-visible { |
| outline: 3px solid rgba(65, 55, 168, 0.2); |
| outline-offset: 2px; |
| } |
|
|
| @media (max-width: 1050px) { |
| .workspace-header { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| .summary-stats { |
| width: 100%; |
| } |
|
|
| .filters-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .representatives-directory { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (max-width: 760px) { |
| .topbar { |
| padding: 10px 14px; |
| } |
|
|
| .topbar-brand .brand-mark { |
| display: none; |
| } |
|
|
| .topbar-brand h1 { |
| max-width: 190px; |
| font-size: 14px; |
| line-height: 1.4; |
| white-space: normal; |
| } |
|
|
| .secondary-button.compact { |
| width: 44px; |
| padding: 0; |
| font-size: 0; |
| } |
|
|
| .quick-actions { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 7px; |
| } |
|
|
| .tool-action { |
| min-height: 96px; |
| flex-direction: column; |
| justify-content: center; |
| gap: 7px; |
| padding: 10px 7px; |
| text-align: center; |
| } |
|
|
| .tool-icon { |
| width: 38px; |
| height: 38px; |
| } |
|
|
| .tool-action strong { |
| font-size: 12px; |
| line-height: 1.45; |
| } |
|
|
| .tool-action small, |
| .tool-action .action-arrow { |
| display: none; |
| } |
|
|
| .summary-stats { |
| grid-template-columns: repeat(5, 108px); |
| overflow-x: auto; |
| padding-bottom: 4px; |
| scroll-snap-type: x proximity; |
| scrollbar-width: thin; |
| } |
|
|
| .stat-item { |
| scroll-snap-align: start; |
| } |
|
|
| .filters-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .clear-button { |
| width: 100%; |
| } |
|
|
| .section-heading { |
| align-items: flex-start; |
| flex-direction: column; |
| gap: 5px; |
| } |
|
|
| .contacts-heading-actions > p { |
| max-width: none; |
| } |
|
|
| .samples-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| @media (max-width: 560px) { |
| .center-view { |
| align-items: start; |
| padding: 18px 10px; |
| } |
|
|
| .access-panel, |
| .researcher-panel { |
| padding: 25px 18px; |
| } |
|
|
| .access-panel h1, |
| .panel-heading h1 { |
| font-size: 24px; |
| } |
|
|
| .researcher-grid { |
| grid-template-columns: 1fr; |
| max-height: none; |
| } |
|
|
| .dashboard-shell { |
| width: calc(100% - 18px); |
| margin-top: 12px; |
| } |
|
|
| .workspace-header, |
| .contacts-section, |
| .controls-panel { |
| padding: 15px; |
| } |
|
|
| .workspace-header h2 { |
| font-size: 20px; |
| line-height: 1.6; |
| } |
|
|
| .stat-item { |
| min-width: 0; |
| } |
|
|
| .city-buttons { |
| display: flex; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| padding-bottom: 5px; |
| scroll-snap-type: x proximity; |
| } |
|
|
| .city-choice { |
| flex: 0 0 auto; |
| max-width: 265px; |
| justify-content: space-between; |
| scroll-snap-align: start; |
| } |
|
|
| .representatives-directory { |
| grid-template-columns: 1fr; |
| } |
|
|
| .contacts-heading-actions { |
| width: 100%; |
| display: block; |
| } |
|
|
| .contacts-heading-actions > p { |
| display: none; |
| } |
|
|
| .contacts-toggle { |
| width: 100%; |
| min-height: 44px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| padding: 0 12px; |
| color: var(--primary); |
| background: rgba(65, 55, 168, 0.05); |
| border: 1px solid rgba(65, 55, 168, 0.18); |
| border-radius: 8px; |
| font-weight: 900; |
| } |
|
|
| .contacts-toggle svg { |
| transition: transform 0.18s; |
| } |
|
|
| .contacts-toggle[aria-expanded="true"] svg { |
| transform: rotate(180deg); |
| } |
|
|
| .representatives-directory.collapsed { |
| display: none; |
| } |
|
|
| .representative-card { |
| display: block; |
| } |
|
|
| .representative-card.recommended::before { |
| margin-bottom: 8px; |
| } |
|
|
| .representative-card-actions { |
| width: 100%; |
| min-width: 0; |
| margin-top: 10px; |
| } |
|
|
| .card-header { |
| align-items: stretch; |
| flex-direction: column; |
| } |
|
|
| .card-badges { |
| align-self: flex-start; |
| justify-items: start; |
| } |
|
|
| .status-badge { |
| max-width: 100%; |
| } |
|
|
| .card-details { |
| grid-template-columns: 1fr; |
| } |
|
|
| .detail-item:nth-child(odd):not(.wide), |
| .detail-item:nth-child(even):not(.wide) { |
| padding-right: 0; |
| padding-left: 0; |
| border-left: 0; |
| } |
|
|
| .detail-item { |
| grid-column: 1 / -1; |
| } |
|
|
| .location-heading { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| .card-actions { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .card-actions .mini-action { |
| width: 100%; |
| min-width: 0; |
| padding-inline: 8px; |
| font-size: 13px; |
| } |
|
|
| .card-actions .mini-action:last-child:nth-child(odd) { |
| grid-column: 1 / -1; |
| } |
|
|
| .toast { |
| right: 10px; |
| left: 10px; |
| bottom: 12px; |
| max-width: none; |
| text-align: center; |
| } |
|
|
| .dialog-backdrop { |
| align-items: end; |
| padding: 0; |
| } |
|
|
| .share-dialog { |
| width: 100%; |
| max-height: 94vh; |
| padding: 18px 15px; |
| border-radius: 8px 8px 0 0; |
| } |
|
|
| .dialog-header h2 { |
| font-size: 19px; |
| } |
|
|
| #messagePreview { |
| min-height: 220px; |
| } |
|
|
| .representative-options { |
| grid-template-columns: 1fr; |
| } |
|
|
| .representative-option { |
| min-height: 64px; |
| } |
|
|
| #madonMessagePreview { |
| min-height: 215px; |
| } |
|
|
| .documentation-entity { |
| grid-template-columns: 1fr; |
| } |
|
|
| .photo-previews { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
|
|
| .dialog-actions { |
| display: grid; |
| grid-template-columns: 1fr; |
| } |
|
|
| .dialog-actions > * { |
| width: 100%; |
| } |
|
|
| .selection-bar { |
| right: 8px; |
| bottom: 8px; |
| left: 8px; |
| width: auto; |
| min-height: 0; |
| align-items: stretch; |
| flex-direction: column; |
| gap: 8px; |
| padding: 10px; |
| transform: none; |
| } |
|
|
| .selection-summary { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| } |
|
|
| .selection-summary span { |
| margin-top: 0; |
| } |
|
|
| .selection-actions { |
| display: grid; |
| grid-template-columns: 1fr 1.35fr; |
| } |
|
|
| .selection-actions > * { |
| width: 100%; |
| } |
| } |
|
|
| |
| body { |
| background: #f4f7f9; |
| color: #172033; |
| } |
|
|
| .topbar { |
| position: static; |
| min-height: 64px; |
| border-bottom: 1px solid #dce5eb; |
| box-shadow: none; |
| } |
|
|
| .dashboard-shell, |
| .admin-shell { |
| width: min(1440px, calc(100% - 32px)); |
| margin: 0 auto; |
| padding: 24px 0 48px; |
| } |
|
|
| .workspace-header, |
| .admin-heading { |
| padding: 0 0 20px; |
| border-bottom: 1px solid #dce5eb; |
| background: transparent; |
| box-shadow: none; |
| } |
|
|
| .workspace-header h2, |
| .admin-heading h2 { |
| font-size: clamp(20px, 2vw, 28px); |
| } |
|
|
| .summary-stats, |
| .admin-stats { |
| grid-template-columns: repeat(4, minmax(120px, 1fr)); |
| } |
|
|
| .stat-item, |
| .admin-stat { |
| min-height: 86px; |
| padding: 14px 16px; |
| border: 1px solid #dce5eb; |
| border-top: 3px solid #4137a8; |
| border-radius: 6px; |
| background: #ffffff; |
| box-shadow: none; |
| } |
|
|
| .stat-item::before { |
| display: none; |
| } |
|
|
| .stat-item strong, |
| .admin-stat strong { |
| color: #172033; |
| font-size: 25px; |
| } |
|
|
| .stat-item.documented, |
| .admin-stat:nth-child(2) { |
| border-top-color: #00b050; |
| } |
|
|
| .stat-item.documented strong, |
| .admin-stat:nth-child(2) strong { |
| color: #008a3e; |
| } |
|
|
| .quick-actions { |
| gap: 10px; |
| } |
|
|
| .tool-action, |
| .controls-panel, |
| .contacts-section, |
| .admin-panel, |
| .admin-controls { |
| border: 1px solid #dce5eb; |
| border-radius: 6px; |
| background: #ffffff; |
| box-shadow: none; |
| } |
|
|
| .tool-action { |
| min-height: 84px; |
| } |
|
|
| .tool-action:hover { |
| transform: none; |
| border-color: #4137a8; |
| box-shadow: 0 4px 14px rgba(23, 32, 51, 0.08); |
| } |
|
|
| .sample-card { |
| border: 1px solid #dce5eb; |
| border-radius: 6px; |
| background: #ffffff; |
| box-shadow: none; |
| } |
|
|
| .sample-card:hover { |
| transform: none; |
| border-color: #aebdca; |
| box-shadow: 0 5px 16px rgba(23, 32, 51, 0.08); |
| } |
|
|
| .sample-card .card-header { |
| background: #ffffff; |
| border-right: 3px solid #4137a8; |
| } |
|
|
| .status-badge, |
| .location-badge, |
| .status-badge.status-closed, |
| .location-badge-madon, |
| .location-badge-base, |
| .location-badge-statement, |
| .location-badge-none { |
| color: #526174; |
| border-color: #d7e0e7; |
| background: #f5f7f9; |
| } |
|
|
| .sample-card.completed { |
| position: relative; |
| border: 2px solid #00b050; |
| background: #f4fff8; |
| box-shadow: 0 0 0 3px rgba(0, 176, 80, 0.1); |
| } |
|
|
| .sample-card.completed .card-header { |
| border-right-color: #00b050; |
| background: #ffffff; |
| } |
|
|
| .sample-card.completed::before { |
| content: "تم التوثيق"; |
| margin: 10px 12px 0; |
| padding: 5px 10px; |
| border-radius: 4px; |
| background: #00b050; |
| } |
|
|
| .sample-card.completed[data-documented-at]::after { |
| content: attr(data-documented-at); |
| position: absolute; |
| top: 14px; |
| left: 14px; |
| color: #08783b; |
| font-size: 11px; |
| font-weight: 800; |
| } |
|
|
| .researcher-progress { |
| grid-column: 1 / -1; |
| padding: 10px 12px; |
| background: #f4fff8; |
| border: 1px solid rgba(0, 176, 80, 0.28); |
| border-radius: 6px; |
| } |
|
|
| .researcher-progress-heading { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| margin-bottom: 7px; |
| color: #176b3a; |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .researcher-progress-heading strong { |
| color: #008c40; |
| font-size: 14px; |
| } |
|
|
| .researcher-progress-track { |
| height: 8px; |
| overflow: hidden; |
| background: #dcefe4; |
| border-radius: 4px; |
| } |
|
|
| .researcher-progress-track span { |
| display: block; |
| height: 100%; |
| background: linear-gradient(90deg, #00b050, #4137a8); |
| border-radius: inherit; |
| transition: width 0.45s ease; |
| } |
|
|
| .documented-badge { |
| color: #08783b; |
| background: #dcfce7; |
| border: 1px solid #86efac; |
| font-weight: 900; |
| } |
|
|
| .sample-card.recently-documented { |
| animation: documentation-confirmation 1.1s ease 2; |
| } |
|
|
| @keyframes documentation-confirmation { |
| 0%, |
| 100% { |
| box-shadow: 0 0 0 3px rgba(0, 176, 80, 0.1); |
| } |
| 50% { |
| box-shadow: 0 0 0 7px rgba(0, 176, 80, 0.22); |
| } |
| } |
|
|
| .directory-tabs { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 4px; |
| margin: 20px 0 12px; |
| padding: 4px; |
| border: 1px solid #dce5eb; |
| border-radius: 6px; |
| background: #f3f6f8; |
| } |
|
|
| .directory-tab { |
| min-height: 42px; |
| border: 0; |
| border-radius: 4px; |
| color: #526174; |
| background: transparent; |
| font: inherit; |
| font-weight: 800; |
| cursor: pointer; |
| } |
|
|
| .directory-tab.active { |
| color: #ffffff; |
| background: #4137a8; |
| } |
|
|
| .directory-search { |
| margin-bottom: 14px; |
| } |
|
|
| .entity-search-results { |
| display: grid; |
| gap: 8px; |
| max-height: 58vh; |
| overflow-y: auto; |
| } |
|
|
| .entity-result { |
| width: 100%; |
| min-width: 0; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| padding: 13px 14px; |
| border: 1px solid #dce5eb; |
| border-radius: 6px; |
| color: #172033; |
| background: #ffffff; |
| text-align: right; |
| font: inherit; |
| cursor: pointer; |
| } |
|
|
| .entity-result:hover { |
| border-color: #4137a8; |
| } |
|
|
| .entity-result strong, |
| .entity-result small { |
| display: block; |
| } |
|
|
| .entity-result small { |
| margin-top: 4px; |
| color: #667589; |
| } |
|
|
| .entity-result-meta { |
| flex: 0 0 auto; |
| direction: ltr; |
| color: #4137a8; |
| font-size: 12px; |
| font-weight: 900; |
| } |
|
|
| .directory-empty { |
| padding: 30px 16px; |
| color: #667589; |
| text-align: center; |
| } |
|
|
| .admin-view { |
| min-height: 100vh; |
| } |
|
|
| .admin-heading { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 20px; |
| } |
|
|
| .admin-heading p { |
| margin-bottom: 0; |
| color: #667589; |
| } |
|
|
| .admin-heading-actions { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
|
|
| .sync-status { |
| min-height: 38px; |
| display: inline-flex; |
| align-items: center; |
| gap: 7px; |
| padding: 0 11px; |
| color: #08783b; |
| background: #effbf4; |
| border: 1px solid #bce7cd; |
| border-radius: 5px; |
| font-size: 12px; |
| font-weight: 900; |
| white-space: nowrap; |
| } |
|
|
| .sync-status i { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: #00b050; |
| box-shadow: 0 0 0 4px rgba(0, 176, 80, 0.12); |
| } |
|
|
| .sync-status.syncing i { |
| background: #27ced7; |
| box-shadow: 0 0 0 4px rgba(39, 206, 215, 0.14); |
| animation: sync-pulse 1s ease-in-out infinite; |
| } |
|
|
| .sync-status.offline { |
| color: #a04b00; |
| background: #fff7e8; |
| border-color: #f4d38a; |
| } |
|
|
| .sync-status.offline i { |
| background: #ffbc00; |
| box-shadow: 0 0 0 4px rgba(255, 188, 0, 0.14); |
| } |
|
|
| .sync-status.paused { |
| color: #526174; |
| background: #f3f6f8; |
| border-color: #dce5eb; |
| } |
|
|
| .sync-status.paused i { |
| background: #7a8797; |
| box-shadow: none; |
| } |
|
|
| @keyframes sync-pulse { |
| 50% { |
| opacity: 0.35; |
| transform: scale(0.78); |
| } |
| } |
|
|
| .admin-stats { |
| display: grid; |
| grid-template-columns: repeat(6, minmax(0, 1fr)); |
| gap: 10px; |
| margin: 20px 0; |
| } |
|
|
| .admin-stat { |
| min-height: 98px; |
| transition: border-color 0.18s ease, box-shadow 0.18s ease; |
| } |
|
|
| .admin-stat:hover { |
| border-color: #b9c8d2; |
| box-shadow: 0 5px 16px rgba(23, 32, 51, 0.07); |
| } |
|
|
| .admin-stat:nth-child(4) { |
| border-top-color: #27ced7; |
| } |
|
|
| .admin-stat:nth-child(5) { |
| border-top-color: #7030a0; |
| } |
|
|
| .admin-stat:nth-child(6) { |
| border-top-color: #42ba97; |
| } |
|
|
| .admin-stat span, |
| .admin-stat small { |
| display: block; |
| } |
|
|
| .admin-stat span { |
| margin-top: 3px; |
| color: #526174; |
| font-weight: 800; |
| } |
|
|
| .admin-stat small { |
| margin-top: 7px; |
| color: #7a8797; |
| } |
|
|
| .admin-insight { |
| min-height: 68px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| margin: -8px 0 18px; |
| padding: 12px 15px; |
| border: 1px solid #bfe7cf; |
| border-right: 4px solid #00b050; |
| border-radius: 6px; |
| background: #f4fff8; |
| } |
|
|
| .admin-insight.needs-attention { |
| border-color: #f4d38a; |
| border-right-color: #ffbc00; |
| background: #fffaf0; |
| } |
|
|
| .admin-insight-icon { |
| width: 34px; |
| height: 34px; |
| flex: 0 0 auto; |
| display: grid; |
| place-items: center; |
| color: #ffffff; |
| background: #00b050; |
| border-radius: 50%; |
| font-weight: 900; |
| } |
|
|
| .admin-insight.needs-attention .admin-insight-icon { |
| color: #533d00; |
| background: #ffbc00; |
| } |
|
|
| .admin-insight strong, |
| .admin-insight p { |
| display: block; |
| margin: 0; |
| } |
|
|
| .admin-insight strong { |
| color: #176b3a; |
| } |
|
|
| .admin-insight.needs-attention strong { |
| color: #775900; |
| } |
|
|
| .admin-insight p { |
| margin-top: 3px; |
| color: #526174; |
| font-size: 12px; |
| } |
|
|
| .admin-overview-grid { |
| display: grid; |
| grid-template-columns: minmax(250px, 0.75fr) minmax(360px, 1.25fr) minmax(320px, 1fr); |
| gap: 12px; |
| margin-bottom: 16px; |
| } |
|
|
| .admin-overview-grid .admin-panel { |
| min-height: 300px; |
| } |
|
|
| .panel-metric, |
| #adminRecordsCount { |
| padding: 5px 9px; |
| color: #526174; |
| background: #f3f6f8; |
| border: 1px solid #dce5eb; |
| border-radius: 4px; |
| font-size: 12px; |
| font-weight: 900; |
| white-space: nowrap; |
| } |
|
|
| .progress-overview { |
| min-height: 225px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: 14px; |
| } |
|
|
| .completion-ring { |
| --progress: 0deg; |
| width: 126px; |
| aspect-ratio: 1; |
| flex: 0 0 auto; |
| display: grid; |
| place-items: center; |
| border-radius: 50%; |
| background: conic-gradient(#00b050 var(--progress), #e7edf1 0); |
| } |
|
|
| .completion-ring::before { |
| content: ""; |
| grid-area: 1 / 1; |
| width: 94px; |
| aspect-ratio: 1; |
| border-radius: 50%; |
| background: #fff; |
| } |
|
|
| .completion-ring > div { |
| z-index: 1; |
| grid-area: 1 / 1; |
| text-align: center; |
| } |
|
|
| .completion-ring strong, |
| .completion-ring span { |
| display: block; |
| } |
|
|
| .completion-ring strong { |
| color: #172033; |
| font-size: 23px; |
| } |
|
|
| .completion-ring span { |
| margin-top: 2px; |
| color: #667589; |
| font-size: 12px; |
| font-weight: 800; |
| } |
|
|
| .completion-legend { |
| width: 100%; |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| column-gap: 14px; |
| } |
|
|
| .completion-legend p { |
| display: grid; |
| grid-template-columns: 9px 1fr auto; |
| align-items: center; |
| gap: 8px; |
| margin: 0; |
| padding: 8px 0; |
| border-bottom: 1px solid #e5ebef; |
| } |
|
|
| .completion-legend p i { |
| width: 9px; |
| height: 9px; |
| border-radius: 2px; |
| } |
|
|
| .documented-dot { |
| background: #00b050; |
| } |
|
|
| .remaining-dot { |
| background: #dce5eb; |
| } |
|
|
| .completion-legend p span { |
| color: #526174; |
| font-size: 12px; |
| } |
|
|
| .completion-legend p strong { |
| color: #172033; |
| font-size: 15px; |
| } |
|
|
| .completion-legend > small { |
| grid-column: 1 / -1; |
| display: block; |
| max-width: none; |
| margin-top: 10px; |
| text-align: center; |
| color: #7a8797; |
| font-size: 11px; |
| line-height: 1.6; |
| } |
|
|
| .trend-chart { |
| height: 224px; |
| display: grid; |
| grid-template-columns: repeat(7, minmax(34px, 1fr)); |
| align-items: end; |
| gap: 8px; |
| padding-top: 16px; |
| } |
|
|
| .trend-day { |
| height: 100%; |
| min-width: 0; |
| display: grid; |
| grid-template-rows: 22px 1fr 24px; |
| gap: 5px; |
| text-align: center; |
| } |
|
|
| .trend-day > strong { |
| color: #526174; |
| font-size: 12px; |
| } |
|
|
| .trend-bar { |
| min-height: 126px; |
| display: flex; |
| align-items: flex-end; |
| justify-content: center; |
| overflow: hidden; |
| border-bottom: 1px solid #dce5eb; |
| } |
|
|
| .trend-bar i { |
| width: min(34px, 66%); |
| min-height: 3px; |
| display: block; |
| background: #4137a8; |
| border-radius: 4px 4px 0 0; |
| } |
|
|
| .trend-day.today .trend-bar i { |
| background: #00b050; |
| } |
|
|
| .trend-day.today > strong, |
| .trend-day.today > small { |
| color: #08783b; |
| font-weight: 900; |
| } |
|
|
| .trend-day > small { |
| overflow: hidden; |
| color: #7a8797; |
| font-size: 11px; |
| white-space: nowrap; |
| } |
|
|
| .city-progress-list { |
| display: grid; |
| gap: 7px; |
| margin-top: 12px; |
| } |
|
|
| .city-progress-row { |
| width: 100%; |
| display: grid; |
| gap: 5px; |
| padding: 8px 9px; |
| color: #172033; |
| background: #fbfcfd; |
| border: 1px solid transparent; |
| border-radius: 5px; |
| text-align: right; |
| font: inherit; |
| cursor: pointer; |
| } |
|
|
| .city-progress-row:hover { |
| border-color: #b8c8d3; |
| background: #fff; |
| } |
|
|
| .city-progress-heading { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| } |
|
|
| .city-progress-heading strong { |
| min-width: 0; |
| overflow: hidden; |
| font-size: 12px; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .city-progress-heading b { |
| direction: ltr; |
| color: #4137a8; |
| font-size: 11px; |
| } |
|
|
| .city-progress-track { |
| height: 5px; |
| overflow: hidden; |
| background: #e5ebef; |
| border-radius: 3px; |
| } |
|
|
| .city-progress-track i { |
| height: 100%; |
| display: block; |
| background: #42ba97; |
| } |
|
|
| .city-progress-row > small { |
| color: #7a8797; |
| font-size: 10px; |
| } |
|
|
| .admin-controls { |
| display: grid; |
| grid-template-columns: minmax(250px, 1.7fr) repeat(4, minmax(140px, 1fr)) auto; |
| align-items: end; |
| gap: 12px; |
| padding: 16px; |
| } |
|
|
| .admin-clear { |
| min-height: 48px; |
| white-space: nowrap; |
| } |
|
|
| .date-input { |
| width: 100%; |
| height: 48px; |
| padding: 0 12px; |
| border: 1px solid #cfdbe3; |
| border-radius: 6px; |
| color: #172033; |
| background: #ffffff; |
| font: inherit; |
| } |
|
|
| .admin-grid { |
| display: grid; |
| grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.6fr); |
| gap: 16px; |
| margin-top: 16px; |
| align-items: start; |
| } |
|
|
| .admin-panel { |
| min-width: 0; |
| padding: 16px; |
| } |
|
|
| .admin-panel-heading { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| padding-bottom: 12px; |
| border-bottom: 1px solid #e2e9ee; |
| } |
|
|
| .admin-panel-heading h3 { |
| margin: 0; |
| font-size: 18px; |
| } |
|
|
| .productivity-list, |
| .admin-records { |
| display: grid; |
| gap: 8px; |
| margin-top: 12px; |
| } |
|
|
| .productivity-list { |
| max-height: 680px; |
| overflow-y: auto; |
| } |
|
|
| .productivity-row { |
| display: grid; |
| grid-template-columns: 26px minmax(0, 1fr) auto; |
| gap: 6px 10px; |
| padding: 10px; |
| border: 1px solid #e1e8ed; |
| border-radius: 5px; |
| color: #172033; |
| background: #ffffff; |
| text-align: right; |
| font: inherit; |
| cursor: pointer; |
| } |
|
|
| .productivity-row:hover, |
| .productivity-row:focus-visible { |
| border-color: #aebdca; |
| background: #f9fbfc; |
| } |
|
|
| .productivity-rank { |
| width: 25px; |
| height: 25px; |
| display: grid; |
| place-items: center; |
| align-self: center; |
| color: #526174; |
| background: #edf2f5; |
| border-radius: 4px; |
| font-size: 11px; |
| font-weight: 900; |
| } |
|
|
| .productivity-row:nth-child(-n + 3) .productivity-rank { |
| color: #fff; |
| background: #4137a8; |
| } |
|
|
| .productivity-identity { |
| min-width: 0; |
| } |
|
|
| .productivity-name { |
| display: block; |
| min-width: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| font-weight: 800; |
| } |
|
|
| .productivity-identity small { |
| display: block; |
| margin-top: 3px; |
| overflow: hidden; |
| color: #7a8797; |
| font-size: 10px; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .productivity-numbers { |
| align-self: center; |
| direction: ltr; |
| text-align: center; |
| color: #667589; |
| } |
|
|
| .productivity-numbers strong { |
| display: block; |
| color: #4137a8; |
| font-size: 17px; |
| } |
|
|
| .productivity-numbers small { |
| display: block; |
| font-size: 9px; |
| } |
|
|
| .productivity-track { |
| grid-column: 2 / 3; |
| height: 5px; |
| overflow: hidden; |
| border-radius: 2px; |
| background: #e6ebef; |
| } |
|
|
| .productivity-track i { |
| display: block; |
| height: 100%; |
| background: #00b050; |
| } |
|
|
| .productivity-percent { |
| align-self: center; |
| direction: ltr; |
| color: #526174; |
| font-size: 10px; |
| font-weight: 900; |
| } |
|
|
| .admin-record { |
| padding: 14px; |
| border: 1px solid #e1e8ed; |
| border-radius: 5px; |
| background: #ffffff; |
| transition: border-color 0.2s ease, box-shadow 0.2s ease; |
| } |
|
|
| .admin-record.new-record { |
| border-color: #00b050; |
| box-shadow: 0 0 0 3px rgba(0, 176, 80, 0.1); |
| animation: new-admin-record 0.7s ease both; |
| } |
|
|
| @keyframes new-admin-record { |
| from { |
| opacity: 0.55; |
| transform: translateY(-5px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .admin-record-heading, |
| .admin-record-actions { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| } |
|
|
| .admin-record-heading strong, |
| .admin-record-heading small { |
| display: block; |
| } |
|
|
| .admin-record-heading small, |
| .admin-record-heading time { |
| margin-top: 3px; |
| color: #6b798a; |
| font-size: 12px; |
| } |
|
|
| .admin-record-details { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| margin-top: 12px; |
| border-top: 1px solid #e6ecef; |
| } |
|
|
| .admin-record-details .wide { |
| grid-column: 1 / -1; |
| } |
|
|
| .admin-record-actions { |
| justify-content: flex-start; |
| flex-wrap: wrap; |
| margin-top: 12px; |
| } |
|
|
| .admin-record-actions a { |
| padding: 7px 10px; |
| border: 1px solid #cfd9e0; |
| border-radius: 4px; |
| color: #4137a8; |
| background: #ffffff; |
| font-size: 12px; |
| font-weight: 900; |
| text-decoration: none; |
| } |
|
|
| .admin-record-badges { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 6px; |
| margin-top: 9px; |
| } |
|
|
| .admin-record-badges span { |
| padding: 4px 7px; |
| color: #526174; |
| background: #f1f5f7; |
| border: 1px solid #dce5eb; |
| border-radius: 4px; |
| font-size: 10px; |
| font-weight: 900; |
| } |
|
|
| .admin-record-badges .admin-badge-documented { |
| color: #08783b; |
| background: #dcfce7; |
| border-color: #86efac; |
| } |
|
|
| .admin-record-badges .admin-badge-edited { |
| color: #4f2683; |
| background: #f3e8ff; |
| border-color: #d8b4fe; |
| } |
|
|
| @media (max-width: 980px) { |
| .admin-stats { |
| grid-template-columns: repeat(3, 1fr); |
| } |
|
|
| .admin-overview-grid { |
| grid-template-columns: 1fr 1fr; |
| } |
|
|
| .city-panel { |
| grid-column: 1 / -1; |
| } |
|
|
| .city-progress-list { |
| grid-template-columns: 1fr 1fr; |
| } |
|
|
| .admin-controls { |
| grid-template-columns: 1fr 1fr 1fr; |
| } |
|
|
| .admin-search { |
| grid-column: span 2; |
| } |
|
|
| .admin-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .productivity-list { |
| max-height: 420px; |
| } |
| } |
|
|
| @media (min-width: 981px) { |
| .admin-controls { |
| position: sticky; |
| top: 8px; |
| z-index: 30; |
| box-shadow: 0 8px 22px rgba(23, 32, 51, 0.08); |
| } |
| } |
|
|
| @media (max-width: 620px) { |
| .dashboard-shell, |
| .admin-shell { |
| width: min(100% - 20px, 1440px); |
| padding-top: 16px; |
| } |
|
|
| .summary-stats, |
| .admin-stats { |
| grid-template-columns: 1fr 1fr; |
| overflow: visible; |
| } |
|
|
| .admin-heading { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| .admin-heading-actions { |
| width: 100%; |
| justify-content: space-between; |
| } |
|
|
| .admin-overview-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .admin-overview-grid .admin-panel { |
| min-height: 0; |
| } |
|
|
| .city-panel { |
| grid-column: auto; |
| } |
|
|
| .city-progress-list { |
| grid-template-columns: 1fr; |
| } |
|
|
| .progress-overview { |
| min-height: 205px; |
| gap: 14px; |
| } |
|
|
| .completion-ring { |
| width: 120px; |
| } |
|
|
| .completion-ring::before { |
| width: 90px; |
| } |
|
|
| .trend-chart { |
| gap: 4px; |
| } |
|
|
| .admin-controls { |
| grid-template-columns: 1fr; |
| } |
|
|
| .admin-search { |
| grid-column: auto; |
| } |
|
|
| .admin-record-heading { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| .admin-record-details { |
| grid-template-columns: 1fr 1fr; |
| } |
|
|
| .admin-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .sample-card.completed[data-documented-at]::after { |
| position: static; |
| display: block; |
| margin: 6px 12px 0; |
| } |
| } |
|
|
