/* ==========================================================================
   MINEFOP dashboard - internal staff tool.

   Reuses the public site's design tokens (colours, fonts, spacing) from
   custom.css so the two feel like one product, but with its own compact
   chrome: a slim top bar instead of the public masthead/navbar/footer.
   ========================================================================== */

body.dashboard-body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Shell: a static sidebar column + content column at lg and up: below
   that, the sidebar becomes a Bootstrap offcanvas drawer (same markup,
   see adminpanel/base.html) opened from the slim top bar's toggle. One
   nav, two presentations - nothing to keep in sync between a "desktop"
   and "mobile" menu.
   -------------------------------------------------------------------------- */

.dashboard-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.dashboard-sidebar {
  --bs-offcanvas-width: 270px;
  /* !important: Bootstrap's own .offcanvas-lg responsive reset (applied at
     the lg breakpoint and up, to turn the offcanvas into a normal static
     column) forces background-color:transparent!important - without
     matching that here, the sidebar silently loses its background on
     desktop and the white nav text becomes unreadable against whatever
     is behind it. */
  background: var(--green-800) !important;
  color: #fff;
  border: 0;
}

@media (min-width: 992px) {
  .dashboard-sidebar {
    width: 270px;
    flex: 0 0 270px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
}

.dashboard-sidebar .offcanvas-header {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.dashboard-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  padding: 1.1rem 1.25rem;
}

.dashboard-side-nav {
  display: flex;
  flex-direction: column;
  padding: .25rem .75rem 1rem;
}

.dashboard-side-group-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9fc2ac;
  padding: 1rem .5rem .35rem;
}

.dashboard-side-nav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #d9ebe1;
  text-decoration: none;
  padding: .5rem .5rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
}

.dashboard-side-nav a i {
  font-size: 1rem;
  width: 1.1rem;
  text-align: center;
  flex-shrink: 0;
}

.dashboard-side-nav a:hover,
.dashboard-side-nav a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.dashboard-side-nav a.active {
  box-shadow: inset 3px 0 0 var(--cm-yellow);
}

.dashboard-side-external {
  display: block;
  margin: 0 .75rem 1rem;
  padding: .6rem .75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #cfe2d7;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 600;
  padding-top: 1rem;
}

.dashboard-content-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dashboard-topbar {
  background: #fff;
  border-bottom: 1px solid var(--rule);
  padding: .65rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dashboard-topbar .dashboard-brand {
  color: var(--ink);
  padding: 0;
}

/* .lang-switch (custom.css) is styled for a dark background everywhere
   else it appears (public navbar, formerly this topbar too) - this
   topbar is white now, so it needs its own light-background colours. */
.dashboard-topbar .lang-switch { border-color: var(--rule); }
.dashboard-topbar .lang-switch button { color: var(--muted); }
.dashboard-topbar .lang-switch button:hover { background: var(--green-050); color: var(--green-900); }
.dashboard-topbar .lang-switch button[aria-current="true"] { background: var(--cm-yellow); color: var(--green-900); }

.dashboard-sidebar-toggle {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboard-logout-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: .35rem .75rem;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}

.dashboard-logout-btn:hover {
  background: var(--green-050);
  border-color: var(--green-600);
}

.dashboard-main {
  padding: 1.75rem 1rem 3rem;
}

.dashboard-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--green-900), var(--green-700));
  padding: 1rem;
}

.dashboard-login-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem;
  width: 100%;
  max-width: 400px;
}

.stat-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  height: 100%;
}

.stat-card .stat-value {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--green-700);
  line-height: 1;
}

.quick-action-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
  height: 100%;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.quick-action-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--green-600);
  color: var(--ink);
}

.quick-action-card .icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-050);
  color: var(--green-700);
  font-size: 1.25rem;
}

.dashboard-table {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dashboard-table table {
  margin-bottom: 0;
}

.dashboard-table thead th {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--rule);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.dashboard-table td,
.dashboard-table th {
  vertical-align: middle;
  padding: .75rem 1rem;
}

.dashboard-form-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.lang-tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.25rem;
}

.lang-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: .5rem 1rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.lang-tab-btn.active {
  color: var(--green-700);
  border-bottom-color: var(--green-700);
}

.lang-panel[hidden] {
  display: none;
}

/* Stacked bilingual sections (blog post / news form) - both languages
   always visible at once, unlike .lang-tabs above (still used by the
   event form) which hides one language behind a click. A left accent bar
   distinguishes the two blocks from one another at a glance. */
.lang-block {
  border-left: 3px solid var(--green-600);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

.lang-block:last-child {
  margin-bottom: 0;
}

.lang-block-en {
  border-left-color: var(--cm-yellow);
}

.lang-block-heading {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* CKEditor's own chrome (toolbar + editable area) dressed to match the
   dashboard's form-control look instead of its stock styling. */
.ck.ck-editor {
  margin-bottom: .25rem;
}

.ck.ck-editor__main > .ck-editor__editable {
  min-height: 220px;
  border-color: var(--rule) !important;
}

.ck.ck-toolbar {
  border-color: var(--rule) !important;
  background: var(--surface-alt) !important;
}

.attachment-row {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .75rem;
  margin-bottom: .75rem;
  background: var(--surface-alt);
}

.mail-body-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-sans);
  font-size: .9rem;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem;
  max-height: 60vh;
  overflow-y: auto;
}

/* Minister's message form (adminpanel/minister_message_form.html). */
.minister-photo-wrap {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--green-100, var(--surface-alt));
  background: var(--surface-alt);
}

.minister-photo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.minister-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--muted);
}

/* Contact message detail (adminpanel/message_detail.html). */
.message-meta-card {
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.message-meta-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1rem;
  margin: 0;
}

.message-meta-card dt {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.message-meta-card dd {
  margin: 0;
  font-size: .875rem;
}