/* Admin over the PMS's stylesheets (lab/04-pms/podpad/index.css, design/studio.css, lab/05-hr/ui.css, the modules'
   crm/gym/store.css), as lab/08-extranet/web/extranet.css lays the extranet over them: its sections' colors and the few
   parts the PMS has no use for (tables, bars, the conversation thread, file previews, the alerts pane). Loaded after the
   design, so its section hues win the tie with Studio's default.

   Sections are grouped by function, a band of hue each (Studio's rule: g1 at least ~25° from its neighbors, g2 follows
   in the band, g3 is g1 at ~9 % lightness). An object's icon wears its owner's hue wherever it shows.
     People, blue 200–235°          Inquilinos ~205°, Usuarios ~225°
     Rules, violet 255–285°         Permisos ~255°, Comportamiento ~280°
     Money, gold 40–60°             Cobros ~45°, Contabilidad ~60° (olive-gold)
     Communication, magenta ~320°   Mensajes
     The governed sites, green      Extranet ~150°, Universidad ~175° (teal), Sitio público ~125°
     Assets, orange ~25°            Archivos
     Oversight                      Informes ~190° (cyan), Auditoría rose ~345°, Sistema and Inicio slate (Studio's default)
   Red and green stay for status (kept, broken), never alone for a section. */
html[data-design="studio"][data-section="tenants"], html[data-design="studio"] [data-section="tenants"] { --g1: #3fb4ff; --g2: #2f7bff; --g3: #05233a; }
html[data-design="studio"][data-section="users"], html[data-design="studio"] [data-section="users"] { --g1: #5a8cff; --g2: #4f5cff; --g3: #081538; }
html[data-design="studio"][data-section="permissions"], html[data-design="studio"] [data-section="permissions"] { --g1: #7f6bff; --g2: #6a4dff; --g3: #110b38; }
html[data-design="studio"][data-section="behavior"], html[data-design="studio"] [data-section="behavior"] { --g1: #b05cff; --g2: #8a4dff; --g3: #1d0a33; }
html[data-design="studio"][data-section="billing"], html[data-design="studio"] [data-section="billing"] { --g1: #f5c84b; --g2: #e09a20; --g3: #261b06; }
html[data-design="studio"][data-section="books"], html[data-design="studio"] [data-section="books"] { --g1: #d8d24a; --g2: #a9b830; --g3: #222106; }
html[data-design="studio"][data-section="messages"], html[data-design="studio"] [data-section="messages"] { --g1: #ff5cc8; --g2: #d04dff; --g3: #2b0a26; }
html[data-design="studio"][data-section="extranet"], html[data-design="studio"] [data-section="extranet"] { --g1: #34d67f; --g2: #1fb88f; --g3: #052a1a; }
html[data-design="studio"][data-section="university"], html[data-design="studio"] [data-section="university"] { --g1: #2fd6c4; --g2: #1fa6c7; --g3: #04282a; }
html[data-design="studio"][data-section="site"], html[data-design="studio"] [data-section="site"] { --g1: #7ee05a; --g2: #3fc76a; --g3: #10280a; }
html[data-design="studio"][data-section="files"], html[data-design="studio"] [data-section="files"] { --g1: #ff9a3d; --g2: #ff6a3d; --g3: #2c1206; }
html[data-design="studio"][data-section="reports"], html[data-design="studio"] [data-section="reports"] { --g1: #2ec5f0; --g2: #2f9bff; --g3: #05263a; }
html[data-design="studio"][data-section="audit"], html[data-design="studio"] [data-section="audit"] { --g1: #ff5c86; --g2: #ff4d5e; --g3: #2b0812; }

/* Icons in the pages: an object's mark and a task's icon in their section's hue (Studio paints every avatar one purple). */
html[data-design="studio"] .x .avatar.mark[data-section], html[data-design="studio"] .x .task-icon[data-section] {
  color: #fff; background: linear-gradient(145deg, var(--g1), var(--g2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px -8px color-mix(in srgb, var(--g1) 80%, transparent);
}
html[data-design="studio"] .x .avatar.mark[style*="--mk"] { color: #fff; background: linear-gradient(145deg, var(--mk), color-mix(in srgb, var(--mk) 65%, #000)); }
html[data-design="studio"] .x .row-btn.on .avatar.mark { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }

#x-root { min-height: 100%; }
.x .page.wide { max-width: 1180px; }
.x .x-table { overflow-x: auto; }
.x .x-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.x .x-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 12px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.x .x-table td { padding: 9px 12px; vertical-align: top; }
.x .x-table tr + tr td { border-top: 1px solid var(--hairline); }
.x .x-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.x .x-table input, .x .x-table select { font: inherit; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface-2); color: var(--label); max-width: 260px; }
.x .x-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--g1, var(--accent)); }
.x .x-table small { font-size: 11.5px; }
.x .x-table .chip { margin: 2px 4px 2px 0; font-size: 12px; }
.x .x-pre, .x.sheet .x-pre { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--fill); font: 12px/1.5 var(--mono, ui-monospace, monospace); white-space: pre-wrap; word-break: break-all; max-height: 60vh; overflow: auto; }
.x .hero .avatar.xl { width: 64px; height: 64px; }
.x .head-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.x .form-card textarea, .x .form-card input:not([type=checkbox]), .x .form-card select { font: inherit; }
.x .rows .wide .t { min-width: 0; }
.x .search { margin: 0; }
.x .task-icon .i { width: 19px; height: 19px; }
.x label.btn { cursor: pointer; }

/* Logos and previews: the image fills the avatar. */
.x .avatar.a-logo { padding: 0; overflow: hidden; background: var(--fill); }
.x .avatar.a-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x .a-preview { padding: 18px; display: grid; place-items: center; background: repeating-conic-gradient(rgba(127, 127, 127, 0.12) 0 25%, transparent 0 50%) 0 0 / 18px 18px; }
.x .a-preview img { max-width: min(100%, 360px); max-height: 280px; border-radius: 12px; }

/* Bars: a value per row, in the section's hue (reports, revenue, expenses). */
.x .a-bars { padding: 12px 16px; display: grid; gap: 8px; }
.x .a-bar { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: 12px; align-items: center; font-size: 13.5px; }
.x .a-bar .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x .a-bar .b { height: 10px; border-radius: 6px; background: var(--fill, rgba(127, 127, 127, 0.15)); overflow: hidden; }
.x .a-bar .b i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--g1, var(--accent)), var(--g2, var(--accent))); }
.x .a-bar .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.x .a-bar .v small { color: var(--secondary); }

/* A conversation: theirs on the left, ours and the bot's on the right. */
.x .a-thread { padding: 14px 16px; display: grid; gap: 10px; max-height: 52vh; overflow: auto; }
.x .a-msg { display: grid; justify-items: start; gap: 3px; }
.x .a-msg.us, .x .a-msg.bot { justify-items: end; }
.x .a-msg .bubble { max-width: 78%; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: var(--fill, rgba(127, 127, 127, 0.15)); line-height: 1.4; white-space: pre-wrap; }
.x .a-msg.us .bubble { border-radius: 16px 16px 4px 16px; color: #fff; background: linear-gradient(145deg, var(--g1, var(--accent)), var(--g2, var(--accent))); }
.x .a-msg.bot .bubble { border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--g1, var(--accent)) 22%, transparent); }
.x .a-msg small { color: var(--secondary); font-size: 11.5px; }
.x .a-reply { margin-top: 10px; padding: 10px; display: flex; gap: 8px; align-items: flex-end; }
.x .a-reply textarea { flex: 1; resize: vertical; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface-2); color: var(--label); }

/* The alerts pane in the master pane (Menu | Alerts), as the extranet's. */
#alerts { padding: 0 12px 16px; }
#alerts .alerts-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 2px; }
#alerts .alerts-note { margin: 0 4px 8px; font-size: 12px; display: flex; align-items: center; gap: 6px; }
#alerts .alerts-note .i { width: 14px; height: 14px; }
#alerts .alert { display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.35; }
#alerts .alert:hover { background: var(--fill-2, rgba(127, 127, 127, 0.12)); }
#alerts .alert.unread { font-weight: 600; }
#alerts .alert.unread::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--g1, #8e9bff); margin-right: 7px; vertical-align: 1px; }
#alerts .alert small { display: block; color: var(--secondary); font-weight: 400; font-size: 11.5px; margin-top: 2px; }
@media (max-width: 767px) { .x .x-table table { font-size: 12.5px; } .x .x-table td, .x .x-table th { padding: 8px; } .x .a-bar { grid-template-columns: 34% 1fr auto; } }