/* OWNER: F1. App shell, navbar, views, tables, modals, toasts.
   Seeded by the planner: the sizing rules below are what make the Code tab (F2) able to
   measure itself - keep #app-shell / .pc-view height-filling. Terminal/GoldenLayout rules
   live in code.css (F2). */

:root {
  --pc-navbar-h: 48px;
  --pc-rail-w: 220px;
  --pc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

html, body { height: 100%; }

.pc-body {
  height: 100%;
  overflow: hidden;               /* the Code tab manages its own scrolling */
}

.pc-navbar {
  min-height: var(--pc-navbar-h);
  padding-block: 0.15rem;
}
.pc-navbar .nav-link { padding-block: 0.2rem; }

.pc-shell {
  height: calc(100% - var(--pc-navbar-h));
}

.pc-view { height: 100%; }
/* Sessions/Settings scroll internally; the Code view never does. */
#view-sessions, #view-settings { overflow-y: auto; }

.pc-logs {
  max-height: 60vh;
  overflow: auto;
  font-family: var(--pc-mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* status pills reused by the sessions table and the Code rail (F2) */
.pc-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--bs-secondary); }
.pc-dot-running { background: var(--bs-success); }
.pc-dot-exited  { background: var(--bs-secondary); }
.pc-dot-error   { background: var(--bs-danger); }
.pc-dot-pending { background: var(--bs-warning); }


/* ---------------------------------------------------------------- navbar */
.pc-navbar .navbar-brand { font-weight: 600; letter-spacing: .01em; }
.pc-navbar .nav-pills .nav-link { border-radius: .35rem; }
.pc-navbar .nav-pills .nav-link.active { background-color: var(--bs-primary); }
#backend-badge { font-weight: 500; }

/* ------------------------------------------------------- sessions table */
#sessions-table { font-size: .9rem; }
#sessions-table td { vertical-align: middle; }
#sessions-table thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
#sessions-table .font-monospace { font-family: var(--pc-mono); font-size: .75rem; }
.pc-row-actions .btn { --bs-btn-padding-x: .4rem; }
#sessions-table tr[data-name] .badge { font-weight: 500; }

/* --------------------------------------------------- settings sub-tabs */
#settings-subtabs .nav-link { cursor: pointer; }
.pc-subview { max-width: 78rem; }
#general-form .form-text { font-size: .75rem; }
#backend-test-result table { font-size: .8rem; }
#portainer-key-hint { font-weight: 400; }

/* -------------------------------------------------------- images panel */
.pc-recipe-card .card-title { font-size: .95rem; }
.pc-recipe-card .card-body { padding: .75rem .9rem; }
#jobs-list .list-group-item { background: transparent; }

/* A <form> wrapping header/body/footer inside .modal-content breaks Bootstrap's
   .modal-dialog-scrollable layout (the body is no longer a flex child, so it grows past the
   dialog and the footer gets clipped). Make the form the flex column instead. */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* -------------------------------------- session modal repeatable rows */
.pc-kv-row .form-control,
.pc-kv-row .form-select { font-family: var(--pc-mono); font-size: .8rem; }
#session-form-body hr { opacity: .15; }
#session-form-body .form-label { font-weight: 600; font-size: .85rem; }

/* --------------------------------------------------------------- toasts */
#toast-area { z-index: 1090; }
#toast-area .toast { min-width: 18rem; }
#toast-area .toast-body { white-space: pre-wrap; word-break: break-word; }

/* ---------------------------------------------------------------- misc */
#login-modal .modal-content { border-radius: .6rem; }
.pc-view .alert a { text-decoration: underline; }