/* =====================================================
   DSA Portal — Brand theme layer over Bootstrap 5.3
   Pink #e01060 · Cyan #40c0e0 · Off-white #faf8f5
   ===================================================== */

/* Fonts loaded via <link> in includes/header.php — @import removed (render-blocking) */

/* ---- BRAND TOKENS ---- */
:root {
  --dsa-pink:        #e01060;
  --dsa-pink-dark:   #b5004d;
  --dsa-pink-light:  #f04a89;
  --dsa-pink-pale:   #fce8f2;
  --dsa-cyan:        #40c0e0;
  --dsa-cyan-dark:   #1a9abf;
  --dsa-bg:          #faf8f5;
  --dsa-bg-alt:      #f3f0eb;
  --dsa-text:        #1a1a1a;
  --dsa-text-mid:    #444444;
  --dsa-text-muted:  #666666; /* was #777777 — darkened for WCAG 4.5:1 on off-white */
  --dsa-border:      #e4e0d8;
  --dsa-shadow:      0 2px 12px rgba(0, 0, 0, 0.07);
  --dsa-shadow-md:   0 8px 32px rgba(0, 0, 0, 0.13);
  --dsa-ease:        0.25s ease;

  /* Bootstrap colour remaps */
  --bs-primary:             #e01060;
  --bs-primary-rgb:         224, 16, 96;
  --bs-link-color:          #e01060;
  --bs-link-color-rgb:      224, 16, 96;
  --bs-link-hover-color:    #b5004d;
  --bs-body-bg:             #faf8f5;
  --bs-body-color:          #1a1a1a;
  --bs-body-font-family:    'Inter', sans-serif;
  --bs-border-color:        #e4e0d8;
  --bs-card-border-color:   #e4e0d8;
  --bs-card-bg:             #ffffff;
  --bs-card-border-radius:  0.5rem;
  --bs-card-box-shadow:     0 2px 12px rgba(0, 0, 0, 0.07);
}

/* ---- BASE ---- */
body {
  font-family: 'Inter', sans-serif;
  background: var(--dsa-bg);
  color: var(--dsa-text);
  /* Sticky footer: body fills the viewport, .portal-footer carries mt-auto */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1, h2 {
  font-family: 'Style Script', cursive;
  font-weight: 400;
}

/* ---- NAVBAR ---- */
.dsa-navbar {
  background: rgba(250, 248, 245, 0.97);
  border-bottom: 1px solid var(--dsa-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 1030;
}
/* Dropdowns must sit above any stacking context created by cards/tables */
.dsa-navbar .dropdown-menu { z-index: 1031; }
.dsa-navbar .navbar-brand {
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.dsa-navbar-logo img {
  height: 35px;
  width: auto;
  display: block;
  transition: opacity .15s ease;
}
.dsa-navbar-logo:hover img { opacity: .8; }

.dsa-navbar .nav-link {
  color: var(--dsa-text-mid);
  font-size: .85rem;
  font-weight: 500;
  transition: color var(--dsa-ease);
}
.dsa-navbar .nav-link:hover,
.dsa-navbar .nav-link:focus,
.dsa-navbar .nav-link.active { color: var(--dsa-pink); }

.dsa-navbar .dropdown-menu {
  border-color: var(--dsa-border);
  box-shadow: var(--dsa-shadow-md);
  border-radius: 8px;
  padding: .5rem;
}
.dsa-navbar .dropdown-item {
  border-radius: 5px;
  font-size: .875rem;
  color: var(--dsa-text-mid);
  transition: background var(--dsa-ease), color var(--dsa-ease);
}
.dsa-navbar .dropdown-item:hover { background: var(--dsa-pink-pale); color: var(--dsa-pink); }
.dsa-navbar .dropdown-divider { border-color: var(--dsa-border); }

.dsa-navbar .navbar-toggler { border-color: var(--dsa-border); }
.dsa-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2868%2c68%2c68%2c0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* User chip in navbar */
.dsa-navbar .nav-user-name { color: var(--dsa-text-mid); }
.dsa-navbar .avatar-chip { background: var(--dsa-pink-pale); color: var(--dsa-pink); }

/* Logout button */
.dsa-navbar .btn-logout {
  font-size: .8rem;
  color: var(--dsa-text-muted);
  border-color: var(--dsa-border);
  background: transparent;
  transition: color var(--dsa-ease), border-color var(--dsa-ease), background var(--dsa-ease);
}
.dsa-navbar .btn-logout:hover {
  color: var(--dsa-pink);
  border-color: var(--dsa-pink);
  background: var(--dsa-pink-pale);
}

/* ---- CARDS ---- */
.card {
  border-color: var(--dsa-border);
  box-shadow: var(--dsa-shadow);
  transition: box-shadow var(--dsa-ease), border-color var(--dsa-ease);
}
.card:hover { box-shadow: var(--dsa-shadow-md); }
.schedule-card { border-left-color: var(--dsa-pink); }

/* ---- BUTTONS ---- */
.btn-primary {
  background-color: var(--dsa-pink);
  border-color:     var(--dsa-pink);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--dsa-pink-dark) !important;
  border-color:     var(--dsa-pink-dark) !important;
}
.btn-outline-primary {
  color:        var(--dsa-pink);
  border-color: var(--dsa-pink);
}
.btn-outline-primary:hover {
  background-color: var(--dsa-pink);
  border-color:     var(--dsa-pink);
  color: #fff;
}

/* ---- BADGES ---- */
.badge.bg-primary,
.badge.text-bg-primary { background-color: var(--dsa-pink) !important; }

/* ---- FORM CONTROLS ---- */
.form-control:focus,
.form-select:focus {
  border-color: rgba(224, 16, 96, 0.5);
  box-shadow: 0 0 0 .2rem rgba(224, 16, 96, 0.15);
}

/* ---- TABLES ---- */
.table > :not(caption) > * > th { color: var(--dsa-text-muted); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---- DATATABLES EXPORT BUTTON ---- */
.dsa-btn-excel {
  background: transparent;
  border: 1px solid #1a6335;
  color: #1a6335 !important;
  border-radius: 6px;
  padding: .3rem .5rem;
  line-height: 1;
  font-size: .875rem;
}
.dsa-btn-excel:hover,
.dsa-btn-excel:active {
  background: #1a6335 !important;
  border-color: #1a6335 !important;
  color: #fff !important;
}
.dsa-btn-excel:focus {
  box-shadow: 0 0 0 .2rem rgba(26, 99, 53, .3) !important;
  outline: none;
}

/* DataTables wrapper layout */
.dataTables_wrapper { padding: 1rem; }
.dt-buttons { display: flex; align-items: center; gap: .25rem; margin: 0; padding: .125rem 0; }

/* Search filter — full-width label so input stretches */
.dataTables_filter { padding: .125rem 0; }
.dataTables_filter label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  width: 100%;
  font-size: .875rem;
  color: var(--dsa-text-muted);
  white-space: nowrap;
}
.dataTables_filter input {
  flex: 1;
  min-width: 140px;
  margin-left: 0 !important;
}

/* Bottom row: info text and pagination */
.dataTables_info {
  font-size: .8rem;
  color: var(--dsa-text-muted);
  padding-top: 0;
}
.dataTables_paginate { padding-top: 0; }

/* ---- PAGINATION ---- */
.page-link { color: var(--dsa-pink); }
.page-item.active .page-link { background-color: var(--dsa-pink); border-color: var(--dsa-pink); }

/* ---- MOBILE TOUCH TARGETS ---- */
/* Mínimo 44×44px em todos os botões de tabela em mobile */
@media (max-width: 767.98px) {
  .table .btn,
  .table .btn-sm,
  .list-group .btn,
  .list-group .btn-sm {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .75rem;
  }
  /* Dar espaço entre botões de ação agrupados */
  .table td .d-inline,
  .table td .text-end { display: flex !important; gap: .35rem; justify-content: flex-end; flex-wrap: wrap; }
}

/* ---- FLASH MESSAGES ---- */
/* Garantir que não sobrepõem o botão de submit em mobile */
@media (max-width: 767.98px) {
  .alert { margin-bottom: 1rem; }
  /* Se o alerta for o último elemento antes de um botão, adicionar margem */
  .alert + .btn,
  .alert + form .btn,
  .alert + div .btn { margin-top: .5rem; }
}

/* ---- NAVBAR MOBILE ---- */

/* Avatar pill — shown between brand and hamburger on mobile */
.dsa-avatar-pill {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  border: 1.5px solid var(--dsa-border);
  border-radius: 999px;
  padding: .25rem .6rem .25rem .25rem;
  cursor: pointer;
  transition: border-color var(--dsa-ease), background var(--dsa-ease);
  /* remove Bootstrap dropdown-toggle caret shift */
  line-height: 1;
}
.dsa-avatar-pill:hover,
.dsa-avatar-pill:focus {
  border-color: var(--dsa-pink);
  background: var(--dsa-pink-pale);
  outline: none;
}
.dsa-avatar-pill::after {
  /* Bootstrap's dropdown-toggle caret */
  margin-left: .15rem;
  opacity: .5;
}
.dsa-avatar-pill__name {
  font-size: .8rem;
  font-weight: 600;
  color: var(--dsa-text-mid);
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav links in the expanded mobile menu */
@media (max-width: 991.98px) {
  /* Hamburger: 44×44 touch target */
  .dsa-navbar .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Overlay the page — position absolute so page content can't bleed through */
  .dsa-navbar .navbar-collapse.show,
  .dsa-navbar .navbar-collapse.collapsing {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1030;
    background: #faf8f5;
    border-top: 1px solid var(--dsa-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.13);
    border-radius: 0 0 14px 14px;
    padding: .5rem .75rem .875rem;
  }

  /* Each nav link gets a full-width 44px tap target */
  .dsa-navbar .nav-link {
    min-height: 44px;
    display: flex !important;
    align-items: center;
    padding: .4rem .75rem;
    border-radius: 8px;
    margin-bottom: 2px;
  }
  .dsa-navbar .nav-link:hover,
  .dsa-navbar .nav-link:focus {
    background: var(--dsa-pink-pale);
    color: var(--dsa-pink);
  }

  /* Dropdown submenus: flat indented list (no floating box) */
  .dsa-navbar .dropdown-menu {
    position: static !important;
    float: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0 0 .25rem 1.25rem;
    margin: 0;
  }
  .dsa-navbar .dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    font-size: .875rem;
    padding: .35rem .75rem;
    color: var(--dsa-text-muted);
  }
  .dsa-navbar .dropdown-item:hover {
    background: var(--dsa-pink-pale);
    color: var(--dsa-pink);
  }
  .dsa-navbar .dropdown-divider { display: none; }
}

/* ---- STUDENT DASHBOARD — 375 px (iPhone SE) ---- */
@media (max-width: 575.98px) {
  /* Schedule card: let the time wrap below class name on very small screens */
  .schedule-card .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: .2rem;
  }
  .schedule-card .d-flex.justify-content-between > .small.text-muted {
    width: 100%;
    text-align: right;
    margin-top: .1rem;
  }

  /* PT gradient card: stack icon/text and button vertically */
  .card-body.d-flex.align-items-center.flex-wrap {
    flex-direction: column;
    align-items: flex-start !important;
  }

  /* Tighten column card header padding */
  .card-header { padding: .6rem .875rem; }
}

/* ---- PREFERS-REDUCED-MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- FOOTER ---- */
.portal-footer {
  background: var(--dsa-text, #1a1a1a);
  color: rgba(255, 255, 255, 0.35);
  border-top: 1px solid var(--dsa-border);
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  letter-spacing: .02em;
}