* { box-sizing: border-box; }
body { font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
       margin:0; color:#222; background:#f5f7fb; }
a { color:#0d6efd; text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width:1150px; margin:0 auto; padding:0 16px; }
.topbar { background:#fff; border-bottom:1px solid #e6e8ec; }
.topbar nav a, .topbar nav .link-btn { margin-left:14px; font-size:.95rem; }
.flex-between { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { font-weight:700; font-size:1.1rem; color:#222; }
.card { background:#fff; border:1px solid #e6e8ec; border-radius:10px;
        padding:20px; margin-bottom:16px; }
label { display:block; margin-bottom:12px; font-size:.9rem; }
label input, label select, label textarea {
  width:100%; padding:9px 11px; border:1px solid #ccd2dd; border-radius:6px;
  margin-top:4px; font:inherit; background:#fff;
}
label.checkbox { display:flex; gap:8px; align-items:center; }
label.checkbox input { width:auto; margin:0; }
.btn { display:inline-block; padding:8px 14px; border-radius:6px; border:1px solid #ccd2dd;
       background:#fff; cursor:pointer; font:inherit; }
.btn.primary { background:#0d6efd; color:#fff; border-color:#0d6efd; }
.btn.small { padding:4px 8px; font-size:.85rem; }
.link-btn { background:none; border:0; color:#0d6efd; cursor:pointer; font:inherit; padding:0; }
.inline { display:inline; }
.alert { padding:10px 14px; border-radius:6px; margin-bottom:12px; font-size:.95rem; }
.alert-error   { background:#fde8ea; color:#7a1226; border:1px solid #f5c2c7; }
.alert-success { background:#e7f8ee; color:#0f5132; border:1px solid #badbcc; }
.grid { display:grid; gap:16px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width:800px) {
  .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr; }
}
.table { width:100%; border-collapse:collapse; background:#fff;
         border:1px solid #e6e8ec; border-radius:8px; overflow:hidden; }
.table th, .table td { text-align:left; padding:10px 12px;
                       border-bottom:1px solid #eef0f4; font-size:.93rem; }
.table th { background:#f8fafc; font-weight:600; color:#445; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px;
         font-size:.78rem; font-weight:600; }
.status-open         { background:#e7f1ff; color:#0a58ca; }
.status-in_progress  { background:#fff4d6; color:#7a5a00; }
.status-pending_user { background:#f3e8ff; color:#5b21b6; }
.status-resolved     { background:#e7f8ee; color:#0f5132; }
.status-closed       { background:#e9ecef; color:#495057; }
.status-rejected     { background:#fde8ea; color:#7a1226; }
.status-sent         { background:#e7f8ee; color:#0f5132; }
.status-pending      { background:#fff4d6; color:#7a5a00; }
.status-failed       { background:#fde8ea; color:#7a1226; }
.pri-low      { background:#e9ecef; color:#495057; }
.pri-medium   { background:#e7f1ff; color:#0a58ca; }
.pri-high     { background:#fff4d6; color:#7a5a00; }
.pri-critical { background:#fde8ea; color:#7a1226; }
.stat { text-align:center; }
.stat-num { font-size:2rem; font-weight:700; color:#0d6efd; }
.stat-lbl { font-size:.85rem; color:#667; text-transform:uppercase; letter-spacing:.04em; }
.description { background:#f8fafc; padding:14px; border-radius:8px; margin:12px 0; }
.reply.internal { background:#fffbea; border-color:#fde7a8; }
.timeline { list-style:none; padding-left:0; margin:0; }
.timeline li { border-left:3px solid #0d6efd; padding:6px 12px; margin-bottom:10px;
               background:#f8fafc; }
.muted { color:#667; } .small { font-size:.83rem; }
.footer { text-align:center; padding:24px 0; color:#889; font-size:.85rem; }
.pagination { margin-top:16px; display:flex; gap:6px; }
.pagination a { padding:6px 10px; border:1px solid #ccd2dd; border-radius:6px; background:#fff; }
.pagination a.active { background:#0d6efd; color:#fff; border-color:#0d6efd; }
.filters { display:flex; gap:8px; margin:12px 0; }
.filters input, .filters select { padding:8px; border:1px solid #ccd2dd; border-radius:6px; }

/* ---- Navigation ---- */
.main-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: flex-end;
}
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-list li { display: flex; }
.nav-list a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 6px;
  color: #334;
  font-size: .93rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-list a:hover {
  background: #eef2f8;
  text-decoration: none;
}
.nav-list a.active {
  background: #0d6efd;
  color: #fff;
}
.nav-list a.active:hover { background: #0b5ed7; }
.nav-plus {
  display: inline-block;
  font-weight: 700;
  color: #0d6efd;
  margin-right: 2px;
}
.nav-list a.active .nav-plus { color: #fff; }
.nav-sep {
  width: 1px;
  height: 22px;
  background: #e6e8ec;
  margin: 0 8px;
}
.nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 14px;
  border-left: 1px solid #e6e8ec;
}
.nav-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
}
.nav-user-info strong {
  font-size: .88rem;
  color: #222;
}
.nav-role {
  font-size: .7rem;
  margin-top: 2px;
}
.badge.role-admin { background: #fde8ea; color: #7a1226; }
.badge.role-staff { background: #fff4d6; color: #7a5a00; }
.badge.role-user  { background: #e7f1ff; color: #0a58ca; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .topbar .container { flex-wrap: wrap; }
  .main-nav {
    flex-basis: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef0f4;
    margin-top: 8px;
  }
  .nav-list { flex-wrap: wrap; }
  .nav-user {
    border-left: 0;
    padding-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .nav-user-info { text-align: left; }
  .nav-sep { display: none; }
}