/* SOLA.IAM — product CSS.
   Composes the SOLA ITSM app shell (reference design) out of design-system tokens + .sola-* components:
   fixed light sidebar (brand header · nav · lang/user/logout footer, collapsible to an icon rail),
   gradient topbar inside the main column (menu toggle · page title · page actions · refresh),
   and the full-screen gradient login. Every value is a token from vendor/sola/tokens.css. */

:root {
  /* Local tokens for the "glass" controls that sit on the gradient topbar */
  --topbar-glass:        rgba(255, 255, 255, 0.15);
  --topbar-glass-hover:  rgba(255, 255, 255, 0.25);
  --topbar-glass-border: rgba(255, 255, 255, 0.2);
  /* Accent colours for sidebar nav icons (ITSM pattern: one colour per module) */
  --nav-purple: #6610f2;
  --nav-orange: #fd7e14;
  --nav-teal:   #20c997;
  --nav-pink:   #d63384;
  --backdrop:   rgba(0, 0, 0, 0.45);
}

.hidden { display: none !important; }

/* =========================================================================
   Login / reset screens (ITSM pattern)
   ========================================================================= */
.login-screen {
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh; padding: var(--space-4); background: var(--gradient-primary);
}
.login-container {
  background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-12) var(--space-10); width: 100%; max-width: 420px; text-align: center;
}
.login-header { margin-bottom: var(--space-8); }
.login-logo { display: grid; place-items: center; height: 100px; margin-bottom: var(--space-4); }
.login-logo i { font-size: 56px; color: var(--sola-primary); }
.login-logo img { max-height: 100px; max-width: 100%; width: auto; object-fit: contain; }
.login-header h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-primary); margin: 0 0 var(--space-2); }
.login-header p { color: var(--text-secondary); font-size: var(--fs-md); margin: 0; }
.login-body { margin-bottom: var(--space-8); }
.login-body > p { color: var(--text-secondary); font-size: var(--fs-base); margin-bottom: var(--space-6); }
.login-body .btn-lg { padding: 14px 32px; font-size: var(--fs-md); border-radius: var(--radius-sm); }
.login-link { display: inline-block; margin-top: var(--space-4); font-size: var(--fs-sm); }
.login-divider { display: flex; align-items: center; color: var(--text-secondary); font-size: var(--fs-sm); margin: var(--space-4) 0; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border-color); }
.login-divider span { padding: 0 var(--space-3); }
.login-footer { color: var(--text-light); font-size: var(--fs-xs); }
.login-footer .btn { margin-bottom: var(--space-3); }
.login-footer p { margin: 0; }

/* Toast host (positioning only; toast itself is .sola-toast) */
.toast-host { position: fixed; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); }

/* =========================================================================
   App shell
   ========================================================================= */
.iam-shell { display: flex; min-height: 100vh; }

/* ---- Sidebar: fixed, full height, light ---- */
.iam-sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; height: 100vh;
  width: var(--sidebar-width); display: flex; flex-direction: column;
  padding: 0; overflow: hidden; box-shadow: var(--shadow);
  z-index: calc(var(--z-sticky) + 1); transition: var(--transition);
}
.iam-sidebar__header { padding: var(--space-4) var(--space-5); background: var(--bg-card); }
.iam-brand {
  display: flex; align-items: center; gap: var(--space-3); text-decoration: none;
  color: var(--sola-primary); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight);
}
.iam-brand:hover { color: var(--sola-primary-dark); }
.iam-brand__logo { display: grid; place-items: center; height: 42px; flex-shrink: 0; }
.iam-brand__logo i { font-size: 28px; }
.iam-brand__logo img { height: 42px; width: auto; object-fit: contain; }
.iam-brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.iam-sidebar__nav { flex: 1; padding: var(--space-4) var(--space-3); overflow-y: auto; }
.iam-sidebar__nav .sola-nav-link { padding: var(--space-3) var(--space-4); margin-bottom: var(--space-1); }
.iam-sidebar__nav .sola-nav-link i { font-size: 16px; }
.iam-sidebar__nav .sola-nav-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Module icon colours (ITSM pattern) */
.sola-nav-link[data-route="/dashboard"] i      { color: var(--sola-primary); }
.sola-nav-link[data-route="/users"] i          { color: var(--sola-primary); }
.sola-nav-link[data-route="/applications"] i   { color: var(--nav-purple); }
.sola-nav-link[data-route="/roles"] i          { color: var(--danger-color); }
.sola-nav-link[data-route="/groups"] i         { color: var(--success-color); }
.sola-nav-link[data-route="/departments"] i    { color: var(--nav-orange); }
.sola-nav-link[data-route="/attributes"] i     { color: var(--nav-teal); }
.sola-nav-link[data-route="/loginProviders"] i { color: var(--nav-pink); }
.sola-nav-link[data-route="/audit"] i          { color: var(--info-color); }
.sola-nav-link[data-route="/logs"] i           { color: var(--secondary-color); }
.sola-nav-link[data-route="/settings"] i       { color: var(--text-light); }

.iam-sidebar__footer {
  padding: var(--space-4); border-top: 1px solid var(--border-color); background: var(--bg-color);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.iam-lang-toggle, .iam-logout {
  width: 100%; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-color);
  color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-base);
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); transition: var(--transition);
}
.iam-lang-toggle:hover { border-color: var(--sola-primary); color: var(--sola-primary); }
.iam-logout:hover { background: var(--danger-color); border-color: var(--danger-color); color: var(--text-white); }

.iam-user {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card);
  font-size: var(--fs-sm); color: var(--text-secondary); user-select: none; transition: var(--transition);
}
.iam-user.is-clickable { cursor: pointer; }
.iam-user.is-clickable:hover { border-color: var(--sola-primary); color: var(--sola-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.iam-user:focus-visible { outline: 2px solid var(--sola-primary); outline-offset: 2px; }
.iam-user__icon { font-size: 24px; color: var(--sola-primary); flex-shrink: 0; }
.iam-user__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.iam-user__name { font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iam-role-badge {
  align-self: flex-start; display: inline-block; padding: 1px 6px; border-radius: var(--radius-xs);
  font-size: 10px; font-weight: var(--fw-semibold); line-height: 1.4; text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--text-white); background: var(--secondary-color);
}
.iam-role-badge:empty { display: none; }
.iam-role-badge--admin { background: var(--danger-color); }
.iam-user__chevron { font-size: 12px; opacity: .6; display: none; transition: var(--transition-fast); }
.iam-user.is-clickable .iam-user__chevron { display: inline; }
.iam-user.is-clickable:hover .iam-user__chevron { opacity: 1; }
[dir="rtl"] .iam-user__chevron { transform: scaleX(-1); }
.iam-version { text-align: center; font-size: var(--fs-xs); color: var(--text-light); letter-spacing: .03em; }

/* ---- Collapsed icon rail (desktop) ---- */
.iam-shell.is-collapsed .iam-sidebar { width: var(--sidebar-width-collapsed); }
.iam-shell.is-collapsed .iam-brand__name,
.iam-shell.is-collapsed .sola-nav-link span,
.iam-shell.is-collapsed .iam-lang-toggle span,
.iam-shell.is-collapsed .iam-logout span,
.iam-shell.is-collapsed .iam-user__text,
.iam-shell.is-collapsed .iam-user__chevron,
.iam-shell.is-collapsed .iam-version { display: none; }
.iam-shell.is-collapsed .iam-sidebar__header { padding-inline: 0; }
.iam-shell.is-collapsed .iam-brand { justify-content: center; }
.iam-shell.is-collapsed .iam-brand__logo { height: 36px; }
.iam-shell.is-collapsed .iam-brand__logo img { height: 36px; }
.iam-shell.is-collapsed .iam-sidebar__nav { padding-inline: var(--space-2); }
.iam-shell.is-collapsed .sola-nav-link { justify-content: center; padding-inline: 0; }
.iam-shell.is-collapsed .iam-sidebar__footer { padding-inline: var(--space-2); }
.iam-shell.is-collapsed .iam-user { justify-content: center; padding-inline: 0; }

/* ---- Main column ---- */
.iam-main {
  flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column;
  margin-inline-start: var(--sidebar-width); transition: var(--transition);
}
.iam-shell.is-collapsed .iam-main { margin-inline-start: var(--sidebar-width-collapsed); }
.iam-main > .sola-content { flex: 1; }

/* ---- Topbar (gradient; .sola-topbar supplies height/gradient/sticky) ---- */
.iam-topbar { gap: var(--space-5); padding-inline: var(--space-6); z-index: var(--z-sticky); }
.iam-topbar__btn {
  background: var(--topbar-glass); border: 1px solid var(--topbar-glass-border); color: var(--text-white);
  font-size: 16px; line-height: 1; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
}
.iam-topbar__btn:hover { background: var(--topbar-glass-hover); color: var(--text-white); }
.iam-topbar__btn.is-busy i { animation: iam-spin .8s linear infinite; }
@keyframes iam-spin { to { transform: rotate(360deg); } }
.iam-topbar__title { color: var(--text-white); font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iam-topbar__actions { margin-inline-start: auto; display: flex; gap: var(--space-2); }
.iam-topbar__actions .btn { font-weight: var(--fw-semibold); white-space: nowrap; }

/* ---- Filters bar (ITSM pattern: inline label + control groups in a card) ---- */
.iam-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4); margin-bottom: var(--space-5);
  background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.iam-filter { display: flex; align-items: center; gap: var(--space-2); }
.iam-filter > label { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; }
.iam-filter .form-control, .iam-filter .form-select { width: auto; min-width: 150px; }
.iam-filter--search .form-control { min-width: 220px; }
.iam-filter .select2-container { width: 170px !important; }
.iam-filters__actions { display: flex; gap: var(--space-2); margin-inline-start: auto; }

/* Profile page */
.iam-profile { max-width: 640px; }
.iam-profile__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-color); }
.iam-profile__avatar { font-size: 56px; color: var(--sola-primary); }
.iam-profile__name { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-1); }
.iam-profile .form-control[readonly] { background: var(--bg-muted); color: var(--text-primary); }

/* Settings tab panes */
.iam-tabs { margin-bottom: var(--space-5); }
.iam-tabs .sola-tab i { margin-inline-end: var(--space-2); }

/* Departments tree fills its column (design-system caps the panel at 360px for sidebars) */
.sola-tree-panel { max-width: 100% !important; width: 100%; }
.sola-tree { max-height: 60vh; }

/* Searchable single/multi-select comboboxes (built from design-system combobox + tag chips) */
.iam-multi, .iam-combo { display: block; width: 100%; min-width: 0; }
.iam-multi .sola-combobox__panel, .iam-combo .sola-combobox__panel { width: 100%; }
.iam-combo .sola-combobox__control { cursor: pointer; }
.sola-combobox.is-disabled { opacity: .6; pointer-events: none; }
.iam-multi .sola-combobox__control { flex-wrap: wrap; height: auto; min-height: 38px; gap: 4px; cursor: pointer; }
.iam-multi .mc-value { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center; min-width: 0; }
.iam-multi .sola-tag { cursor: default; }

/* Settings — logo preview + expandable log exception */
.settings-logo-preview {
  width: 120px; height: 60px; display: grid; place-items: center;
  border: 1px dashed var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-color); overflow: hidden; padding: 4px;
}
.settings-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.log-ex__pre {
  margin: 0; white-space: pre-wrap; word-break: break-word; font-size: var(--fs-xs);
  color: var(--text-secondary); background: var(--bg-color); padding: var(--space-2); border-radius: var(--radius-sm);
}
/* Inline repeat rows (attribute option-list editor): value | label | delete on one line */
.repeat-row { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.repeat-row > .form-control, .repeat-row > .form-select { flex: 1; min-width: 0; }

.audit-diff { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.audit-diff__col { flex: 1 1 280px; min-width: 0; }
.audit-diff__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: var(--ls-wide); }

/* =========================================================================
   Mobile: off-canvas drawer + backdrop (ITSM pattern)
   ========================================================================= */
.iam-sidebar-backdrop { display: none; }
@media (max-width: 768px) {
  .iam-sidebar, .iam-shell.is-collapsed .iam-sidebar { width: var(--sidebar-width); transform: translateX(-100%); }
  [dir="rtl"] .iam-sidebar, [dir="rtl"] .iam-shell.is-collapsed .iam-sidebar { transform: translateX(100%); }
  .iam-sidebar.is-open { transform: none !important; box-shadow: var(--shadow-xl); }
  .iam-main, .iam-shell.is-collapsed .iam-main { margin-inline-start: 0; }
  .iam-sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: var(--backdrop); z-index: var(--z-sticky);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
  }
  .iam-sidebar-backdrop.is-show { opacity: 1; visibility: visible; }
  .iam-topbar { gap: var(--space-3); padding-inline: var(--space-4); }
  .iam-topbar__title { font-size: var(--fs-base); }
  .iam-filter, .iam-filter .form-control, .iam-filter .form-select { width: 100%; }
  .iam-filter .select2-container { width: 100% !important; }
  .iam-filters__actions { margin-inline-start: 0; }
}