/* ════════════════════════════════════════════════════════════
   optica-skin.css — סגנון רכיבים "דמוי תוכנה"
   ════════════════════════════════════════════════════════════
   🔴 הבודקת (17/09): *"צריך שזה ירגיש כמו תוכנה רגילה ולא ככה.
   אולי פונטים, אולי גודל האותיות — אני לא יודעת לומר מה."*

   האבחנה: מסך הערכות הקיים משנה **צבעים בלבד**, ולכן כל הערכות הן
   אותה תוכנה בגוון אחר — וזה בדיוק מה שלא דיבר אליה. מה שגורם
   לתוכנה להרגיש "רגילה" אינו הצבע אלא **הרכיב**: כפתור בולט עם
   מסגרת שנלחץ פנימה, שדה טקסט שקוע, טבלה עם קווי רשת, לשונית
   שמחוברת לתוכן.

   ⚙️ פעיל **רק** כש-‎<html data-optica-skin="pc">‎ — כלומר רק למי
   שבחר את הערכה. אף מסך אינו משתנה לאף אחד אחר.
   ════════════════════════════════════════════════════════════ */

html[data-optica-skin="pc"] {
  --pc-face:   #f0f0f0;   /* פני הרכיב */
  --pc-light:  #ffffff;   /* קצה מואר  */
  --pc-shadow: #a0a0a0;   /* קצה מוצל  */
  --pc-line:   #8a8a8a;   /* מסגרת     */
  --pc-sel:    #2a6bd4;   /* בחירה     */
}

/* ── כפתור: בולט, ונלחץ פנימה ──────────────────────────────
   זה הפרט שהעין מזהה מיד כ"תוכנה". כפתור שטוח בלי מסגרת
   נראה כמו אתר; כפתור עם קצה מואר מלמעלה ומוצל מלמטה נראה
   כמו משהו שאפשר ללחוץ עליו. */
html[data-optica-skin="pc"] button,
html[data-optica-skin="pc"] .btn,
html[data-optica-skin="pc"] input[type="button"],
html[data-optica-skin="pc"] input[type="submit"] {
  background: linear-gradient(180deg, var(--pc-light) 0%, var(--pc-face) 48%, #e4e4e4 100%);
  color: #1a1a1a;
  border: 1px solid var(--pc-line);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.14);
  padding: 5px 14px;
  font-weight: 400;
  text-shadow: none;
  transition: none;                 /* תוכנה לא "מתמוססת" */
}
html[data-optica-skin="pc"] button:hover,
html[data-optica-skin="pc"] .btn:hover {
  background: linear-gradient(180deg, #fff 0%, #eaf3fd 48%, #d9e9fb 100%);
  border-color: var(--pc-sel);
}
html[data-optica-skin="pc"] button:active,
html[data-optica-skin="pc"] .btn:active {
  /* נלחץ **פנימה** — ההבדל בין כפתור לבין מלבן צבוע */
  background: #dcdcdc;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,.28);
  transform: translateY(1px);
}
html[data-optica-skin="pc"] button:disabled,
html[data-optica-skin="pc"] .btn:disabled {
  background: #ececec; color: #9a9a9a; border-color: #c6c6c6;
  box-shadow: none; text-shadow: 0 1px 0 #fff;
}
/* כפתור ראשי — עדיין "כפתור", רק צבוע */
html[data-optica-skin="pc"] .btn-primary,
html[data-optica-skin="pc"] .btn-p,
html[data-optica-skin="pc"] .run-btn,
html[data-optica-skin="pc"] .checkout-btn {
  background: linear-gradient(180deg, #5b9ae8 0%, var(--pc-sel) 50%, #1d55b3 100%);
  color: #fff; border-color: #17458f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 1px rgba(0,0,0,.2);
}

/* ── שדות: שקועים, לבנים ────────────────────────────────── */
html[data-optica-skin="pc"] input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
html[data-optica-skin="pc"] select,
html[data-optica-skin="pc"] textarea,
html[data-optica-skin="pc"] .inp,
html[data-optica-skin="pc"] .fld input,
html[data-optica-skin="pc"] .date-inp {
  background: #fff;
  color: #111;
  border: 1px solid #7a7a7a;
  border-top-color: #5c5c5c;        /* שקיעה: הקצה העליון כהה יותר */
  border-radius: 2px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.10);
  padding: 4px 7px;
}
html[data-optica-skin="pc"] input:focus,
html[data-optica-skin="pc"] select:focus,
html[data-optica-skin="pc"] textarea:focus {
  border-color: var(--pc-sel);
  outline: 1px solid rgba(42,107,212,.35);
  outline-offset: -2px;
}

/* ── טבלאות: קווי רשת וכותרת בולטת ────────────────────────
   טבלה בלי קווים נקראת כרשימה; עם קווים היא נקראת כנתונים. */
html[data-optica-skin="pc"] table { border-collapse: collapse; }
html[data-optica-skin="pc"] th {
  background: linear-gradient(180deg, #fbfbfb 0%, var(--pc-face) 100%);
  color: #1a1a1a;
  border: 1px solid #c8c8c8;
  border-bottom-color: var(--pc-line);
  font-weight: 600;
  padding: 5px 9px;
}
html[data-optica-skin="pc"] td {
  border: 1px solid #dcdcdc;
  padding: 4px 9px;
}
html[data-optica-skin="pc"] tbody tr:nth-child(even) { background: #fafafa; }
html[data-optica-skin="pc"] tbody tr:hover { background: #e8f0fb; }

/* ── משטחים: מסגרת דקה במקום זוהר ────────────────────────── */
html[data-optica-skin="pc"] .card,
html[data-optica-skin="pc"] .section,
html[data-optica-skin="pc"] .modal,
html[data-optica-skin="pc"] .pair {
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  box-shadow: none;
}
html[data-optica-skin="pc"] .modal,
html[data-optica-skin="pc"] .cust-modal {
  box-shadow: 0 3px 14px rgba(0,0,0,.28);
}
/* כותרת חלון — פס עליון, כמו חלון של תוכנה */
html[data-optica-skin="pc"] .modal-head,
html[data-optica-skin="pc"] .modal-title,
html[data-optica-skin="pc"] .cust-modal-head {
  background: linear-gradient(180deg, #e9eef6 0%, #dbe3ee 100%);
  border-bottom: 1px solid #b8c2cf;
  font-weight: 700;
}

/* ── לשוניות: מחוברות לתוכן ─────────────────────────────── */
html[data-optica-skin="pc"] .tabs { border-bottom: 1px solid var(--pc-line); gap: 2px; }
html[data-optica-skin="pc"] .tab,
html[data-optica-skin="pc"] .tabs button {
  background: linear-gradient(180deg, #f6f6f6, #e4e4e4);
  border: 1px solid #b9b9b9;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
  padding: 5px 14px;
  color: #333;
}
html[data-optica-skin="pc"] .tab.active,
html[data-optica-skin="pc"] .tab.on,
html[data-optica-skin="pc"] .tabs button.on {
  background: #fff;
  border-bottom: 1px solid #fff;
  font-weight: 700;
  color: #111;
}

/* ── סרגל הצד: רשימת תפריט, לא כרטיסים ──────────────────── */
html[data-optica-skin="pc"] .sidebar { background: #eef0f3; border-left: 1px solid #c9cdd3; }
html[data-optica-skin="pc"] .nav-item {
  border-radius: 0;
  border: 0;
  padding: 6px 12px;
  color: #23272c;
}
html[data-optica-skin="pc"] .nav-item:hover  { background: #d8e6f8; }
html[data-optica-skin="pc"] .nav-item.active { background: var(--pc-sel); color: #fff; }

/* ── מיקוד מקלדת: המלבן המקווקו המוכר ──────────────────── */
html[data-optica-skin="pc"] :focus-visible { outline: 1px dotted #333; outline-offset: 2px; }

/* עיטורים שאין להם מקום בתוכנה עסקית */
html[data-optica-skin="pc"] .bg-grid,
html[data-optica-skin="pc"] .bg-glow { display: none !important; }