/* ================================================================
   style.css — Tenant Admin Dashboard — COLD STEEL SCAFFOLDING
   ================================================================
   Same workshop, different room. This is the door a Tenant Admin
   uses — no email, no isAuthorized account, just a workspace name,
   their own name, and a PIN their Client set up for them. Deliberately
   a SEPARATE control panel from the Client dashboard's style.css —
   a Client and their Tenant Admins might reasonably want their own
   look, and copy-pasting one small file is cheaper than inventing a
   shared-theme system before anyone's asked for one.

   Read the long version of this comment block in
   ../client/style.css — same building, same metaphor, not repeated
   here twice.
   ================================================================ */

:root {
  --ts-bg:          #1a1d21;
  --ts-panel-bg:    #22262b;
  --ts-border:      #33383f;
  --ts-text:        #e8e8ea;
  --ts-text-dim:    #8a8f98;
  --ts-accent:      #6b7280;  /* the "house color" placeholder — change me first */
  --ts-accent-text: #ffffff;
  --ts-danger:      #c0392b;
  --ts-radius:      10px;
  --ts-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ts-bg);
  color: var(--ts-text);
  font-family: var(--ts-font);
  padding: 2rem;
}

.card {
  width: min(420px, 100%);
  background: var(--ts-panel-bg);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.brand    { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.02em; margin: 0; text-align: center; }
.subtitle { color: var(--ts-text-dim); font-size: 0.9rem; text-align: center; margin: -0.75rem 0 0; }

input[type="text"],
textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--ts-bg);
  border: 1px solid var(--ts-border);
  border-radius: calc(var(--ts-radius) * 0.6);
  color: var(--ts-text);
  font-size: 1rem;
  outline: none;
  font-family: inherit;
  resize: vertical;
}
input:focus, textarea:focus { border-color: var(--ts-accent); }

button {
  width: 100%;
  padding: 12px;
  background: var(--ts-accent);
  color: var(--ts-accent-text);
  border: none;
  border-radius: calc(var(--ts-radius) * 0.6);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
button:disabled { opacity: 0.55; cursor: default; }
button.secondary { background: transparent; border: 1px solid var(--ts-border); color: var(--ts-text); }

.error  { color: var(--ts-danger); font-size: 0.85rem; min-height: 1.1em; margin: 0; }
.hint   { color: var(--ts-text-dim); font-size: 0.82rem; margin: 0; }
.hidden { display: none !important; }

.placeholder-panel {
  border: 1px dashed var(--ts-border);
  border-radius: calc(var(--ts-radius) * 0.6);
  padding: 1.25rem;
  text-align: center;
  color: var(--ts-text-dim);
}

.studio-panel {
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.logo-result {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ts-border);
  text-align: center;
}
.logo-result img {
  max-width: 100%;
  border-radius: calc(var(--ts-radius) * 0.6);
  background: #fff;
}