/* ==========================================================================
   Per-screen layout — built to mirror the real customer-app screens.
   ========================================================================== */

/* ---------- Auth (login / register / verify) ---------- */
.auth { padding: 8px 22px 24px; display: flex; flex-direction: column; min-height: 100%; }
.auth-logo { display: flex; flex-direction: column; align-items: center; margin: 14px 0 18px; }
.auth-logo img { height: 92px; }
.auth-wordmark { font-size: 22px; font-weight: 800; letter-spacing: 0.5px; margin-top: 10px; }
.auth h1 { font-size: 22px; font-weight: 700; text-align: center; margin: 4px 0 4px; }
.auth .sub { text-align: center; color: var(--text-muted); font-size: 14px; margin-bottom: 22px; }
.auth .spacer { flex: 1; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 14px; color: var(--text-muted); }
.forgot { text-align: right; margin: -4px 0 16px; }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--text-faint); text-transform: uppercase; margin: 10px 0 10px; }

.success-state { text-align: center; padding: 40px 26px; display: flex; flex-direction: column; align-items: center; min-height: 100%; justify-content: center; }
.success-state .big-ico {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 20px;
  background: var(--success-bg); color: var(--success);
}
.success-state h2 { font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.success-state p { color: var(--text-muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 26px; max-width: 30ch; }

/* checkbox */
.check-row { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 18px; font-size: 13.5px; color: var(--text-muted); line-height: 1.4; }
.checkbox { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-strong); display: grid; place-items: center; color: #fff; }
.checkbox.on { background: var(--brand-red); border-color: var(--brand-red); }

/* ---------- Home dashboard ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.tile .tile-top { display: flex; align-items: center; justify-content: space-between; }
.tile .tile-num { font-size: 28px; font-weight: 800; line-height: 1; }
.tile .tile-lbl { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 8px; }
.tile .tile-cap { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.activity-row { display: flex; align-items: center; gap: 8px; padding: 12px 0; }
.activity-row .ar-main { flex: 1; min-width: 0; }
.activity-row .ar-ref { font-size: 15px; font-weight: 600; }
.activity-row .ar-mac { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.activity-row .ar-time { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

.machine-mini { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.machine-mini .mm-ico, .machine-ico {
  width: 40px; height: 40px; border-radius: var(--r-md); background: var(--surface-muted);
  display: grid; place-items: center; color: var(--text-muted); flex: 0 0 auto;
}
.machine-mini .mm-main { flex: 1; min-width: 0; }
.machine-mini .mm-name { font-size: 15px; font-weight: 600; }
.machine-mini .mm-sn { font-size: 13px; color: var(--text-muted); margin-top: 1px; }
.open-pill { padding: 3px 9px; border-radius: var(--r-pill); background: var(--primary-container); color: var(--on-primary-container); font-size: 11px; font-weight: 700; }

.banner-card { display: flex; gap: 12px; align-items: flex-start; }
.banner-card .bc-ico { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; flex: 0 0 auto; background: var(--warning-bg); color: var(--warning); }
.banner-card .bc-title { font-size: 16px; font-weight: 600; }
.banner-card .bc-text { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

/* ---------- Search + chips (tickets list) ---------- */
.searchbar { display: flex; align-items: center; gap: 10px; background: var(--surface-muted); border-radius: var(--r-md); padding: 11px 14px; color: var(--text-faint); }
.searchbar input { flex: 1; border: none; background: none; outline: none; font-size: 14px; color: var(--text); }
.chips-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; }
.chips-row::-webkit-scrollbar { display: none; }
.fchip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); display: inline-flex; gap: 6px; align-items: center;
}
.fchip .cnt { font-size: 12px; opacity: 0.7; }
.fchip.on { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.fchip.on .cnt { opacity: 0.85; }
.tools-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 10px; }
.pill-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 600; }
.pill-btn.active { color: var(--info); border-color: var(--info); }

/* ticket card */
.ticket-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 14px 14px 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.ticket-card + .ticket-card { margin-top: 12px; }
.ticket-card .stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.ticket-card .tc-desc { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ticket-card .tc-mac { font-size: 13px; color: var(--text-muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.ticket-card .tc-meta { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.ticket-card .tc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; align-items: center; }
.priority-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; }
.rate-nudge { display: inline-flex; align-items: center; gap: 5px; color: var(--info); font-size: 12.5px; font-weight: 600; margin-top: 10px; }

/* ---------- Ticket detail ---------- */
.detail-head { padding: 4px 0 14px; }
.detail-head .dh-ref { font-size: 22px; font-weight: 800; }
.detail-head .dh-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.kv { display: flex; padding: 7px 0; font-size: 14px; }
.kv .k { width: 116px; flex: 0 0 auto; color: var(--text-muted); }
.kv .v { flex: 1; font-weight: 500; }

/* timeline */
.timeline { padding: 4px 0; }
.tl-step { display: flex; gap: 14px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; flex: 0 0 auto; transition: all 0.3s; }
.tl-dot.done { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.tl-dot.current { border-color: var(--brand-red); box-shadow: 0 0 0 4px rgba(235,30,37,0.16); }
.tl-line { width: 2px; flex: 1; background: var(--border); min-height: 26px; transition: background 0.3s; }
.tl-line.done { background: var(--brand-red); }
.tl-content { padding-bottom: 18px; padding-top: 1px; }
.tl-step:last-child .tl-content { padding-bottom: 0; }
.tl-title { font-size: 14.5px; font-weight: 600; color: var(--text-faint); transition: color 0.3s; }
.tl-title.reached { color: var(--text); }
.tl-title.current { color: var(--brand-red); font-weight: 700; }
.tl-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

.report-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.report-row:last-child { border-bottom: none; }
.report-row .rr-k { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: var(--text-faint); text-transform: uppercase; }
.report-row .rr-v { font-size: 14px; margin-top: 3px; line-height: 1.45; }

.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-thumb {
  width: 80px; height: 80px; border-radius: var(--r-md); overflow: hidden; position: relative;
  background: linear-gradient(135deg, #d7dde4, #aeb8c4); display: grid; place-items: center; color: #5a6573;
}
.photo-thumb.add { border: 1.5px dashed var(--border-strong); background: var(--surface); color: var(--text-muted); }
.photo-thumb .vbadge { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,0.18); }
.photo-thumb .rm { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--danger); color: #fff; border: 2px solid var(--surface); display: grid; place-items: center; font-size: 12px; }
.photo-wrap { position: relative; }
.detail-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }

/* ---------- Feedback ---------- */
.fb-stars { display: flex; gap: 6px; justify-content: center; margin: 6px 0 22px; }
.fb-star { background: none; border: none; color: var(--border-strong); padding: 4px; transition: transform 0.12s; }
.fb-star.on { color: #F5A623; }
.fb-star:active { transform: scale(1.2); }
.fb-q { font-size: 18px; font-weight: 700; text-align: center; margin: 6px 0 4px; }
.fb-readonly-stars { display: flex; gap: 4px; justify-content: center; margin: 12px 0; color: #F5A623; }

/* ---------- Machines list ---------- */
.machine-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; box-shadow: 0 1px 2px rgba(16,24,40,0.04); }
.machine-card + .machine-card { margin-top: 12px; }
.machine-card .mc-main { flex: 1; min-width: 0; }
.machine-card .mc-name { font-size: 15.5px; font-weight: 600; }
.machine-card .mc-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ---------- More / profile menu ---------- */
.identity { display: flex; align-items: center; gap: 14px; padding: 6px 2px 18px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-red); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 800; flex: 0 0 auto; }
.identity .id-name { font-size: 18px; font-weight: 700; }
.identity .id-mail { font-size: 13px; color: var(--text-muted); }
.role-pill { display: inline-block; margin-top: 5px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-muted); border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.menu-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.menu-card + .menu-card { margin-top: 14px; }
.menu-item { display: flex; align-items: center; gap: 14px; padding: 15px 16px; font-size: 15px; font-weight: 500; color: var(--text); }
.menu-item .mi-ico { color: var(--text-muted); display: grid; place-items: center; }
.menu-item .mi-arrow { color: var(--text-faint); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger .mi-ico { color: var(--danger); }

/* ---------- Notifications list ---------- */
.notif-item { display: flex; gap: 12px; padding: 14px 16px; align-items: flex-start; border-bottom: 1px solid var(--border); }
.notif-item.unread { background: var(--info-bg); }
.notif-item .ni-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--surface-muted); color: var(--text-muted); }
.notif-item.unread .ni-ico { background: var(--primary-container); color: var(--brand-red); }
.notif-item .ni-main { flex: 1; min-width: 0; }
.notif-item .ni-title { font-size: 14.5px; font-weight: 600; }
.notif-item.unread .ni-title { font-weight: 700; }
.notif-item .ni-text { font-size: 13px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.notif-item .ni-time { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }
.notif-item .ni-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--info); flex: 0 0 auto; margin-top: 6px; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 50px 26px; display: flex; flex-direction: column; align-items: center; }
.empty .e-ico { color: var(--text-faint); margin-bottom: 14px; opacity: 0.7; }
.empty h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.empty p { font-size: 13.5px; color: var(--text-muted); margin: 0; max-width: 28ch; }

/* ---------- "Developed by StraViTech" footer (More page) ---------- */
.dev-foot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 12px 8px; text-align: center;
}
.dev-foot:active { opacity: 0.7; }
.dev-foot .dev-logo { height: 30px; width: auto; flex: 0 0 auto; }
.dev-foot .dev-text { font-size: 12.5px; color: var(--text-muted); line-height: 1.3; text-align: left; }
.dev-foot .dev-text b { color: var(--text); font-weight: 700; }
.dev-foot .dev-text .vi { color: #0E9FBF; }
.dev-foot .dev-url { font-size: 11.5px; color: var(--info); margin-top: 1px; }

/* spacing helpers */
.mt-sm { margin-top: 8px; } .mt-md { margin-top: 12px; } .mt-lg { margin-top: 16px; } .mt-xl { margin-top: 24px; }
.gap-wrap { padding-bottom: 90px; }