/* * كل مقاس حول نصّ مكتوب بـ em، تماماً كما في style.css الخاص بالشاشات: em كسرٌ من * حجم خطّ العقدة نفسها، فسطرٌ واحد على الجذر يكبّر الواجهة كلها. والمتصفّح يمنح * المستخدم ذلك السطر مجاناً (تكبير الصفحة)، فلا يحتاج هنا ما يحتاجه UiScale هناك. * * ولا قاعدة تخصّ اتجاهاً: الاتجاه يُضبط على من جواب الخادم، والمتصفّح يعكس * التخطيط بنفسه. كتابةُ قاعدةٍ لليمين تعني انعكاساً ثانياً يدفع النصّ إلى الحافة * الخطأ - وهو نفس الخطأ الذي كان في -fx-alignment: center-right على أزرار الشريط. */ :root { --ink: #1f2933; --muted: #6b7280; --line: #d7dde3; --bg: #f4f6f8; --card: #ffffff; --accent: #1d6f8b; --bad: #b3261e; } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Tahoma, sans-serif; font-size: 15px; color: var(--ink); background: var(--bg); } .hidden { display: none !important; } .centred { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 0.6em; padding: 2em; width: min(26em, 92vw); display: flex; flex-direction: column; gap: 0.4em; } h1, h2, h3, h4 { margin: 0 0 0.6em; } label { font-size: 0.9em; color: var(--muted); } input, select { font: inherit; padding: 0.45em 0.6em; border: 1px solid var(--line); border-radius: 0.35em; background: var(--card); color: inherit; } input:focus, select:focus, button:focus { outline: 2px solid var(--accent); outline-offset: 1px; } button { font: inherit; padding: 0.5em 1.1em; border: none; border-radius: 0.35em; background: var(--accent); color: #fff; cursor: pointer; } button.link { background: none; color: var(--accent); padding: 0.2em 0.4em; } .hint { margin: 0 0 0.6em; font-size: 0.82em; color: var(--muted); } /* السطرُ الواحد لا يحمل تلميحاً بعرضه: القسمة تدفعه إلى سطر لنفسه */ .row .hint { flex-basis: 100%; margin: 0; } /* أيام الأسبوع: مربعاتٌ متجاورة تُقرأ سطراً واحداً لا عموداً */ .days { display: inline-flex; gap: 0.6em; flex-wrap: wrap; } .days label { display: inline-flex; align-items: center; gap: 0.25em; } /* زرّان أو أربعة في خلية واحدة يلتصقان بلا هذه */ td button { margin-inline-end: 0.35em; } header { display: flex; align-items: center; gap: 0.8em; padding: 0.7em 1.2em; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; } header .spacer { flex: 1; } nav { display: flex; gap: 0.35em; } nav button { background: none; color: var(--ink); } nav button.active { background: var(--accent); color: #fff; } .badge { background: var(--accent); color: #fff; border-radius: 1em; padding: 0.15em 0.7em; font-size: 0.85em; } .view { padding: 1.2em; } .row { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; margin-bottom: 0.9em; padding: 0.8em; background: var(--card); border: 1px solid var(--line); border-radius: 0.5em; } .result { margin: 0.4em 0 1em; min-height: 1.2em; } /* التسليمُ إلى إنسان: جملةٌ ثم رابطٌ ثم زرّ، في سطرٍ واحد يُقرأ بترتيب ما يُفعل */ .result a, .result button { margin-inline-start: 0.6em; } .error { margin: 0 1.2em; color: var(--bad); min-height: 1.2em; } .bad { color: var(--bad); } table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 0.5em; overflow: hidden; } caption { padding: 1.2em; color: var(--muted); } th, td { /* start يعني بداية السطر في الاتجاهين: اليمين بالعربية واليسار بالإنجليزية */ text-align: start; padding: 0.55em 0.8em; border-bottom: 1px solid var(--line); } th { background: var(--bg); font-weight: 600; } .reports { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5em; } .reports a { color: var(--accent); } aside#alerts { padding: 0 1.2em 2em; } #alertList { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.35em; } .alert { padding: 0.5em 0.8em; background: var(--card); border: 1px solid var(--line); /* الحدّ علامة لا مقاس، فيبقى بالبكسل: هو شريط لون لا مسافة حول نص */ border-inline-start: 4px solid var(--muted); border-radius: 0.35em; } .alert.WARNING { border-inline-start-color: #c77700; } .alert.CRITICAL { border-inline-start-color: var(--bad); } /* تبويب واحد ظاهر لكل مهمة؛ المقاسات من الخط والاتجاه من الصفحة. */ .section-tabs { display: flex; flex-wrap: wrap; gap: 0.35em; padding: 0.35em; margin-bottom: 1.25em; border-bottom: 1px solid var(--line); } .section-tabs button { background: transparent; color: var(--muted); } .section-tabs button[aria-selected="true"] { background: var(--accent); color: white; } .section-tabs button:disabled { opacity: 0.45; cursor: default; } .panel-actions { margin-bottom: 0.8em; } .settings-form { padding: 1.2em; background: var(--card); border: 1px solid var(--line); border-radius: 0.5em; max-width: 65em; } .settings-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17em), 1fr)); gap: 1em; margin-bottom: 1.2em; } .setting-field { display: flex; flex-direction: column; gap: 0.4em; min-width: 0; } .settings-fields input:not([type="checkbox"]), .settings-fields select { width: 100%; } .settings-form .hint { margin-top: 0.8em; } nav { flex-wrap: wrap; } summary { cursor: pointer; color: var(--accent); } /* جميع الشاشات تستخدم ترتيباً واحداً: عنوان، مرشحات، محتوى، وإجراءات واضحة. */ .view { max-width: 94em; margin-inline: auto; padding: 1.5em; } .view-description { color: var(--muted); margin: 0 0 1.4em; line-height: 1.7; } .result:empty, .error:empty { display: none; } .data-form, .filter-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16em), 1fr)); align-items: end; gap: 1.1em; background: var(--card); border: 1px solid var(--line); border-radius: 0.6em; padding: 1.4em; margin-bottom: 1.2em; } .data-form { max-width: 64em; } .filter-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13em), 1fr)); } .form-field { display: flex; flex-direction: column; gap: 0.45em; min-width: 0; } .form-field input, .form-field select { width: 100%; min-width: 0; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65em; grid-column: 1 / -1; } .form-actions a { color: var(--accent); } .data-form > strong, .data-form > .hint, .full-width { grid-column: 1 / -1; } .data-form > .hint { line-height: 1.6; margin: 0; } .data-form > label, .filter-form > label { align-self: center; } button.secondary { background: var(--bg); color: var(--ink); border: 1px solid var(--line); } button.danger { background: transparent; color: var(--bad); border: 1px solid var(--line); } button:hover:not(:disabled), .reports a:hover { filter: brightness(0.95); } button:disabled { cursor: default; opacity: 0.45; } .table-scroll { overflow-x: auto; border-radius: 0.6em; margin-bottom: 1.3em; } .table-scroll:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .table-scroll table { min-width: 40em; } th { white-space: nowrap; } td { vertical-align: middle; line-height: 1.55; } .row-actions { min-width: 12em; } .row-actions button { margin-block: 0.2em; } .reports { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19em), 1fr)); gap: 1em; } .reports li { background: var(--card); border: 1px solid var(--line); border-radius: 0.6em; padding: 1.4em; } .reports a { display: block; font-weight: 600; margin-bottom: 0.75em; } .reports .hint { line-height: 1.7; margin: 0; } .card { gap: 0.7em; padding: 2.2em; } .card h1 { font-size: 1.65em; } .card .hint { line-height: 1.65; } #app header nav { flex: 1 1 42em; } #app header .spacer { display: none; } @media (max-width: 44em) { .view { padding: 1em; } .data-form, .filter-form, .settings-form { padding: 1em; } .data-form, .filter-form { grid-template-columns: 1fr; } #app header { gap: 0.55em; padding: 0.8em; } #app header nav { order: 2; flex-basis: 100%; gap: 0.15em; } nav button { padding: 0.5em 0.7em; } .section-tabs { gap: 0.2em; } .section-tabs button { padding: 0.55em 0.7em; } input, select { max-width: 100%; } }