/* ==================================================================
   Rames — Tema di atas Bootstrap 5.3
   Brand: teal/cyan, glassmorphism ringan, data monospace.
   ================================================================== */
:root {
  --bs-body-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bs-body-font-size: 0.925rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: #12343c;
  --bs-body-bg: #f3f7f8;
  --bs-link-color: #0f766e;
  --bs-link-hover-color: #0d9488;
  
  --accent: #0d9488;
  --accent2: #0f766e;
  --grad: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 55%, #0d9488 100%);
  --border: rgba(13, 90, 80, .12);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

body {
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(45, 212, 191, .14), transparent 60%),
    radial-gradient(760px 460px at -8% 18%, rgba(16, 185, 129, .08), transparent 55%),
    var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
  linear-gradient(rgba(13, 90, 80, .05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(13, 90, 80, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 78%);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: #23c8b5;
}

/* ---------- Typography helpers ---------- */
.mono { font-family: var(--mono); }
code { font-family: var(--mono); font-size: .9em; color: #0f766e; background: rgba(13, 148, 136, .10); padding: 1px 6px; border-radius: 6px; }

/* ---------- Buttons: brand primary ---------- */
.btn-primary {
  background-image: var(--grad);
  border-color: transparent;
  box-shadow: 0 8px 24px -8px rgba(13, 148, 136, .5);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-image: var(--grad);
  border-color: transparent;
  box-shadow: 0 10px 28px -6px rgba(13, 148, 136, .65);
}

/* ---------- Topbar / Navbar ---------- */
.topbar {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.topbar .navbar { padding-top: .4rem; padding-bottom: .4rem; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 17px; letter-spacing: .02em; text-decoration: none;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand:hover, .brand:focus { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mark {
  width: 20px; height: 20px; border-radius: 7px; flex: none;
  background: var(--grad);
  box-shadow: 0 0 18px rgba(20, 184, 166, .45);
  position: relative;
}
.mark::after { content: ""; position: absolute; inset: 6px; border-radius: 3px; background: rgba(255, 255, 255, .9); }
.mark-sm { width: 12px; height: 12px; border-radius: 4px; background: var(--grad); display: inline-block; }

.navbar-nav .nav-link {
  color: var(--bs-secondary-color, #5b7a84);
  font-weight: 500;
  border-radius: 9px;
  padding: .45rem .75rem;
}
.navbar-nav .nav-link:hover { color: var(--bs-body-color); background: rgba(13, 148, 136, .08); }
.navbar-nav .nav-link.active {
  color: #0f766e;
  background: linear-gradient(135deg, rgba(45, 212, 191, .18), rgba(13, 148, 136, .14));
  box-shadow: inset 0 0 0 1px rgba(13, 148, 136, .40);
}
.user { color: var(--bs-secondary-color, #5b7a84); font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #ffffff; font-weight: 800; font-size: 12px;
  box-shadow: 0 0 12px rgba(20, 184, 166, .45); flex: none;
}
.avatar.sm { width: 22px; height: 22px; font-size: 11px; margin-right: 8px; box-shadow: none; }

/* ---------- Page head ---------- */
.page-head h1 { font-weight: 800; letter-spacing: -.01em; }

/* ---------- Tables ---------- */
.table { --bs-table-hover-bg: rgba(13, 148, 136, .05); }
.table thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--bs-secondary-color, #5b7a84);
  background: rgba(13, 148, 136, .06);
  font-weight: 700; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table > :not(caption) > * > * { padding: .75rem 1rem; }

/* ---------- Badges (status) ---------- */
.badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: capitalize; padding: .45em .8em;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
  margin-right: 6px; display: inline-block; vertical-align: 1px;
}
.badge-running { color: #047857; background: rgba(5, 150, 105, .12); }
.badge-deploying { color: #0369a1; background: rgba(2, 132, 199, .12); }
.badge-stopped, .badge-unknown { color: #5b7a84; background: rgba(13, 90, 80, .08); }
.badge-error { color: #be123c; background: rgba(225, 29, 72, .10); }

/* ---------- App info (detail) ---------- */
.app-info { display: flex; flex-wrap: wrap; margin: 0; }
.app-info-item { flex: 1 1 100%; padding: 12px 2px; }
.app-info-item + .app-info-item { border-top: 1px solid var(--border); }
@media (min-width: 768px) {
  .app-info-item { flex: 1 1 50%; }
  .app-info-item:nth-child(-n+2) { border-top: 0; }
  .app-info-item:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--border); }
}
.app-info .k {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--bs-secondary-color, #5b7a84); margin-bottom: 3px; font-weight: 600;
}
.app-info .v { font-weight: 600; word-break: break-word; font-size: 13.5px; }

/* ---------- Tabs (scroll horizontal di layar sempit) ---------- */
.nav-pills.tab-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-secondary-color, #94a3b8) transparent;
}
.nav-pills.tab-scroll .nav-item { flex: 0 0 auto; }
.nav-pills.tab-scroll .nav-link { white-space: nowrap; color: #139081; }
.nav-pills.tab-scroll .nav-link.active { background: #23c8b5; color: white; box-shadow: 0 0 12px rgba(20, 184, 166, .45); }
.nav-pills.tab-scroll::-webkit-scrollbar { height: 5px; }
.nav-pills.tab-scroll::-webkit-scrollbar-thumb {
  background: var(--bs-secondary-color, #94a3b8);
  border-radius: 3px;
}

/* ---------- Forms ---------- */
.form-label { font-weight: 600; color: #2f5d67; }
.form-control:focus { border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20, 184, 166, .20); }
.port-input { max-width: 160px; font-family: var(--mono); }
.form-card { max-width: 640px; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 48px 20px; }
.empty-icon {
  width: 56px; height: 56px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; border-radius: 16px; color: #0f766e;
  background: rgba(45, 212, 191, .12); border: 1px solid rgba(13, 148, 136, .30);
  box-shadow: 0 0 26px -6px rgba(13, 148, 136, .35);
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); color: var(--bs-secondary-color, #5b7a84); }
.footer a { color: inherit; }

/* ---------- Auth ---------- */
.auth-body {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  padding: 20px; position: relative; overflow: hidden;
}
.auth-glow {
  position: fixed; width: 560px; height: 560px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(20, 184, 166, .25), rgba(45, 212, 191, .10) 45%, transparent 70%);
  filter: blur(20px); animation: float 9s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translate(-30%, -20%); } 50% { transform: translate(-10%, -30%); } }
.auth-card {
  position: relative; width: 100%; max-width: 400px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--border); border-radius: 18px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -30px rgba(13, 90, 80, .4), 0 0 0 1px rgba(13, 148, 136, .08);
  overflow: hidden;
}
.auth-brand {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; font-size: 24px; font-weight: 800;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-card .sub { text-align: center; color: var(--bs-secondary-color, #5b7a84); margin: 8px 0 18px; font-size: 13px; }