/* ==========================================================================
   منصة نماذج شركة تالة لمواد البناء — TALACO Forms
   الألوان والترويسة مشتقّة من الهوية الرسمية للشركة (ملفات الترويسة والشعار).
   ========================================================================== */

:root{
  --navy:#163049;        /* الأساسي — من الشعار */
  --navy-d:#0E2438;
  --blue:#265175;        /* الثانوي — من الشعار */
  --copper:#BC8351;      /* لون التمييز — من ترويسة الشركة */
  --copper-soft:#F7EEE5;
  --blue-soft:#E9EFF5;
  --blue-line:#CBD9E5;
  --ink:#12202E;
  --muted:#6B7A88;
  --line:#DCE3EA;
  --bg:#F4F6F8;
  --card:#FFFFFF;
  --radius:14px;
  --radius-s:9px;
  --shadow:0 1px 2px rgba(18,32,46,.05), 0 8px 24px rgba(18,32,46,.06);
  --font:'Dubai','IBM Plex Sans Arabic','Segoe UI',system-ui,sans-serif;
  --topbar-h:68px;
  --actionbar-h:74px;
}

/* ==== خط Dubai — مضمَّن في الحزمة، فيظهر على كل جهاز ولو لم يكن مثبّتًا عليه ====
   المصدر: ملفات الخط التي زوّدنا بها رياض، محوّلة إلى woff2 (نحو 56 كيلوبايت للوزن). */
@font-face{font-family:'Dubai';src:local('Dubai Light'),url('fonts/Dubai-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Dubai';src:local('Dubai'),local('Dubai Regular'),url('fonts/Dubai-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Dubai';src:local('Dubai Medium'),url('fonts/Dubai-Medium.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Dubai';src:local('Dubai Bold'),url('fonts/Dubai-Bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
/* كل الأرقام لاتينية بلا استثناء */
input,.sheet{font-variant-numeric:lining-nums tabular-nums}

/* ============================ الشريط العلوي ============================ */
.topbar{
  position:sticky;top:0;z-index:40;height:var(--topbar-h);
  background:var(--navy);border-bottom:3px solid var(--copper);
  display:flex;align-items:center;gap:18px;
  padding:0 clamp(14px,3vw,28px);color:#fff;
}
.brand{display:flex;align-items:center;gap:12px;margin-inline-end:auto;min-width:0}
.brand img{height:34px;width:auto;display:block;filter:brightness(0) invert(1)}
.brand .btxt{line-height:1.25;min-width:0}
.brand .btxt b{display:block;font-size:16px;font-weight:700;white-space:nowrap}
.brand .btxt span{display:block;font-size:11.5px;color:#B9C9D8}
.topnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.topnav a,.topnav button{
  background:transparent;border:0;cursor:pointer;color:#D6E1EB;
  padding:8px 14px;border-radius:999px;font-size:14px;transition:.15s;white-space:nowrap;
}
.topnav a:hover,.topnav button:hover{background:rgba(255,255,255,.10);color:#fff}
.topnav a.active{background:#fff;color:var(--navy);font-weight:700}
.langbtn{border:1px solid rgba(255,255,255,.35)!important;font-weight:600}

/* ============================ الصفحة الرئيسية ============================ */
.wrap{max-width:1240px;margin:0 auto;padding:clamp(22px,4vw,44px) clamp(14px,3vw,28px) 70px}
.page-head h1{font-size:clamp(24px,3.4vw,34px);margin:0 0 8px;font-weight:800}
.page-head p{margin:0;color:var(--muted);max-width:70ch}
.cat{margin-top:38px}
.cat-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.cat-head h2{font-size:15px;font-weight:700;color:var(--blue);margin:0;white-space:nowrap}
.cat-head .rule{flex:1;height:1px;background:var(--line)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(275px,1fr))}
.card{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:.18s;
}
a.card:hover{transform:translateY(-2px);border-color:var(--copper);box-shadow:0 2px 4px rgba(18,32,46,.06),0 14px 34px rgba(18,32,46,.10)}
.card .code{font-size:12px;color:var(--copper);font-weight:700;letter-spacing:.5px}
.card h3{margin:6px 0 8px;font-size:17.5px;font-weight:700;line-height:1.45}
.card p{margin:0 0 14px;font-size:13.5px;color:var(--muted);line-height:1.65}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:11.5px;background:var(--blue-soft);color:var(--blue);padding:4px 10px;border-radius:999px;white-space:nowrap}
.tag.soon{background:var(--copper-soft);color:#8A5F35}
.card.pending{opacity:.62;background:#FBFCFD}
.card.pending .code,.card.pending h3{color:var(--muted)}

/* ============================ صفحة النموذج ============================ */
.form-layout{
  display:grid;grid-template-columns:minmax(340px,410px) 1fr;
  min-height:calc(100vh - var(--topbar-h) - var(--actionbar-h));
}
.fields-pane{
  background:var(--card);border-inline-start:1px solid var(--line);
  padding:22px clamp(14px,2vw,24px) 40px;
  overflow-y:auto;max-height:calc(100vh - var(--topbar-h) - var(--actionbar-h));
  position:sticky;top:var(--topbar-h);
}
.fields-pane > h2{margin:0 0 4px;font-size:19px;font-weight:800}
.fields-pane > .sub{margin:0 0 18px;font-size:12.5px;color:var(--muted)}
.fsec{margin-top:22px}
.fsec > h3{font-size:13px;font-weight:700;color:var(--blue);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.field label .en{color:#9AA8B4;font-size:11px}
.field .req{color:#B4472F}
.field input[type=text],.field input[type=date],.field input[type=time],
.field input[type=number],.field select,.field textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-s);background:#fff;outline:0;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(38,81,117,.12)}
.field textarea{min-height:78px;resize:vertical;line-height:1.7}
.field.computed input{background:var(--blue-soft);color:var(--navy);font-weight:600;border-color:var(--blue-line)}
.check{display:flex;align-items:center;gap:9px;margin-bottom:9px;cursor:pointer;font-size:13.5px}
.check input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer}
.hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.6}

.preview-pane{
  padding:26px clamp(10px,2vw,30px) 40px;
  display:flex;justify-content:center;align-items:flex-start;
  background:radial-gradient(circle at 50% 0,#EAEEF2 0,var(--bg) 70%);overflow:auto;
}
.sheet-scaler{transform-origin:top center;transition:transform .12s}

/* ============================ ورقة A4 بترويسة الشركة ============================ */
.sheet{
  width:210mm;min-height:297mm;background:#fff;position:relative;
  padding:12mm 15mm 8mm;
  box-shadow:0 1px 3px rgba(18,32,46,.10),0 18px 50px rgba(18,32,46,.14);
  color:#0E1C28;font-size:10.5pt;line-height:1.6;
  display:flex;flex-direction:column;overflow:hidden;
}
.sheet .wm{position:absolute;bottom:-16mm;inset-inline-start:-14mm;width:78mm;opacity:.5;pointer-events:none}
.sheet > *{position:relative;z-index:1}

/* الترويسة العلوية — الشعار يمين الصفحة كما في ترويسة الشركة */
.lh-head{display:flex;direction:ltr;justify-content:flex-start;align-items:flex-start;margin-bottom:6px}
.lh-head img{width:43mm;height:auto}

.lh-rule{height:1.6pt;background:linear-gradient(to right,var(--navy) 62%,var(--copper) 62%);margin-bottom:8px;border-radius:1pt}

.sheet .subhead{display:flex;justify-content:space-between;font-size:8pt;color:#5C6C79;padding-bottom:9px;border-bottom:1px solid #E4EAEF;margin-bottom:11px}
.sheet .subhead b{color:var(--navy)}
.sheet h1.title{text-align:center;font-size:15pt;font-weight:800;color:var(--navy);margin:2px 0}
.sheet .title-en{text-align:center;font-size:8.6pt;color:var(--copper);letter-spacing:1.1px;margin-bottom:12px;direction:ltr}

.sheet .sec{
  margin:11px 0 5px;font-size:9.4pt;font-weight:700;color:#fff;background:var(--navy);
  padding:3.5px 10px;border-radius:3px;display:flex;justify-content:space-between;
  border-inline-start:3px solid var(--copper);
}
.sheet .sec .en{font-weight:400;font-size:7.8pt;opacity:.85;direction:ltr}

.sheet table{width:100%;border-collapse:collapse;table-layout:fixed}
.sheet td,.sheet th{border:1px solid #C9D4DD;padding:5px 8px;vertical-align:middle;font-size:9.6pt}
.sheet td.lbl{background:#F2F5F8;width:23%;color:#41525F;font-size:8.8pt;line-height:1.35}
.sheet td.lbl .en{display:block;font-size:7pt;color:#8494A1;direction:ltr;text-align:right;letter-spacing:.1px}
.sheet .val:empty::after{content:"\00a0"}
.sheet .note{background:#FAFBFC;border-inline-start:3px solid var(--copper);padding:8px 11px;font-size:8.4pt;color:#41525F;margin:10px 0;border-radius:0 5px 5px 0;line-height:1.75}
.sheet .letter{font-size:11pt;line-height:2.05;margin:14px 0;text-align:justify}
.sheet .letter-en{direction:ltr;text-align:left;font-size:11pt;line-height:1.95;color:#33475A;border-top:1px dashed #D5DEE6;padding-top:12px;margin-top:16px}
.sheet .sigs{margin-top:16px;padding-top:0}

/* توقيع الخطاب — كتلة واحدة إلى يسار الصفحة بلا إطار */
.sheet .letter-sign{margin-top:24px;direction:ltr;display:flex;justify-content:flex-start}
.sheet .letter-sign .sign-block{direction:rtl;width:74mm;text-align:center;padding-bottom:34mm}
.sheet .letter-sign .role{display:block;font-weight:700;color:var(--navy);font-size:11pt;margin-bottom:1.5mm}
.sheet .letter-sign .role .en{display:block;font-weight:400;font-size:8pt;color:#8494A1;direction:ltr;letter-spacing:.3px}
.sheet .letter-sign .cap{display:block;font-size:9.4pt;color:#5C6C79}
.sheet .sigs table td{height:30mm;vertical-align:top;font-size:9pt;color:#41525F;padding:7px 9px}
.sheet .sigs .role{display:block;font-weight:700;color:var(--navy);font-size:9.6pt;margin-bottom:3px}
.sheet .sigs .role .en{font-weight:400;color:#8494A1;font-size:7.4pt;display:block;direction:ltr;text-align:right}
.chk{display:inline-block;margin-inline-end:14px;font-size:9.4pt;white-space:nowrap}
.chk b{font-weight:400;font-family:'Segoe UI Symbol','Noto Sans Symbols 2',var(--font)}

/* الترويسة السفلية — كما في ترويسة الشركة الرسمية */
#lh-foot{margin-top:auto}
.lh-foot{margin-top:0;padding-top:5px;border-top:1.2pt solid var(--navy);direction:ltr;text-align:left}
.lh-foot img{width:122mm;max-width:100%;height:auto;display:block}
.lh-legal{margin-top:4px;font-size:6.6pt;color:#93A2AE;display:flex;justify-content:space-between;gap:10px}
.lh-legal .en{direction:ltr}

/* ============================ الشريط السفلي ============================ */
.actionbar{
  position:sticky;bottom:0;z-index:40;height:var(--actionbar-h);
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;
  padding:0 clamp(14px,3vw,28px);flex-wrap:wrap;
}
.btn{border:1px solid var(--line);background:#fff;border-radius:var(--radius-s);padding:10px 18px;cursor:pointer;font-size:14px;font-weight:600;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--copper);background:#FDFBF9}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-d)}
.zoom{display:flex;align-items:center;gap:9px;margin-inline-start:auto;font-size:12.5px;color:var(--muted)}
.zoom input{width:120px;accent-color:var(--copper)}
.saved{font-size:12.5px;color:var(--blue);opacity:0;transition:.3s}
.saved.on{opacity:1}

/* ============================ الجوال ============================ */
@media screen and (max-width:960px){
  .form-layout{grid-template-columns:1fr}
  .fields-pane{position:static;max-height:none;border-inline-start:0;border-bottom:1px solid var(--line)}
  .preview-pane{padding:16px 8px 30px}
  .sheet-scaler{transform:scale(.42)!important;height:calc(297mm * .42 + 40px)}
  .zoom{display:none}
  .actionbar{height:auto;padding:12px}
  .btn{flex:1 1 auto;text-align:center}
  .brand .btxt b{font-size:14px}
}
@media screen and (max-width:640px){
  .topbar{height:auto;min-height:56px;padding:9px 12px;gap:8px;flex-wrap:nowrap}
  .brand{gap:9px}
  .brand img{height:26px}
  .brand .btxt b{font-size:13.5px;white-space:normal;line-height:1.3}
  .brand .btxt span{display:none}
  .topnav{gap:4px;flex-wrap:nowrap}
  .topnav a,.topnav button{padding:6px 10px;font-size:12.5px}
  .fields-pane{top:0}
}
@media screen and (max-width:520px){
  .sheet-scaler{transform:scale(.30)!important;height:calc(297mm * .30 + 30px)}
}

/* ============================ الطباعة ============================ */
@page{size:A4;margin:0}
@media print{
  html,body{background:#fff;margin:0;padding:0}
  .topbar,.actionbar,.fields-pane,.no-print{display:none!important}
  .form-layout{display:block!important}
  .preview-pane{padding:0!important;background:#fff;display:block!important;overflow:visible!important}
  .sheet-scaler{transform:none!important;height:auto!important;width:auto!important}
  /* عرض ثابت 210 مم ليكون التنسيق واحدًا على كل جهاز،
     وبلا ارتفاع أدنى حتى تبقى الكتلة بقدر محتواها فتسع الصفحة الواحدة
     ولو أضاف المتصفح هوامشه ورأسه (سفاري على الجوال). */
  .sheet{
    box-shadow:none;width:210mm!important;min-height:0!important;max-height:none!important;
    margin:0 auto!important;padding:12mm 14mm 8mm!important;display:block!important;
    overflow:visible!important;page-break-inside:avoid;break-inside:avoid;
  }
  .sheet .wm{bottom:-6mm;inset-inline-start:-8mm;width:62mm}
  .sheet .sec,.sheet td.lbl,.lh-rule,.sheet .wm,    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
}