/* Minimal tweaks */
body { background: #f8fafc; }
.sidebar { min-width: 280px; max-width: 320px; }
.sidebar .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.page-wrapper { display: flex; gap: 1rem; }
.card-rounded { border-radius: 1rem; }
.sticky-sidebar { position: sticky; top: 1rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.calendar-grid .day { background: white; border: 1px solid #e5e7eb; padding: .5rem; border-radius: .5rem; min-height: 80px; }
.badge-role { text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; }
.prescription-items li { margin-bottom: .25rem; }



/* ===============================
   Instagram-like Story Bar (CSS-only override)
   Scope: .story-bar and children used in social/index.php
   No JS/PHP changes required.
=============================== */
.story-bar {
  display: flex;
  gap: 14px;
  padding: 12px 12px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  background: #0f0f10;
}

.story-bar::-webkit-scrollbar { height: 6px; }
.story-bar::-webkit-scrollbar-thumb { background: #2a2b2f; border-radius: 4px; }

.story-bar .story {
  flex: 0 0 auto;
  width: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #eaeaea;
  gap: 8px;
  user-select: none;
}

.story-bar .story img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid transparent; /* space for ring */
  background: #000;
  position: relative;
}

.story-bar .story .story-avatar {
  position: absolute;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  /* ring via pseudo-element on parent anchor */
}

.story-bar .story .caption {
  font-size: 12px;
  line-height: 1.2;
  max-width: 84px;
  text-align: center;
  color: #d8d8d8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gradient ring like Instagram (skip for create-story) */
.story-bar .story:not(.create-story) {
  position: relative;
}
.story-bar .story:not(.create-story)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: conic-gradient(#f9ce34, #ee2a7b, #6228d7, #f9ce34);
  z-index: 0;
}
.story-bar .story:not(.create-story) img,
.story-bar .story:not(.create-story) .story-avatar {
  position: relative;
  z-index: 1;
}

/* Create-story style with plus badge */
.story-bar .create-story::before { display: none; }
.story-bar .create-story img { background: #1a1b1e; }
.story-bar .create-story .caption { color: #bdbdbd; }
.story-bar .create-story::after {
  content: "+"; position: absolute; top: 46px; left: 50%; transform: translateX(10px);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: #0a84ff; color: #fff; border: 2px solid #0f0f10;
  box-shadow: 0 4px 8px rgba(10,132,255,.35);
}

/* Card container reset so bar is edge-to-edge in its card */
.card .story-bar { background: transparent; padding: 12px; }

/* Pharmacist: inline Arketimi + Stoku buttons */
.pharm-inline-actions .btn.btn-block,
.pharm-inline-actions .btn.w-100 { width: auto !important; display: inline-block; }
.pharm-inline-actions { display: flex; gap: 10px; flex-wrap: nowrap; }
.pharm-inline-actions .btn { flex: 1 1 0; white-space: nowrap; }

/* === AUTO-ADDED BY BUILD: Hide left sidebar in print across entire site === */
@media print {
  #sidebar,
  #left-sidebar,
  .sidebar,
  .sidebar-left,
  .left-sidebar,
  aside[class*="sidebar"],
  [class*="sidebar"][class*="left"] {
    display: none !important;
    visibility: hidden !important;
  }
  #content,
  .content,
  .main,
  .page-content,
  .container,
  .container-fluid,
  .wrapper,
  .page {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .layout,
  .with-sidebar,
  .row,
  .columns {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
}

/* === UPDATE: hide header and use full page for print === */
@media print {
  /* Hide site headers/top bars/navbars on print */
  header,
  .header,
  .site-header,
  .topbar,
  .top-bar,
  .navbar,
  .nav,
  .app-header,
  #header,
  #topbar,
  #navbar {
    display: none !important;
    visibility: hidden !important;
  }

  /* Full-bleed print area: remove margins/padding */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #fff !important;
  }

  /* Make main containers span the full printable page width */
  main,
  #content,
  .content,
  .main,
  .page-content,
  .container,
  .container-fluid,
  .wrapper,
  .page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Tables often have fixed widths; let them expand */
  table {
    width: 100% !important;
  }
}

/* Remove default page margins (Chrome, modern browsers) */
@page { size: auto; margin: 1.5cm; }


/* Mobile patch for Social: show sidebars below main content at 100% width */
/* Added: 2025-10-24T07:22:04 */
@media (max-width: 991.98px) {
  /* Target the Social feed row specifically if :has is supported */
  .container .row:has(.story-bar) {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
  }
  .container .row:has(.story-bar) > .col-lg-6,
  .container .row:has(.story-bar) > .col-lg-3.d-none.d-lg-block {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  .container .row:has(.story-bar) > .col-lg-3.d-none.d-lg-block { 
    display: block !important;
  }
  /* Ensure order: main first, then left sidebar, then right sidebar */
  .container .row:has(.story-bar) > .col-lg-6 { order: 1; }
  .container .row:has(.story-bar) > .col-lg-3.d-none.d-lg-block:first-child { order: 2; }
  .container .row:has(.story-bar) > .col-lg-3.d-none.d-lg-block:last-child { order: 3; }

  /* Fallback if :has() is not supported: apply when a row has the pattern [col-lg-3][col-lg-6][col-lg-3] */
  .container .row > .col-lg-6,
  .container .row > .col-lg-3.d-none.d-lg-block {
    /* fallback widths (will also affect similar rows elsewhere if present) */
  }
  .container .row > .col-lg-3.d-none.d-lg-block { display: block !important; }
  .container .row > .col-lg-6,
  .container .row > .col-lg-3.d-none.d-lg-block {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  .container .row > .col-lg-6 { order: 1; }
  .container .row > .col-lg-3.d-none.d-lg-block:first-child { order: 2; }
  .container .row > .col-lg-3.d-none.d-lg-block:last-child { order: 3; }

  /* Spacing tweaks */
  .container .row > .col-lg-3.d-none.d-lg-block { margin-top: 1rem; }
}


/* Home hero slideshow custom styles */
#homeHeroCarousel .home-hero-overlay {
  background: linear-gradient(to right, rgba(0,0,0,0.65), rgba(0,0,0,0.25));
  color: #fff;
}

#homeHeroCarousel .home-hero-overlay .home-hero-title {
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

#homeHeroCarousel .home-hero-overlay .home-hero-lead {
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

#homeHeroCarousel .carousel-item {
  min-height: 320px;
}

@media (min-width: 768px) {
  #homeHeroCarousel .carousel-item {
    min-height: auto;
  }
}

#homeHeroCarousel .carousel-control-prev.home-hero-control,
#homeHeroCarousel .carousel-control-next.home-hero-control {
  opacity: 0;
  transition: opacity .25s ease;
}

#homeHeroCarousel:hover .carousel-control-prev.home-hero-control,
#homeHeroCarousel:hover .carousel-control-next.home-hero-control {
  opacity: 1;
}

#homeHeroCarousel .home-hero-arrow-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
}

#homeHeroCarousel .home-hero-arrow-bg .carousel-control-prev-icon,
#homeHeroCarousel .home-hero-arrow-bg .carousel-control-next-icon {
  filter: invert(0.2) grayscale(1);
}

#homeHeroCarousel .carousel-indicators {
  left: 0;
  right: 0;
}


#homeHeroCarousel .carousel-control-prev.home-hero-control {
  left: 0;
}
#homeHeroCarousel .carousel-control-next.home-hero-control {
  right: 0;
}


.hero-image-frame {
  border-radius: 0.75rem;
  overflow: hidden;
}

.hero-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-text-card {
  border-radius: 0.75rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: rgba(255,255,255,0.9);
}

.hero-title {
  font-size: 2rem;
}

.hero-lead {
  font-size: 1.05rem;
}

/* Heidelberg-like arrow bars */
#homeHeroCarousel .home-hero-arrow-bg {
  width: 3rem;
  height: 5rem;
  border-radius: 0.5rem;
  background: rgba(0,0,0,0.22);
  backdrop-filter: blur(6px);
}

#homeHeroCarousel .carousel-control-prev.home-hero-control,
#homeHeroCarousel .carousel-control-next.home-hero-control {
  width: 3.5rem;
}

#homeHeroCarousel .carousel-control-prev.home-hero-control {
  left: 0;
}
#homeHeroCarousel .carousel-control-next.home-hero-control {
  right: 0;
}


/* Home below-hero and departments grid */
.home-narrow {
  max-width: 1100px;
}

.home-dep-card {
  border-radius: 1rem;
  transition: transform .15s ease, box-shadow .15s ease;
}

.home-dep-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.5rem rgba(15,23,42,0.12);
}

.home-dep-icon {
  width: 64px;
  height: 64px;
  border-radius: 1.25rem;
  background: #f8fafc;
  object-fit: contain;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
}

.home-dep-icon-placeholder {
  color: #1e293b;
}