/* Logging in, the user menu in the top bar, and the users dialog. */

/* ------------------------------------------------------------ login screen */

.auth {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(125, 255, 224, 0.06), transparent 60%),
    #0e1012;
}
.auth-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(100%, 340px);
  padding: 26px 26px 18px;
  border: 1px solid #2c3236;
  border-radius: 10px;
  background: linear-gradient(180deg, #181b1e, #121416);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #e9e6de;
}
.auth-brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.auth-card h2 { margin: 0 0 6px; font: 700 13px var(--font); letter-spacing: 0.22em; text-transform: uppercase; }
.auth-sub { margin: 0 0 10px; font: 500 12px/1.45 var(--font); color: #9fa9a6; }
.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 6px 0;
  font: 700 10px var(--font);
  letter-spacing: 0.14em;
  color: #9fa9a6;
}
.auth-card input {
  padding: 9px 10px;
  border: 1px solid #36403d;
  border-radius: 4px;
  background: #070908;
  color: var(--vfd);
  font: 500 15px var(--mono);
}
.auth-card input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.auth-submit {
  margin-top: 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: 4px;
  font: 700 11px var(--font);
  letter-spacing: 0.14em;
  cursor: pointer;
}
.auth-submit:disabled { opacity: 0.6; cursor: wait; }
.auth-error { min-height: 1.3em; margin: 8px 0 0; font: 500 12px var(--font); color: #ff8a7a; }

/* --------------------------------------------------------------- user menu */

.user-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; }
.user-btn #user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0.04em; }
.user-icon {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #c9cdd1 0 28%, transparent 30%), radial-gradient(circle at 50% 120%, #c9cdd1 0 52%, transparent 54%);
  flex: none;
}
.user-btn.admin .user-icon {
  background: radial-gradient(circle at 50% 36%, #f0c040 0 28%, transparent 30%), radial-gradient(circle at 50% 120%, #f0c040 0 52%, transparent 54%);
}
.rail-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  border: 1px solid #2c3236;
  border-radius: 6px;
  background: #101315;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}
.rail-menu-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px 10px; font: 500 12px var(--font); color: #9fa9a6; }
.rail-menu-head b { color: #e9e6de; }
.rail-menu-item {
  padding: 9px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #dfe2e5;
  font: 700 10px var(--font);
  letter-spacing: 0.14em;
  text-align: left;
  cursor: pointer;
}
.rail-menu-item:hover, .rail-menu-item:focus-visible { background: #1d2226; outline: none; }
.rail-menu-item.danger { color: #ff8a7a; }

/* ---------------------------------------------------------------- projects */

.rail-menu.left { left: 0; right: auto; }
.project-btn { display: inline-flex; align-items: center; gap: 7px; max-width: 260px; }
.project-caption { font: 700 8px var(--font); letter-spacing: 0.16em; color: #aab1b8; }
.project-btn #project-name {
  overflow: hidden;
  font: 600 11px var(--mono);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vfd);
}
.projects-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; margin-bottom: 12px; }
.projects-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  background: #0b0e0d;
}
.projects-row.current { box-shadow: inset 0 0 0 1px #2d5fae; }
.projects-name { overflow: hidden; font: 600 13px var(--mono); color: var(--vfd); text-overflow: ellipsis; white-space: nowrap; }
.projects-when { display: block; margin-top: 2px; font: 500 10px var(--font); color: #7d8784; }

/* ------------------------------------------------------------ users dialog */

.dialog-wide { width: min(94vw, 600px); }
.dialog-note { margin: 0 0 10px !important; font: 500 11px/1.4 var(--font); color: #8b9390; }
.dialog label.check { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 8px; font: 500 12px var(--font); letter-spacing: 0; color: #c9cdd1; }
.dialog label.check input { width: 15px; height: 15px; padding: 0; accent-color: #2d5fae; }
.dialog button.small { padding: 6px 10px; font-size: 10px; }
.dialog button:disabled { opacity: 0.35; cursor: default; }

.users-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow: auto; margin-bottom: 14px; }
.users-row { display: grid; grid-template-columns: 1fr 96px 56px 64px 72px; align-items: center; gap: 8px; }
.users-head { font: 700 9px var(--font); letter-spacing: 0.16em; color: #7d8784; }
.users-row > span:not(.users-name) { text-align: center; }
.users-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.users-name input { flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px; }
.users-row input[type="checkbox"] { width: 16px; height: 16px; padding: 0; accent-color: #f0c040; }
.users-tags { display: flex; gap: 4px; }
.users-tag {
  padding: 2px 5px;
  border-radius: 3px;
  background: #23292c;
  color: #c9cdd1;
  font: 700 8px var(--font);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.users-tag.warn { background: #4a3512; color: #ffcf7a; }
.users-new { padding-top: 12px; border-top: 1px solid #262c2a; }
.users-new h4 { margin: 0 0 8px; font: 700 9px var(--font); letter-spacing: 0.2em; color: #7d8784; }
.users-new-row { display: grid; grid-template-columns: 1fr 1fr 104px auto; gap: 8px; margin-bottom: 10px; }
.users-new-row input { min-width: 0; }

/* DEVICES (admins): each device online or taken offline. */
.catalog-hint { margin: 0 0 12px; font: 500 11px/1.45 var(--font); color: #8b9390; }
.catalog-list { display: flex; flex-direction: column; gap: 3px; max-height: 56vh; overflow: auto; margin-bottom: 14px; padding-right: 4px; }
.catalog-category { margin: 10px 0 4px; font: 700 9px var(--font); letter-spacing: 0.2em; color: #7d8784; }
.catalog-category:first-child { margin-top: 0; }
.catalog-row { display: grid; grid-template-columns: 9em 1fr 76px; align-items: center; gap: 10px; padding: 3px 0; }
.catalog-name { font: 700 12px var(--font); color: #e4e7ea; }
.catalog-desc { min-width: 0; overflow: hidden; font: 500 11px var(--font); color: #8b9390; white-space: nowrap; text-overflow: ellipsis; }
.catalog-row.off .catalog-name { color: #ffcf7a; }
.catalog-switch {
  padding: 5px 0;
  border: 1px solid #2f5e3e;
  border-radius: 3px;
  background: #16301f;
  color: #8fe0a8;
  font: 700 9px var(--font);
  letter-spacing: 0.14em;
  cursor: pointer;
}
.catalog-switch.off { border-color: #6a4a14; background: #4a3512; color: #ffcf7a; }

/* ------------------------------------------------------------ remote control */

.rail-menu-note { max-width: 280px; margin: 0; padding: 4px 10px 8px; font: 500 11px/1.45 var(--font); color: #8b9390; }
.remote-btn { display: inline-flex; align-items: center; gap: 7px; }
.remote-led { width: 7px; height: 7px; border-radius: 50%; background: #2a2f33; box-shadow: inset 0 0 0 1px #000; }
.remote-btn.on .remote-led { background: #4dff8a; box-shadow: 0 0 6px rgba(77, 255, 138, 0.7); }
.remote-btn.remote .remote-led { background: #7dd3ff; box-shadow: 0 0 6px rgba(125, 211, 255, 0.7); }
.remote-state { font: 700 8px var(--font); letter-spacing: 0.14em; color: #9fe6b6; }
.remote-state:empty { display: none; }
.remote-btn.remote .remote-state { color: #a8dcff; }
.remote-option { display: flex; flex-direction: column; gap: 3px; }
.remote-option small { font: 500 10px var(--font); letter-spacing: 0; color: #8b9390; }
.remote-option.on { background: #16301f; color: #8fe0a8; }

/* ------------------------------------------------------------ welcome screen */

.welcome-card { width: min(100%, 620px); max-height: calc(100vh - 32px); overflow: auto; }
.welcome-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.welcome-top h2 { margin: 0; }
.welcome-head { margin: 16px 0 6px; font: 700 9px var(--font); letter-spacing: 0.2em; color: #7d8784; }
.welcome-projects { max-height: 42vh; margin-bottom: 4px; }
.welcome-row { grid-template-columns: 1fr auto auto auto; }
.welcome-what { min-width: 0; }
.welcome-what .projects-name { display: block; }
.welcome-card input.welcome-rename { width: 100%; padding: 4px 6px; font-size: 13px; }
.welcome-new { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.welcome-new input { min-width: 0; }
.welcome-new button { padding: 0 18px; }
/* The buttons as in the app's dialogs (desk.css: .dialog button). */
.welcome-card button {
  padding: 8px 14px;
  border: 0;
  border-radius: 4px;
  font: 700 11px var(--font);
  letter-spacing: 0.1em;
  cursor: pointer;
}
.welcome-card button.small { padding: 6px 10px; font-size: 10px; }
.welcome-card button:disabled { opacity: 0.5; cursor: wait; }

/* ------------------------------------------------------------ tiers (admins) */

.rail-menu-item:disabled { opacity: 0.4; cursor: default; }
.tiers-scroll { max-height: 58vh; overflow: auto; margin-bottom: 12px; }
.tiers-table { width: 100%; border-collapse: collapse; font: 500 12px var(--font); }
.tiers-table th, .tiers-table td { padding: 4px 8px; border-bottom: 1px solid #1f2427; text-align: center; }
.tiers-table tr > th:first-child { text-align: left; font-weight: 600; color: #c9cdd1; white-space: nowrap; }
.tiers-names th { position: sticky; top: 0; z-index: 1; background: #15181a; font: 700 10px var(--font); letter-spacing: 0.16em; color: #e9e6de; text-transform: uppercase; }
.tiers-table input[type="number"] { width: 72px; padding: 4px 6px; text-align: right; }
.tiers-table input[type="checkbox"] { width: 15px; height: 15px; padding: 0; accent-color: #2d5fae; }
.tiers-table select { padding: 4px 6px; }
.tiers-category th { padding-top: 12px; font: 700 9px var(--font) !important; letter-spacing: 0.2em; color: #7d8784 !important; }
.tiers-device th { font-weight: 500 !important; color: #9fa9a6 !important; }
.users-row select { width: 100%; padding: 5px 4px; font-size: 12px; }