/* Shared application styles loaded by both main and public layouts. */

/* Home latest-news thumbnail.
   Used in: app/Views/home_logged_in.php */
.latest-article-thumb {
  width: 72px;
  flex: 0 0 72px;
  aspect-ratio: 1 / 1;
}

.latest-article-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Article form editor and attachment uploader.
   Used in: app/Modules/Articles/Views/articles/form.php */
.article-form-editor {
  min-height: 300px;
}

.article-dropzone {
  cursor: pointer;
  transition: background 0.15s;
}

.article-dropzone-label-link {
  cursor: pointer;
}

.article-attachment-thumb-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
}

.article-attachment-thumb-file {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  font-size: 1.5rem;
}

/* Division page hero, member cards and latest-news thumbnail.
   Used in: app/Modules/Members/Views/divisions/show.php */
.division-hero {
  min-height: 240px;
}

.division-hero-description {
  max-width: 52rem;
}

.division-member-avatar {
  width: 96px;
  height: 96px;
  font-size: 32px;
}

/* Member profile image and placeholder used in member detail views.
   Used in: app/Modules/Members/Views/members/show.php */
.member-profile-image {
  width: 140px;
  height: 140px;
  object-fit: cover;
  cursor: zoom-in;
}

.member-profile-placeholder {
  width: 140px;
  height: 140px;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #6c757d;
}

.division-article-thumb {
  width: 96px;
  flex: 0 0 96px;
  aspect-ratio: 1 / 1;
}

.division-article-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Article details: content typography and gallery.
  Used in: app/Modules/Articles/Views/articles/show.php */
.article-gallery-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.article-file-thumb-image {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.article-file-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.article-content .ql-align-center { text-align: center; }
.article-content .ql-align-right { text-align: right; }
.article-content .ql-align-justify { text-align: justify; }
.article-content .ql-direction-rtl { direction: rtl; }
.article-content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #212529;
}
.article-content h1, .article-content h2,
.article-content h3, .article-content h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.article-content p { margin-bottom: 1rem; }
.article-content ul,
.article-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
/* Ensure correct marker types for lists rendered from Quill/article content */
.article-content ul { list-style-type: disc; list-style-position: outside; }
.article-content ol { list-style-type: decimal; list-style-position: outside; }
.article-content li { margin-bottom: 0.25rem; }
.article-content blockquote {
  border-left: 4px solid #adb5bd;
  padding-left: 1rem;
  margin-left: 0;
  color: #6c757d;
  font-style: italic;
}
.article-content pre {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
  overflow-x: auto;
}
.article-content code {
  background: #f8f9fa;
  border-radius: 0.25rem;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}
.article-content img {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem auto;
  border-radius: 0.375rem;
  cursor: zoom-in;
}
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.article-content th,
.article-content td {
  border: 1px solid #dee2e6;
  padding: 0.5rem 0.75rem;
}
.article-content th { background: #f8f9fa; font-weight: 600; }
.article-content a { color: #0d6efd; }
.article-content a:hover { text-decoration: underline; }

/* App-wide image lightbox helpers.
   Used in: app/Views/partials/app_lightbox.php
   Triggered from: app/Modules/Articles/Views/articles/show.php, app/Modules/Members/Views/members/show.php
   Behavior in: public/assets/js/app.js */
.app-lightbox-image {
  max-height: 85vh;
  object-fit: contain;
}

.app-lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 20;
}

/* ------------------------------------------------------------------
   Card border helpers

   By default Bootstrap's `.card` keeps its border/shadow. Use the
   utility below to remove the border on specific cards only.

   Usage:
   - Add `card--no-border` to a card to remove border/shadow for that
     specific element.
   - Use `card--border` on a card when you explicitly want to ensure
     the bordered look (rare; present for backward compatibility).
*/
.card--no-border {
  border: none !important;
  box-shadow: none !important;
}

/* Opt-in bordered card when the border/shadow is desired */
.card.card--border {
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

/* Article card layout for dashboard: image fills the card height and is not part
   of the article link. Used in: app/Views/home_logged_in.php */
.article-card {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.article-card .latest-article-thumb {
  width: 140px;
  flex: 0 0 140px;
  display: flex;
  align-items: stretch;
}
.article-card .latest-article-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}