:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #222535;
  --border: #2d3148;
  --text: #e2e4f0;
  --muted: #6b7280;
  --accent: #6366f1;
  --accent-h: #4f52d9;
  --green: #22c55e;
  --yellow: #f59e0b;
  --red: #ef4444;
  --blue: #3b82f6;
  --radius: 10px;
  --sidebar-w: 220px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  background: #0f1117;
  color: #e2e4f0;
  display: flex;
  min-height: 100vh; /* grow with content so the page scrolls naturally */
  line-height: 1.5;
}

a {
  color: #6366f1;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

code {
  background: #222535;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.sidebar {
  width: 220px;
  height: 100vh;
  align-self: flex-start; /* stay 100vh and stick instead of stretching */
  background: #1a1d27;
  border-right: 1px solid #2d3148;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid #2d3148;
}
.sidebar-logo svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.nav-links {
  list-style: none;
  padding: 10px 8px;
  flex: 1;
}
.nav-links li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  color: #6b7280;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.nav-links li a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.nav-links li a:hover {
  background: #222535;
  color: #e2e4f0;
  text-decoration: none;
}
.nav-links li a.active {
  background: #6366f1;
  color: #fff;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid #2d3148;
}

.logout-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
}
.logout-link svg {
  width: 16px;
  height: 16px;
}
.logout-link:hover {
  color: #ef4444;
  text-decoration: none;
}

.main {
  flex: 1;
  min-width: 0; /* let children shrink instead of forcing page-wide overflow */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 12px;
  border-bottom: 1px solid #2d3148;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar h2 {
  font-size: 20px;
  font-weight: 600;
}

.topbar-date {
  color: #6b7280;
  font-size: 13px;
}

.back-link {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 2px;
}
.back-link:hover {
  color: #e2e4f0;
}

.status-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  padding: 24px 28px 0;
}

.stat-card {
  background: #1a1d27;
  border: 1px solid #2d3148;
  border-radius: 10px;
  padding: 18px 20px;
  border-left: 4px solid #2d3148;
}
.stat-card.stat-open {
  border-left-color: #f59e0b;
}
.stat-card.stat-progress {
  border-left-color: #3b82f6;
}
.stat-card.stat-closed {
  border-left-color: #22c55e;
}
.stat-card.stat-clients {
  border-left-color: #6366f1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.card {
  background: #1a1d27;
  border: 1px solid #2d3148;
  border-radius: 10px;
  margin: 20px 28px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #2d3148;
}
.card-header h3 {
  font-size: 14px;
  font-weight: 600;
}

.hidden {
  display: none !important;
}

.table {
  width: 100%;
  border-collapse: collapse;
}
.table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  border-bottom: 1px solid #2d3148;
}
.table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid #2d3148;
  vertical-align: middle;
}
.table tbody tr:last-child td {
  border-bottom: none;
}
.table tbody tr:hover {
  background: #222535;
}
.table tbody tr.row-open {
  background: rgba(99, 102, 241, 0.04);
}

.muted {
  color: #6b7280;
  font-size: 12px;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.badge-open {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.badge-in_progress {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.badge-closed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.badge-priority-high {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.badge-priority-normal {
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}

.badge-priority-low {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid #2d3148;
  background: #222535;
  color: #e2e4f0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn:hover {
  background: #2d3148;
  text-decoration: none;
}

.btn-primary {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}
.btn-primary:hover {
  background: #4f52d9;
  border-color: #4f52d9;
}

.btn-danger {
  background: transparent;
  border-color: #ef4444;
  color: #ef4444;
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-group label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}
.form-group input, .form-group select, .form-group textarea {
  background-color: #0f1117;
  border: 1px solid #2d3148;
  border-radius: 7px;
  padding: 8px 12px;
  color: #e2e4f0;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: #6366f1;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px;
}

.form-group-full {
  grid-column: 1/-1;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px 0;
  flex-wrap: wrap;
}
.filter-bar select {
  background-color: #1a1d27;
  border: 1px solid #2d3148;
  border-radius: 7px;
  padding: 6px 12px;
  color: #e2e4f0;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.alert {
  margin: 16px 28px 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
}

.alert-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.alert-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.ticket-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  padding: 20px 28px;
  align-items: start;
}

.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.message {
  background: #1a1d27;
  border: 1px solid #2d3148;
  border-radius: 10px;
  padding: 16px 18px;
}
.message-admin {
  border-left: 3px solid #6366f1;
}
.message-client {
  border-left: 3px solid #6b7280;
}
.message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}
.message-meta strong {
  font-size: 13px;
}
.message-subject {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.message-body {
  line-height: 1.6;
  white-space: pre-wrap;
}

.reply-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reply-form textarea {
  background: #1a1d27;
  border: 1px solid #2d3148;
  border-radius: 8px;
  padding: 12px;
  color: #e2e4f0;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.reply-form textarea:focus {
  border-color: #6366f1;
}

.ticket-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.info-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  padding: 14px 18px;
}
.info-list dt {
  color: #6b7280;
  font-size: 12px;
  align-self: center;
}
.info-list dd {
  font-size: 13px;
}

.empty-state {
  padding: 32px;
  text-align: center;
  color: #6b7280;
}

.api-key {
  font-size: 11px;
}

.text-red {
  color: #ef4444;
}

.text-green {
  color: #22c55e;
}

.actions-cell {
  white-space: nowrap;
  display: flex;
  gap: 6px;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.countdown {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}

.countdown-overdue {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.countdown-today {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.countdown-soon {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.countdown-ok {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.badge-billing-active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.badge-billing-overdue {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.badge-billing-suspended {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.badge-billing-cancelled {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.edit-row td {
  background: #222535;
  padding: 0 !important;
}

.billing-edit-form {
  padding: 4px 0 0;
}

.billing-edit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 16px 0;
}
@media (max-width: 900px) {
  .billing-edit-grid {
    grid-template-columns: 1fr 1fr;
  }
}

body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  background: #1a1d27;
  border: 1px solid #2d3148;
  border-radius: 10px;
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.login-logo svg {
  width: 40px;
  height: 40px;
}
.login-logo h1 {
  font-size: 18px;
  font-weight: 600;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nav-badge {
  margin-left: auto;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}
@keyframes badgePop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.nav-badge.badge-pop { animation: badgePop .4s ease; }

.fix-status-queued {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.fix-status-generating {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.fix-status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.fix-status-approved {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.fix-status-rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.fix-status-applied {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.fix-status-failed {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.review {
  padding: 20px 28px;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 14px 18px;
  background: #1a1d27;
  border: 1px solid #2d3148;
  border-radius: 10px;
}
.review-meta div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-meta span.muted {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.review-meta strong, .review-meta a, .review-meta code {
  font-size: 14px;
}

.review-card {
  background: #1a1d27;
  border: 1px solid #2d3148;
  border-radius: 10px;
  overflow: hidden;
}

.review-card-head {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid #2d3148;
}

.review-card-body {
  padding: 14px 16px;
  line-height: 1.6;
  font-size: 14px;
}

.diff {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  overflow-x: auto;
  background: #0f1117;
}

.diff-line {
  white-space: pre;
  padding: 0 14px;
  min-height: 1.5em;
}

.diff-meta {
  color: #6b7280;
}

.diff-hunk {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.07);
}

.diff-add {
  color: #7ee2a8;
  background: rgba(34, 197, 94, 0.12);
}

.diff-del {
  color: #f5a3a3;
  background: rgba(239, 68, 68, 0.12);
}

.diff-ctx {
  color: #e2e4f0;
}

.review-actions {
  display: flex;
  gap: 12px;
}
.review-actions form {
  display: flex;
}

.btn-approve,
.btn-reject {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
}

.btn-approve {
  background: #22c55e;
  border-color: #22c55e;
  color: #06240f;
}

.btn-approve:hover {
  background: #1ba84e;
}

.btn-reject {
  background: transparent;
  border-color: #ef4444;
  color: #ef4444;
}

.btn-reject:hover {
  background: rgba(239, 68, 68, 0.1);
}

.reject-box {
  background: #1a1d27;
  border: 1px solid #2d3148;
  border-radius: 10px;
  padding: 16px;
}
.reject-box label {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
}
.reject-box textarea {
  width: 100%;
  background: #0f1117;
  border: 1px solid #2d3148;
  border-radius: 7px;
  padding: 10px 12px;
  color: #e2e4f0;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  outline: none;
  margin-bottom: 10px;
}
.reject-box textarea:focus {
  border-color: #6366f1;
}

@media (max-width: 768px) {
  .ticket-layout {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .main {
    min-height: auto;
  }
  .review {
    padding: 16px;
  }
  .topbar {
    padding: 16px;
  }
  .review-actions {
    flex-direction: column;
  }
  .stats-grid {
    padding: 16px 16px 0;
    gap: 10px;
  }
  .card {
    margin: 16px;
    overflow-x: auto;
  }
  .alert {
    margin: 12px 16px 0;
  }
  .filter-bar {
    padding: 12px 16px 0;
  }
  .ticket-layout {
    padding: 16px;
  }
  .form-grid {
    padding: 16px;
  }
}

/* ── Polish: buttons, inputs, loading, motion ──────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.main>.card,.topbar{animation:fadeUp .4s cubic-bezier(.2,.7,.3,1) both}
button,input,textarea,select,.btn{transition:transform .12s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease}
.btn{position:relative;overflow:hidden}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-h));box-shadow:0 4px 14px -4px rgba(99,102,241,.5)}
.btn-primary:hover{box-shadow:0 9px 24px -7px rgba(99,102,241,.65);background:linear-gradient(135deg,var(--accent),var(--accent-h))}
.btn::after{content:"";position:absolute;top:0;left:-125%;width:65%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);transition:left .55s ease}
.btn:hover::after{left:135%}
.btn.is-loading{color:transparent !important;pointer-events:none}
.btn.is-loading::before{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
input:focus,textarea:focus,select:focus,.form-group input:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(99,102,241,.16);outline:none}
.table tbody tr{transition:background .12s ease}
.nav-links a{transition:background .15s,color .15s,padding-left .15s}
.nav-links a:hover{padding-left:18px}

/* ── Mobile drawer nav (admin) ──────────────────────────────────────────── */
.admin-menu-btn{display:none;position:fixed;top:12px;left:12px;z-index:210;width:42px;height:42px;background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,left .28s cubic-bezier(.4,0,.2,1)}
.admin-menu-btn span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s ease,opacity .2s ease,width .25s ease}
.admin-menu-btn:hover{background:var(--surface2);box-shadow:0 7px 18px -7px rgba(0,0,0,.6)}
.admin-menu-btn:active{transform:scale(.93)}
.admin-menu-btn:hover span:nth-child(1){width:22px}
.admin-menu-btn:hover span:nth-child(3){width:13px}
.nav-open .admin-menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg);width:20px}
.nav-open .admin-menu-btn span:nth-child(2){opacity:0}
.nav-open .admin-menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg);width:20px}
.admin-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:150;opacity:0;pointer-events:none;transition:opacity .25s ease}

@media(max-width:820px){
  .admin-menu-btn{display:flex}
  .sidebar{position:fixed;left:0;top:0;height:100vh;width:230px;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:200;box-shadow:0 0 44px rgba(0,0,0,.55)}
  .nav-open .sidebar{transform:translateX(0)}
  .nav-open .admin-menu-btn{left:176px}
  .admin-overlay{display:block}
  .nav-open .admin-overlay{opacity:1;pointer-events:auto}
  .main{padding-top:56px}
  .topbar{padding-top:8px}
  .table{white-space:nowrap}          /* wide tables scroll inside their card instead of breaking layout */
}
.fix-status-failed,.fix-status-deploy_failed{background:rgba(239,68,68,.15);color:#ef4444}

/* ── Unified form controls (admin) ─────────────────────────────────────────
   color-scheme:dark makes the browser render native dropdown popups + the
   caret/spinners dark instead of the default white system list.            */
select,input,textarea{color-scheme:dark}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=search],input[type=date],input[type=tel],
input:not([type]),select,textarea{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 12px;
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:hover,select:hover,textarea:hover{border-color:#3a3f5c}
textarea{resize:vertical;line-height:1.5}
/* Custom caret + no native arrow on selects */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a90b3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
select:focus{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236366f1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}
/* Option list — honored by Chromium; other browsers fall back to dark via color-scheme */
select option{background:var(--surface);color:var(--text)}
/* Keep the filter-bar selects on the slightly-lighter surface, custom caret still applies */
.filter-bar select{background-color:var(--surface2)}
.filter-bar select,.filter-bar input{background-position:right 11px center;padding-top:7px;padding-bottom:7px}
.form-group select,.filter-bar select{padding-right:34px}

/* Live auto-refresh toast */
.live-toast{position:fixed;bottom:18px;right:18px;z-index:400;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:9px 15px;font-size:13px;font-weight:600;box-shadow:0 10px 30px -8px rgba(0,0,0,.6);animation:liveToastIn .2s ease both}
@keyframes liveToastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}