/* هوية النظام: خط LamaSans، لوحة designes من config/app.php، وأصناف Tailwind كما في resources/js/components/ui */
@font-face { font-family: "LamaSans"; src: url("../fonts/LamaSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "LamaSans"; src: url("../fonts/LamaSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "LamaSans"; src: url("../fonts/LamaSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "LamaSans"; src: url("../fonts/LamaSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --p-50: #fcf6fd; --p-100: #f6ecfb; --p-200: #eed9f5; --p-300: #e2bbec; --p-400: #d292e0;
  --p-500: #bb67ce; --p-600: #a048b1; --p-700: #7d3589; --p-800: #6f3078; --p-900: #5d2c63;
  --bs-primary: #793985;
  --g-50: #f9fafb; --g-100: #f3f4f6; --g-200: #e5e7eb; --g-300: #d1d5db; --g-400: #9ca3af;
  --g-500: #6b7280; --g-600: #4b5563; --g-700: #374151; --g-800: #1f2937; --g-900: #111827;
  --red-50: #fef2f2; --red-100: #fee2e2; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c;
  --yel-50: #fefce8; --yel-100: #fef9c3; --yel-500: #eab308; --yel-700: #a16207; --yel-800: #854d0e;
  --grn-50: #f0fdf4; --grn-100: #dcfce7; --grn-600: #16a34a; --grn-700: #15803d;
  --blu-50: #eff6ff; --blu-700: #1d4ed8;
  --shadow-card: 0 10px 15px -3px rgb(156 163 175 / .1), 0 4px 6px -4px rgb(156 163 175 / .1);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
}

* { box-sizing: border-box; }
html { height: 100%; }
body { direction: rtl; margin: 0; min-height: 100%; background: var(--g-50); color: var(--g-900); font-family: "LamaSans", sans-serif; font-size: .9rem; line-height: 1.6; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.3; }
p { margin: 0; }
a { color: var(--p-700); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--p-300); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .85em; background: var(--g-100); padding: .1em .4em; border-radius: 4px; direction: ltr; unicode-bidi: isolate; display: inline-block; color: var(--g-800); }
.muted { color: var(--g-500); }
.small { font-size: .78rem; }
[hidden] { display: none !important; }

/* ===== الهيكل: قائمة جانبية + لوحة رئيسية ===== */
.app { display: grid; grid-template-columns: 16.25rem 1fr; min-height: 100vh; }
@media (max-width: 56rem) { .app { grid-template-columns: 1fr; } }
.sidebar { background: var(--bs-primary); color: #fff; padding: 1rem .75rem 1.5rem; display: flex; flex-direction: column; gap: .15rem; }
@media (min-width: 56.01rem) { .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
@media (max-width: 56rem) { .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.sidebar .logo { text-align: center; padding: .5rem 0 1rem; font-weight: 700; letter-spacing: .02em; font-size: 1.05rem; opacity: .95; }
.sidebar .logo small { display: block; font-size: .7rem; font-weight: 400; opacity: .75; }
@media (max-width: 56rem) { .sidebar .logo { width: 100%; padding: .25rem 0 .5rem; } }
.sidebar .section { font-size: .85rem; padding: .6rem .75rem .25rem; opacity: .95; display: flex; justify-content: space-between; align-items: center; }
.sidebar .section .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #fff; }
@media (max-width: 56rem) { .sidebar .section { width: 100%; } }
.sidebar a.nav-link { color: #fff; text-decoration: none; width: 100%; padding: .45rem .75rem .45rem 1.5rem; border-radius: .25rem; font-size: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; opacity: .9; }
@media (max-width: 56rem) { .sidebar a.nav-link { width: auto; padding: .4rem .7rem; } }
.sidebar a.nav-link:hover { background: rgba(255,255,255,.1); opacity: 1; }
.sidebar a.nav-link[aria-current="page"] { background: rgba(255,255,255,.2); opacity: 1; font-weight: 600; }
.sidebar .cnt { background: #fff; color: var(--bs-primary); font-size: .7rem; font-weight: 700; border-radius: 9999px; padding: 0 .5em; line-height: 1.5; }

.main-panel { min-width: 0; display: flex; flex-direction: column; }
.navbar { background: #fff; box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--g-100); min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem 1rem; flex-wrap: wrap; }
.navbar .hello { color: var(--g-700); font-weight: 500; }
.navbar .as { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--g-500); }
.navbar .as select { width: auto; padding: .2rem 2rem .2rem .6rem; font-size: .8rem; }
.content { padding: 1.5rem 1rem 3rem; }

/* LayoutHeader */
.layout-header { display: flex; flex-direction: column; gap: .75rem; margin: .25rem 0 1rem; }
.layout-header .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.title { font-size: 1.125rem; font-weight: 500; line-height: 1.5rem; color: var(--g-800); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.title .crumb { color: var(--g-800); text-decoration: none; }
.title .sep { color: var(--g-400); }
.title .subtitle { font-size: .8rem; color: var(--g-500); font-weight: 400; }
.subtitle-h { font-size: 1rem; font-weight: 500; color: var(--g-800); margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.subtitle-h .hint, .label .hint { font-size: .75rem; color: var(--g-500); font-weight: 400; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ms-auto { margin-inline-start: auto; }

/* Button */
.btn { border: 0; border-radius: .5rem; font-size: .75rem; padding: .5rem 1rem; font-weight: 500; display: inline-flex; align-items: center; gap: .35rem; transition: background .15s, color .15s; line-height: 1.25; white-space: nowrap; text-decoration: none; }
.btn.primary { background: var(--p-700); color: #fff; }
.btn.primary:hover { background: var(--p-900); color: #fff; }
.btn.secondary { background: var(--p-50); border: 1px solid var(--p-200); color: var(--p-700); }
.btn.secondary:hover { background: var(--p-700); color: #fff; }
.btn.success { background: var(--grn-600); color: #fff; }
.btn.success:hover { background: var(--grn-700); }
.btn.error { background: var(--red-500); color: #fff; }
.btn.error:hover { background: var(--red-700); }
.btn.warning { background: var(--yel-500); color: #fff; }
.btn.link { background: none; color: var(--p-500); text-decoration: underline; padding: 0 .25rem; }
.btn.xs { font-size: 11px; padding: .25rem .375rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Badge */
.badge { display: inline-flex; align-items: center; border-radius: .375rem; padding: .25rem .625rem; font-size: .75rem; font-weight: 500; box-shadow: inset 0 0 0 1px var(--ring); white-space: nowrap; }
.badge.default { background: var(--g-50); color: var(--g-600); --ring: rgb(107 114 128 / .1); }
.badge.danger { background: var(--red-50); color: var(--red-700); --ring: rgb(220 38 38 / .1); }
.badge.warning { background: var(--yel-50); color: var(--yel-800); --ring: rgb(202 138 4 / .2); }
.badge.success { background: var(--grn-50); color: var(--grn-700); --ring: rgb(22 163 74 / .2); }
.badge.info { background: var(--blu-50); color: var(--blu-700); --ring: rgb(29 78 216 / .1); }
.badge.primary { background: var(--p-50); color: var(--p-700); --ring: rgb(125 53 137 / .1); }
.badge.dark { background: var(--g-800); color: #fff; --ring: transparent; }

/* Card */
.card { background: #fff; border: 1px solid var(--g-100); box-shadow: var(--shadow-card); border-radius: .5rem; padding: 1rem; min-width: 0; }
.stack { display: grid; gap: 1rem; }
.stack > * { min-width: 0; }

/* Alert */
.alert { border-radius: .375rem; padding: .625rem; display: flex; gap: .5rem; align-items: flex-start; font-size: .875rem; font-weight: 500; }
.alert.primary { background: var(--p-100); color: var(--p-700); }
.alert.warning { background: var(--yel-100); color: var(--yel-700); }
.alert.error { background: var(--red-100); color: var(--red-700); }
.alert.success { background: var(--grn-100); color: var(--grn-700); }
.alert ul { margin: 0; padding-inline-start: 1.1rem; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.kpi .l { font-size: .75rem; color: var(--g-500); font-weight: 500; }
.kpi .v { font-size: 1.5rem; font-weight: 600; color: var(--g-800); line-height: 1.2; margin-top: .2rem; }
.kpi .v small { font-size: .75rem; color: var(--g-500); font-weight: 400; margin-inline-start: .3rem; }
.kpi.warn { border-color: var(--yel-500); }

/* Inputs */
.field { display: grid; gap: .5rem; min-width: 0; align-content: start; }
.label { font-size: .875rem; color: var(--g-600); font-weight: 500; white-space: nowrap; }
.label .req { color: var(--red-500); }
.helper { font-size: .75rem; font-weight: 500; color: rgb(107 114 128 / .75); }
.input { display: block; width: 100%; border: 0; border-radius: .375rem; padding: .35rem .75rem; color: var(--g-900); background: #fff; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--g-300); font-size: .875rem; line-height: 1.5rem; min-width: 0; }
.input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--p-200); }
.input.err { box-shadow: inset 0 0 0 1px var(--red-500); }
.input.ltr { direction: ltr; text-align: left; }
.input[readonly] { background: var(--g-50); color: var(--g-600); }
select.input { appearance: none; padding-inline-end: 2rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: left .5rem center; background-repeat: no-repeat; background-size: 1.25em 1.25em; }
textarea.input { min-height: 4.5rem; resize: vertical; }
.error-text { font-size: .75rem; color: var(--red-500); font-weight: 600; display: block; }
.grid4 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; }
.span-all { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { font-size: .75rem; border: 1px solid var(--g-300); border-radius: 9999px; padding: .1rem .7rem; background: #fff; color: var(--g-600); text-decoration: none; }
.chip.on { background: var(--p-700); color: #fff; border-color: var(--p-700); }

/* Table */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 40rem; }
th { padding: .75rem .5rem; font-size: .75rem; font-weight: 500; color: var(--g-700); text-align: right; white-space: nowrap; }
td { padding: .75rem .5rem; font-size: .75rem; font-weight: 500; color: var(--g-900); text-align: right; vertical-align: middle; }
thead tr, tbody tr { border-bottom: 1px solid var(--g-300); }
tbody tr:last-child { border-bottom: 0; }
tfoot td { font-weight: 600; background: var(--g-50); }
td .sub, th .sub { display: block; font-weight: 400; color: var(--g-500); font-size: .7rem; }
td.n, th.n { text-align: left; }
tr.low td:first-child { box-shadow: inset 3px 0 0 var(--yel-500); }
.swatch { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.swatch i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--g-300); display: inline-block; flex: none; }
.swatch .code { color: var(--g-500); font-weight: 400; direction: ltr; unicode-bidi: isolate; }
.t-in { color: var(--grn-700); font-weight: 600; }
.t-out { color: var(--p-700); font-weight: 600; }
.t-ret { color: var(--g-600); font-weight: 600; }
.lines .input { font-size: .75rem; padding: .25rem .5rem; line-height: 1.4rem; }
.lines td { vertical-align: top; }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--g-500); }
.empty .ic { font-size: 2rem; color: var(--p-300); }

/* Matrix */
.matrix th, .matrix td { text-align: center; }
.matrix thead th:first-child, .matrix tbody th { text-align: right; }
.matrix td.zero { color: var(--g-400); font-weight: 400; }
.matrix td.lowq { background: var(--yel-50); color: var(--yel-800); font-weight: 600; }

/* Show */
.doc { display: grid; grid-template-columns: 1fr 20rem; gap: 1rem; align-items: start; }
.doc > * { min-width: 0; }
@media (max-width: 66rem) { .doc { grid-template-columns: 1fr; } }
.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .9rem 1rem; }
.info .l { font-size: .75rem; color: var(--g-500); font-weight: 500; }
.info .v { font-size: .875rem; color: var(--g-900); font-weight: 500; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.step { display: grid; grid-template-columns: 1.5rem 1fr; gap: .6rem; position: relative; padding-bottom: 1rem; }
.step > div { min-width: 0; }
.step::before { content: ""; position: absolute; right: .7rem; top: 1.5rem; bottom: 0; width: 2px; background: var(--g-200); }
.step:last-child::before { display: none; }
.step .mark { width: 1.5rem; height: 1.5rem; border-radius: 9999px; border: 2px solid var(--g-300); background: #fff; display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: var(--g-500); z-index: 1; }
.step.done .mark { background: var(--grn-600); border-color: var(--grn-600); color: #fff; }
.step.now .mark { border-color: var(--p-700); color: var(--p-700); box-shadow: 0 0 0 4px var(--p-100); }
.step.bad .mark { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.step.back .mark { background: var(--blu-700); border-color: var(--blu-700); color: #fff; }
.step .who { font-size: .85rem; font-weight: 600; color: var(--g-800); }
.step .role { font-size: .75rem; color: var(--g-500); }
.step .when { font-size: .72rem; color: var(--g-400); text-align: right; }
.step .say { font-size: .78rem; margin-top: .3rem; background: var(--g-50); border: 1px solid var(--g-100); padding: .35rem .6rem; border-radius: .375rem; color: var(--g-700); }
.decide { display: grid; gap: .5rem; margin-top: .6rem; min-width: 0; }
.decide .btn { white-space: normal; justify-content: center; text-align: center; }
.decide .row2 { display: flex; gap: .5rem; }
.decide .row2 .btn { flex: 1; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
.foot .muted { font-size: .78rem; color: var(--g-500); }
.states { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

/* Error page */
pre.trace { direction: ltr; text-align: left; font-size: .72rem; background: var(--g-100); padding: .75rem; border-radius: .375rem; overflow-x: auto; }

/* الإعدادات: تبويبات القوائم المرجعية وحقل اللون */
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--g-200); }
.tab { padding: .5rem .9rem; font-size: .8rem; color: var(--g-600); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--p-700); }
.tab[aria-current="page"] { color: var(--p-700); border-color: var(--p-700); font-weight: 600; }
.color-field { display: flex; align-items: center; gap: .4rem; }
.color-field input[type="color"] { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--g-300); border-radius: .375rem; background: none; flex: none; cursor: pointer; }
.settings-table td { vertical-align: middle; }
.settings-table .input { min-width: 6rem; }
.lines select.na { background: var(--g-50); color: var(--g-400); box-shadow: inset 0 0 0 1px var(--g-200); }
.check { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--g-700); white-space: nowrap; min-height: 2.25rem; }
.check input { width: 1rem; height: 1rem; accent-color: var(--p-700); }
.danger-zone { border-color: var(--red-50); background: #fffafa; }
.checks { display: flex; flex-wrap: wrap; gap: .25rem 1rem; min-height: 2.25rem; align-items: center; }