/* ============================================================
   Path: src/RichRich.Web/wwwroot/css/site.css
   Session: J-05
   LastModified: 2026-05-07
   Module: Site-wide CSS — Reset + Base + Components
   ============================================================
   ملف الـ CSS العام للنظام. يستهلك المتغيرات من themes.css.
   لا يحتوي ألواناً ثابتة — كل شيء عبر CSS Variables.

   المرجع: 05_UI_UX_Design.md § 1 (Design System) · § 7 (Responsive)
   ============================================================ */

/* ============================================================
   Reset + Base
   ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--t1);
    background: var(--body-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--tr), color var(--tr);
}

/* ============================================================
   Typography
   ============================================================ */
h1 { font-size: var(--fs-h1); font-weight: 800; line-height: 1.3; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.3; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.4; }
h4 { font-size: var(--fs-body); font-weight: 700; line-height: 1.4; }

small  { font-size: var(--fs-small); font-weight: 500; }
.tiny  { font-size: var(--fs-tiny);  font-weight: 700; }

a {
    color: var(--p);
    text-decoration: none;
    transition: color var(--tr);
}
a:hover { color: var(--p-dark); }

/* ============================================================
   ERP Aesthetic — Zero Radius
   ============================================================ */
button,
input,
select,
textarea,
.btn,
.card,
.dropdown-menu,
.modal-content,
.form-control,
.alert {
    border-radius: 0 !important;
}

/* ============================================================
   Buttons (Bootstrap override using theme variables)
   ============================================================ */
.btn-primary {
    background: var(--p);
    border-color: var(--p);
    color: #fff;
}
.btn-primary:hover {
    background: var(--p-dark);
    border-color: var(--p-dark);
    color: #fff;
}
.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-accent:hover {
    background: var(--accent-d);
    border-color: var(--accent-d);
    color: #fff;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    color: var(--t1);
    transition: background var(--tr), border-color var(--tr);
}

/* ============================================================
   Forms — touch-friendly minimum heights
   ============================================================ */
.form-control,
.form-select {
    min-height: 44px;
    background: var(--input-bg, var(--card-bg));
    border-color: var(--input-bdr, #b9c2cc);
    border-width: 1.5px;
    color: var(--t1);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--p);
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--p) 25%, transparent);
}

/* ============================================================
   Scrollbar (WebKit)
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--p-dark); }

/* ============================================================
   Focus Indicators (Accessibility)
   ============================================================ */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================================
   Logical Properties — RTL/LTR awareness
   ============================================================ */
.ms-auto-logical { margin-inline-start: auto; }
.me-auto-logical { margin-inline-end:   auto; }
.text-start-logical { text-align: start; }
.text-end-logical   { text-align: end;   }

/* ============================================================
   Touch Targets (Apple HIG ≥ 44px)
   ============================================================ */
.btn,
.touchable {
    min-height: 44px;
    min-width: 44px;
}

/* ============================================================
   Demo / Test Page Helpers (will be removed in J-06)
   ============================================================ */
.theme-demo-card {
    padding: 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    margin-bottom: 1rem;
    transition: all var(--tr);
}

.theme-swatch {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 1px solid var(--card-bdr);
    margin-inline-end: .5rem;
    vertical-align: middle;
}

/* ============================================================
   Responsive Breakpoints
   ============================================================ */
@media (max-width: 768px) {
    body { font-size: 15px; }
}