/* portal-theme.css - Shared Portal Visual Styling */
/* Unifies Admin, Student, Teacher, and future roles (Super Admin, Support/Agent) */

:root {
  --theme-navy: #041D3D; /* True Navy */
  --theme-navy-hover: #03152C;
  --theme-gold: #C89A42;
  --theme-gold-active: #FCD873; 
  --theme-gold-text: #B45309;
  --theme-surface: #F5F6F8;
  --theme-card: #FFFFFF;
  --theme-border: #E2E8F0;
  
  --theme-status-active-bg: #DCFCE7;
  --theme-status-active-text: #166534;
  --theme-status-published-bg: #DBEAFE;
  --theme-status-published-text: #1E40AF;
  --theme-status-paused-bg: #FEF3C7;
  --theme-status-paused-text: #92400E;
  --theme-status-draft-bg: #F1F5F9;
  --theme-status-draft-text: #475569;
}

/* 1. Global Shell and Surface */
/* Scoped to .shell / #shell to protect storefront and player from unintended inheritance */
body.student-portal-active,
.shell, #shell {
  background-color: var(--theme-surface) !important;
}

.shell .main, #shell .main {
  background-color: var(--theme-surface) !important;
}

.shell .content, #shell .content {
  background-color: var(--theme-surface) !important;
}

/* Unify Topbar Height & Padding */
.shell .topbar, #shell .topbar {
  background-color: var(--theme-card) !important;
  border-bottom: 1px solid var(--theme-border) !important;
  height: 78px !important;
  min-height: 78px !important;
  padding: 0 34px !important;
  display: flex !important;
  align-items: center !important;
}

/* Unify Sidebar Size and Typography */
@media(min-width: 951px) {
  .shell, #shell {
    grid-template-columns: 240px minmax(0,1fr) !important;
    display: grid !important;
  }
  .shell .sidebar, #shell .sidebar {
    width: 240px !important;
    position: relative !important;
    transform: none !important;
    visibility: visible !important;
  }
}

@media(max-width: 950px) {
  .shell .sidebar, #shell .sidebar {
    width: 240px !important;
  }
  .shell .topbar, #shell .topbar {
    height: 65px !important;
    min-height: 65px !important;
    padding: 0 15px !important;
  }
}

.shell .sidebar, #shell .sidebar {
  background-color: var(--theme-navy) !important;
  border-right: none !important;
  color: #F8FAFC !important;
  padding: 30px 19px 17px !important;
  box-sizing: border-box !important;
}

.shell .sidebar .wordmark, #shell .sidebar .wordmark {
  color: #FFFFFF !important;
  font-size: 23px !important;
}

.shell .sidebar .wordmark span, #shell .sidebar .wordmark span {
  color: var(--theme-gold) !important;
}

.shell .sidebar .nav-section, #shell .sidebar .nav-section {
  color: #94A3B8 !important;
  font-size: 9px !important;
  letter-spacing: 1.6px !important;
  font-weight: 700 !important;
}

.shell .sidebar .nav-button, #shell .sidebar .nav-button {
  color: #CBD5E1 !important;
  border-radius: 8px !important;
  transition: background-color 0.2s, color 0.2s !important;
  font-size: 13px !important;
  padding: 12px 13px !important;
  font-weight: 550 !important;
}

.shell .sidebar .nav-button:hover, #shell .sidebar .nav-button:hover {
  background-color: rgba(255,255,255,0.05) !important;
  color: #FFFFFF !important;
}

.shell .sidebar .nav-button.active, #shell .sidebar .nav-button.active {
  background-color: var(--theme-gold-active) !important;
  color: #0F172A !important;
  font-weight: 600 !important;
}

.shell .sidebar .nav-button.active::after, #shell .sidebar .nav-button.active::after {
  display: none !important;
}

.shell .sidebar .nav-button.active .icon, #shell .sidebar .nav-button.active svg {
  color: #0F172A !important;
  stroke: #0F172A !important;
}

/* 3. Ghost Buttons in Sidebar (Readable contrast) - MOVED TO BOTTOM */

/* 4. Cards and Panels */
.shell .page-panel, .shell .card, .shell .student-course-card, .shell .integration, .shell .stat,
#shell .page-panel, #shell .card, #shell .student-course-card, #shell .integration, #shell .stat,
dialog:not(.player):not(#viewer) .page-panel, dialog:not(.player):not(#viewer) .card {
  background-color: var(--theme-card) !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  border-radius: 12px !important;
}

/* 5. Common Tabs */
.shell .format-tabs, #shell .format-tabs, dialog:not(.player):not(#viewer) .format-tabs {
  display: flex !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--theme-border) !important;
  padding-bottom: 0 !important;
  margin-bottom: 24px !important;
}

.shell .format-tab, #shell .format-tab, dialog:not(.player):not(#viewer) .format-tab {
  background: transparent !important;
  color: #64748B !important;
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 12px 20px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  margin-bottom: -1px !important;
  box-shadow: none !important;
}

.shell .format-tab.active, #shell .format-tab.active, dialog:not(.player):not(#viewer) .format-tab.active {
  background-color: #FEF8EB !important;
  color: #0F172A !important;
  border: 1px solid #FDE6A3 !important;
  border-bottom-color: #FEF8EB !important;
  font-weight: 600 !important;
}

.shell .format-tab:hover:not(.active), #shell .format-tab:hover:not(.active), dialog:not(.player):not(#viewer) .format-tab:hover:not(.active) {
  background-color: #F8FAFC !important;
}

/* 6. Tables & Scroll Fix */
.shell table, #shell table, dialog:not(.player):not(#viewer) table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.shell th, #shell th, dialog:not(.player):not(#viewer) th {
  background-color: var(--theme-card) !important;
  color: #64748B !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  border-bottom: 1px solid var(--theme-border) !important;
  padding: 14px 18px !important;
}

.shell td, #shell td, dialog:not(.player):not(#viewer) td {
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--theme-border) !important;
  background-color: var(--theme-card) !important;
  color: #334155 !important;
  font-size: 13px !important;
}

.shell .table-wrap, #shell .table-wrap, dialog:not(.player):not(#viewer) .table-wrap {
  border: 1px solid var(--theme-border) !important;
  border-radius: 12px !important;
  overflow: auto !important; /* Accessibility: prevents inaccessible columns */
  background-color: var(--theme-card) !important;
  width: 100% !important;
}

/* 7. Badges (Compact) */
.shell .badge, #shell .badge, dialog:not(.player):not(#viewer) .badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border: none !important;
}
.shell .badge.green, .shell .badge.active, .shell .badge.success,
#shell .badge.green, #shell .badge.active, #shell .badge.success,
dialog:not(.player):not(#viewer) .badge.green, dialog:not(.player):not(#viewer) .badge.active, dialog:not(.player):not(#viewer) .badge.success { 
  background-color: var(--theme-status-active-bg) !important; 
  color: var(--theme-status-active-text) !important; 
}
.shell .badge.blue, .shell .badge.published,
#shell .badge.blue, #shell .badge.published,
dialog:not(.player):not(#viewer) .badge.blue, dialog:not(.player):not(#viewer) .badge.published { 
  background-color: var(--theme-status-published-bg) !important; 
  color: var(--theme-status-published-text) !important; 
}
.shell .badge.gold, .shell .badge.yellow, .shell .badge.paused, .shell .badge.warning,
#shell .badge.gold, #shell .badge.yellow, #shell .badge.paused, #shell .badge.warning,
dialog:not(.player):not(#viewer) .badge.gold, dialog:not(.player):not(#viewer) .badge.yellow, dialog:not(.player):not(#viewer) .badge.paused, dialog:not(.player):not(#viewer) .badge.warning { 
  background-color: var(--theme-status-paused-bg) !important; 
  color: var(--theme-status-paused-text) !important; 
}
.shell .badge.gray, .shell .badge.draft, .shell .badge.inactive,
#shell .badge.gray, #shell .badge.draft, #shell .badge.inactive,
dialog:not(.player):not(#viewer) .badge.gray, dialog:not(.player):not(#viewer) .badge.draft, dialog:not(.player):not(#viewer) .badge.inactive { 
  background-color: var(--theme-status-draft-bg) !important; 
  color: var(--theme-status-draft-text) !important; 
}

/* 8. Shared Buttons */
.shell .btn, #shell .btn, dialog:not(.player):not(#viewer) .btn,
.shell .btn-primary, #shell .btn-primary, dialog:not(.player):not(#viewer) .btn-primary,
.shell .btn-outline, #shell .btn-outline, dialog:not(.player):not(#viewer) .btn-outline {
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.shell .btn.primary, #shell .btn.primary, dialog:not(.player):not(#viewer) .btn.primary,
.shell .btn-primary, #shell .btn-primary, dialog:not(.player):not(#viewer) .btn-primary {
  background: var(--theme-navy) !important; /* Replaces legacy gradients */
  color: #FFFFFF !important;
  border: 1px solid var(--theme-navy) !important;
}
.shell .btn.primary:hover:not(:disabled), #shell .btn.primary:hover:not(:disabled), dialog:not(.player):not(#viewer) .btn.primary:hover:not(:disabled),
.shell .btn-primary:hover:not(:disabled), #shell .btn-primary:hover:not(:disabled), dialog:not(.player):not(#viewer) .btn-primary:hover:not(:disabled) {
  background: var(--theme-navy-hover) !important;
  border-color: var(--theme-navy-hover) !important;
}
.shell .btn.gold, #shell .btn.gold, dialog:not(.player):not(#viewer) .btn.gold {
  background: var(--theme-gold) !important;
  color: #0F172A !important;
  border: 1px solid #D9B34A !important;
}
.shell .btn.gold:hover:not(:disabled), #shell .btn.gold:hover:not(:disabled), dialog:not(.player):not(#viewer) .btn.gold:hover:not(:disabled) {
  background: #E5C25F !important;
}
.shell .btn.ghost, .shell .btn.outline, #shell .btn.ghost, #shell .btn.outline, dialog:not(.player):not(#viewer) .btn.ghost, dialog:not(.player):not(#viewer) .btn.outline,
.shell .btn-ghost, .shell .btn-outline, #shell .btn-ghost, #shell .btn-outline, dialog:not(.player):not(#viewer) .btn-ghost, dialog:not(.player):not(#viewer) .btn-outline {
  background: transparent !important;
  border: 1px solid var(--theme-border) !important;
  color: #334155 !important;
}
.shell .btn.ghost:hover:not(:disabled), .shell .btn.outline:hover:not(:disabled),
#shell .btn.ghost:hover:not(:disabled), #shell .btn.outline:hover:not(:disabled),
dialog:not(.player):not(#viewer) .btn.ghost:hover:not(:disabled), dialog:not(.player):not(#viewer) .btn.outline:hover:not(:disabled),
.shell .btn-ghost:hover:not(:disabled), .shell .btn-outline:hover:not(:disabled),
#shell .btn-ghost:hover:not(:disabled), #shell .btn-outline:hover:not(:disabled),
dialog:not(.player):not(#viewer) .btn-ghost:hover:not(:disabled), dialog:not(.player):not(#viewer) .btn-outline:hover:not(:disabled) {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

/* 9. Forms, Inputs, Focus & Dropdowns */
.shell input, .shell select, .shell textarea, .shell .top-search, .shell .top-search input,
#shell input, #shell select, #shell textarea, #shell .top-search, #shell .top-search input,
dialog:not(.player):not(#viewer) input, dialog:not(.player):not(#viewer) select, dialog:not(.player):not(#viewer) textarea {
  background-color: #FFFFFF;
  border: 1px solid var(--theme-border);
  color: #334155;
}
.shell .top-search:focus-within, .shell input:focus-visible, .shell select:focus-visible, .shell textarea:focus-visible,
#shell .top-search:focus-within, #shell input:focus-visible, #shell select:focus-visible, #shell textarea:focus-visible,
dialog:not(.player):not(#viewer) input:focus-visible, dialog:not(.player):not(#viewer) select:focus-visible, dialog:not(.player):not(#viewer) textarea:focus-visible {
  border-color: var(--theme-gold) !important;
  box-shadow: none !important;
  outline: 3px solid var(--theme-gold) !important;
  outline-offset: 2px !important;
}
.shell .top-search, #shell .top-search {
  border-radius: 8px !important;
  overflow: hidden;
}
.shell .top-search input, #shell .top-search input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shell *:focus-visible, #shell *:focus-visible, dialog:not(.player):not(#viewer) *:focus-visible {
  outline: 3px solid var(--theme-gold) !important;
  outline-offset: 2px !important;
}

.shell .profile-dropdown, .shell .dropdown-menu, .shell .folder-menu,
#shell .profile-dropdown, #shell .dropdown-menu, #shell .folder-menu {
  background-color: #FFFFFF !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  color: #334155 !important;
}
.shell .profile-dropdown button:hover, .shell .dropdown-menu button:hover, .shell .folder-menu button:hover,
#shell .profile-dropdown button:hover, #shell .dropdown-menu button:hover, #shell .folder-menu button:hover {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* 10. Accessible Mobile Hits */
@media (max-width: 768px) {
  .shell .nav-button, #shell .nav-button,
  .shell .btn, #shell .btn, dialog:not(.player):not(#viewer) .btn,
  .shell .format-tab, #shell .format-tab, dialog:not(.player):not(#viewer) .format-tab,
  .shell .course-card-actions .btn, #shell .course-card-actions .btn {
    min-height: 44px !important;
  }
  .shell .sidebar .nav-button, #shell .sidebar .nav-button {
    padding: 12px !important;
  }
}

/* 11. Sidebar Ghost Buttons Override */
.shell .sidebar .btn.ghost, #shell .sidebar .btn.ghost {
  color: #CBD5E1 !important;
  border-color: rgba(255,255,255,0.2) !important;
  background: transparent !important;
}
.shell .sidebar .btn.ghost:hover, #shell .sidebar .btn.ghost:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #FFFFFF !important;
}

/* 12. Profile Dropdown Nav-Buttons (Readable Navy) */
.shell .profile-dropdown .nav-button, #shell .profile-dropdown .nav-button {
  color: #334155 !important;
  font-weight: 500 !important;
}
.shell .profile-dropdown .nav-button:hover, #shell .profile-dropdown .nav-button:hover {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}