/* ============================================================
   SciencePRO - Main Stylesheet
   Mobile-first, responsive, works offline (no CDN CSS beyond Bootstrap)
   ============================================================ */

:root {
  /* Brand Colors */
  --color-primary:        #2563eb;
  --color-primary-hover:  #1d4ed8;
  --color-primary-light:  #eff6ff;
  --color-success:        #16a34a;
  --color-success-light:  #f0fdf4;
  --color-warning:        #d97706;
  --color-warning-light:  #fffbeb;
  --color-danger:         #dc2626;
  --color-danger-light:   #fef2f2;
  --color-info:           #0891b2;

  /* Surfaces */
  --color-surface:        #ffffff;
  --color-surface-2:      #f8fafc;
  --color-border:         #e2e8f0;
  --color-border-light:   #f1f5f9;

  /* Text */
  --color-text:           #0f172a;
  --color-text-muted:     #64748b;
  --color-text-light:     #94a3b8;

  /* Layout */
  --sidebar-width:        260px;
  --topbar-height:        60px;
  --border-radius:        8px;
  --border-radius-lg:     12px;
  --shadow-sm:            0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:            0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:            0 10px 30px rgba(0,0,0,.12);

  /* Font */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-surface-2);
  margin: 0;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   APP LAYOUT (sidebar + main)
   ============================================================ */
.app-body { display: flex; min-height: 100vh; }

/* ---- SIDEBAR ---- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-text);
  color: #fff;
  display: flex; flex-direction: column;
  z-index: 1000;
  /* Mobile: sidebar starts hidden off-screen, slides in when sidebar--open is set.
     sessionStorage preserves state across page navigations so it doesn't snap closed. */
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}

/* Desktop: always visible */
@media (min-width: 992px) {
  .sidebar { transform: translateX(0) !important; }
}

/* Mobile: hidden by default, shown when JS adds sidebar--open */
@media (max-width: 991.98px) {
  .sidebar               { transform: translateX(-100%); }
  .sidebar.sidebar--open { transform: translateX(0); }
}

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff !important; text-decoration: none;
}
.brand-logo { width: 32px; height: 32px; object-fit: contain; }
.brand-text  { font-size: 1rem; color: #cbd5e1; }
.brand-text strong { color: #fff; }
.sidebar-close { background: none; border: none; color: rgba(255,255,255,.5);
  font-size: 1.1rem; cursor: pointer; padding: 0; }

/* User area */
.sidebar-user {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.user-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.user-info { overflow: hidden; }
.user-name  { display: block; font-size: .85rem; font-weight: 600;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role-badge {
  display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .05em;
  padding: 1px 7px; border-radius: 20px;
  background: rgba(255,255,255,.12); color: #94a3b8;
}

/* Nav links */
.sidebar-nav { list-style: none; margin: 8px 0; padding: 0; flex: 1; }
.nav-section-title {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #475569; padding: 16px 20px 6px;
}
.nav-item .nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  color: #94a3b8; text-decoration: none;
  border-radius: 0;
  transition: background .15s, color .15s;
  position: relative; font-size: .875rem;
}
.nav-item .nav-link:hover {
  background: rgba(255,255,255,.06); color: #fff;
}
.nav-item .nav-link.active {
  background: var(--color-primary); color: #fff;
}
.nav-icon { width: 18px; text-align: center; flex-shrink: 0; }
.badge-count {
  margin-left: auto; background: var(--color-danger);
  color: #fff; font-size: .65rem; font-weight: 700;
  padding: 1px 7px; border-radius: 20px;
}

/* Footer */
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.08); }
.btn-logout {
  display: flex; align-items: center; gap: 8px;
  color: #94a3b8; font-size: .85rem; background: none;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--border-radius);
  padding: 8px 14px; width: 100%; cursor: pointer; transition: all .15s;
  text-decoration: none;
}
.btn-logout:hover { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }

/* ---- MAIN CONTENT ---- */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1; min-height: 100vh;
  display: flex; flex-direction: column;
  transition: margin-left .25s ease;
}

/* ---- TOPBAR ---- */
.topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.topbar-left  { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 16px; }

.sidebar-toggle {
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 1.1rem; padding: 4px;
}
.breadcrumb { font-size: .8rem; margin-bottom: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-light); }
.breadcrumb-item.active { color: var(--color-text-muted); }

.topbar-notif { position: relative; color: var(--color-text-muted); font-size: 1.1rem; }
.topbar-notif:hover { color: var(--color-text); }
.notif-dot {
  position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-danger); border: 2px solid var(--color-surface);
}
.topbar-user { font-size: .85rem; font-weight: 500; color: var(--color-text-muted); }

/* ---- PAGE CONTENT ---- */
.page-content { padding: 24px; flex: 1; }
.page-title   { font-size: 1.25rem; font-weight: 700; color: var(--color-text); }
.page-header  { margin-bottom: 0; }

/* Mobile overlay */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 999;
}
.sidebar-overlay.overlay--active { display: block; }

/* ============================================================
   CARDS
   ============================================================ */
.card-section {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
}
.card-section .card-header {
  background: transparent; border-bottom: 1px solid var(--color-border);
  padding: 14px 20px; font-size: .9rem;
}
.card-section .card-footer {
  background: transparent; border-top: 1px solid var(--color-border);
  padding: 10px 20px;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-card {
  border-radius: var(--border-radius-lg); padding: 20px;
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-icon { font-size: 1.8rem; width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-value { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.stat-label { font-size: .78rem; color: var(--color-text-muted); font-weight: 500; margin-top: 2px; }

.stat-card--blue   .stat-icon { background: var(--color-primary-light); color: var(--color-primary); }
.stat-card--orange .stat-icon { background: var(--color-warning-light); color: var(--color-warning); }
.stat-card--green  .stat-icon { background: var(--color-success-light); color: var(--color-success); }
.stat-card--red    .stat-icon { background: var(--color-danger-light);  color: var(--color-danger);  }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.status-badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
}
.status-pre-event  { background: #dbeafe; color: #1e40af; }
.status-event      { background: #fef9c3; color: #854d0e; }
.status-post-event { background: #e0e7ff; color: #3730a3; }
.status-on-hold    { background: #fed7aa; color: #92400e; }
.status-completed  { background: #dcfce7; color: #14532d; }
.status-pending    { background: #f1f5f9; color: #475569; }
.status-active     { background: #dcfce7; color: #15803d; }
.status-default    { background: #f1f5f9; color: #475569; }

.type-badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 600;
}
.type-events    { background: #eff6ff; color: #2563eb; }
.type-medaffairs{ background: #fdf4ff; color: #7c3aed; }

.event-type-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .75rem; color: var(--color-text-muted);
  background: var(--color-border-light); padding: 2px 8px; border-radius: 12px;
}

.role-badge { display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: .72rem; font-weight: 700; }
.role-admin   { background: #fee2e2; color: #991b1b; }
.role-manager { background: #dbeafe; color: #1e40af; }
.role-viewer  { background: #f0fdf4; color: #166534; }

/* ============================================================
   PROJECT CARDS
   ============================================================ */
.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden; height: 100%;
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.project-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.project-card--archived { opacity: .85; }
.project-card--archived:hover { opacity: 1; }

.project-card-header { padding: 16px 16px 10px; }
.project-card-title  { font-size: .9rem; font-weight: 600; line-height: 1.35; margin: 0; }
.project-card-title a { color: var(--color-text); }
.project-card-title a:hover { color: var(--color-primary); text-decoration: none; }
.project-card-body   { padding: 0 16px 12px; flex: 1; }
.project-card-info   { font-size: .8rem; color: var(--color-text-muted); }
.project-card-date   { font-size: .78rem; color: var(--color-text-muted); margin-top: 4px; }
.project-card-footer {
  padding: 10px 16px; border-top: 1px solid var(--color-border);
  display: flex; gap: 8px; background: var(--color-surface-2);
}

/* Project List Items (dashboard) */
.project-list        { }
.project-list-item   {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--color-border);
  gap: 12px; flex-wrap: wrap;
}
.project-list-item:last-child { border-bottom: none; }
.project-list-main   { flex: 1; min-width: 200px; }
.project-list-title  { font-size: .88rem; font-weight: 600; margin: 0; }
.project-list-title a{ color: var(--color-text); }
.project-list-title a:hover { color: var(--color-primary); text-decoration: none; }
.project-list-meta   { font-size: .75rem; color: var(--color-text-muted); margin-top: 2px; }
.project-list-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  min-width: 140px; }
.progress-wrap       { width: 100%; }
.progress-bar-outer  { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.progress-bar-inner  { height: 100%; background: var(--color-success); border-radius: 3px; transition: width .4s; }
.progress-text       { font-size: .72rem; color: var(--color-text-muted); }
.badge-critical-count{ font-size: .72rem; color: var(--color-danger); font-weight: 600; }

/* ============================================================
   TASK LIST
   ============================================================ */
.task-list { }
.task-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--color-border-light);
  transition: background .15s;
}
.task-item:hover { background: var(--color-surface-2); }
.task-item:last-child { border-bottom: none; }
.task-item.task-done { opacity: .65; }
.task-item.task-overdue { border-left: 3px solid var(--color-danger); }
.task-item.task-critical { border-left: 3px solid var(--color-warning); }

.task-item-check { padding-top: 2px; flex-shrink: 0; }
.btn-check-task  { background: none; border: none; cursor: pointer; color: var(--color-border);
  font-size: 1.1rem; padding: 0; transition: color .15s; }
.btn-check-task:hover { color: var(--color-success); }
.task-completed-icon { color: var(--color-success); font-size: 1.1rem; }

.task-item-body  { flex: 1; min-width: 0; }
.task-title      { font-size: .875rem; font-weight: 500; word-break: break-word; }
.task-completed-text { text-decoration: line-through; color: var(--color-text-muted); }
.task-item-meta  { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.task-meta-item  { font-size: .75rem; color: var(--color-text-muted); }

.task-item-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.task-item:hover .task-item-actions { opacity: 1; }

.task-priority-indicator { font-size: .85rem; flex-shrink: 0; }

/* Task status mini badge */
.task-status-mini {
  display: inline-block; padding: 1px 8px; border-radius: 12px;
  font-size: .68rem; font-weight: 700;
}
.ts-1 { background: #f1f5f9; color: #475569; }
.ts-2 { background: #dbeafe; color: #1e40af; }
.ts-3 { background: #dcfce7; color: #15803d; }
.ts-4 { background: #fee2e2; color: #991b1b; }

/* Task mini list (dashboard) */
.task-mini-list  { }
.task-mini-item  {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--color-border-light);
}
.task-mini-item:last-child { border-bottom: none; }
.task-mini-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.priority-critical .task-mini-dot { background: var(--color-danger); }
.priority-high    .task-mini-dot  { background: var(--color-warning); }
.priority-normal  .task-mini-dot  { background: var(--color-primary); }
.priority-low     .task-mini-dot  { background: var(--color-text-light); }
.task-mini-body  { flex: 1; min-width: 0; }
.task-mini-title { font-size: .82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-mini-meta  { font-size: .73rem; color: var(--color-text-muted); }

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notif-list    { }
.notif-item    {
  display: flex; gap: 14px; padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-unread  { background: #f8faff; }
.notif-icon    { font-size: 1.3rem; flex-shrink: 0; width: 32px; text-align: center; padding-top: 2px; }
.notif-body    { flex: 1; min-width: 0; }
.notif-title   { font-size: .875rem; font-weight: 600; }
.notif-message { font-size: .82rem; }
.notif-footer  { font-size: .75rem; }
.notif-unread-dot {
  position: absolute; top: 18px; right: 16px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary);
}
.notif-task-detail { }
.task-detail-box {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--border-radius); padding: 10px 14px; margin-top: 6px;
}

/* ============================================================
   ARCHIVE
   ============================================================ */
.archive-year-header {
  font-size: 1.1rem; font-weight: 700;
  color: var(--color-text-muted); padding: 8px 0 4px;
  border-bottom: 2px solid var(--color-border); margin-bottom: 8px;
}
.archive-count {
  font-size: .75rem; font-weight: 500; color: var(--color-text-light);
  margin-left: 10px;
}

/* ============================================================
   ACTIVITY LOG
   ============================================================ */
.action-badge {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: .72rem; font-weight: 700;
}
.action-create   { background: #dcfce7; color: #15803d; }
.action-edit     { background: #dbeafe; color: #1e40af; }
.action-delete   { background: #fee2e2; color: #991b1b; }
.action-login    { background: #e0e7ff; color: #3730a3; }
.action-logout   { background: #f1f5f9; color: #475569; }
.action-complete { background: #fef9c3; color: #854d0e; }
.action-default  { background: #f1f5f9; color: #475569; }

.role-badge-xs { font-size: .65rem; padding: 1px 6px; border-radius: 10px; }

/* ============================================================
   ADMIN USERS
   ============================================================ */
.user-avatar-sm {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   PROJECT DETAIL
   ============================================================ */
.project-detail-header { }
.project-detail-title  { font-size: 1.4rem; font-weight: 800; }
.project-detail-meta   { font-size: .82rem; color: var(--color-text-muted); gap: 12px !important; }
.progress-section      { }
.project-description   {
  font-size: .85rem; color: var(--color-text-muted);
  background: var(--color-surface-2); border-radius: var(--border-radius);
  padding: 10px 14px; border-left: 3px solid var(--color-primary);
}

/* ============================================================
   FORMS / MODALS
   ============================================================ */
.modal-content  { border: none; box-shadow: var(--shadow-lg); border-radius: var(--border-radius-lg); }
.modal-header   { border-bottom: 1px solid var(--color-border); }
.modal-footer   { border-top: 1px solid var(--color-border); }
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Project Type Picker */
.project-type-picker   { }
.type-picker-option    { flex: 1; }
.type-picker-option input[type=radio] { display: none; }
.type-picker-card {
  border: 2px solid var(--color-border); border-radius: var(--border-radius-lg);
  padding: 16px; text-align: center; cursor: pointer; transition: all .2s;
}
.type-picker-option:hover .type-picker-card {
  border-color: var(--color-primary); background: var(--color-primary-light);
}
.type-picker-option input[type=radio]:checked + .type-picker-card {
  border-color: var(--color-primary); background: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-icon {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--border-radius); font-size: .8rem;
}
.btn-primary   { background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* ============================================================
   TABLES
   ============================================================ */
.table th { font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-muted);
  background: var(--color-surface-2); border-bottom: 2px solid var(--color-border); }
.table td { font-size: .85rem; vertical-align: middle; border-color: var(--color-border-light); }
.table-hover tbody tr:hover { background: var(--color-surface-2) !important; }

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty-state { color: var(--color-text-muted); }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.timeline-tooltip {
  position: fixed; background: #1e293b; color: #fff;
  padding: 5px 10px; border-radius: 6px; font-size: .75rem;
  pointer-events: none; z-index: 9999; white-space: nowrap;
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */
@media (max-width: 991.98px) {
  .main-content { margin-left: 0; }
  .page-content { padding: 16px; }
  .stat-value   { font-size: 1.4rem; }
}

@media (max-width: 575.98px) {
  .project-list-item     { flex-direction: column; align-items: flex-start; }
  .project-list-progress { width: 100%; align-items: flex-start; }
  .topbar                { padding: 0 14px; }
  .page-content          { padding: 12px; }
}

/* ============================================================
   ADDITIONAL UTILITY CLASSES (referenced in templates)
   ============================================================ */

/* Role badge extra-small (Activity Log) */
.role-badge-xs {
  display: inline-block; padding: 1px 6px; border-radius: 10px;
  font-size: .65rem; font-weight: 700;
}
.role-badge-xs.role-admin    { background: #fee2e2; color: #991b1b; }
.role-badge-xs.role-manager  { background: #dbeafe; color: #1e40af; }
.role-badge-xs.role-viewer   { background: #f0fdf4; color: #166534; }

/* Timeline dot legend */
.timeline-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 4px; vertical-align: middle;
}

/* Priority badges (task list) */
.badge-critical { background: #fee2e2; color: #991b1b; }
.badge-high     { background: #ffedd5; color: #9a3412; }
.badge-normal   { background: #dbeafe; color: #1e40af; }
.badge-low      { background: #f0fdf4; color: #166534; }

/* Card sub-header */
.card-sub-header { background: var(--color-surface-2); }

/* Category list */
.category-list .list-group-item { padding: 10px 16px; font-size: .875rem; }

/* Project type picker responsive */
@media (max-width: 575.98px) {
  .project-type-picker { flex-direction: column; }
  .type-picker-option  { width: 100%; }
}

/* User management initials */
.user-avatar-sm {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-size: .75rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Task status badge in notifications */
.task-status-mini {
  display: inline-block; padding: 1px 8px; border-radius: 12px;
  font-size: .68rem; font-weight: 700;
}

/* Archive year group */
.archive-year-group { }

/* Stat card responsive fix */
@media (max-width: 400px) {
  .stat-card { padding: 14px; gap: 10px; }
  .stat-icon { width: 40px; height: 40px; font-size: 1.3rem; }
  .stat-value { font-size: 1.4rem; }
}

/* Scrollable modal body */
.modal-dialog-scrollable .modal-body { overflow-y: auto; max-height: 70vh; }

/* Notification unread indicator */
.notif-item.notif-unread .notif-title { font-weight: 700; }

/* Print styles - hide sidebar and topbar */
@media print {
  .sidebar, .topbar, .sidebar-overlay { display: none !important; }
  .main-content { margin-left: 0 !important; }
  .page-content { padding: 0 !important; }
  .btn, .modal { display: none !important; }
}

/* ============================================================
   ACTIVITY LOG LIST (MyActivity.aspx + Dashboard)
   ============================================================ */
.activity-log-list { }
.activity-log-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  border-bottom: 1px solid var(--color-border-light); flex-wrap: wrap;
}
.activity-log-item:last-child { border-bottom: none; }
.activity-log-left  { flex-shrink: 0; min-width: 110px; }
.activity-log-middle{ flex: 1; min-width: 160px; }
.activity-log-right { flex-shrink: 0; white-space: nowrap; }

/* Dashboard mini activity list */
.activity-mini-list { }
.activity-mini-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-bottom: 1px solid var(--color-border-light); flex-wrap: wrap;
}
.activity-mini-item:last-child { border-bottom: none; }
.activity-detail { flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-time { white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   FIXES - Mobile sidebar, Tasks page, Notifications
   ============================================================ */

/* --- Tasks standalone page --- */
.tasks-page-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

/* Task category badge */
.task-category-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 600;
  background: #e0e7ff;
  color: #3730a3;
  margin-left: 4px;
}

/* --- Notification: read-by info --- */
.notif-read-by {
  font-size: .72rem;
  color: var(--color-success);
  margin-top: 2px;
}

/* --- Notification: click-to-task link --- */
.notif-task-link {
  display: inline-block;
  margin-top: 4px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-primary);
}
.notif-task-link:hover { text-decoration: underline; }

/* --- Responsive table fix for Tasks page --- */
@media (max-width: 767px) {
  .tasks-table-wrap { overflow-x: auto; }
  .task-item-actions { opacity: 1 !important; } /* always visible on touch */
}

/* ============================================================
   NEW REQUIREMENTS — Sub-categories, MedAffairs Types
   ============================================================ */

/* Sub-category badges */
.badge-subcategory-preevent  { background:#dbeafe; color:#1e40af; }
.badge-subcategory-event     { background:#dcfce7; color:#15803d; }
.badge-subcategory-postevent { background:#fde68a; color:#92400e; }

/* Task item sub-category color strip */
.task-item[data-subcategory="Pre-Event"]  { border-left:3px solid #3b82f6; }
.task-item[data-subcategory="Event"]      { border-left:3px solid #22c55e; }
.task-item[data-subcategory="Post-Event"] { border-left:3px solid #f59e0b; }

/* Template apply card */
.template-apply-card { background:#f0f9ff; border:1px dashed #3b82f6; border-radius:var(--border-radius); }

/* MedAffairs type badge */
.medaffairs-type-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:.75rem; color:var(--color-text-muted);
  background:var(--color-border-light); padding:2px 8px; border-radius:12px;
}

/* ── Feature: Brand subtitle ── */
.brand-text-group { display:flex; flex-direction:column; line-height:1.15; }
.brand-subtext { font-size:.6rem; color:var(--color-text-muted); letter-spacing:.06em; text-transform:uppercase; opacity:.8; }

/* ── Feature: Category grouping ── */
.category-group-header {
  padding: 8px 16px;
  background: var(--color-bg-subtle, #f8f9fa);
  border-bottom: 1px solid var(--color-border-light, #e5e7eb);
  border-top: 1px solid var(--color-border-light, #e5e7eb);
  margin-top: 4px;
  position: sticky;
  top: 0;
  z-index: 2;
}
.category-group-header .btn-link { color: var(--color-text-primary, #111827); }
.category-group-body { border-bottom: 2px solid var(--color-border-light, #e5e7eb); }
.category-group-body .task-item:last-child { border-bottom: none; }

/* Event Category badge */
.badge-event-cat {
    background-color: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* ── Clickable dashboard stat cards ── */
.stat-card-link {
    text-decoration: none;
    display: block;
}
.stat-card-link:hover .stat-card--clickable {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    cursor: pointer;
}
.stat-card--clickable {
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
}
.stat-card--clickable::after {
    content: '\f35d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: .65rem;
    position: absolute;
    bottom: 8px;
    right: 10px;
    opacity: .35;
}

/* Remove underline from stat card links */
.stat-card-link,
.stat-card-link:hover,
.stat-card-link:focus,
.stat-card-link:active {
    text-decoration: none !important;
    color: inherit;
}