:root{--panel:rgba(9,15,38,.82);--line:#263a79;--text:#eaf3ff;--muted:#92a8cf;--cyan:#00eaff;--pink:#ff42d0;--blue:#6d7dff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#172f69,#050716 42%,#02030a);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;min-height:100vh}.matrix{position:fixed;inset:0;background-image:linear-gradient(rgba(0,234,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,234,255,.05) 1px,transparent 1px);background-size:38px 38px;pointer-events:none}.hidden{display:none!important}.login{min-height:100vh;display:grid;place-items:center}.login-card{width:420px;max-width:92vw;text-align:center;background:linear-gradient(180deg,rgba(13,24,62,.9),rgba(5,8,24,.92));border:1px solid var(--line);border-radius:32px;padding:34px;box-shadow:0 0 90px rgba(0,234,255,.18)}.logo-orb,.small-orb{margin:auto;border-radius:50%;background:conic-gradient(var(--cyan),var(--pink),var(--blue),var(--cyan));box-shadow:0 0 35px var(--cyan)}.logo-orb{width:86px;height:86px}.small-orb{width:42px;height:42px;margin:0}.login h1{font-size:36px;margin:18px 0 0}.login h2{margin:4px 0 0;color:var(--cyan)}.login p{color:var(--muted)}input,select,textarea{width:100%;background:#060b1e;border:1px solid #2b3d7e;color:var(--text);border-radius:14px;padding:13px;margin:8px 0;outline:none}textarea{min-height:130px}button{background:rgba(16,27,64,.9);border:1px solid #34488e;color:var(--text);border-radius:14px;padding:12px 16px;cursor:pointer}button:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(0,234,255,.16)}button.primary,.login button{background:linear-gradient(135deg,var(--cyan),var(--blue));border:0;color:#03101f;font-weight:800}.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}aside{position:sticky;top:0;height:100vh;padding:22px;background:rgba(5,8,24,.86);border-right:1px solid var(--line);backdrop-filter:blur(16px)}.brand{display:flex;gap:12px;align-items:center;margin-bottom:22px}.brand b{display:block;font-size:20px}.brand span{display:block;color:var(--muted);font-size:12px}.nav{width:100%;text-align:left;margin:5px 0;background:transparent;color:var(--muted)}.nav.active{color:white;background:linear-gradient(90deg,rgba(0,234,255,.16),rgba(255,66,208,.08));border-color:var(--cyan)}main{padding:26px}header{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:20px}header h1{margin:0;font-size:32px}header p{margin:6px 0;color:var(--muted)}.tab{display:none}.tab.active{display:block}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat,.panel{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 24px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(16px);margin-bottom:16px}.stat span{color:var(--muted)}.stat b{display:block;font-size:34px;margin-top:8px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.flow div{border:1px solid var(--line);border-radius:18px;padding:16px;background:rgba(2,7,22,.72)}table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:12px;border-bottom:1px solid rgba(42,61,126,.75);text-align:left}th{color:#c8d7ff;background:rgba(255,255,255,.04)}.panel{overflow:auto}.hint{color:var(--muted)}.hall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}.hall{border:1px solid var(--line);border-radius:18px;padding:15px;background:#050a1d}.hall b{font-size:22px}.hall span{display:block;color:var(--muted);margin-top:5px}#toast{position:fixed;right:24px;bottom:24px;background:#07102c;border:1px solid var(--cyan);border-radius:18px;padding:14px 18px;opacity:0;transform:translateY(15px);transition:.2s}#toast.show{opacity:1;transform:translateY(0)}@media(max-width:900px){.app{grid-template-columns:1fr}aside{height:auto;position:relative}.stats,.grid{grid-template-columns:1fr}}
.disabled-input {
  opacity: 0.45;
  cursor: not-allowed;
}

.or-divider {
  text-align: center;
  margin: 8px 0;
  font-weight: 700;
  color: #00eaff;
  letter-spacing: 2px;
}

.field-label {
  display: block;
  margin: 8px 0 6px;
  font-size: 13px;
  color: #9befff;
}

.inline-alloc {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inline-alloc select {
  min-width: 160px;
}

.monitor-card {
  min-height: 260px;
}

.monitor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.monitor-actions button {
  padding: 7px 10px;
  font-size: 12px;
}

.monitor-status {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  font-weight: 700;
}

.monitor-status.WAITING,
.monitor-status.NOT_REACHED {
  border: 1px solid rgba(255,255,255,0.2);
}

.monitor-status.NEARING {
  border: 1px solid #ffcc00;
}

.monitor-status.RUNNING {
  border: 1px solid #00ff99;
}

.monitor-status.PASSED_OR_CHECK {
  border: 1px solid #ff6666;
}

button.danger {
  border: 1px solid rgba(255, 80, 80, 0.8);
  background: rgba(120, 0, 0, 0.35);
  color: #ffb3b3;
}

button.danger:hover {
  background: rgba(200, 0, 0, 0.55);
  color: #ffffff;
}

/* =========================================================
   RESPONSIVE UI — PEOPLE'S LAW KHC CONTROL ROOM
   Desktop / Tablet / Mobile / Small Mobile
   ========================================================= */

/* Prevent horizontal breaking */
* {
  box-sizing: border-box;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  -webkit-text-size-adjust: 100%;
}

/* Tables should scroll instead of breaking mobile layout */
.panel {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  white-space: nowrap;
}

/* Long message columns can wrap */
#telegramTable td:nth-child(3),
#logsTable td:nth-child(4),
#monitorHistoryTable td:nth-child(7),
#entriesTable td:nth-child(6),
#eodTable td:nth-child(5) {
  white-space: normal;
  min-width: 220px;
}

/* Better form look */
input,
select,
textarea,
button {
  max-width: 100%;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* Monitor cards */
.monitor-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.monitor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.monitor-actions button {
  flex: 1 1 120px;
}

/* Inline allocation */
.inline-alloc {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inline-alloc select {
  min-width: 160px;
}

/* =========================================================
   TABLET VIEW
   ========================================================= */
@media (max-width: 1100px) {
  .app {
    grid-template-columns: 220px 1fr;
  }

  aside {
    width: 220px;
  }

  main {
    padding: 18px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .hall-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  header {
    gap: 12px;
  }
}

/* =========================================================
   MOBILE VIEW
   ========================================================= */
@media (max-width: 768px) {
  .app {
    display: block;
  }

  aside {
    position: relative;
    width: 100%;
    min-height: auto;
    padding: 12px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }

  .brand {
    margin-bottom: 10px;
  }

  .brand b {
    font-size: 15px;
  }

  .brand span {
    font-size: 12px;
  }

  aside .nav {
    display: inline-flex;
    width: auto;
    margin: 4px;
    padding: 9px 11px;
    font-size: 12px;
    border-radius: 999px;
  }

  main {
    padding: 12px;
  }

  header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  header h1 {
    font-size: 24px;
  }

  header p {
    font-size: 13px;
  }

  header > div:last-child {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  header input[type="date"] {
    flex: 1;
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .stat {
    min-height: 80px;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .panel {
    padding: 14px;
    border-radius: 18px;
  }

  .panel h2 {
    font-size: 18px;
  }

  input,
  select,
  textarea {
    width: 100%;
    min-height: 44px;
    font-size: 15px;
  }

  button {
    min-height: 42px;
    font-size: 14px;
  }

  .primary {
    width: 100%;
  }

  .flow {
    grid-template-columns: 1fr;
  }

  .hall-grid {
    grid-template-columns: 1fr;
  }

  .hall {
    min-height: auto;
    padding: 14px;
  }

  .monitor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .monitor-actions button {
    width: 100%;
    font-size: 12px;
    padding: 9px 8px;
  }

  .inline-alloc {
    flex-direction: column;
    align-items: stretch;
  }

  .inline-alloc select,
  .inline-alloc button {
    width: 100%;
  }

  table {
    font-size: 12px;
  }

  table th,
  table td {
    padding: 8px;
  }

  .login {
    padding: 16px;
  }

  .login-card {
    width: 100%;
    max-width: 420px;
    padding: 24px 18px;
  }

  .login-card h1 {
    font-size: 28px;
  }

  .login-card h2 {
    font-size: 16px;
  }
}

/* =========================================================
   SMALL MOBILE VIEW
   ========================================================= */
@media (max-width: 480px) {
  main {
    padding: 10px;
  }

  aside {
    padding: 10px;
  }

  aside .nav {
    font-size: 11px;
    padding: 8px 9px;
  }

  header h1 {
    font-size: 21px;
  }

  .panel {
    padding: 12px;
    border-radius: 16px;
  }

  .panel h2 {
    font-size: 16px;
  }

  .stat b {
    font-size: 26px;
  }

  .monitor-actions {
    grid-template-columns: 1fr;
  }

  .or-divider {
    margin: 6px 0;
  }

  table {
    font-size: 11px;
  }

  table th,
  table td {
    padding: 7px;
  }

  #toast {
    left: 10px;
    right: 10px;
    bottom: 14px;
    width: auto;
    text-align: center;
  }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */
@media (max-width: 360px) {
  aside .nav {
    width: 100%;
    justify-content: center;
  }

  header > div:last-child {
    flex-direction: column;
  }

  .login-card h1 {
    font-size: 24px;
  }

  .login-card {
    padding: 20px 14px;
  }
}