/**
 * Custom Portal Layout CSS
 * Works with NeoBrutalismCSS - adds layout structure only
 */

/* =============================================
   PORTAL LAYOUT - Sidebar + Topbar + Main
   ============================================= */

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.f9t10-portal-wrapper {
  display: flex;
  min-height: 100vh;
  background-color: #F2F9FF;
}

/* Sidebar */
.f9t10-portal-sidebar {
  width: 260px;
  background-color: #fff;
  border-right: 2px solid #000;
  overflow-y: auto;
  padding: 1.5rem 0;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 900;
}

.f9t10-sidebar-brand {
  padding: 0 1.5rem 1.5rem;
  border-bottom: 2px solid #000;
  margin-bottom: 1.5rem;
}

.f9t10-sidebar-brand h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.f9t10-sidebar-brand a {
  color: inherit;
  text-decoration: none;
}

.f9t10-sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.f9t10-sidebar-nav li {
  margin: 0;
}

.f9t10-sidebar-nav a {
  display: block;
  padding: 0.75rem 1.5rem;
  color: #333;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}

.f9t10-sidebar-nav a:hover {
  background-color: #F2F9FF;
  border-left-color: #000;
}

.f9t10-sidebar-nav li.active a {
  background-color: #f0f0f0;
  border-left-color: #000;
  font-weight: 600;
}

/* Main Area */
.f9t10-portal-main-area {
  flex: 1;
  margin-left: 260px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Topbar */
.f9t10-portal-topbar {
  background-color: transparent;
  border-bottom: none;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  box-shadow: none;
}

.f9t10-topbar-left {
  flex: 1;
}
/* 
.f9t10-topbar-left h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
} */

.f9t10-topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.f9t10-welcome-message {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

#f9t10-client-dropdown-header {
  padding: 0.5rem 0.75rem;
  border: 2px solid #000;
  background-color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  min-width: 150px;
}

.f9t10-topbar-user {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.f9t10-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.f9t10-user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #fff;
  border: 2px solid #000;
  margin-top: 0.5rem;
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 1000;
}

.f9t10-topbar-user:hover .f9t10-user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.f9t10-user-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.f9t10-user-dropdown li {
  margin: 0;
}

.f9t10-user-dropdown a {
  display: block;
  padding: 0.75rem 1rem;
  color: #333;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.f9t10-user-dropdown a:hover {
  background-color: #f5f5f5;
  padding-left: 1.25rem;
}

/* Main Content */
.f9t10-portal-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  position: relative;
}


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .f9t10-portal-wrapper {
    flex-direction: column;
  }

  .f9t10-portal-sidebar {
    position: relative;
    width: 100%;
    border-right: none;
    border-bottom: 2px solid #000;
    padding: 1rem 0;
    max-height: 70px;
    overflow: hidden;
  }

  .f9t10-portal-main-area {
    margin-left: 0;
  }

  .f9t10-sidebar-brand {
    padding: 0 1rem;
    margin-bottom: 0;
    border-bottom: none;
  }

  .f9t10-sidebar-nav {
    display: flex;
    gap: 0;
  }

  .f9t10-sidebar-nav ul {
    display: flex;
    flex: 1;
  }

  .f9t10-sidebar-nav li {
    flex: 1;
  }

  .f9t10-sidebar-nav a {
    padding: 0.75rem 1rem;
    text-align: center;
    border-left: none;
    border-bottom: 3px solid transparent;
  }

  .f9t10-sidebar-nav a:hover {
    border-left: none;
    border-bottom-color: #000;
  }

  .f9t10-sidebar-nav li.active a {
    border-left: none;
    border-bottom-color: #000;
  }

  .f9t10-portal-main {
    padding: 1rem;
  }
}

/* =============================================
   GRID LAYOUTS (using NeoBrutalismCSS base)
   ============================================= */

.f9t10-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.f9t10-articles {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.f9t10-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.f9t10-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.f9t10-edps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .f9t10-dashboard-stats,
  .f9t10-articles-grid,
  .f9t10-projects-grid,
  .f9t10-edps-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   DASHBOARD LAYOUT
   ============================================= */

.f9t10-dashboard-content {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.f9t10-dashboard-section {
  flex: 1;
  min-width: 300px;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */

.f9t10-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #000;
}

.f9t10-no-results {
  text-align: center;
  padding: 3rem 1.5rem;
  color: #666;
}

.f9t10-loading {
  text-align: center;
  padding: 2rem;
}

/* =============================================
   WARNING BUTTON - NeoBrutalismCSS Extension
   ============================================= */

/* Warning button - Yellow neo-brutalist style */
.nb-button.warning {
  background-color: #FFD700; /* Giallo oro */
  color: #000;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  font-weight: bold;
  transition: all 0.2s;
}

.nb-button.warning:hover {
  background-color: #FFC700; /* Leggermente più scuro */
  box-shadow: 2px 2px 0 #000;
  transform: translate(2px, 2px);
}

.nb-button.warning:active {
  box-shadow: 0 0 0 #000;
  transform: translate(4px, 4px);
}

/* =============================================
   BADGES - NeoBrutalismCSS
   ============================================= */

.badge {
  display: inline-block;
}

.badge-text {
  margin: 0;
  padding: 0;
}

/* =============================================
   DIALOG AS MODAL OVERLAY - NeoBrutalismCSS
   ============================================= */

/* Dialog overlay backdrop - fills .f9t10-portal-main */
.nb-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Dialog shown state */
.nb-dialog.show {
  display: flex;
}

/* Dialog content box */
.nb-dialog form {
  background-color: #fff;
  border: 3px solid #000;
  max-width: 500px;
  width: 90%;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

/* Header styling */
.nb-dialog .nb-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 2px solid #000;
}

.nb-dialog .nb-dialog-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.nb-dialog .nb-dialog-header button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
}

/* Body styling */
.nb-dialog .nb-dialog-body {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: 60vh;
}

/* Footer styling */
.nb-dialog .nb-dialog-footer {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 2px solid #000;
  justify-content: flex-end;
}

.nb-dialog .nb-dialog-footer button {
  margin: 0;
  border-radius: 0 !important;
}

/* =============================================
   CARD ACTIONS - Button Alignment & Compactness
   ============================================= */

   /* TODO: abuso terribile di !important, magari ripulire */

.nb-card-actions {
  display: flex !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
}

.nb-card-actions button.nb-button,
.nb-card-actions a.nb-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
  height: auto !important;
  flex: 1 !important;
  min-width: 100px !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
}

@media (max-width: 768px) {
  /* View Details anchor - appears first, full width */
  .nb-card-actions a.nb-button {
    flex-basis: 100% !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
    order: 1 !important;
  }

  /* Request Review and Block Publication come second, stay together */
  .nb-card-actions button.nb-button {
    flex: 1 1 calc(50% - 0.375rem) !important;
    min-width: 60px !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
    order: 2 !important;
  }
}

/* =============================================
   CALENDAR VIEW
   ============================================= */

.f9t10-calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(100vh - 300px);
}

.f9t10-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.f9t10-calendar-header h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
}

.f9t10-calendar-filters {
  display: flex;
  gap: 1rem;
}

.f9t10-calendar-filters select {
  min-width: 180px;
}

#f9t10-calendar-container {
  flex: 1;
  min-height: 500px;
  background-color: #fff;
  border: 2px solid #000;
  padding: 1.5rem;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

/* FullCalendar overrides for consistent styling */
#f9t10-calendar-container .fc {
  font-family: inherit;
}

#f9t10-calendar-container .fc-button-primary {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

#f9t10-calendar-container .fc-button-primary:hover {
  background-color: #333;
  border-color: #333;
}

#f9t10-calendar-container .fc-button-primary.fc-button-active {
  background-color: #000;
  border-color: #000;
}

#f9t10-calendar-container .fc-daygrid-day.fc-day-other {
  background-color: #f9f9f9;
}

#f9t10-calendar-container .fc-col-header-cell {
  background-color: #f2f9ff;
  font-weight: 600;
}

/* =============================================
   EDP DETAIL TABLE - NeoBrutalism Table Style
   ============================================= */

.f9t10-articles-table-wrapper {
  overflow-x: auto;
  margin-top: 1.5rem;
}

.f9t10-edp-detail {
  max-width: 100%;
}

.f9t10-edp-detail-header {
  margin-bottom: 2rem;
}

.f9t10-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: #666;
}

.f9t10-breadcrumb a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #000;
  transition: all 0.2s ease;
}

.f9t10-breadcrumb a:hover {
  background-color: #f2f9ff;
}

.f9t10-breadcrumb-separator {
  color: #999;
}

.f9t10-edp-detail-header h1 {
  margin: 0 0 1rem 0;
  font-size: 2rem;
  font-weight: 700;
}

.f9t10-edp-project-name {
  margin: 0 0 1.5rem 0;
  font-size: 1rem;
  color: #666;
}

.f9t10-edp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #000;
}

.f9t10-edp-meta-item {
  display: flex;
  flex-direction: column;
}

.f9t10-edp-meta-item strong {
  font-weight: 600;
  color: #000;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.f9t10-edp-meta-item span {
  font-size: 1.1rem;
  margin-top: 0.25rem;
  color: #333;
}

.f9t10-edp-articles h2 {
  margin: 0 0 1.5rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #000;
}

/* Table row styling */
.f9t10-article-row.is-created {
  background-color: #f0fff4; /* Light green for created articles */
}

.f9t10-article-row.not-created {
  background-color: #fff; /* White for pending articles */
}

.f9t10-article-row:hover {
  background-color: #f2f9ff; /* Light blue on hover */
}

/* Badge adjustments for table */
.f9t10-article-type .badge,
.f9t10-article-status .badge {
  margin: 0;
}

.f9t10-article-type .badge-text,
.f9t10-article-status .badge-text {
  font-size: 0.8rem;
  padding: 0.25rem 0;
}

/* Button adjustments for table */
.f9t10-article-details .nb-button {
  width: 100%;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.75rem !important;
  min-height: 32px !important;
}

/* Details row styling */
.f9t10-article-details-row {
  background-color: #f9f9f9 !important;
}

.f9t10-article-details-content {
  padding: 1.5rem;
  background-color: #fff;
  border: 1px solid #e0e0e0;
}

.f9t10-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.f9t10-detail-item {
  display: flex;
  flex-direction: column;
}

.f9t10-detail-item strong {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  color: #000;
}

.f9t10-detail-item span {
  color: #333;
  font-size: 0.95rem;
}

.f9t10-created-link {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.f9t10-created-link a {
  color: #000;
  text-decoration: underline;
  transition: all 0.2s ease;
}

.f9t10-created-link a:hover {
  background-color: #f2f9ff;
  padding: 0 0.25rem;
}

/* =============================================
   NOTIFICATIONS - Dialog-like Layout
   ============================================= */

.f9t10-notifications-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Map .f9t10-notification-item to nb-dialog structure */
.f9t10-notification-item {
  background-color: #fff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

/* Map .f9t10-notification-header to nb-dialog-header */
.f9t10-notification-item .f9t10-notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 2px solid #000;
}

.f9t10-notification-item .f9t10-notification-header h4 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

/* Map date, content, actions to nb-dialog-body */
.f9t10-notification-item .f9t10-notification-content {
  padding: 1.5rem;
}

.f9t10-notification-item .f9t10-notification-content p {
  margin: 0;
  line-height: 1.5;
}

.f9t10-notification-date {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

.f9t10-notification-item .f9t10-notification-actions {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 2px solid #000;
  justify-content: flex-end;
}