/* Layout System - Grid and Structure */

.app-container {
  display: grid;
  grid-template-areas: 
    "sidebar main";
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  grid-area: sidebar;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  position: fixed;
  width: var(--sidebar-width);
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.sidebar-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.sidebar-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: 0;
}

/* Logo link styling */
.logo-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.logo-link:hover {
    text-decoration: none;
    color: inherit;
}
  
/* Navigation */
.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  margin-bottom: var(--spacing-xs);
}

.nav-link {
  display: block;
  padding: var(--spacing-md);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  font-weight: 500;
}

.nav-link:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.nav-link.active {
  background-color: var(--primary-color);
  color: var(--text-inverse);
}

/* A menu item's live count (MenuHelper::generateCountHtml). Not .badge: that class is
   recoloured by dynamic-badge-colors.js. The link turns flex so the pill stays on the
   label's line, right-aligned, instead of wrapping under it. */
.nav-link:has(> .nav-count) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xs);
}

.nav-count {
  display: inline-block;
  margin-left: var(--spacing-xs);
  padding: 0 var(--spacing-sm);
  border-radius: var(--radius-pill);
  background-color: var(--surface-warning-tint);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.6;
}

.nav-link.active .nav-count {
  background-color: var(--bg-primary);
  color: var(--primary-color);
}

.nav-group {
  margin-bottom: var(--spacing-lg);
}

.nav-group-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  /* X-26: --text-muted on --bg-sidebar measured 4.23:1 on the minuciosa theme — the menu
     background is a tint, not white, so the app-wide muted grey does not clear AA against
     it. --text-secondary on the same background is 5.55:1. Scoped here rather than
     darkening --text-muted, which would repaint every muted string in the application to
     fix a pairing that only exists in the sidebar. */
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
  padding: 0 var(--spacing-md);
}

/* Main Content */
.main-content {
  grid-area: main;
  /* X-63: a grid item's min-width defaults to auto, so the 1fr track grew to the
     widest table and the whole page scrolled sideways instead of the panel. */
  min-width: 0;
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
}

.content-header {
  background-color: var(--header-bg);
  padding: var(--spacing-md) var(--spacing-xl);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--shadow-sm);
}

/* Reading width vs workspace width (X-74).
   --content-max-width caps the *content box* of the body: the cap plus the body's own
   horizontal padding is the border box. The page header sits inside .content-header's
   identical horizontal padding, so capping it to the bare token puts title and body on
   the same axis. Both centre, so on a monitor wider than the cap the leftover splits to
   both sides instead of piling up on the right. Screens that are a workspace rather than
   a page — the quote builder, the 360, the kanban — opt out with body.layout-wide. */
.content-body {
  padding: var(--spacing-lg) var(--spacing-xl);
  max-width: calc(var(--content-max-width) + 2 * var(--spacing-xl));
  width: 100%;
  margin: 0 auto;
}

/* Page Header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--content-max-width);
  margin: 0 auto var(--spacing-lg);
}

body.layout-wide .content-body,
body.layout-wide .page-header {
  max-width: none;
}

/* Fill mode (X-76): a workspace whose panels scroll inside themselves gets exactly
   the space under the header, whatever the header's height, instead of guessing it
   with `100vh - 100px`. The body becomes a column its child fills; the document
   never scrolls. */
body.layout-fill .main-content {
  height: 100vh;
}

body.layout-fill .content-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.page-title {
  margin: 0;
  color: var(--header-text);
  font-weight: 600;
}

.page-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* Floating Sidebar Edge Toggle */
.sidebar-edge-toggle {
  display: none;
  position: fixed;
  left: calc(var(--sidebar-width) - 12px);
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 36px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-secondary);
  cursor: pointer;
  z-index: 1500;
  transition: all 0.3s ease;
  box-shadow: 2px 0 8px var(--theme-shadow-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) 2px var(--spacing-xs) 10px;
}

.sidebar-edge-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  width: 28px;
}

/* Collapsed sidebar state for desktop */
.app-container.sidebar-collapsed {
  grid-template-columns: 0 1fr;
}

.app-container.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.app-container:not(.sidebar-collapsed) .sidebar {
  transform: translateX(0);
  transition: transform 0.3s ease;
}

/* Adjust toggle position when collapsed */
.app-container.sidebar-collapsed .sidebar-edge-toggle {
  left: -12px;
}

.app-container.sidebar-collapsed .sidebar-edge-toggle i {
  transform: rotate(180deg);
}

/* «Fijar menú» (PD-146): turns the desktop auto-hide off; the phone drawer has none. */
.sidebar-pin {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 44px;
  margin: var(--spacing-xs) auto 0;
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
}
.sidebar-pin:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-pin[aria-pressed="true"] { border-color: var(--theme-primary); color: var(--text-primary); font-weight: 600; }
.sidebar-pin:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
@media (max-width: 768px) {
  .sidebar-pin { display: none; }
}

/* Content Sections */
.content-section {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

/* PD-08 (phase 5): a .content-section whose only child is a full-bleed table —
   the detail screens' show table. The card keeps its border, radius and shadow but
   drops the padding, so the table's own cell padding runs to the card edge instead
   of being inset inside a second one. `overflow: hidden` is what lets the table's
   square corners sit inside the card's rounded ones. */
.content-section--flush {
  padding: 0;
  overflow: hidden;
}

.section-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.section-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* Theme Selector */
.theme-selector {
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.theme-select {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.theme-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--surface-info-tint);
}

/* Page Header Right Side */
.page-header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* Fixed Floating Actions - Always visible */
.floating-actions {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000; /* Above everything except modals (2500) and alerts (3000) */
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: transparent;
  padding: var(--spacing-xs);
  border-radius: var(--radius-lg);
  box-shadow: none;
  border: none;
}

/* Hide floating actions when modal is open */
.modal-overlay.active ~ .floating-actions,
body:has(.modal-overlay.active) .floating-actions {
  display: none;
}

/* Floating page actions */
.floating-page-actions {
  display: flex;
  gap: var(--spacing-xs);
}

.floating-page-actions .btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
}

/* Hide original page actions to avoid duplication */
.page-actions {
  display: none;
}

/* User Avatar */
.user-avatar {
  position: relative;
}

.avatar-button {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-circle);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.avatar-button:hover {
  background-color: var(--bg-hover);
  color: var(--primary-color);
  transform: scale(1.05);
}

.avatar-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--surface-info-tint);
}

/* Avatar Dropdown */
.avatar-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  z-index: 2400; /* Below modals (2500) and alerts (3000), above floating actions */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.avatar-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-header {
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: var(--spacing-xs) 0;
}

.dropdown-item {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}

.dropdown-item i {
  width: 16px;
  text-align: center;
}