:root{
  --brand:#0a4cff;
  --text:#222;
  --muted:#666;
  --bg:#ffffff;
  --border:#e6e6e6;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  line-height:1.5;
  padding-top:72px; /* space for fixed header */
}

/* Header / nav */
header{
  position:fixed; top:0; left:0; right:0;
  background:#fff;
  border-bottom:1px solid var(--border);
  z-index:1000;
}
nav{
  max-width:1100px; margin:0 auto;
  height:72px;
  display:flex; align-items:center; gap:24px;
  padding:0 16px;
}
.logo-container img{height:40px; width:auto}
.nav-links{margin-left:auto; display:flex; gap:12px; flex-wrap:wrap}
.nav-link{
  text-decoration:none; color:#333; font-weight:600;
  padding:8px 10px; border-radius:8px;
}
.nav-link:hover{background:#f3f5ff; color:#0a2cff}
.nav-link.active{background:#e9efff; color:#0a2cff}

/* Layout */
.container{max-width:1100px; margin:24px auto; padding:0 16px}
.section{background:#fff; border:1px solid var(--border); border-radius:12px; padding:20px}

/* Buttons */
.btn{
  background:var(--brand); color:#fff; text-decoration:none;
  display:inline-block; padding:10px 14px; border-radius:10px; border:none; cursor:pointer;
}
.btn.secondary{background:#f3f5ff; color:#0a2cff; border:1px solid #d7dfff}
.btn:hover{filter:brightness(0.95)}

/* Cards grid */
.card-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px}
.card{border:1px solid var(--border); border-radius:12px; padding:16px; background:#fff}
.badge{font-size:12px; background:#eef3ff; color:#0a2cff; padding:4px 8px; border-radius:999px}
.price{font-weight:700}

/* Tables */
.table{width:100%; border:1px solid var(--border); border-radius:12px; overflow:auto}
.table-row{display:grid; gap:12px; padding:12px 14px; border-top:1px solid var(--border)}
.table-head{background:#fafafa; font-weight:700; position:sticky; top:0}
.emp-grid{grid-template-columns: 1.2fr 1.2fr 1.1fr .8fr .7fr 1.4fr 1fr .9fr .9fr}

/* Forms */
input[type="text"], input[type="email"], input[type="password"], input[type="number"]{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
}
.form-row{display:flex; gap:12px; margin:10px 0}
label{min-width:120px;color:#333;font-weight:600}

/* Helpers */
.subtitle{color:var(--muted); margin-top:-6px}
.searchbar{margin:16px 0}
.note{color:var(--muted)}

/* Center the whole page section nicely */
.centerpage{
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;         /* vertical comfort */
  justify-content: center;     /* horizontal centering */
}
.centerwrap{
  width: 100%;
  max-width: 1100px;
  text-align: center;          /* center headings and text */
}

/* Center card layout and limit card width so they don't stretch too wide */
.card-grid.centered-grid{
  justify-items: center;       /* center each grid item */
}
.card{
  width: 100%;
  max-width: 360px;            /* nice readable card width */
  text-align: left;            /* keep inner text readable; change to center if you prefer */
}

/* Tabs look nicer when centered */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

/* Inputs style for white theme */
.searchbar input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
}

/* Keep headings tight on white */
.section h1{ margin-top: 0; }

/* --- Navbar height handling --- */
body { padding-top: 72px; }            /* room for fixed navbar */
header { position: fixed; top: 0; left: 0; right: 0; }

/* --- Normalize page containers (remove absolute centering) --- */
.container {
  position: static !important;         /* kill absolute positioning */
  top: auto !important;
  left: auto !important;
  transform: none !important;
  max-width: 1100px;
  padding: 0 16px;
  margin: 24px auto;                   /* standard top space under navbar */
}

/* If you added any 'centerpage/centerwrap' earlier, disable vertical centering */
.centerpage { min-height: auto !important; display: block !important; }
.centerwrap { text-align: center; }     /* keep headings centered if you used it */

/* General section card */
.section { background:#fff; border:1px solid #e6e6e6; border-radius:12px; padding:20px; }

/* Solutions page grid centered but not vertically pushed */
.card-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; justify-items:center; }
.card { width:100%; max-width:360px; }

/* Reduce excessive page-specific top margins (old theme) */
.cheatsheet { margin-top: 24px !important; }
.blog-posts { margin-top: 24px !important; }

/* Make sure the page can scroll normally */
html, body { height:auto; overflow: auto; }

/* Admin form should flow normally under the fixed navbar */
.admin-box{
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 24px auto !important;
  max-width: 640px;            /* optional: nice width */
}

/* ---- Cheat sheet layout ---- */
.cheat-wrap { max-width: 900px; margin: 0 auto; }
.cheat-heading { text-align: center; margin-bottom: 16px; }
.cheat-heading h1 { margin: 0; }
.cheat-heading h2 { margin: 6px 0 10px; color: #555; font-weight: 600; }
.cheat-note {
  background: #fff7e6; border: 1px solid #ffe8b3;
  color: #7a5c00; padding: 10px 12px; border-radius: 10px; text-align: center;
}
.cheat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
.cheat-card { border: 1px solid #e6e6e6; border-radius: 12px; padding: 16px; background: #fff; }
.cheat-card pre { background: #0f172a; color: #c7ffb4; padding: 12px; border-radius: 8px; overflow-x: auto; }

/* ---- Employee cards ---- */
.emp-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.emp-card h3 { font-size: 20px; }
.mini-form { margin-top: 10px; }
.mini-form label { display:block; font-weight:600; margin-bottom:6px; }
.mini-form input[type="number"] { max-width: 180px; }


/* Keep code blocks LTR even in RTL pages */
.rtl pre, .rtl code, .rtl pre code {
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
}

/* Keep email/phone LTR even on Arabic (RTL) pages */
.rtl .form-row input[type="email"],
.rtl .form-row input[type="tel"],
.rtl .form-row input[dir="ltr"] {
  direction: ltr;
  text-align: left;
}


/* Consistent form layout on both EN/AR pages */
.form-row {
  display: grid;
  grid-template-columns: 180px 1fr;  /* label | input */
  gap: 12px;
  align-items: center;
  margin: 10px 0;
}

.form-row label {
  font-weight: 600;
  white-space: nowrap;
}

/* Make inputs full width and tidy */
.form-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  background: #fff;
  outline: none;
}

/* Keep email/phone LTR even on RTL pages */
.rtl .form-row input[type="email"],
.rtl .form-row input[type="tel"],
.rtl .form-row input[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* On small screens, stack label above field */
@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .form-row label { margin-bottom: 2px; }
}


/* Better bullets/padding on RTL lists */
.rtl .spec {
  padding-right: 1.25rem;
  padding-left: 0;
  direction: rtl;
}
.rtl .spec li {
  list-style-position: inside;
}

/* Make cards read right-to-left on Arabic pages */
.rtl .card,
.rtl .emp-card {
  direction: rtl;
  text-align: right;
}

/* Ensure inner text aligns right as well */
.rtl .card h1,
.rtl .card h2,
.rtl .card h3,
.rtl .card p,
.rtl .card .muted,
.rtl .card .card-text,
.rtl .card .spec,
.rtl .emp-card h3,
.rtl .emp-card .spec {
  text-align: right;
}

/* Bullet lists look tidy on RTL */
.rtl .spec {
  padding-right: 1.25rem;
  padding-left: 0;
  list-style-position: inside;
}

/* Keep LTR where it matters (emails/phones/commands/inputs) */
.rtl a[href^="mailto:"],
.rtl .form-row input[type="email"],
.rtl .form-row input[type="tel"],
.rtl .form-row input[dir="ltr"],
.rtl pre,
.rtl code,
.rtl pre code {
  direction: ltr;
  text-align: left;
}