/* ── Shared across every layout (was duplicated in all 5 <style> blocks) ── */
.sidebar-logo {
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.sidebar-logo:hover {
  background-color: rgba(128, 128, 128, 0.08);
  /* light gray */
}

/* ── App shell: student portal (layouts/app.html.erb) ────────────────────── */
html:has(.l-app),
.l-app {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

.l-app .app-layout {
  display: flex;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.l-app .sidebar {
  flex-shrink: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.l-app .main-content {
  flex: 1 1 auto;
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: auto;
}

.l-app .page-content {
  min-width: 0;
}

/* Essay Show uses document scrolling instead of a nested app-shell scroller. */
html:has(.l-app.p-student-essays-show),
body.l-app.p-student-essays-show {
  height: auto;
}

.l-app.p-student-essays-show .app-layout {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

.l-app.p-student-essays-show .main-content {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

.l-app img,
.l-app svg,
.l-app table,
.l-app pre,
.l-app code {
  max-width: 100%;
}

.l-app .ai-chat-panel {
  max-width: 100vw;
}

.l-app .sidebar-footer {
  padding-bottom: 3rem;
}

.l-app .whitespace-error {
  border-color: var(--color-danger, #dc2626);
}

.l-app .whitespace-error-message {
  color: var(--color-danger, #dc2626);
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: block;
}

.l-app .compose-message-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 90vw;
  width: 480px;
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  padding: 0;
  background: var(--color-bg, #ffffff);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
}

.l-app .compose-message-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* Inner container for consistent padding */
.l-app .compose-message-dialog-inner {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.l-app .compose-message-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.l-app .compose-message-dialog-header h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.l-app .compose-message-dialog .c-form-group {
  margin-bottom: 0.75rem;
}

.l-app .compose-message-dialog .c-form-group:last-of-type {
  margin-bottom: 0;
}

.l-app .compose-message-dialog .c-form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-subtle, #e5e7eb);
  margin-top: 0.25rem;
}

html:has(.l-essay-manager),
.l-essay-manager {
  overflow-x: auto;
  max-width: 100vw;
}

.l-essay-manager {
  --sidebar-width: 220px;
}

.l-essay-manager .app-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
}

.l-essay-manager .sidebar {
  flex-shrink: 0;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}

.l-essay-manager .main-content {
  flex: 1 1 0%;
  min-width: 0;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

.l-essay-manager .topbar {
  flex-shrink: 0;
}

.l-essay-manager .page-content {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding: 1.25rem;
  box-sizing: border-box;
  width: 100%;
}

/* Ensure all direct children of page-content don't overflow */
.l-essay-manager .page-content>* {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── admin/configuration/index.html.erb (relocated from <style>, scoped to .p-admin-configuration-index) ── */
.p-admin-configuration-index .config-grid {
  display: grid;
  gap: 1.5rem;
}

.p-admin-configuration-index .config-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.p-admin-configuration-index .config-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.p-admin-configuration-index .badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.p-admin-configuration-index .badge-sandbox {
  background: #1e3a5f;
  color: #60a5fa;
}

.p-admin-configuration-index .badge-production {
  background: #5f1e1e;
  color: #f87171;
}

.p-admin-configuration-index .env-switcher {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.p-admin-configuration-index .env-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
}

.p-admin-configuration-index .env-btn:hover {
  border-color: var(--color-text-muted);
}

.p-admin-configuration-index .env-btn.active.sandbox {
  border-color: #60a5fa;
  color: #60a5fa;
  background: #1e3a5f33;
}

.p-admin-configuration-index .env-btn.active.production {
  border-color: #f87171;
  color: #f87171;
  background: #5f1e1e33;
}

.p-admin-configuration-index .warning-box {
  display: none;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #5f1e1e33;
  border: 1px solid #f8717144;
  color: #f87171;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.p-admin-configuration-index .warning-box.show {
  display: block;
}

.p-admin-configuration-index .config-note {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Filters */

.p-admin-configuration-index .filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.p-admin-configuration-index .filter-btn {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.p-admin-configuration-index .filter-btn:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.p-admin-configuration-index .filter-btn.active {
  background: var(--color-bg-hover);
  color: var(--color-text);
  border-color: var(--color-accent);
}

.p-admin-configuration-index .filter-btn.export {
  background: #16532d;
  color: #4ade80;
  border-color: #22c55e44;
}

.p-admin-configuration-index .filter-sep {
  color: var(--color-border);
}

/* Logs */

.p-admin-configuration-index .empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.p-admin-configuration-index .logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.p-admin-configuration-index .logs-table th {
  text-align: left;
  padding: 0.5rem 0.625rem;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
}

.p-admin-configuration-index .logs-table td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.p-admin-configuration-index .logs-table tr.log-row:hover {
  background: var(--color-bg-hover);
}

.p-admin-configuration-index .env-badge {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.p-admin-configuration-index .env-badge.sandbox {
  background: #1e3a5f;
  color: #60a5fa;
}

.p-admin-configuration-index .env-badge.production {
  background: #5f1e1e;
  color: #f87171;
}

.p-admin-configuration-index .method-badge {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: monospace;
}

.p-admin-configuration-index .method-badge.get {
  background: #1e3a5f;
  color: #60a5fa;
}

.p-admin-configuration-index .method-badge.post {
  background: #16532d;
  color: #4ade80;
}

.p-admin-configuration-index .method-badge.put {
  background: #533a16;
  color: #facc15;
}

.p-admin-configuration-index .method-badge.patch {
  background: #533a16;
  color: #facc15;
}

.p-admin-configuration-index .method-badge.delete {
  background: #5f1e1e;
  color: #f87171;
}

.p-admin-configuration-index .status-badge {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
}

.p-admin-configuration-index .status-badge.success {
  background: #16532d;
  color: #4ade80;
}

.p-admin-configuration-index .status-badge.failed {
  background: #5f1e1e;
  color: #f87171;
}

.p-admin-configuration-index .detail-row {
  display: none;
}

.p-admin-configuration-index .detail-row.show {
  display: table-row;
}

.p-admin-configuration-index .detail-cell {
  padding: 1rem;
  background: #0b1120;
}

.p-admin-configuration-index .detail-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.p-admin-configuration-index .detail-section h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.375rem;
}

.p-admin-configuration-index .detail-section pre {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
  max-height: 200px;
  white-space: pre-wrap;
  word-break: break-all;
}

.p-admin-configuration-index .detail-error {
  margin-top: 0.75rem;
  padding: 0.625rem;
  background: #5f1e1e33;
  border: 1px solid #f8717144;
  border-radius: 0.375rem;
  color: #f87171;
  font-size: 0.8125rem;
}

/* ── counselor/messages/index.html.erb (relocated from <style>, scoped to .p-counselor-messages-index) ── */
/* ── Thread list container ── */

.p-counselor-messages-index .msg-thread-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

/* ── Single thread row ── */

.p-counselor-messages-index .msg-thread-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.85rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  transition: background 0.15s;
  min-width: 0;
}

.p-counselor-messages-index .msg-thread-item:last-child {
  border-bottom: none;
}

.p-counselor-messages-index .msg-thread-item:hover {
  background: var(--color-bg, #f9fafb);
}

/* ── Unread dot column — fixed width so body always aligns ── */

.p-counselor-messages-index .msg-indicator {
  flex: 0 0 0.75rem;
  width: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.25rem;
}

/* ── Middle content — takes all remaining space, clips cleanly ── */

.p-counselor-messages-index .msg-thread-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Subject — bold, wraps fully, never cut off */

.p-counselor-messages-index .msg-thread-subject {
  font-weight: 600;
  color: var(--color-text, #111827);
  font-size: 0.9rem;
  line-height: 1.4;
  word-break: break-word;
  white-space: normal;
}

/* Preview row — student name + message body */

.p-counselor-messages-index .msg-thread-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #6b7280);
  line-height: 1.5;
}

.p-counselor-messages-index .msg-student-name {
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-text-muted, #6b7280);
}

.p-counselor-messages-index .msg-sep {
  flex-shrink: 0;
}

/* Preview text wraps fully — no truncation, no cut-off */

.p-counselor-messages-index .msg-preview-text {
  word-break: break-word;
  white-space: normal;
}

/* ── Timestamp — fixed width, right-aligned, never squished ── */

.p-counselor-messages-index .msg-thread-time {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--color-text-muted, #9ca3af);
  padding-top: 0.15rem;
  text-align: right;
}

/* ── Mobile: stack timestamp under content on very small screens ── */

/* Breakpoint migrated to the standard scale (see base.css).
   was: max-width: 400px  ->  now: max-width: 767px
   Behaviour changes only inside the 400px..767px band; >= 1024px unaffected. */

@media (max-width: 767px) {
  .p-counselor-messages-index .msg-thread-item {
    flex-wrap: wrap;
    padding: 0.75rem 0.5rem;
  }

  .p-counselor-messages-index .msg-thread-body {
    flex: 1 1 calc(100% - 1.25rem);
  }

  .p-counselor-messages-index .msg-thread-time {
    flex: 1 0 100%;
    text-align: left;
    padding-top: 0.25rem;
    padding-left: 1.25rem;
  }
}

/* ── Whitespace validation error styling ── */

.p-counselor-messages-index .whitespace-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef4444;
}

.p-counselor-messages-index .whitespace-error-message {
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  display: block;
}

/* ── admin/users/index.html.erb (relocated from <style>, scoped to .p-admin-users-index) ── */
.p-admin-users-index .search-btn {
  background-color: #1c1917;
  color: #fff;
}

.p-admin-users-index .search-btn:hover {
  background-color: #44403c;
}

.p-admin-users-index .search-icon-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  z-index: 1;
}

.p-admin-users-index .search-icon-btn:hover {
  color: #1c1917;
}

.p-admin-users-index .toolbar-count {
  display: block;
  text-align: right;
  margin: 0.5rem 0;
}

/* Search form row – all controls on one line */

.p-admin-users-index .search-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* Search field wrapper */

.p-admin-users-index .search-field-group {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Push text away from the icon on the left and clear button on the right */
.p-admin-users-index .search-input--with-icons {
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
}

/* Clear button – vertically centred inside the input */

.p-admin-users-index .search-input-clear {
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #57534e;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  width: auto;
  line-height: 1;
  z-index: 1;
}

.p-admin-users-index .search-input-clear:hover {
  color: #1c1917;
}

/* Skeleton wrapper for the role filter select2 */

.p-admin-users-index .filter-select-wrapper {
  position: relative;
  width: 160px;
  height: 2.25rem;
  flex-shrink: 0;
}

.p-admin-users-index .select2-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.p-admin-users-index .select2-skeleton-select {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
}

.p-admin-users-index .filter-select-wrapper:has(> .select2-container:not(.select2-skeleton)) .select2-skeleton {
  display: none;
}

.p-student-documents-index .docs-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

/* Force long folder names to wrap inside the sidebar */

.p-student-documents-index .docs-folder-label {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Prevent long unbreakable words from overflowing the main content area */

.p-student-documents-index .docs-main,
.p-student-documents-index .docs-list-item,
.p-student-documents-index .docs-item-info {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.p-student-documents-index .docs-sidebar {
  display: flex;
  flex-direction: column;
  width: 260px;
  max-width: 40vw;
  max-height: calc(100vh - 120px);
  padding-bottom: 0.75rem;
  box-sizing: border-box;
}

/* Make the folder list area scrollable when it grows */

.p-student-documents-index .docs-folder-nav {
  overflow: auto;
  flex: 1 1 auto;
  padding-right: 0.5rem;
  /* give room for scrollbar */
  padding-bottom: 2.5rem;
  /* ensure last items don't get hidden behind actions */
}

/* Keep the action buttons visible at the bottom of the sidebar */

.p-student-documents-index .docs-sidebar-actions {
  margin-top: 0.5rem;
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: inherit;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.04);
}

/* Main content: allow independent scrolling without affecting sidebar height */

.p-student-documents-index .docs-main {
  flex: 1 1 auto;
  overflow: auto;
  max-height: calc(100vh - 120px);
  padding-bottom: 2rem;
}

.p-student-documents-index .docs-search-field .form-input {
  max-width: 100%;
}

.p-counselor-students-index .search-icon-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #9ca3af;
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  z-index: 1;
}

.p-counselor-students-index .search-icon-btn:hover {
  color: #1c1917;
}

.p-counselor-students-index .search-input--with-icons {
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
}

.p-counselor-students-index .search-input-clear {
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #57534e;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  width: auto;
  line-height: 1;
  z-index: 1;
}

.p-counselor-students-index .search-input-clear:hover {
  color: #1c1917;
}

/* Fixed-width wrapper – prevents shrinking/expanding */

.p-counselor-students-index .search-field-group {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* prevent shrinking in flex container */
}

/* Input fills the wrapper, respects padding */

.p-counselor-students-index .search-field-group input.search-input {
  width: 100%;
  box-sizing: border-box;
}

.p-student-school-selections-index .school-deadline-fields .form-input {
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 0 0.5rem;
  font-size: 0.8125rem;
  box-sizing: border-box;
}

/* Helps normalize the native select/date rendering */

.p-student-school-selections-index .school-deadline-fields select.form-input {
  line-height: 2.25rem;
}

.p-student-school-selections-index .school-deadline-actions {
  align-items: flex-end;
  padding-bottom: 0;
}

.p-student-school-selections-index .school-deadline-actions .c-btn {
  height: 2.25rem;
  min-height: 2.25rem;
  box-sizing: border-box;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  /* Ensure perfect vertical centering across button styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Force Select2 dropdown to 50% width inside staff-assign-row */

.p-admin-users-show .staff-assign-row .select2-container {
  width: 37%;
}

/* ── counselor/messages/show.html.erb (relocated from <style>, scoped to .p-counselor-messages-show) ── */
.p-counselor-messages-show .c-reply-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.p-counselor-messages-show .c-reply-form textarea {
  flex: 1;
  margin: 0;
  height: 2.5rem;
  min-height: 2.5rem;
  resize: vertical;
}

.p-counselor-messages-show .c-reply-form button {
  flex-shrink: 0;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.p-admin-users-show .credit-form .form-input {
  line-height: normal;
}

.p-admin-users-show .credit-form .detail-label {
  min-height: 2.25rem;
  /* enough to hold two lines of the small label text */
  display: flex;
  align-items: flex-end;
  /* keep label text near the input */
}

.p-admin-organizations-index .sync-btn {
  background-color: #1c1917;
  color: #fff;
  /* ensure white text even if .btn is overridden */
  border-color: #1c1917;
  /* match the background for a seamless look */
}

.p-admin-organizations-index .sync-btn:hover {
  background-color: #44403c;
  /* lighter hover (--color-accent-hover) */
  border-color: #44403c;
}

/* ── student/milestone_calls/index.html.erb (relocated from <style>, scoped to .p-student-milestone-calls-index) ── */
.p-student-milestone-calls-index .mc-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.p-student-milestone-calls-index .mc-list-item .mc-list-number {
  order: -1;
  flex-shrink: 0;
}

/* ── student/messages/index.html.erb (relocated from <style>, scoped to .p-student-messages-index) ── */
.p-student-messages-index .whitespace-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef4444;
}

.p-student-messages-index .whitespace-error-message {
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  display: block;
}

.p-admin-schools-index .search-field-group .search-input--with-icons {
  padding-left: 2rem !important;
}

.p-admin-schools-index .search-field-group .search-icon {
  z-index: 1;
}

.p-admin-users-index .search-input-clear[hidden],
.p-counselor-students-index .search-input-clear[hidden] {
  display: none;
}

.c-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}