/* Cafentra v2 (Surge) brand — cybercafe website. RTL, Persian-first. */

/* ── Local fonts (vendored — no Google Fonts at runtime) ──────────────── */
@font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --canvas:        #0A0912;
  --chrome:        #07060D;
  --window:        #0F0E1A;
  --card:          #16142A;
  --brand-surface: #241F44;
  --violet:        #7C5CFF;
  --violet-bright: #9B86FF;
  --green:         #2BE08B;
  --green-dim:     #18B86E;
  --amber:         #FFB02E;
  --red:           #FF5470;
  --reserved:      #6E8BFF;
  --postpaid:      #C77DFF;
  --text-hi:       #FFFFFF;
  --text-mid:      #A29FBD;
  --text-dim:      #4A4762;
  --hairline:      rgba(255,255,255,.08);
  --hairline-strong: #2A2748;
  --radius:        8px;
  --radius-sm:     6px;
  --font: 'Vazirmatn', 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Vazirmatn', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--text-hi);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.7;
  min-height: 100vh;
  background-image: linear-gradient(160deg, #0A0912 0%, #120F26 100%);
}

a { color: var(--violet-bright); text-decoration: none; }
a:hover { color: var(--violet); }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar { background: var(--chrome); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 20; }
.topbar-inner { max-width: 1080px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--text-hi); font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: 18px; flex-shrink: 0; }
.brand i { color: var(--violet); font-size: 22px; }
.brand-name { background: linear-gradient(90deg, var(--violet) 0%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav { display: flex; gap: 6px; flex: 1; min-width: 0; }
.nav-item { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--radius-sm); color: var(--text-mid); font-weight: 500; white-space: nowrap; }
.nav-item i { font-size: 17px; }
.nav-item:hover { background: var(--card); color: var(--text-hi); }
.nav-item.active { background: var(--brand-surface); color: var(--text-hi); }
.nav-item.active i { color: var(--violet-bright); }
.user-chip { display: flex; align-items: center; gap: 8px; color: var(--text-mid); font-size: 13px; flex-shrink: 0; }
.user-chip span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip i { color: var(--violet-bright); font-size: 20px; }
.user-chip .logout { color: var(--text-mid); display: flex; }
.user-chip .logout:hover { color: var(--red); }

/* Narrow screens: icon-only nav so the user chip never gets pushed off-screen. The
   breakpoints sit lower than they would with longer labels — «شارژ» / «رزرو» are short. */
@media (max-width: 540px) {
  .topbar-inner { gap: 10px; padding: 8px 12px; }
  .brand { font-size: 15px; }
  .nav-item { padding: 7px 10px; }
  .nav-item span { display: none; }
  .user-chip { font-size: 12px; }
  .user-chip span { max-width: 110px; }
}
@media (max-width: 380px) {
  /* Only the user icon + logout fit — drop the name text. */
  .user-chip span { display: none; }
  .user-chip { gap: 6px; }
}

/* ── Layout ──────────────────────────────────────────────── */
.page { max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; }
.foot { max-width: 1080px; margin: 0 auto; padding: 18px 20px 30px; color: var(--text-dim); font-size: 12px; text-align: center; }
.page-title { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.page-sub { color: var(--text-mid); margin: 0 0 22px; }

/* ── Cards & grids ───────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
}
.card { background: var(--card); border-radius: var(--radius); padding: 18px; border: 1px solid transparent; }
.card.hover:hover { border-color: var(--hairline-strong); }
.card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 0 0 10px; font-size: 15px; }
.card-title i { color: var(--violet-bright); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { background: var(--card); border-radius: var(--radius); padding: 16px 18px; }
.stat .label { color: var(--text-mid); font-size: 12px; margin-bottom: 4px; }
.stat .value { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.stat .value.green { color: var(--green); }
.stat .value.violet { color: var(--violet-bright); }

/* ── Buttons & inputs ────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--violet); color: #fff; border: 0; border-radius: var(--radius-sm); padding: 10px 18px; font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; transition: background .12s ease, opacity .12s ease; }
.btn:hover { background: #6A4BE8; color: #fff; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-ghost { background: transparent; color: var(--text-mid); border: 1px solid var(--hairline-strong); }
.btn-ghost:hover { color: var(--text-hi); background: var(--brand-surface); }
.btn-green { background: var(--green); color: #06140D; }
.btn-green:hover { background: #3AF09B; color: #06140D; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }
.input, select.input { width: 100%; background: var(--window); color: var(--text-hi); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font); font-size: 14px; outline: none; }
.input:focus { border-color: var(--green); }
label.field { display: block; margin-bottom: 14px; }
label.field span { display: block; color: var(--text-mid); font-size: 13px; margin-bottom: 6px; }
label.field em.req { color: var(--red); font-style: normal; }
.form-card { max-width: 420px; margin: 40px auto 0; }
.form-card .card { padding: 28px; }
.form-actions { display: flex; gap: 10px; margin-top: 6px; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { display: flex; align-items: center; gap: 10px; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-weight: 500; border: 1px solid; }
.alert i { font-size: 20px; }
.alert-ok    { background: rgba(43,224,139,.08); border-color: rgba(43,224,139,.35); color: var(--green); }
.alert-warn  { background: rgba(255,176,46,.08);  border-color: rgba(255,176,46,.35);  color: var(--amber); }
.alert-danger{ background: rgba(255,84,112,.08);  border-color: rgba(255,84,112,.35);  color: #FF8298; }

/* ── PC tiles ────────────────────────────────────────────── */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pc-tile { background: var(--card); border-radius: 10px; padding: 14px; text-align: center; cursor: pointer; border: 2px solid var(--hairline); transition: border-color .12s, transform .12s; position: relative; }
.pc-tile:hover { border-color: var(--violet); }
.pc-tile.selected { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,92,255,.25); }
.pc-tile .pc-icon { font-size: 28px; margin-bottom: 4px; }
.pc-tile .pc-name { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.pc-tile .pc-sub { font-size: 12px; color: var(--text-mid); margin-top: 2px; }
.pc-tile .pc-rate { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.pc-tile[data-status="Ready"]      { border-color: rgba(43,224,139,.5); }
.pc-tile[data-status="Ready"] .pc-icon { color: var(--green); }
.pc-tile[data-status="Occupied"]   { border-color: rgba(255,84,112,.5); }
.pc-tile[data-status="Occupied"] .pc-icon { color: var(--red); }
.pc-tile[data-status="Locked"]     { border-color: rgba(255,176,46,.5); }
.pc-tile[data-status="Locked"] .pc-icon { color: var(--amber); }
.pc-tile[data-status="Reserved"]   { border-color: rgba(110,139,255,.5); }
.pc-tile[data-status="Reserved"] .pc-icon { color: var(--reserved); }
.pc-tile[data-status="Offline"]    { opacity: .5; }
.pc-tile[data-status="Offline"] .pc-icon { color: var(--text-dim); }
.pc-tile.disabled, .pc-tile[data-disabled="1"] { opacity: .35; pointer-events: none; }
.pc-tile .badge { position: absolute; top: 8px; left: 8px; font-size: 10px; background: var(--brand-surface); color: var(--text-mid); border-radius: 4px; padding: 1px 6px; }

/* ── Tables ──────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.table th { color: var(--text-mid); font-size: 12px; font-weight: 500; }
.table td.num, .table th.num { font-family: var(--display); text-align: right; direction: rtl; }
.pill { display: inline-block; border-radius: 4px; padding: 2px 9px; font-size: 12px; font-weight: 500; }
.pill-ok   { background: rgba(43,224,139,.12);  color: var(--green); }
.pill-warn { background: rgba(255,176,46,.12);  color: var(--amber); }
.pill-danger{background: rgba(255,84,112,.12);  color: #FF8298; }
.pill-info { background: rgba(110,139,255,.14); color: var(--reserved); }
.pill-dim  { background: rgba(255,255,255,.06); color: var(--text-mid); }
.muted { color: var(--text-mid); }
.small { font-size: 12px; }
.row { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.row > * { flex: 1 1 180px; }
/* One input per row below 800px. A single clean breakpoint (instead of the old 495px one)
   removes the awkward 2+1 wrap state that appeared between ~495px and ~713px. */
@media (max-width: 800px) {
  .row { flex-direction: column; align-items: stretch; }
  .row > * { flex: 1 1 100%; }
}
.mt { margin-top: 18px; }
.mb { margin-bottom: 18px; }
.center { text-align: center; }
.hero-login { text-align: center; margin: 26px 0 10px; }
.hero-login h1 { font-family: var(--display); font-size: 30px; letter-spacing: -.02em; margin: 0 0 6px; }
.hero-login p { color: var(--text-mid); margin: 0 0 26px; }
.balance-hero { text-align: center; padding: 26px 18px; background: linear-gradient(135deg, #16142A 0%, #1E1A3A 100%); border: 1px solid var(--hairline); }
.balance-hero .amount { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -.02em; color: var(--green); }
.balance-hero .amount small { font-size: 18px; color: var(--text-mid); }
.quick-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.quick-amounts button { flex: 1 1 90px; background: var(--window); color: var(--text-hi); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); padding: 10px 6px; font-family: var(--display); cursor: pointer; }
.quick-amounts button:hover { border-color: var(--violet); color: var(--violet-bright); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.25); border-top-color: var(--violet-bright); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Device picker: view toggle + tile grid ──────────────── */
.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.card-head .card-title { margin: 0; }
.view-toggle { display: inline-flex; gap: 4px; background: var(--window); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 3px; margin-inline-start: auto; }
.view-btn {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent;
  color: var(--text-mid); font-family: var(--font); font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.view-btn i { font-size: 14px; }
.view-btn:hover { color: var(--text-hi); }
.view-btn.active { background: var(--brand-surface); color: var(--violet-bright); }
.view-body { display: none; }
.view-body.active { display: block; }

.dev-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.dev-tile {
  position: relative; display: flex; flex-direction: column; min-height: 112px;
  border-radius: var(--radius); border: 2px solid var(--hairline-strong); background: var(--card);
  padding: 8px; cursor: pointer; user-select: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease, opacity .12s ease;
}
.dev-tile:hover { border-color: var(--violet); transform: translateY(-1px); }
.dev-tile.selected {
  border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet), 0 4px 18px -6px rgba(124,92,255,.55);
}
.dev-tile.disabled { opacity: .58; cursor: not-allowed; }
.dev-tile.disabled:hover { border-color: var(--red); transform: none; box-shadow: none; }

.dt-top { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.dt-type { font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: var(--radius-sm); background: var(--brand-surface); color: var(--violet-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-rate { font-size: 9px; color: var(--text-dim); white-space: nowrap; }
.dt-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.dt-mid i { font-size: 20px; }
.dt-name { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--text-hi); }
.dt-status { font-size: 10px; font-weight: 700; }
.dt-foot { min-height: 18px; display: flex; align-items: center; justify-content: center; }
.dt-check { display: none; width: 16px; height: 16px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 11px; align-items: center; justify-content: center; }
.dev-tile.selected .dt-check { display: inline-flex; }

/* Tile state is binary: reservable in the window → Free (green); clashing → Reserved (red).
   Live status is intentionally ignored — any device not booked in the period is reservable. */
.dev-tile.st-free      { background: rgba(43,224,139,.07); border-color: rgba(43,224,139,.32); }
.dev-tile.st-free .dt-mid i, .dev-tile.st-free .dt-status { color: var(--green); }
.dev-tile.st-reserved  { background: rgba(255,84,112,.07); border-color: rgba(255,84,112,.38); }
.dev-tile.st-reserved .dt-mid i, .dev-tile.st-reserved .dt-status { color: var(--red); }

/* ── Reservation gantt (now → +12h) ──────────────────────── */
.gantt-scroll { overflow-x: auto; direction: ltr; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--card); }
.gantt { min-width: 2100px; direction: ltr; }
.gantt-head, .gantt-row { display: flex; flex-direction: row; border-bottom: 1px solid var(--hairline); }
.gantt-head { background: var(--window); position: sticky; top: 0; z-index: 5; }
.gantt-label-col {
  flex: 0 0 130px; width: 130px; padding: 6px 8px; direction: rtl; text-align: right;
  border-right: 1px solid var(--hairline); display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  position: sticky; left: 0; z-index: 4; background: var(--card);
}
.gantt-head .gantt-label-col { background: var(--window); }
.gantt-track { position: relative; flex: 1; display: flex; flex-direction: row; height: 44px; min-width: 0; }
.gantt-track .tick { flex: 1 1 0; min-width: 0; border-right: 1px solid var(--hairline); }
.gantt-time { height: 26px; }
.hour-cell {
  flex: 2 1 0; min-width: 0; border-right: 1px solid var(--hairline); font-size: 10px; color: var(--text-dim);
  display: flex; align-items: center; padding-inline-start: 5px; white-space: nowrap;
}
.gantt-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 3; opacity: .75; }
.gantt-bar {
  position: absolute; top: 8px; bottom: 8px; background: var(--reserved); border-radius: 4px;
  z-index: 2; min-width: 3px; overflow: hidden;
}
.gantt-row { cursor: pointer; transition: background .1s ease; }
.gantt-row:hover { background: rgba(124,92,255,.06); }
.gantt-row.selected { background: rgba(124,92,255,.12); }
.gantt-row.selected .gantt-label-col { box-shadow: inset 3px 0 0 var(--violet); }
.gantt-row.clash { opacity: .38; cursor: not-allowed; }
.gantt-row.clash .gantt-bar { opacity: 1; }
.gantt-row.clash .g-name { text-decoration: line-through; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.live-dot[data-status="Ready"]    { background: var(--green); }
.live-dot[data-status="Occupied"] { background: var(--red); }
.live-dot[data-status="Locked"]   { background: var(--amber); }
.live-dot[data-status="Reserved"] { background: var(--reserved); }
.live-dot[data-status="Offline"]  { background: var(--text-dim); }
.g-name { font-family: var(--display); font-weight: 700; font-size: 13px; white-space: nowrap; }
.g-check {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 15px; height: 15px;
  border: 2px solid var(--text-dim); border-radius: 4px; background: var(--window);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .12s ease, background .12s ease; margin: 0;
}
.gantt-row:hover .g-check { border-color: var(--violet); }
.gantt-row.selected .g-check { background: var(--violet); border-color: var(--violet); }
.g-check:checked { background: var(--violet); border-color: var(--violet); }
.g-check:checked::after {
  content: ''; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
/* ── Reservation summary bar ─────────────────────────────── */
.summary-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--window); border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  padding: 12px 16px; margin: 4px 0 14px;
}
.sel-msg { flex: 1 1 100%; }
#sel-summary { flex: 1; min-width: 0; }
#sel-balance { white-space: nowrap; }

/* ── One-time guide bubble (reserve page) — hugs the highlighted element, no dimming ── */
.guide-bubble { position: fixed; z-index: 100; width: 300px; max-width: calc(100vw - 24px); background: var(--card); border: 1px solid var(--hairline-strong); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.guide-bubble[hidden] { display: none; }
.guide-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.guide-head i { font-size: 18px; color: var(--violet-bright); }
.guide-title { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--text-hi); }
.guide-text { color: var(--text-mid); font-size: 12.5px; line-height: 1.9; margin: 0 0 12px; }
.guide-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.guide-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline-strong); }
.guide-dot.on { background: var(--violet); }
.guide-actions { display: flex; gap: 8px; justify-content: flex-end; }
.guide-highlight { outline: 2px solid var(--violet); outline-offset: 5px; border-radius: var(--radius); }
.sel-total { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--green); white-space: nowrap; }
.hidden { display: none !important; }
.actions { display: flex; gap: 10px; align-items: stretch; }
.actions .btn-block { flex: 1; }