/* 
AI-USE: GitHub Copilot, Claude
Purpose: Making this exact comment. Centralized CSS for all intranet pages (dashboard, content management, user settings). This file defines the layout and styles for the intranet shell, including the sidebar navigation, top bar, main content area, forms, tables, and responsive behavior. It extends the base styles from styles.css without modifying any public-facing rules.
 */
/* ============================================================
   intranet.css — Module C intranet styles
   Extends styles.css; never modifies public-facing rules.
   ============================================================ */


/* -- INTRANET SHELL (sidebar + content) --------------------- */
body.intranet-body {
  display: block;          /* override flex from styles.css */
  background: #f5f5f5;
}

.intranet-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}


/* -- SIDEBAR NAV -------------------------------------------- */
.intranet-nav {
  background: #111111;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 0 0 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.intranet-nav__logo {
  display: block;
  padding: 20px 20px 16px;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #333;
  margin-bottom: 8px;
}

.intranet-nav__section {
  padding: 16px 20px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
}

.intranet-nav__link {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
  color: #cccccc;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.1s, color 0.1s;
}

.intranet-nav__link:hover {
  background: #1e1e1e;
  color: #ffffff;
}

.intranet-nav__link.active {
  border-left-color: #ffffff;
  color: #ffffff;
  background: #1e1e1e;
}

.intranet-nav__bottom {
  margin-top: auto;
  border-top: 1px solid #333;
  padding-top: 8px;
}

.intranet-nav__link--logout {
  color: #ff6b6b;
}

.intranet-nav__link--logout:hover {
  color: #ff4444;
}


/* -- MAIN AREA ---------------------------------------------- */
.intranet-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* -- TOP BAR ------------------------------------------------ */
.intranet-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
}

.intranet-topbar__title {
  font-size: 20px;
  font-weight: 600;
}

.intranet-topbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--color-muted);
}


/* -- CONTENT AREA ------------------------------------------- */
.intranet-content {
  flex: 1;
  padding: 28px 32px;
}


/* -- FLASH MESSAGES ----------------------------------------- */
.flash {
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  border-left: 4px solid;
}

.flash--success {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #166534;
}

.flash--error {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

.flash--info {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1e40af;
}


/* -- BADGES ------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 2px;
}

.badge--admin {
  background: #111111;
  color: #ffffff;
}

.badge--user {
  background: #e5e7eb;
  color: #374151;
}

.badge--published  { background: #dcfce7; color: #166534; }
.badge--draft      { background: #fef9c3; color: #854d0e; }
.badge--archived   { background: #f3f4f6; color: #6b7280; }
.badge--featured   { background: #fef3c7; color: #92400e; }


/* -- TOOLBAR (actions row above tables) --------------------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.toolbar__left {
  display: flex;
  gap: 8px;
  align-items: center;
}


/* -- BUTTONS ------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: var(--font-main);
  line-height: 1;
}

.btn--primary {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

.btn--primary:hover { opacity: 0.85; }

.btn--secondary {
  background: transparent;
  color: #111111;
  border-color: var(--color-border);
}

.btn--secondary:hover { border-color: #111111; }

.btn--danger {
  background: transparent;
  color: #dc2626;
  border-color: #fca5a5;
}

.btn--danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

.btn--sm {
  padding: 4px 10px;
  font-size: 12px;
}


/* -- DATA TABLE --------------------------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #ffffff;
}

.data-table th,
.data-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  font-weight: 600;
  background: #fafafa;
}

.data-table tbody tr:hover {
  background: #fafafa;
}

.data-table .actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}


/* -- FORM LAYOUT -------------------------------------------- */
.form-card {
  background: #ffffff;
  padding: 28px;
  max-width: 680px;
  border: 1px solid var(--color-border);
}

.form-card--wide { max-width: 960px; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 18px;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.form-group .hint {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 2px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-main);
  background: #ffffff;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #111111;
}

.form-group textarea { min-height: 90px; resize: vertical; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.required-mark { color: #dc2626; }

/* validation */
.form-group .error-msg {
  font-size: 12px;
  color: #dc2626;
}

/* checkbox row */
.checkbox-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.checkbox-group input[type="checkbox"] {
  width: auto;
}


/* -- STAT CARDS (dashboard) --------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: #ffffff;
  padding: 20px;
  border: 1px solid var(--color-border);
}

.stat-card__value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.stat-card__label {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 4px;
}


/* -- PERMISSIONS TABLE -------------------------------------- */
.perm-table td label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
}


/* -- EMPTY STATE -------------------------------------------- */
.empty-state {
  padding: 48px;
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
  background: #ffffff;
  border: 1px solid var(--color-border);
}


/* -- MOBILE (intranet collapses to stacked) ----------------- */
@media (max-width: 768px) {
  .intranet-shell {
    grid-template-columns: 1fr;
  }

  .intranet-nav {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
  }

  .intranet-nav__section { display: none; }
  .intranet-nav__bottom  { border-top: none; padding: 0; }

  .intranet-content { padding: 16px; }

  .form-row { grid-template-columns: 1fr; }

  .data-table { font-size: 13px; }
}
/* AI-USE end */