/* ============================================================
   GRYD MAIN STYLESHEET

   Brand/UI baseline:
   Primary:   #6633FF
   Info:      #0284C7
   Secondary: #475569
   Success:   #16A34A
   Warning:   #D97706
   Danger:    #DC2626

   Third-party framework files should NOT be copied into this
   stylesheet. Bootstrap, Tailwind/DaisyUI, Font Awesome, etc.
   are loaded separately from CDNs in base.html.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


/* ============================================================
   1. GRYD DESIGN TOKENS
   ============================================================ */

:root {
  --gryd-primary: #6633FF;
  --gryd-primary-hover: #5522DD;
  --gryd-primary-active: #4419B8;
  --gryd-primary-soft: #EEE9FF;

  --gryd-info: #0284C7;
  --gryd-info-hover: #0369A1;

  --gryd-secondary: #475569;

  --gryd-success: #16A34A;
  --gryd-warning: #D97706;
  --gryd-danger: #DC2626;

  --gryd-neutral: #0B1220;

  --gryd-base-100: #FFFFFF;
  --gryd-base-200: #F6F7FB;
  --gryd-base-300: #E9ECF5;
  --gryd-base-content: #0B1220;

  --gryd-header-height: 64px;
  --gryd-sidebar-width: 270px;

  /*
   * DaisyUI compatibility.
   * These help align DaisyUI semantic colors with the
   * Gryd style guide when DaisyUI is loaded from its CDN.
   */
  --color-primary: var(--gryd-primary);
  --color-primary-content: #FFFFFF;

  --color-secondary: var(--gryd-secondary);
  --color-secondary-content: #FFFFFF;

  --color-accent: var(--gryd-info);
  --color-accent-content: #FFFFFF;

  --color-neutral: var(--gryd-neutral);
  --color-neutral-content: #E5E7EB;

  --color-base-100: var(--gryd-base-100);
  --color-base-200: var(--gryd-base-200);
  --color-base-300: var(--gryd-base-300);
  --color-base-content: var(--gryd-base-content);

  --color-info: var(--gryd-info);
  --color-info-content: #FFFFFF;

  --color-success: var(--gryd-success);
  --color-success-content: #FFFFFF;

  --color-warning: var(--gryd-warning);
  --color-warning-content: #FFFFFF;

  --color-error: var(--gryd-danger);
  --color-error-content: #FFFFFF;
}


/* ============================================================
   2. GLOBAL PAGE STYLES
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  background: #F7F7F7;
  color: #333333;

  /*
   * Reserve space for the fixed application header.
   */
  padding-top: calc(var(--gryd-header-height) + 16px);
  margin: 0;

  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #444444;
}

ul {
  margin: 0;
}

a {
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}


/* ============================================================
   3. LEGACY GRYD / BOOTSTRAP HEADER COMPATIBILITY
   ============================================================ */

.bg-steel {
  background: var(--gryd-primary);
}

.site-header .navbar-nav .nav-link {
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  margin: 0 6px;
  font-size: 15px;
  letter-spacing: 1px;
}

.site-header .navbar-nav .nav-link:visited {
  color: rgba(255, 255, 255, 0.9);
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:active {
  color: rgba(255, 255, 255, 0.85);
}

.navbar-dark.bg-steel .dropdown-toggle {
  color: #FFFFFF !important;
}

.navbar-dark.bg-steel .dropdown-toggle:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}


/* ============================================================
   4. CONTENT SECTIONS
   ============================================================ */

.content-section {
  background: #FFFFFF;
  padding: 10px 20px;
  border: 1px solid #DDDDDD;
  border-radius: 0.5rem;
  margin-bottom: 20px;
}


/* ============================================================
   5. ARTICLES / POSTS
   ============================================================ */

.article-title {
  color: #444444;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

a.article-title:hover {
  color: var(--gryd-primary);
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #E3E3E3;
}

.article-metadata a:hover {
  color: var(--gryd-primary);
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}


/* ============================================================
   6. PROFILE IMAGES
   ============================================================ */

.account-img {
  height: 170px;
  width: 170px;
  margin: 20px auto 0 auto;
  padding: 5px;

  border: 5px solid #EBEBEB;
  border-radius: 50%;

  object-fit: cover;
  object-position: center;

  box-sizing: border-box;
  display: block;
  background-color: #FFFFFF;

  transform: none;
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
}

.account-img-lg {
  width: 170px;
  height: 170px;
  aspect-ratio: 1 / 1;

  border-radius: 50%;

  object-fit: cover;
  object-position: center;

  display: block;
  box-sizing: border-box;

  border: 5px solid #EBEBEB;
  padding: 0;
  margin: 0 auto;

  background-color: #FFFFFF;

  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
}


/* ============================================================
   7. ONLINE / OFFLINE STATUS INDICATORS
   ============================================================ */

.online-circle {
  width: 24px;
  height: 24px;

  border-radius: 50%;
  background-color: var(--gryd-success);
  border: 3px solid #FFFFFF;

  bottom: 0;
  right: 10px;
  position: absolute;
}

.offline-circle {
  width: 24px;
  height: 24px;

  border-radius: 50%;
  background-color: #6E6E6E;
  border: 3px solid #FFFFFF;

  bottom: 0;
  right: 10px;
  position: absolute;
}

.img-cont {
  height: 170px;
  width: 170px;
  position: relative;
}

.img-cont2 {
  height: 55px;
  width: 55px;
  position: relative;
}

.img-cont3 {
  height: 78px;
  width: 78px;
  position: relative;
}

.online-circle3 {
  width: 18px;
  height: 18px;

  border-radius: 50%;
  background-color: var(--gryd-success);
  border: 3px solid #FFFFFF;

  bottom: -16px;
  right: 2px;
  position: absolute;
}

.offline-circle3 {
  width: 18px;
  height: 18px;

  border-radius: 50%;
  background-color: #6E6E6E;
  border: 3px solid #FFFFFF;

  bottom: -16px;
  right: 2px;
  position: absolute;
}

.online-circle2 {
  width: 18px;
  height: 18px;

  border-radius: 50%;
  background-color: var(--gryd-success);
  border: 3px solid #FFFFFF;

  bottom: 0;
  right: 6px;
  position: absolute;
}

.offline-circle2 {
  width: 18px;
  height: 18px;

  border-radius: 50%;
  background-color: #6E6E6E;
  border: 3px solid #FFFFFF;

  bottom: 0;
  right: 6px;
  position: absolute;
}

.online-circle4 {
  width: 18px;
  height: 18px;

  border-radius: 50%;
  background-color: var(--gryd-success);
  border: 3px solid #FFFFFF;

  bottom: 10px;
  right: 10px;
  position: absolute;
}

.offline-circle4 {
  width: 18px;
  height: 18px;

  border-radius: 50%;
  background-color: #6E6E6E;
  border: 3px solid #FFFFFF;

  bottom: 10px;
  right: 10px;
  position: absolute;
}

.account-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-heading {
  font-size: 2.5rem;
}


/* ============================================================
   8. SEARCH BAR
   ============================================================ */

#searchbar form {
  width: auto;

  display: flex;
  flex-direction: row;

  border-radius: 50px;
  padding: 3px 15px;

  background-color: transparent;
  border: 1px solid #E4E4E4;

  margin-right: 10px;
}

#searchbar form input::placeholder {
  color: #FFFFFF;
  font-size: 14px;
}

#searchbar form input {
  border: none;
  outline: none;

  color: #FFFFFF;
  font-size: 15px;

  flex: 1;
  background-color: transparent;
}

.search-btn {
  color: #FFFFFF;

  border: none;
  width: 25px;

  padding-left: 10px;
  border-left: 1px solid rgba(202, 202, 202, 0.829);

  outline: none;
  background-color: transparent;
}

.search-btn i {
  font-size: 16px;
}

@media only screen and (max-width: 991px) {
  #searchbar form {
    border-radius: 0;
    margin: 12px 10px 10px 0;
  }
}


/* ============================================================
   9. STANDARD BUTTONS
   ============================================================ */

.btn {
  border-radius: 0.5rem;
  padding: 8px 15px;
  font-size: 14px;
}


/* ============================================================
   10. PRIMARY BUTTONS
   Gryd brand action
   ============================================================ */

.btn-primary,
.btn-primary:visited {
  background-color: var(--gryd-primary) !important;
  border-color: var(--gryd-primary) !important;
  color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--gryd-primary-hover) !important;
  border-color: var(--gryd-primary-hover) !important;
  color: #FFFFFF !important;
}

.btn-primary:active,
.btn-primary.active {
  background-color: var(--gryd-primary-active) !important;
  border-color: var(--gryd-primary-active) !important;
  color: #FFFFFF !important;
}


/* ============================================================
   11. OUTLINE PRIMARY
   ============================================================ */

.btn-outline-primary {
  background-color: transparent !important;
  color: var(--gryd-primary) !important;
  border-color: var(--gryd-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--gryd-primary) !important;
  border-color: var(--gryd-primary) !important;
  color: #FFFFFF !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--gryd-primary-active) !important;
  border-color: var(--gryd-primary-active) !important;
  color: #FFFFFF !important;
}


/* ============================================================
   12. INFORMATION BUTTONS
   Blue is intentionally reserved for informational UI.
   ============================================================ */

.btn-info {
  background-color: var(--gryd-info) !important;
  border-color: var(--gryd-info) !important;
  color: #FFFFFF !important;
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--gryd-info-hover) !important;
  border-color: var(--gryd-info-hover) !important;
  color: #FFFFFF !important;
}

.btn-outline-info {
  background-color: transparent !important;
  color: var(--gryd-info) !important;
  border-color: var(--gryd-info) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color: var(--gryd-info) !important;
  border-color: var(--gryd-info) !important;
  color: #FFFFFF !important;
}


/* ============================================================
   13. SECONDARY BUTTONS
   ============================================================ */

.btn-secondary {
  background-color: var(--gryd-secondary) !important;
  border-color: var(--gryd-secondary) !important;
  color: #FFFFFF !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #334155 !important;
  border-color: #334155 !important;
  color: #FFFFFF !important;
}

.btn-outline-secondary {
  background-color: transparent !important;
  color: var(--gryd-secondary) !important;
  border-color: var(--gryd-secondary) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--gryd-secondary) !important;
  border-color: var(--gryd-secondary) !important;
  color: #FFFFFF !important;
}


/* ============================================================
   14. SEMANTIC BUTTONS
   ============================================================ */

.btn-success {
  background-color: var(--gryd-success) !important;
  border-color: var(--gryd-success) !important;
  color: #FFFFFF !important;
}

.btn-warning {
  background-color: var(--gryd-warning) !important;
  border-color: var(--gryd-warning) !important;
  color: #FFFFFF !important;
}

.btn-danger {
  background-color: var(--gryd-danger) !important;
  border-color: var(--gryd-danger) !important;
  color: #FFFFFF !important;
}

.btn-outline-danger {
  background-color: transparent !important;
  border-color: var(--gryd-danger) !important;
  color: var(--gryd-danger) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--gryd-danger) !important;
  border-color: var(--gryd-danger) !important;
  color: #FFFFFF !important;
}


/* ============================================================
   15. POST ACTION BUTTONS
   ============================================================ */

.btnhrt {
  padding: 0;
}

.btnhrt i,
.btnhrt i.icon-blue,
.btnhrt i.icon-primary {
  color: var(--gryd-primary) !important;
}

.btncmt {
  padding: 0;
}

.btncmt i {
  font-size: 22px;
  color: var(--gryd-primary);
}

.btnsave {
  font-size: 24px;
  padding: 0;
  color: #FFD23C;
}

.btnsave:hover {
  color: #FFD23C;
  cursor: pointer;
}

.btnedit {
  font-size: 22px;
  padding: 0;
  color: var(--gryd-primary);
}

.btndel {
  font-size: 22px;
  padding: 0;
  color: var(--gryd-danger);
}


/* ============================================================
   16. TEXT / FORM HELPERS
   ============================================================ */

.custom-txt {
  width: 100%;
}


/* ============================================================
   17. CHAT / MESSAGES
   ============================================================ */

.messages-box,
.chat-box {
  height: 58vh;
  overflow-y: auto;
}


/* ============================================================
   18. SCROLLBARS
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  width: 5px;
  background: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  width: 1em;
  background-color: #D4D4D4;
  border-radius: 4px;
}


/* ============================================================
   19. BRAND ICONS

   icon-blue is retained ONLY as a legacy compatibility alias.
   New markup should use icon-primary.

   Both intentionally render in GRYD PURPLE, not information
   blue, because these are action/brand icons.
   ============================================================ */

.icon-primary,
i.icon-primary,
.dropdown-item i.icon-primary {
  color: var(--gryd-primary) !important;
}

/* Legacy templates */
.icon-blue,
i.icon-blue,
.dropdown-item i.icon-blue,
.btnhrt i.icon-blue {
  color: var(--gryd-primary) !important;
}


/* ============================================================
   20. NOTIFICATION BADGE
   ============================================================ */

.notify-badge {
  position: absolute;

  right: -10px;
  bottom: 3px;

  background: #FFFFFF;

  box-shadow: 0 0 5px 0.3px rgba(0, 0, 0, 0.25);

  text-align: center;
  border-radius: 100%;

  width: 42px;
  height: 42px;

  color: #808080;

  padding: 5px 10px;
  font-size: 20px;
}


/* ============================================================
   21. BRAND TEXT / BACKGROUND UTILITIES
   ============================================================ */

.text-primary,
a.text-primary {
  color: var(--gryd-primary) !important;
}

a.text-primary:hover,
.text-primary:hover {
  color: var(--gryd-primary-hover) !important;
}

.bg-primary {
  background-color: var(--gryd-primary) !important;
}

.border-primary {
  border-color: var(--gryd-primary) !important;
}

.bg-gryd-primary {
  background-color: var(--gryd-primary) !important;
}

.bg-gryd-primary-soft {
  background-color: var(--gryd-primary-soft) !important;
}

.border-gryd-primary {
  border-color: var(--gryd-primary) !important;
}

.gryd-primary-top-border {
    border-top: 4px solid var(--gryd-primary);
}

.text-gryd-primary {
  color: var(--gryd-primary) !important;
}

.text-gryd-info {
  color: var(--gryd-info) !important;
}

.gryd-action-link {
    cursor: pointer;
    color: var(--gryd-primary);
}

.gryd-action-link:hover {
    color: var(--gryd-primary-hover);
}

.gryd-visually-hidden-input {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.gryd-icon-button {
    background: none;
    border: 0;
    padding: 0;
    font-size: 1.2rem;
    cursor: pointer;
}

.gryd-icon-button-danger {
    color: var(--gryd-danger);
}

.gryd-dark-decoration {
    text-decoration-color: #000 !important;
}

.gryd-profile-wrapper {
    max-width: 950px;
    margin: 0 auto;
}

.gryd-profile-heading {
    text-align: center;
    padding: 1.25rem 1rem 0.75rem;
}

.gryd-profile-heading h2 {
    font-weight: 700;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.gryd-profile-heading p {
    color: #6c757d;
    margin-bottom: 0;
  }

.gryd-profile-image {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border: 2px solid var(--gryd-primary);
    padding: 3px;
    background-color: #ffffff;
}

.gryd-profile-section-title {
    color: var(--gryd-primary);
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
}

.gryd-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.gryd-profile-box {
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 1rem;
    background-color: #ffffff;
    min-height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.gryd-profile-box p {
    margin-bottom: 0;
    line-height: 1.4;
}

.gryd-profile-label {
    display: block;
    color: var(--gryd-primary);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.gryd-profile-value {
    color: #212529;
}

.gryd-profile-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.gryd-description-box {
    grid-column: 1 / -1;
    display: block;
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
    max-height: 220px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.gryd-description-box p {
    margin-bottom: 0;
    line-height: 1.5;
}

.gryd-description-box::-webkit-scrollbar {
    width: 8px;
}

.gryd-description-box::-webkit-scrollbar-thumb {
    background-color: #ced4da;
    border-radius: 999px;
}

.gryd-description-box::-webkit-scrollbar-track {
    background-color: #f8f9fa;
}

@media (max-width: 576px) {
    .gryd-profile-heading {
        padding: 1rem 0.5rem 0.5rem;
    }

    .gryd-profile-actions {
        justify-content: center;
    }
}

.quick-actions-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
}

.quick-action-box {
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 1rem;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    min-height: 85px;
}

.quick-action-box strong {
    display: block;
    margin-bottom: 0.35rem;
}

.quick-action-box p {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.panel-section-card {
    margin-bottom: 1.25rem;
}

.panel-section-card .card-body {
    padding: 1.25rem;
}

.panel-section-title {
    color: var(--gryd-primary);
    font-weight: 700;
    margin-bottom: 1rem;
}

.referral-card {
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 1rem;
    background-color: #ffffff;
}

.referral-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.6rem;
}

.referral-detail-box {
    border: 1px solid #e9ecef;
    border-radius: 0.65rem;
    background-color: #f8f9fa;
    padding: 0.75rem;
    text-align: center;
    word-break: break-word;
}

.referral-detail-box.wide {
    grid-column: span 2;
    text-align: left;
}

.referral-detail-label {
    display: block;
    color: #6633FF;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}

.referral-detail-value {
    color: #212529;
    font-size: 0.9rem;
}

.disband-wrapper {
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
}

.disband-heading {
    text-align: center;
    padding: 1.25rem 1rem 0.75rem;
}

.disband-heading h2 {
    font-weight: 700;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    color: #dc3545;
}

.disband-heading p {
    color: #6c757d;
    margin-bottom: 0;
}

.disband-warning-box {
    border: 1px solid #f5c2c7;
    background-color: #f8d7da;
    color: #842029;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.disband-warning-box strong {
    font-weight: 700;
}

.disband-info-box {
    border: 1px solid #dee2e6;
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.disband-label {
    display: block;
    color: #6633FF;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.disband-value {
    color: #212529;
    font-weight: 700;
}

.disband-action-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

@media (max-width: 576px) {
    .disband-heading {
        padding: 1rem 0.5rem 0.5rem;
    }
}

 .org-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.org-info-box {
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 1rem;
    background-color: #ffffff;
    min-height: 95px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.org-info-box p {
    margin-bottom: 0;
    line-height: 1.4;
}

.org-info-label {
    display: block;
    color: #6633FF;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.org-info-value {
    color: #212529;
    word-break: break-word;
}

.org-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.org-list-item {
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 0.85rem;
    margin-bottom: 0.75rem;
    background-color: #ffffff;
}

.org-list-item:last-child {
    margin-bottom: 0;
}

.org-list-title {
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.2rem;
}

.org-list-meta {
    color: #6c757d;
    font-size: 0.9rem;
    word-break: break-word;
}

.business-panel-wrapper {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
}

.business-panel-heading {
    text-align: center;
    padding: 1.25rem 1rem 0.75rem;
}

.business-panel-heading h2 {
    font-weight: 700;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}

.business-panel-heading p {
    color: #6c757d;
    margin-bottom: 0;
}

.business-panel-section-title {
    color: #6633FF;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
}

.business-panel-help {
    color: #6c757d;
    text-align: center;
    margin-bottom: 1rem;
}

.business-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.business-panel-box {
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 1rem;
    background-color: #ffffff;
    min-height: 95px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.business-panel-box p {
    margin-bottom: 0;
    line-height: 1.4;
}

.business-panel-label {
    display: block;
    color: #6633FF;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.business-panel-value {
    display: block;
    color: #212529;
    font-weight: 700;
    font-size: 1.05rem;
}

.business-panel-note {
    display: block;
    color: #6c757d;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.business-panel-action-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.business-empty {
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0;
    text-align: center;
}

.verification-domain {
    background-color: #198754;
    color: #fff;
}
.verification-badge {
    font-size: 0.8rem;
    padding: 0.45rem 0.7rem;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.verification-gold {
    background-color: #d4af37;
    color: #111;
}
.verification-standard {
    background-color: #6633FF;
    color: #fff;
}

.verification-unverified {
    background-color: #111;
    color: #fff;
}

.scroll-checkboxes {
    max-height: 200px;
    overflow-y: auto;
}

.scrollable-modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.btn-google {
    color: #545454;
    background-color: #ffffff;
    box-shadow: 0 1px 2px 1px #ddd
}

.or-container {
    align-items: center;
    color: #ccc;
    display: flex;
    margin: 25px 0
}

.line-separator {
    background-color: #ccc;
    flex-grow: 5;
    height: 1px
}

.or-label {
    flex-grow: 1;
    margin: 0 15px;
    text-align: center
}

.profile-grid-pattern {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid #000000;
    overflow: hidden;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14px, 1fr));
    grid-auto-rows: 18px;

    background-color: #ffffff;
}

.profile-grid-pattern span {
    width: 100%;
    height: 18px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    box-sizing: border-box;
    background-color: #ffffff;
}

.profile-grid-pattern span.blue {
    background-color: var(--gryd-primary);
}

.panel-section-card {
    margin-bottom: 1.25rem;
}

.panel-section-card .card-body {
    padding: 1.25rem;
}

.panel-section-title {
    color: 6633FF;
    font-weight: 700;
    margin-bottom: 1rem;
}

.scroll-box {
  max-height: 250px;
  overflow-y: auto;
  background-color: #f8f9fa;
  border-radius: 5px;
}
.scroll-box ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}
.scroll-box li {
  padding: 5px 10px;
}
.scroll-box label {
  white-space: normal;
}

.profile-rank-verify-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1rem;
}

.profile-rank-left {
    flex: 1;
    text-align: left;
}

.profile-verify-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    gap: 6px;
    padding-top: 0;
    margin-top: 0;
}


.referral-rank-box {
    display: inline-block;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid #e5e5e5;
}

.star-row i {
    font-size: 1.1rem;
    margin-right: 0.15rem;
}

.tier-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.trophy-bronze {
    color: #cd7f32;
}

.trophy-silver {
    color: #c0c0c0;
}

.trophy-gold {
    color: #d4af37;
}

@media (max-width: 576px) {
    .profile-rank-verify-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-rank-left,
    .profile-verify-right {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

.grydblue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.grydblue::before {
    content: "";
    display: inline-block;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    background-image: url("images/gryd-round-logo.bf42b9967111.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    vertical-align: middle;
}

button.grydblue {
  border: none;
  background-color: transparent;
  cursor: pointer;
}

button.grydblue-icon {
  width: 28px;
  height: 28px;
  padding: 0;

  justify-content: center;
  gap: 0;
}

button.grydblue-icon::before {
  width: 20px;
  height: 20px;
}

.calendar-control-card {
    margin-bottom: 1.25rem;
}

.calendar-control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    align-items: end;
}

.calendar-control-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: #6633FF;
}

.calendar-month-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.calendar-month-title {
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.calendar-month-subtitle {
    color: #6c757d;
     margin-bottom: 0;
}

.calendar-nav-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.calendar-week-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 700;
}

.calendar-week-header div {
    text-align: center;
    padding: 0.45rem;
    border-radius: 0.5rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

.calendar-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.calendar-inner {
    min-width: 980px;
}

    

.calendar-day {
    height: 140px;
    border: 1px solid #dee2e6;
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 0.75rem;
    position: relative;
}

.calendar-day.out-month {
    background-color: #f8f9fa;
    color: #adb5bd;
}

.calendar-day.has-events {
    border-color: var(--gryd-primary);
    box-shadow: inset 0 0 0 1px rgba(102, 51, 255, 0.25);
    background-color: var(--gryd-primary-soft);
}

.calendar-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.calendar-day-number {
    font-size: 0.85rem;
    font-weight: 700;
}

.today-pill {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background-color: #6633FF;
    color: #ffffff;
    font-weight: 700;
}

.availability-pill {
    font-size: 0.78rem;
    border-radius: 0.5rem;
    background-color: #e7f1ff;
    color: #084298;
    padding: 0.25rem 0.45rem;
    margin-bottom: 0.25rem;
}

.day-event-item {
    list-style: none;
    margin-bottom: 0.25rem;
}

.day-event-button {
    width: 100%;
    text-align: left;
    font-size: 0.78rem;
    padding: 0.25rem 0.45rem;
    white-space: normal;
}



.calendar-empty-note {
    color: #6c757d;
    background-color: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0;
}

.event-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    overflow-y: auto;
    padding: 1rem;
}

.event-modal.show {
    display: block;
}

.event-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.event-modal-card {
    position: relative;
    max-width: 620px;
    margin: 2rem auto;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.event-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eeeeee;
}

.event-modal-header h3 {
    margin-bottom: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.event-modal-body {
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    padding: 1.25rem;
}

.modal-info-card {
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 0.85rem;
    margin-bottom: 0.75rem;
    background-color: #ffffff;
}

.modal-info-card.blue {
    border-color: #b6d4fe;
    background-color: #f8fbff;
}
 @media (max-width: 768px) {
        
    .calendar-month-row {
        align-items: flex-start;
    }

    .calendar-nav-actions {
        width: 100%;
    }
 }
 

/* ============================================================
   22. ACCESSIBILITY / FOCUS
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gryd-primary);
  outline-offset: 2px;
}


/* ============================================================
   23. NEW RESPONSIVE APPLICATION HEADER

   navbar.html now places:
   hamburger + branding + profile
   inside this single shared flex container.

   This replaces the old independently fixed positioning.
   ============================================================ */

.site-header {
  position: relative;
  z-index: 1030;
}

.gryd-header {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  height: var(--gryd-header-height);

  z-index: 1040;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding: 0 20px;

  background-color: #FFFFFF;
  border-bottom: 1px solid var(--gryd-base-300);

  box-shadow: 0 2px 8px rgba(11, 18, 32, 0.08);
}

.gryd-header-left,
.gryd-header-right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.gryd-header-left {
  gap: 12px;
  flex: 1 1 auto;
}

.gryd-header-right {
  flex: 0 0 auto;
}


/* ============================================================
   24. HAMBURGER BUTTON
   ============================================================ */

.gryd-sidebar-toggle {
  appearance: none;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: 1px solid transparent;
  border-radius: 0.5rem;

  background-color: transparent;
  color: var(--gryd-neutral);

  font-size: 21px;

  cursor: pointer;

  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.gryd-sidebar-toggle:hover {
  color: var(--gryd-primary);
  background-color: var(--gryd-primary-soft);
}

.gryd-sidebar-toggle:active {
  color: var(--gryd-primary-active);
}

.gryd-sidebar-toggle:focus {
  outline: none;
}


/* ============================================================
   25. GRYD BRANDING
   ============================================================ */

.gryd-branding {
  min-width: 0;
}

.gryd-brand-link {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  min-width: 0;

  color: var(--gryd-neutral);
  text-decoration: none !important;
}

.gryd-brand-link:hover {
  color: var(--gryd-primary);
  text-decoration: none;
}

.gryd-brand-logo {
  display: block;

  height: 32px;
  width: auto;

  max-width: 150px;

  flex: 0 0 auto;
}

.gryd-brand-name {
  color: var(--gryd-neutral);

  font-size: 18px;
  font-weight: 700;

  white-space: nowrap;
}

.gryd-brand-link:hover .gryd-brand-name {
  color: var(--gryd-primary);
}


/* ============================================================
   26. PROFILE AREA
   ============================================================ */

.gryd-user-profile {
  position: relative;
}

.gryd-profile-toggle {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  min-width: 0;

  padding: 6px 8px;

  border-radius: 0.5rem;

  color: var(--gryd-neutral) !important;
  text-decoration: none !important;

  font-weight: 500;

  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.gryd-profile-toggle:hover,
.gryd-profile-toggle:focus {
  color: var(--gryd-primary) !important;
  background-color: var(--gryd-primary-soft);

  text-decoration: none !important;
}

.gryd-profile-image {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  object-fit: cover;

  border: 2px solid var(--gryd-base-300);
}

.gryd-profile-toggle:hover .gryd-profile-image {
  border-color: var(--gryd-primary);
}

.gryd-profile-name {
  display: inline-block;
  white-space: nowrap;
}


/* Bootstrap adds a dropdown arrow. Keep it compact. */

.gryd-profile-toggle.dropdown-toggle::after {
  margin-left: 2px;
}


/* ============================================================
   27. PROFILE DROPDOWN
   ============================================================ */

.gryd-profile-menu {
  min-width: 240px;

  margin-top: 8px;

  padding: 8px 0;

  border: 1px solid var(--gryd-base-300);
  border-radius: 0.5rem;

  background-color: #FFFFFF;

  box-shadow: 0 10px 30px rgba(11, 18, 32, 0.12);
}

.gryd-profile-menu .dropdown-item {
  display: flex;
  align-items: center;

  gap: 10px;

  padding: 9px 16px;

  color: var(--gryd-neutral);

  font-size: 14px;
  font-weight: 400;

  white-space: normal;
}

.gryd-profile-menu .dropdown-item i {
  width: 18px;

  flex: 0 0 18px;

  text-align: center;
}

.gryd-profile-menu .dropdown-item:hover,
.gryd-profile-menu .dropdown-item:focus {
  color: var(--gryd-primary);
  background-color: var(--gryd-primary-soft);
}

.gryd-profile-menu .dropdown-divider {
  border-top-color: var(--gryd-base-300);
}


/* ============================================================
   28. RESPONSIVE SIDEBAR
   ============================================================ */

.gryd-sidebar {
  position: fixed;

  top: var(--gryd-header-height);
  left: 0;
  bottom: 0;

  width: var(--gryd-sidebar-width);

  z-index: 1035;

  background-color: #FFFFFF;

  border-right: 1px solid var(--gryd-base-300);

  box-shadow: 6px 0 20px rgba(11, 18, 32, 0.08);

  overflow-y: auto;
  overflow-x: hidden;

  transform: translateX(-105%);

  transition: transform 0.25s ease;
}

.gryd-sidebar.active {
  transform: translateX(0);
}

.gryd-sidebar-content {
  padding: 16px 12px 30px;
}

.gryd-sidebar-nav,
.gryd-sidebar-submenu {
  list-style: none;

  padding: 0;
  margin: 0;
}

.gryd-sidebar-item {
  margin: 2px 0;
}


/* ============================================================
   29. SIDEBAR LINKS
   ============================================================ */

.gryd-sidebar-link,
.gryd-sidebar-submenu a {
  display: flex;
  align-items: center;

  gap: 10px;

  width: 100%;

  color: var(--gryd-neutral);

  text-decoration: none !important;

  border-radius: 0.5rem;

  font-family: 'Poppins', sans-serif;
}

.gryd-sidebar-link {
  padding: 10px 12px;

  font-size: 14px;
  font-weight: 500;
}

.gryd-sidebar-link > i {
  width: 20px;

  flex: 0 0 20px;

  color: var(--gryd-primary);

  text-align: center;
}

.gryd-sidebar-link:hover,
.gryd-sidebar-link:focus {
  color: var(--gryd-primary);

  background-color: var(--gryd-primary-soft);

  text-decoration: none;
}


/* ============================================================
   30. SIDEBAR SUBMENUS
   ============================================================ */

.gryd-sidebar-submenu {
  margin: 3px 0 8px;
  padding-left: 34px;
}

.gryd-sidebar-submenu li {
  margin: 1px 0;
}

.gryd-sidebar-submenu a {
  padding: 8px 10px;

  font-size: 13px;
  font-weight: 400;
}

.gryd-sidebar-submenu a:hover,
.gryd-sidebar-submenu a:focus {
  color: var(--gryd-primary);
  background-color: var(--gryd-primary-soft);
}

.gryd-sidebar-submenu a i {
  color: var(--gryd-primary);
}

.gryd-sidebar-submenu.collapse {
    visibility: visible !important;
}

.gryd-sidebar-submenu.collapse:not(.show) {
    display: none !important;
}

.gryd-sidebar-submenu.collapse.show {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
}

.gryd-sidebar-submenu.collapsing {
    display: block !important;
    visibility: visible !important;
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}


/* ============================================================
   31. SIDEBAR COLLAPSE ARROWS
   ============================================================ */

.gryd-sidebar-link.dropdown-toggle::after {
  margin-left: auto;

  transition: transform 0.2s ease;
}

.gryd-sidebar-link.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}


/* ============================================================
   32. DAISYUI / TAILWIND BRAND COMPATIBILITY

   These explicit rules are intentional because the project
   loads DaisyUI from a CDN while also retaining legacy
   Bootstrap components.

   main.css is the final GRYD compatibility layer.
   ============================================================ */

.bg-primary {
  background-color: var(--gryd-primary) !important;
}

.text-primary {
  color: var(--gryd-primary) !important;
}

.border-primary {
  border-color: var(--gryd-primary) !important;
}

.bg-base-100 {
  background-color: var(--gryd-base-100) !important;
}

.bg-base-200 {
  background-color: var(--gryd-base-200) !important;
}

.border-base-300 {
  border-color: var(--gryd-base-300) !important;
}

.text-base-content {
  color: var(--gryd-base-content) !important;
}


/* ============================================================
   33. CARDS

   Keep card styling conservative because both Bootstrap and
   DaisyUI use the .card class.
   ============================================================ */

.card {
  border-radius: 0.5rem;
}

.card.bg-base-100 {
  background-color: var(--gryd-base-100) !important;
}

.card.bg-base-200 {
  background-color: var(--gryd-base-200) !important;
}

.card.border-base-300 {
  border-color: var(--gryd-base-300) !important;
}


/* ============================================================
   34. FORM FOCUS STATES
   ============================================================ */

.form-control:focus {
  border-color: var(--gryd-primary);

  box-shadow:
    0 0 0 0.2rem rgba(102, 51, 255, 0.18);
}

.custom-select:focus {
  border-color: var(--gryd-primary);

  box-shadow:
    0 0 0 0.2rem rgba(102, 51, 255, 0.18);
}


/* ============================================================
   35. LINKS USED AS BRAND ACTIONS
   ============================================================ */

.link-primary,
.gryd-link {
  color: var(--gryd-primary);
}

.link-primary:hover,
.gryd-link:hover {
  color: var(--gryd-primary-hover);
}


/* ============================================================
   36. MOBILE / TABLET RESPONSIVENESS
   ============================================================ */

@media (max-width: 767.98px) {

  :root {
    --gryd-header-height: 60px;
    --gryd-sidebar-width: min(86vw, 300px);
  }

  body {
    padding-top: calc(var(--gryd-header-height) + 12px);
  }

  .gryd-header {
    padding-left: 10px;
    padding-right: 10px;

    gap: 8px;
  }

  .gryd-header-left {
    gap: 6px;
  }

  .gryd-sidebar-toggle {
    width: 40px;
    height: 40px;

    flex-basis: 40px;

    font-size: 20px;
  }

  .gryd-brand-logo {
    height: 29px;
  }

  .gryd-brand-name {
    font-size: 17px;
  }

  /*
   * Hide username before it can collide with the logo.
   * The profile image remains available and still opens
   * the complete dropdown.
   */
  .gryd-profile-name {
    display: none;
  }

  .gryd-profile-toggle {
    padding: 4px;
    gap: 4px;
  }

  .gryd-profile-image {
    width: 32px;
    height: 32px;

    flex-basis: 32px;
  }

  .gryd-profile-menu {
    min-width: 220px;

    max-width: calc(100vw - 20px);
  }

  .content-section {
    padding: 10px 14px;
  }

  .account-heading {
    font-size: 2rem;
  }
}


/* ============================================================
   37. VERY SMALL SCREENS
   ============================================================ */

@media (max-width: 380px) {

  .gryd-header {
    padding-left: 6px;
    padding-right: 6px;
  }

  .gryd-header-left {
    gap: 3px;
  }

  .gryd-sidebar-toggle {
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }

  .gryd-brand-logo {
    height: 27px;
  }

  .gryd-brand-name {
    font-size: 15px;
  }

  .gryd-profile-image {
    width: 30px;
    height: 30px;

    flex-basis: 30px;
  }
}


/* ============================================================
   38. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}