/* ============================================================
   portal.css — Toastmasters Sibiu Portal
   Brand formal/ceremonios: maroon #772432 · blue #004165 · gold #F2DF74
   ============================================================ */

/* ── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  --maroon:        #772432;
  --maroon-dark:   #5a1a24;
  --maroon-light:  #f9f0f1;
  --blue:          #004165;
  --blue-light:    #e8f0f6;
  --gold:          #F2DF74;
  --gold-dark:     #c9b840;
  --gold-light:    #fefae8;

  --text-primary:  #1a1a1a;
  --text-secondary:#4a4a4a;
  --text-muted:    #767676;
  --border:        #ddd5d6;
  --border-light:  #f0ebec;
  --surface:       #ffffff;
  --bg:            #f8f5f5;

  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-display:  'DM Serif Display', 'Georgia', serif;
  --font-mono:     'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  --radius-sm:     4px;
  --radius:        8px;
  --radius-lg:     12px;

  --shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --shadow:        0 2px 8px rgba(0,0,0,.10);
  --shadow-md:     0 4px 16px rgba(0,0,0,.12);

  --transition:    150ms ease;

  --content-max:   820px;
  --header-h:      60px;
}

/* ── Reset / Base ────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family:      var(--font-body);
  font-size:        1rem;
  line-height:      1.6;
  color:            var(--text-primary);
  background:       var(--bg);
  min-height:       100vh;
  display:          flex;
  flex-direction:   column;
}

a {
  color:            var(--blue);
  text-decoration:  none;
  transition:       color var(--transition);
}

a:hover {
  color:            var(--maroon);
  text-decoration:  underline;
}

a:focus-visible {
  outline:          3px solid var(--gold-dark);
  outline-offset:   2px;
  border-radius:    var(--radius-sm);
}

img {
  max-width: 100%;
  height:    auto;
}

/* ── Skip link (a11y) ────────────────────────────────────── */
.skip-link {
  position:   absolute;
  top:        -100%;
  left:       1rem;
  background: var(--maroon);
  color:      #fff;
  padding:    .5rem 1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  z-index:    9999;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 0;
}

/* ── Site Header ─────────────────────────────────────────── */
.site-header {
  position:   sticky;
  top:        0;
  z-index:    100;
  height:     var(--header-h);
  background: var(--maroon);
  color:      #fff;
  display:    flex;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.site-header__inner {
  width:          100%;
  max-width:      calc(var(--content-max) + 4rem);
  margin:         0 auto;
  padding:        0 2rem;
  display:        flex;
  align-items:    center;
  gap:            1rem;
}

.site-header__brand {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex:        1;
  min-width:   0;
}

.site-header__logo {
  width:        32px;
  height:       32px;
  border-radius: 50%;
  border:       2px solid var(--gold);
  object-fit:   cover;
  flex-shrink:  0;
}

.site-header__title {
  font-family:  var(--font-display);
  font-size:    1.15rem;
  font-weight:  400;
  color:        #fff;
  letter-spacing: .01em;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

.site-header__title a {
  color: inherit;
  text-decoration: none;
}

.site-header__user {
  display:     flex;
  align-items: center;
  gap:         .625rem;
  flex-shrink: 0;
}

.site-header__avatar {
  width:         32px;
  height:        32px;
  border-radius: 50%;
  border:        2px solid rgba(255,255,255,.35);
  object-fit:    cover;
  flex-shrink:   0;
}

.site-header__user-name {
  font-size:   .875rem;
  font-weight: 500;
  color:       rgba(255,255,255,.9);
  max-width:   160px;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header__logout {
  font-size:    .8rem;
  color:        rgba(255,255,255,.65);
  border:       1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-sm);
  padding:      .2rem .65rem;
  transition:   background var(--transition), color var(--transition);
  white-space:  nowrap;
}

.site-header__logout:hover {
  background:     rgba(255,255,255,.15);
  color:          #fff;
  text-decoration: none;
}

.site-header__logout:focus-visible {
  outline-color: var(--gold);
}

/* ── Page Wrapper / Layout ───────────────────────────────── */
.page {
  flex:        1;
  display:     flex;
  flex-direction: column;
}

.container {
  width:      100%;
  max-width:  calc(var(--content-max) + 4rem);
  margin:     0 auto;
  padding:    0 2rem;
}

.page-main {
  flex:    1;
  padding: 2.5rem 0 4rem;
}

.page-title {
  font-family:   var(--font-display);
  font-size:     2rem;
  font-weight:   400;
  color:         var(--maroon);
  margin-bottom: 1.75rem;
  line-height:   1.2;
}

.page-subtitle {
  font-size:      .9rem;
  color:          var(--text-muted);
  margin-top:     -.75rem;
  margin-bottom:  1.75rem;
}

/* ── Site Footer ─────────────────────────────────────────── */
.site-footer {
  background:    var(--maroon-dark);
  color:         rgba(255,255,255,.55);
  font-size:     .8rem;
  text-align:    center;
  padding:       1rem 2rem;
}

/* ── Cards — Lista Minute ────────────────────────────────── */
.minutes-list {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        .875rem;
}

.minute-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  overflow:      hidden;
}

.minute-card:hover {
  box-shadow:    var(--shadow-md);
  border-color:  var(--maroon);
  transform:     translateY(-1px);
}

.minute-card__link {
  display:    block;
  padding:    1.125rem 1.375rem;
  color:      inherit;
  text-decoration: none;
}

.minute-card__link:focus-visible {
  outline:        3px solid var(--gold-dark);
  outline-offset: -3px;
  border-radius:  var(--radius);
}

.minute-card__header {
  display:     flex;
  align-items: flex-start;
  gap:         .75rem;
}

.minute-card__title {
  font-family:  var(--font-display);
  font-size:    1.05rem;
  font-weight:  400;
  color:        var(--maroon);
  flex:         1;
  min-width:    0;
}

.minute-card__date {
  font-size:    .8rem;
  color:        var(--text-muted);
  margin-top:   .25rem;
  display:      block;
}

.minute-card__meta {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  margin-top:  .625rem;
  flex-wrap:   wrap;
}

/* ── Badge Stare ─────────────────────────────────────────── */
.badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  font-size:     .73rem;
  font-weight:   600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding:       .2rem .6rem;
  border-radius: 999px;
  white-space:   nowrap;
  line-height:   1;
}

.badge--validat {
  background: #e8f5e9;
  color:      #2e7d32;
  border:     1px solid #a5d6a7;
}

.badge--propus {
  background: var(--gold-light);
  color:      #7a6200;
  border:     1px solid var(--gold);
}

.badge--docx {
  background: var(--blue-light);
  color:      var(--blue);
  border:     1px solid #90b8d4;
}

/* ── Conținut Minuta (tipografie) ────────────────────────── */
.content {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       2.25rem 2.5rem;
  box-shadow:    var(--shadow-sm);
}

.content h1 {
  font-family:   var(--font-display);
  font-size:     1.85rem;
  font-weight:   400;
  color:         var(--maroon);
  margin-bottom: 1rem;
  line-height:   1.2;
}

.content h2 {
  font-family:   var(--font-display);
  font-size:     1.3rem;
  font-weight:   400;
  color:         var(--maroon);
  margin-top:    2rem;
  margin-bottom: .75rem;
  padding-bottom: .375rem;
  border-bottom: 1px solid var(--border-light);
  line-height:   1.25;
}

.content h3 {
  font-size:     1rem;
  font-weight:   600;
  color:         var(--blue);
  margin-top:    1.5rem;
  margin-bottom: .5rem;
}

.content p {
  margin-bottom: .875rem;
  color:         var(--text-primary);
}

.content ul,
.content ol {
  margin-bottom: .875rem;
  padding-left:  1.5rem;
}

.content li {
  margin-bottom: .3rem;
}

.content blockquote {
  border-left:  4px solid var(--maroon);
  background:   var(--maroon-light);
  margin:       1.25rem 0;
  padding:      .875rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color:        var(--text-secondary);
  font-size:    .95rem;
}

.content blockquote strong {
  color: var(--maroon-dark);
}

.content table {
  width:         100%;
  border-collapse: collapse;
  margin:        1.25rem 0;
  font-size:     .9rem;
}

.content th {
  background:    var(--maroon);
  color:         #fff;
  padding:       .6rem 1rem;
  text-align:    left;
  font-weight:   600;
  font-size:     .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.content th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.content th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

.content td {
  padding:       .55rem 1rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.content tr:last-child td {
  border-bottom: none;
}

.content tr:nth-child(even) td {
  background: var(--maroon-light);
}

.content code {
  font-family:   var(--font-mono);
  font-size:     .85em;
  background:    var(--border-light);
  color:         var(--maroon-dark);
  padding:       .1em .4em;
  border-radius: var(--radius-sm);
}

.content pre {
  background:    #1e1e2e;
  color:         #cdd6f4;
  padding:       1.25rem 1.5rem;
  border-radius: var(--radius);
  overflow-x:    auto;
  margin:        1.25rem 0;
  font-size:     .85rem;
  line-height:   1.55;
}

.content pre code {
  background:  transparent;
  color:       inherit;
  padding:     0;
  font-size:   inherit;
}

.content hr {
  border:        none;
  border-top:    1px solid var(--border);
  margin:        2rem 0;
}

/* ── Action Bar (deasupra minutei) ───────────────────────── */
.action-bar {
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  margin-bottom: 1.375rem;
  flex-wrap:     wrap;
}

.action-bar__back {
  font-size:   .875rem;
  color:       var(--text-muted);
  display:     flex;
  align-items: center;
  gap:         .3rem;
}

.action-bar__back:hover {
  color: var(--maroon);
}

.action-bar__spacer {
  flex: 1;
}

/* ── Butoane ─────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           .4rem;
  font-family:   var(--font-body);
  font-size:     .875rem;
  font-weight:   600;
  line-height:   1;
  padding:       .6rem 1.25rem;
  border-radius: var(--radius-sm);
  border:        2px solid transparent;
  cursor:        pointer;
  text-decoration: none;
  transition:    background var(--transition), color var(--transition),
                 border-color var(--transition), box-shadow var(--transition);
  white-space:   nowrap;
  user-select:   none;
}

.btn:focus-visible {
  outline:       3px solid var(--gold-dark);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity:  .5;
  cursor:   not-allowed;
  pointer-events: none;
}

/* Primar — maroon */
.btn-primary,
.btn {
  background:  var(--maroon);
  color:       #fff;
  border-color: var(--maroon);
}

.btn-primary:hover,
.btn:hover {
  background:   var(--maroon-dark);
  border-color: var(--maroon-dark);
  color:        #fff;
  text-decoration: none;
}

/* Ghost — contur maroon */
.btn-ghost {
  background:   transparent;
  color:        var(--maroon);
  border-color: var(--maroon);
}

.btn-ghost:hover {
  background:  var(--maroon-light);
  color:       var(--maroon-dark);
  text-decoration: none;
}

/* Ghost blue */
.btn-ghost-blue {
  background:   transparent;
  color:        var(--blue);
  border-color: var(--blue);
}

.btn-ghost-blue:hover {
  background:   var(--blue-light);
  text-decoration: none;
}

/* Small */
.btn-sm {
  font-size:  .8rem;
  padding:    .4rem .9rem;
}

/* ── Grila Calendar ──────────────────────────────────────── */
.calendar-section {
  margin-top: 2.5rem;
}

.calendar-section__title {
  font-family:   var(--font-display);
  font-size:     1.25rem;
  color:         var(--maroon);
  margin-bottom: 1rem;
  display:       flex;
  align-items:   center;
  gap:           .5rem;
}

.calendar-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   2px;
  background:            var(--border);
  border:                1px solid var(--border);
  border-radius:         var(--radius);
  overflow:              hidden;
}

/* Zilele săptămânii — header */
.calendar-grid__day-label {
  background:    var(--maroon);
  color:         rgba(255,255,255,.85);
  font-size:     .72rem;
  font-weight:   600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align:    center;
  padding:       .45rem .25rem;
}

/* Celulă zi */
.calendar-cell {
  background:  var(--surface);
  min-height:  80px;
  padding:     .4rem .5rem;
  position:    relative;
}

.calendar-cell--today {
  background: var(--maroon-light);
}

.calendar-cell--faded {
  background: #fafafa;
  opacity:    .6;
}

.calendar-cell__num {
  font-size:   .75rem;
  font-weight: 600;
  color:       var(--text-muted);
  margin-bottom: .3rem;
}

.calendar-cell--today .calendar-cell__num {
  color:            var(--maroon);
  font-size:        .8rem;
}

/* Event chip */
.cal-event {
  display:       block;
  background:    var(--maroon);
  color:         #fff;
  font-size:     .7rem;
  font-weight:   500;
  padding:       .2rem .4rem;
  border-radius: 3px;
  margin-bottom: .2rem;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  cursor:        default;
  line-height:   1.3;
}

.cal-event:hover {
  background: var(--maroon-dark);
}

.cal-event--gold {
  background: var(--gold-dark);
  color:      var(--maroon-dark);
}

/* Export ICS */
.calendar-export {
  margin-top:  1rem;
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex-wrap:   wrap;
}

.calendar-export__note {
  font-size:  .8rem;
  color:      var(--text-muted);
}

/* ── Card Login ──────────────────────────────────────────── */
.login-wrapper {
  min-height: calc(100vh - var(--header-h));
  display:    flex;
  align-items: center;
  justify-content: center;
  padding:    2rem 1rem;
  background: var(--bg);
}

.login-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       3rem 2.5rem;
  max-width:     420px;
  width:         100%;
  box-shadow:    var(--shadow-md);
  text-align:    center;
}

.login-card__emblem {
  width:         64px;
  height:        64px;
  background:    var(--maroon);
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin:        0 auto 1.5rem;
  box-shadow:    0 2px 8px rgba(119,36,50,.3);
}

.login-card__emblem svg {
  width:  32px;
  height: 32px;
  fill:   #fff;
}

.login-card__title {
  font-family:   var(--font-display);
  font-size:     1.6rem;
  font-weight:   400;
  color:         var(--maroon);
  margin-bottom: .375rem;
}

.login-card__subtitle {
  font-size:   .9rem;
  color:       var(--text-muted);
  margin-bottom: 2rem;
  line-height: 1.5;
}

.login-card__note {
  font-size:   .78rem;
  color:       var(--text-muted);
  margin-top:  1.25rem;
  line-height: 1.5;
}

/* Google Sign-In button override */
.login-card .g_id_signin {
  display:         flex;
  justify-content: center;
}

/* ── Mesaje de sistem (erori, info) ──────────────────────── */
.alert {
  border-radius: var(--radius-sm);
  padding:       .875rem 1.125rem;
  font-size:     .9rem;
  margin-bottom: 1.25rem;
  display:       flex;
  align-items:   flex-start;
  gap:           .625rem;
  border:        1px solid transparent;
}

.alert--error {
  background:   #fff0f0;
  border-color: #f5c6c6;
  color:        #8b0000;
}

.alert--info {
  background:   var(--blue-light);
  border-color: #90b8d4;
  color:        var(--blue);
}

.alert--warning {
  background:   var(--gold-light);
  border-color: var(--gold);
  color:        #7a6200;
}

.alert--success {
  background:   #e8f5e9;
  border-color: #a5d6a7;
  color:        #2e7d32;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
  font-size:     .83rem;
  color:         var(--text-muted);
  margin-bottom: 1.375rem;
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           .25rem;
}

.breadcrumb__sep {
  color: var(--border);
  user-select: none;
}

.breadcrumb a {
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--maroon);
}

/* ── Loader / Spinner ────────────────────────────────────── */
.spinner {
  display:       inline-block;
  width:         20px;
  height:        20px;
  border:        3px solid var(--border);
  border-top-color: var(--maroon);
  border-radius: 50%;
  animation:     spin .7s linear infinite;
  flex-shrink:   0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Stare goală (empty state) ───────────────────────────── */
.empty-state {
  text-align:  center;
  padding:     3rem 1rem;
  color:       var(--text-muted);
}

.empty-state__icon {
  font-size:     2.5rem;
  margin-bottom: .75rem;
  display:       block;
  opacity:       .4;
}

.empty-state__msg {
  font-size: 1rem;
}

.empty-state__title {
  font-family:   var(--font-display);
  font-size:     1.25rem;
  font-weight:   400;
  color:         var(--maroon);
  margin-bottom: .5rem;
}

.empty-state__text {
  font-size:     .9rem;
  color:         var(--text-muted);
  margin-bottom: .35rem;
}

.empty-state__text code {
  font-family:   var(--font-mono);
  font-size:     .82em;
  background:    #f0ebec;
  padding:       .1em .35em;
  border-radius: 3px;
}

.empty-state__actions {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         .625rem;
  flex-wrap:   wrap;
  margin-top:  1.25rem;
}

/* ── Members table (admin) ───────────────────────────────── */
.members-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .9rem;
  margin-top:      1rem;
}

.members-table th {
  background:    var(--maroon);
  color:         #fff;
  padding:       .55rem 1rem;
  text-align:    left;
  font-size:     .78rem;
  font-weight:   600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.members-table td {
  padding:       .55rem 1rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.members-table tr:last-child td {
  border-bottom: none;
}

.members-table tr:hover td {
  background: var(--maroon-light);
}

/* ── Tooltip simplu (hover) ──────────────────────────────── */
[data-tip] {
  position: relative;
  cursor:   help;
}

[data-tip]::after {
  content:       attr(data-tip);
  position:      absolute;
  bottom:        calc(100% + 6px);
  left:          50%;
  transform:     translateX(-50%);
  background:    var(--maroon-dark);
  color:         #fff;
  font-size:     .72rem;
  white-space:   nowrap;
  padding:       .25rem .6rem;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity:       0;
  transition:    opacity var(--transition);
  z-index:       50;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   CLASE PHP TEMPLATES (index.php / minute.php)
   Mapate la design tokens — o singură sursă de adevăr
   ══════════════════════════════════════════════════════════ */

/* ── Portal Header (minute.php: .portal-header) ─────────── */
.portal-header {
  position:    sticky;
  top:         0;
  z-index:     100;
  height:      var(--header-h);
  background:  var(--maroon);
  color:       #fff;
  display:     flex;
  align-items: center;
  box-shadow:  0 2px 6px rgba(0,0,0,.25);
}

/* ── Header inner wrapper ────────────────────────────────── */
.header-inner {
  width:       100%;
  max-width:   calc(var(--content-max) + 4rem);
  margin:      0 auto;
  padding:     0 2rem;
  display:     flex;
  align-items: center;
  gap:         1rem;
}

/* ── Brand ───────────────────────────────────────────────── */
.header-brand {
  display:         flex;
  align-items:     center;
  gap:             .625rem;
  text-decoration: none;
  flex-shrink:     0;
}

.brand-mark,
.brand-emblem {
  width:           30px;
  height:          30px;
  background:      rgba(255,255,255,.15);
  border:          1.5px solid var(--gold);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .68rem;
  font-weight:     700;
  color:           var(--gold);
  flex-shrink:     0;
}

.brand-name {
  font-family:    var(--font-display);
  font-size:      1.05rem;
  color:          #fff;
  letter-spacing: .01em;
  white-space:    nowrap;
}

.brand-divider {
  color:     rgba(255,255,255,.3);
  font-size: .9rem;
}

.brand-portal {
  font-size:   .78rem;
  font-weight: 500;
  color:       rgba(255,255,255,.55);
  white-space: nowrap;
}

/* ── Header nav ──────────────────────────────────────────── */
.header-nav {
  display:         flex;
  align-items:     center;
  gap:             .2rem;
  flex:            1;
  justify-content: flex-end;
  flex-wrap:       wrap;
}

.nav-link {
  font-size:       .875rem;
  font-weight:     500;
  color:           rgba(255,255,255,.8);
  padding:         .35rem .7rem;
  border-radius:   var(--radius-sm);
  text-decoration: none;
  transition:      background var(--transition), color var(--transition);
  white-space:     nowrap;
}

.nav-link:hover {
  background:      rgba(255,255,255,.15);
  color:           #fff;
  text-decoration: none;
}

.nav-link--active {
  background:  rgba(255,255,255,.18);
  color:       #fff;
  font-weight: 600;
}

.nav-link-subtle {
  font-size:  .8rem;
  color:      rgba(255,255,255,.55) !important;
  border:     1px solid rgba(255,255,255,.22);
}

.nav-link-subtle:hover {
  background: rgba(255,255,255,.12) !important;
  color:      rgba(255,255,255,.85) !important;
}

/* ── Header user area ────────────────────────────────────── */
.header-user {
  display:     flex;
  align-items: center;
  gap:         .625rem;
  flex-shrink: 0;
}

.user-pill {
  display:       flex;
  align-items:   center;
  gap:           .4rem;
  background:    rgba(255,255,255,.1);
  border-radius: 999px;
  padding:       .2rem .65rem .2rem .3rem;
}

.user-avatar {
  width:         24px;
  height:        24px;
  border-radius: 50%;
  border:        1.5px solid rgba(255,255,255,.35);
  object-fit:    cover;
  flex-shrink:   0;
}

.user-name {
  font-size:     .82rem;
  font-weight:   500;
  color:         rgba(255,255,255,.9);
  max-width:     160px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.btn-logout {
  font-size:       .8rem;
  color:           rgba(255,255,255,.65);
  border:          1px solid rgba(255,255,255,.3);
  border-radius:   var(--radius-sm);
  padding:         .2rem .65rem;
  text-decoration: none;
  transition:      background var(--transition), color var(--transition);
  white-space:     nowrap;
}

.btn-logout:hover {
  background:      rgba(255,255,255,.15);
  color:           #fff;
  text-decoration: none;
}

/* ── Main layout ─────────────────────────────────────────── */
.portal-main {
  flex:    1;
  padding: 2.5rem 0 4rem;
}

.content-wrap,
.page-container {
  width:     100%;
  max-width: calc(var(--content-max) + 4rem);
  margin:    0 auto;
  padding:   0 2rem;
}

.page-heading {
  margin-bottom: 1.75rem;
}

/* ── Page toolbar ────────────────────────────────────────── */
.page-toolbar {
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  margin-bottom: 1.375rem;
  flex-wrap:     wrap;
}

.breadcrumb-link {
  color:           var(--text-muted);
  font-size:       .83rem;
  text-decoration: none;
}

.breadcrumb-link:hover { color: var(--maroon); text-decoration: none; }

.breadcrumb-sep {
  color:       var(--border);
  font-size:   .83rem;
  user-select: none;
}

.breadcrumb-current {
  font-size:     .83rem;
  color:         var(--text-secondary);
  max-width:     260px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.toolbar-actions {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  margin-left: auto;
  flex-wrap:   wrap;
}

/* ── Document header ─────────────────────────────────────── */
.document-header {
  display:       flex;
  align-items:   flex-start;
  gap:           1rem;
  margin-bottom: 1.5rem;
  flex-wrap:     wrap;
}

.document-title {
  font-family:  var(--font-display);
  font-size:    1.85rem;
  font-weight:  400;
  color:        var(--maroon);
  line-height:  1.2;
  flex:         1;
  min-width:    0;
}

/* ── Badge status (alias pentru minute.php) ──────────────── */
.badge-propus {
  background: var(--gold-light);
  color:      #7a6200;
  border:     1px solid var(--gold);
}

.badge-validat {
  background: #e8f5e9;
  color:      #2e7d32;
  border:     1px solid #a5d6a7;
}

/* ── Flash (minute.php) ──────────────────────────────────── */
.flash-message {
  border-radius: var(--radius-sm);
  padding:       .875rem 1.125rem;
  font-size:     .9rem;
  font-weight:   500;
  margin-bottom: 1.5rem;
  border:        1px solid transparent;
}

.flash-success {
  background:   #e8f5e9;
  border-color: #a5d6a7;
  color:        #1b5e20;
}

.flash-error {
  background:   #fff0f0;
  border-color: #f5c6c6;
  color:        #8b0000;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD (dashboard.php)
   ══════════════════════════════════════════════════════════ */

/* ── Greeting ────────────────────────────────────────────── */
.db-greeting {
  padding:       2rem 0 1rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 1.75rem;
}

.db-greeting__title {
  font-family:  var(--font-display);
  font-size:    2rem;
  font-weight:  400;
  color:        var(--maroon);
  line-height:  1.2;
  margin-bottom: .35rem;
}

.db-greeting__sub {
  font-size: .9rem;
  color:     var(--text-muted);
}

/* ── Grid 3 coloane ──────────────────────────────────────── */
.db-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.25rem;
  margin-bottom:         2.5rem;
}

/* ── Card de bază ────────────────────────────────────────── */
.db-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.5rem 1.625rem;
  box-shadow:    var(--shadow-sm);
  border-top:    3px solid var(--maroon);
  display:       flex;
  flex-direction: column;
  gap:           .5rem;
}

.db-card--meeting   { border-top-color: var(--blue); }
.db-card--minute    { border-top-color: var(--maroon); }
.db-card--actions   { border-top-color: var(--gold-dark); }
.db-card--timer     { border-top-color: #27ae60; }
.db-card--ahcounter { border-top-color: #8e44ad; }

.db-card__icon {
  font-size:     1.4rem;
  line-height:   1;
  margin-bottom: .125rem;
}

.db-card__label {
  font-size:      .72rem;
  font-weight:    700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--text-muted);
}

.db-card__value {
  font-family:   var(--font-display);
  font-size:     1.05rem;
  color:         var(--text-primary);
  line-height:   1.35;
  font-weight:   400;
}

.db-card__time {
  font-size:  .85rem;
  color:      var(--text-secondary);
  font-weight: 400;
}

.db-card__sub {
  font-size: .83rem;
  color:     var(--text-secondary);
  line-height: 1.4;
}

.db-card__badge {
  display:       inline-block;
  background:    var(--gold-light);
  color:         #7a6200;
  border:        1px solid var(--gold);
  border-radius: 999px;
  font-size:     .73rem;
  font-weight:   600;
  padding:       .15rem .65rem;
  width:         fit-content;
}

.db-card__link {
  font-size:       .875rem;
  font-weight:     600;
  color:           var(--blue);
  text-decoration: none;
  margin-top:      auto;
  padding-top:     .5rem;
}

.db-card__link:hover {
  color:           var(--maroon);
  text-decoration: underline;
}

.db-card__empty {
  font-size:  .88rem;
  color:      var(--text-muted);
  font-style: italic;
}

.db-card__hint {
  font-size: .8rem;
  color:     var(--text-muted);
}

.db-card__hint code {
  font-family: var(--font-mono);
  font-size:   .8em;
  background:  var(--border-light);
  padding:     .1em .35em;
  border-radius: 3px;
}

/* ── Acțiuni rapide ──────────────────────────────────────── */
.db-actions {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        .375rem;
  margin-top: .25rem;
}

.db-action {
  font-size:       .875rem;
  font-weight:     500;
  color:           var(--blue);
  text-decoration: none;
  padding:         .35rem .5rem;
  border-radius:   var(--radius-sm);
  transition:      background var(--transition), color var(--transition);
  display:         block;
}

.db-action:hover {
  background:      var(--blue-light);
  color:           var(--blue);
  text-decoration: none;
}

.db-action--admin {
  color: var(--maroon);
}

.db-action--admin:hover {
  background: var(--maroon-light);
  color:      var(--maroon-dark);
}

/* ── Footer inner (toate paginile) ───────────────────────── */
.footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             .5rem;
  flex-wrap:       wrap;
}

.footer-sep {
  color:      rgba(255,255,255,.25);
  user-select: none;
}

/* ── Header avatar (header-avatar ≠ user-avatar) ─────────── */
.header-avatar {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  border:        1.5px solid rgba(255,255,255,.35);
  object-fit:    cover;
  flex-shrink:   0;
}

/* ── Responsive suplimentar ──────────────────────────────── */
@media (max-width: 640px) {
  .header-inner    { padding: 0 1rem; }
  .content-wrap,
  .page-container  { padding: 0 1rem; }
  .brand-portal    { display: none; }
  .user-name       { max-width: 80px; }
  .page-toolbar    { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .toolbar-actions { margin-left: 0; }
  .document-title  { font-size: 1.4rem; }
  .portal-main,
  .page-main       { padding: 1.5rem 0 3rem; }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .site-header,
  .action-bar,
  .calendar-export,
  .btn,
  .breadcrumb {
    display: none !important;
  }

  body {
    background: #fff;
    color:      #000;
    font-size:  11pt;
  }

  .content {
    border:        none;
    box-shadow:    none;
    padding:       0;
  }

  .content a::after {
    content: ' (' attr(href) ')';
    font-size: .8em;
    color: #555;
  }

  .content blockquote {
    border-left: 3px solid #772432;
    background:  none;
  }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --header-h: 54px;
  }

  .container {
    padding: 0 1rem;
  }

  .page-main {
    padding: 1.5rem 0 3rem;
  }

  .page-title {
    font-size: 1.5rem;
  }

  /* Header: ascunde numele pe mobile */
  .site-header__user-name {
    display: none;
  }

  .site-header__inner {
    padding: 0 1rem;
  }

  /* Calendar: collapse la 2 coloane pe mobile */
  .calendar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calendar-grid__day-label:nth-child(n+3) {
    display: none;
  }

  /* Content padding redus */
  .content {
    padding: 1.25rem 1.125rem;
  }

  /* Login card */
  .login-card {
    padding: 2rem 1.25rem;
  }

  /* Action bar stivuit */
  .action-bar {
    flex-direction: column;
    align-items:    flex-start;
  }

  .action-bar__spacer {
    display: none;
  }

  /* Butoane full-width pe mobile */
  .btn {
    width:           100%;
    justify-content: center;
  }

  /* Minute card padding */
  .minute-card__link {
    padding: .875rem 1rem;
  }
}

@media (max-width: 400px) {
  .calendar-grid {
    grid-template-columns: 1fr;
  }

  .calendar-grid__day-label {
    display: none;
  }

  .calendar-cell {
    min-height: 48px;
  }
}

/* ====== Admin ====== */

/* ── Tabel Membri ─────────────────────────────────────────── */
.members-table {
  width:            100%;
  border-collapse:  collapse;
  font-size:        .9rem;
  margin-top:       1rem;
  background:       var(--surface);
  border:           1px solid var(--border);
  border-radius:    var(--radius);
  overflow:         hidden;
  box-shadow:       var(--shadow-sm);
}

.members-table thead tr {
  background: var(--maroon);
}

.members-table th {
  background:     var(--maroon);
  color:          #fff;
  padding:        .6rem 1rem;
  text-align:     left;
  font-size:      .78rem;
  font-weight:    600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space:    nowrap;
}

.members-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.members-table th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

.members-table td {
  padding:        .6rem 1rem;
  border-bottom:  1px solid var(--border-light);
  vertical-align: middle;
}

.members-table tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra */
.members-table tbody tr:nth-child(even) td {
  background: var(--maroon-light);
}

.members-table tbody tr:hover td {
  background: #f0e4e6;
}

/* Rând imutabil (seed super-admin) — estompat */
.members-table tbody tr.is-seed td {
  opacity:   .65;
  font-style: italic;
}

/* Responsive: scroll orizontal pe ecrane mici */
.members-table-wrap {
  width:      100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1rem;
  border-radius: var(--radius);
}

.members-table-wrap .members-table {
  margin-top: 0;
}

/* ── Badge Rol ────────────────────────────────────────────── */
.role-badge {
  display:        inline-flex;
  align-items:    center;
  font-size:      .72rem;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding:        .2rem .65rem;
  border-radius:  999px;
  white-space:    nowrap;
  line-height:    1;
  border:         1px solid transparent;
}

.role-badge.admin {
  background:   var(--maroon);
  color:        #fff;
  border-color: var(--maroon-dark);
}

.role-badge.member {
  background:   var(--blue-light);
  color:        var(--blue);
  border-color: #90b8d4;
}

/* ── Formular Adaugă Membru ───────────────────────────────── */
.add-member-form {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1.375rem 1.5rem;
  box-shadow:    var(--shadow-sm);
  margin-bottom: 2rem;
}

.add-member-form__title {
  font-family:   var(--font-display);
  font-size:     1.05rem;
  font-weight:   400;
  color:         var(--maroon);
  margin-bottom: 1rem;
}

.add-member-form__row {
  display:   flex;
  gap:       .75rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.add-member-form__field {
  display:       flex;
  flex-direction: column;
  gap:           .3rem;
  flex:          1 1 220px;
  min-width:     0;
}

.add-member-form__field label {
  font-size:   .8rem;
  font-weight: 600;
  color:       var(--text-secondary);
}

.add-member-form__field input,
.add-member-form__field select {
  font-family:   var(--font-body);
  font-size:     .9rem;
  color:         var(--text-primary);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       .5rem .75rem;
  width:         100%;
  transition:    border-color var(--transition), box-shadow var(--transition);
  appearance:    none;
  -webkit-appearance: none;
}

.add-member-form__field input:focus,
.add-member-form__field select:focus {
  outline:      none;
  border-color: var(--maroon);
  box-shadow:   0 0 0 3px rgba(119,36,50,.15);
}

.add-member-form__field select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23767676' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right .75rem center;
  padding-right:       2.25rem;
  cursor:              pointer;
}

.add-member-form__actions {
  flex:        0 0 auto;
  align-self:  flex-end;
}

/* ── Mesaje Flash (PRG) ───────────────────────────────────── */
.flash {
  border-radius: var(--radius-sm);
  padding:       .825rem 1.125rem;
  font-size:     .9rem;
  font-weight:   500;
  margin-bottom: 1.25rem;
  display:       flex;
  align-items:   flex-start;
  gap:           .6rem;
  border:        1px solid transparent;
}

.flash.success {
  background:   #e8f5e9;
  border-color: #a5d6a7;
  color:        #1b5e20;
}

.flash.error {
  background:   #fff0f0;
  border-color: #f5c6c6;
  color:        #8b0000;
}

/* ── Buton Periculos (Șterge) ─────────────────────────────── */
.btn-danger {
  background:   #c0392b;
  color:        #fff;
  border-color: #a93226;
  font-size:    .8rem;
  padding:      .35rem .85rem;
}

.btn-danger:hover {
  background:   #a93226;
  border-color: #922b21;
  color:        #fff;
  text-decoration: none;
}

.btn-danger:focus-visible {
  outline:       3px solid #f1948a;
  outline-offset: 2px;
}

.btn-danger:disabled,
.btn-danger[aria-disabled="true"] {
  opacity:        .45;
  cursor:         not-allowed;
  pointer-events: none;
}

/* ── Admin: Responsive ────────────────────────────────────── */
@media (max-width: 640px) {
  .add-member-form {
    padding: 1rem 1rem;
  }

  .add-member-form__row {
    flex-direction: column;
  }

  .add-member-form__field {
    flex: 1 1 auto;
  }

  .add-member-form__actions {
    width: 100%;
  }

  .add-member-form__actions .btn {
    width:           100%;
    justify-content: center;
  }

  .members-table th,
  .members-table td {
    padding: .5rem .65rem;
    font-size: .83rem;
  }
}

/* ====== Minute edit ====== */

/* ── Editor Markdown (textarea principal) ─────────────────── */
.minute-edit textarea {
  font-family:    var(--font-mono);
  font-size:      .9rem;
  line-height:    1.65;
  color:          var(--text-primary);
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  padding:        1.125rem 1.25rem;
  width:          100%;
  min-height:     50vh;
  resize:         vertical;
  display:        block;
  transition:     border-color var(--transition), box-shadow var(--transition);
  tab-size:       2;
  -moz-tab-size:  2;
}

.minute-edit textarea:focus {
  outline:      none;
  border-color: var(--maroon);
  box-shadow:   0 0 0 3px rgba(119,36,50,.15);
}

/* ── Toolbar Salvează / Anulează ──────────────────────────── */
.edit-toolbar {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex-wrap:   wrap;
  margin-top:  1rem;
  padding-top: .875rem;
  border-top:  1px solid var(--border-light);
}

.edit-toolbar__spacer {
  flex: 1;
}

.edit-toolbar__hint {
  font-size:  .8rem;
  color:      var(--text-muted);
  font-style: italic;
}

/* ── Editor Evenimente Calendar ───────────────────────────── */
.event-editor {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-sm);
  padding:       1.375rem 1.5rem;
  margin-top:    1.75rem;
}

.event-editor__title {
  font-family:   var(--font-display);
  font-size:     1.1rem;
  font-weight:   400;
  color:         var(--maroon);
  margin-bottom: 1.125rem;
  display:       flex;
  align-items:   center;
  gap:           .5rem;
}

.event-editor__list {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        .5rem;
  margin-bottom: 1.125rem;
}

.event-editor__empty {
  font-size:  .88rem;
  color:      var(--text-muted);
  font-style: italic;
  margin-bottom: 1.125rem;
}

/* ── Rând eveniment (flex: titlu + dată + ore + buton) ────── */
.event-row {
  display:     flex;
  align-items: center;
  gap:         .625rem;
  flex-wrap:   wrap;
  padding:     .625rem .875rem;
  background:  var(--bg);
  border:      1px solid var(--border-light);
  border-radius: var(--radius-sm);
  transition:  background var(--transition), border-color var(--transition);
}

.event-row:hover {
  background:   var(--maroon-light);
  border-color: var(--border);
}

.event-row__title {
  flex:          2 1 180px;
  min-width:     0;
  font-size:     .9rem;
  font-weight:   500;
  color:         var(--text-primary);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.event-row__date {
  flex:       1 1 120px;
  font-size:  .83rem;
  color:      var(--text-secondary);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.event-row__time {
  flex:       0 0 auto;
  font-size:  .8rem;
  color:      var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.event-row__delete {
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Formular Adaugă Eveniment ────────────────────────────── */
.event-editor__add-form {
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       1rem 1.125rem;
  margin-top:    .5rem;
}

.event-editor__add-form legend,
.event-editor__add-title {
  font-size:     .85rem;
  font-weight:   600;
  color:         var(--blue);
  margin-bottom: .75rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.event-editor__fields {
  display:   flex;
  gap:       .625rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.event-editor__field {
  display:        flex;
  flex-direction: column;
  gap:            .275rem;
  flex:           1 1 160px;
  min-width:      0;
}

.event-editor__field--wide {
  flex: 2 1 220px;
}

.event-editor__field label {
  font-size:   .75rem;
  font-weight: 600;
  color:       var(--text-secondary);
  white-space: nowrap;
}

.event-editor__field input[type="text"],
.event-editor__field input[type="date"],
.event-editor__field input[type="time"] {
  font-family:   var(--font-body);
  font-size:     .875rem;
  color:         var(--text-primary);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       .45rem .7rem;
  width:         100%;
  transition:    border-color var(--transition), box-shadow var(--transition);
  appearance:    none;
  -webkit-appearance: none;
}

.event-editor__field input:focus {
  outline:      none;
  border-color: var(--maroon);
  box-shadow:   0 0 0 3px rgba(119,36,50,.15);
}

.event-editor__add-actions {
  flex:       0 0 auto;
  align-self: flex-end;
}

/* ── Responsive edit-mode ─────────────────────────────────── */
@media (max-width: 640px) {
  .minute-edit textarea {
    font-size:  .82rem;
    padding:    .875rem .875rem;
    min-height: 40vh;
  }

  .edit-toolbar {
    flex-direction: column;
    align-items:    stretch;
  }

  .edit-toolbar .btn {
    width:           100%;
    justify-content: center;
  }

  .edit-toolbar__spacer {
    display: none;
  }

  .event-row {
    flex-direction: column;
    align-items:    flex-start;
  }

  .event-row__delete {
    margin-left: 0;
    align-self:  flex-end;
  }

  .event-editor__fields {
    flex-direction: column;
  }

  .event-editor__field,
  .event-editor__field--wide {
    flex: 1 1 auto;
    width: 100%;
  }

  .event-editor__add-actions {
    width: 100%;
  }

  .event-editor__add-actions .btn {
    width:           100%;
    justify-content: center;
  }
}

/* ====== Note capture ====== */

/* ── Card formular notă ───────────────────────────────────── */
.note-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.75rem 2rem;
  box-shadow:    var(--shadow-sm);
  max-width:     640px;
}

.note-card__title {
  font-family:   var(--font-display);
  font-size:     1.35rem;
  font-weight:   400;
  color:         var(--maroon);
  margin-bottom: 1.25rem;
  line-height:   1.2;
}

/* ── Câmp select target ───────────────────────────────────── */
.note-field {
  display:        flex;
  flex-direction: column;
  gap:            .3rem;
  margin-bottom:  1rem;
}

.note-field label {
  font-size:   .8rem;
  font-weight: 600;
  color:       var(--text-secondary);
  letter-spacing: .01em;
}

.note-field select {
  font-family:         var(--font-body);
  font-size:           .925rem;
  color:               var(--text-primary);
  background:          var(--surface);
  border:              1px solid var(--border);
  border-radius:       var(--radius-sm);
  padding:             .55rem .875rem;
  padding-right:       2.25rem;
  width:               100%;
  appearance:          none;
  -webkit-appearance:  none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23767676' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right .75rem center;
  cursor:              pointer;
  transition:          border-color var(--transition), box-shadow var(--transition);
}

.note-field select:focus {
  outline:      none;
  border-color: var(--maroon);
  box-shadow:   0 0 0 3px rgba(119,36,50,.15);
}

/* ── Textarea mare mobile-friendly ───────────────────────── */
.note-textarea-wrap {
  position:      relative;
  margin-bottom: 1rem;
}

.note-textarea {
  font-family:   var(--font-body);
  font-size:     1rem;
  line-height:   1.65;
  color:         var(--text-primary);
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       .875rem 1rem;
  width:         100%;
  min-height:    160px;
  resize:        vertical;
  display:       block;
  transition:    border-color var(--transition), box-shadow var(--transition);
  /* mai mare pe ecrane mici — touch-friendly */
  -webkit-text-size-adjust: 100%;
}

.note-textarea:focus {
  outline:      none;
  border-color: var(--maroon);
  box-shadow:   0 0 0 3px rgba(119,36,50,.15);
}

.note-textarea::placeholder {
  color:      var(--text-muted);
  font-style: italic;
}

/* Contor caractere sub textarea */
.note-char-count {
  position:   absolute;
  bottom:     .45rem;
  right:      .65rem;
  font-size:  .72rem;
  font-family: var(--font-mono);
  color:      var(--text-muted);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.note-char-count.near-limit {
  color: #c0392b;
}

/* ── Buton dictare microfon ───────────────────────────────── */
.btn-mic {
  display:       inline-flex;
  align-items:   center;
  gap:           .45rem;
  font-family:   var(--font-body);
  font-size:     .875rem;
  font-weight:   600;
  line-height:   1;
  padding:       .6rem 1.125rem;
  border-radius: var(--radius-sm);
  border:        2px solid var(--maroon);
  background:    transparent;
  color:         var(--maroon);
  cursor:        pointer;
  text-decoration: none;
  transition:    background var(--transition), color var(--transition),
                 border-color var(--transition), box-shadow var(--transition);
  white-space:   nowrap;
  user-select:   none;
}

.btn-mic:hover {
  background:  var(--maroon-light);
  color:       var(--maroon-dark);
  text-decoration: none;
}

.btn-mic:focus-visible {
  outline:        3px solid var(--gold-dark);
  outline-offset: 2px;
}

/* Stare activă / recording — puls roșu */
.btn-mic.recording,
.btn-mic[aria-pressed="true"] {
  background:   #c0392b;
  border-color: #c0392b;
  color:        #fff;
  animation:    mic-pulse 1.2s ease-in-out infinite;
}

.btn-mic.recording:hover,
.btn-mic[aria-pressed="true"]:hover {
  background:   #a93226;
  border-color: #a93226;
  color:        #fff;
}

@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); }
  50%       { box-shadow: 0 0 0 6px rgba(192,57,43,.0); }
}

/* Dacă browser-ul nu suportă Web Speech API */
.btn-mic:disabled,
.btn-mic[aria-disabled="true"] {
  opacity:        .45;
  cursor:         not-allowed;
  pointer-events: none;
}

/* ── Toolbar acțiuni notă ─────────────────────────────────── */
.note-actions {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex-wrap:   wrap;
  margin-top:  .25rem;
}

.note-actions__spacer {
  flex: 1;
}

.note-actions__hint {
  font-size:  .78rem;
  color:      var(--text-muted);
  font-style: italic;
}

/* ── Flash mesaj (PRG) ────────────────────────────────────── */
.note-flash {
  border-radius: var(--radius-sm);
  padding:       .875rem 1.125rem;
  font-size:     .9rem;
  font-weight:   500;
  margin-bottom: 1.25rem;
  display:       flex;
  align-items:   flex-start;
  gap:           .6rem;
  border:        1px solid transparent;
  line-height:   1.4;
}

.note-flash.success {
  background:   #e8f5e9;
  border-color: #a5d6a7;
  color:        #1b5e20;
}

.note-flash.error {
  background:   #fff0f0;
  border-color: #f5c6c6;
  color:        #8b0000;
}

.note-flash.info {
  background:   var(--blue-light);
  border-color: #90b8d4;
  color:        var(--blue);
}

/* ── Responsive Note capture ──────────────────────────────── */
@media (max-width: 640px) {
  .note-card {
    padding: 1.25rem 1.125rem;
  }

  .note-textarea {
    font-size:  1rem;          /* rămâne 1rem — iOS nu zoom-ează la >=16px */
    min-height: 200px;         /* mai mult spațiu pe mobil */
  }

  .note-actions {
    flex-direction: column;
    align-items:    stretch;
  }

  .note-actions__spacer {
    display: none;
  }

  .note-actions .btn,
  .note-actions .btn-mic {
    width:           100%;
    justify-content: center;
  }

  .note-actions__hint {
    text-align: center;
  }
}

/* ── Header: clase shared (index.php + dashboard.php) ───────── */
/* index.php și dashboard.php folosesc .header-inner / .nav-link / .header-brand etc.
   minute.php folosește .portal-header — ambele au nevoie de regulile de mai jos. */

.header-inner {
  width:       100%;
  max-width:   calc(var(--content-max) + 4rem);
  margin:      0 auto;
  padding:     0 2rem;
  display:     flex;
  align-items: center;
  gap:         1.25rem;
}

.header-brand {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex:        1;
  min-width:   0;
  text-decoration: none;
}

.brand-mark,
.brand-emblem {
  font-family:   var(--font-display);
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--gold);
  letter-spacing: .05em;
  flex-shrink:   0;
}

.brand-name {
  font-family:   var(--font-display);
  font-size:     1rem;
  color:         #fff;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.brand-divider {
  color:       rgba(255,255,255,.3);
  font-size:   .9rem;
}

.brand-portal {
  font-size:   .75rem;
  color:       rgba(255,255,255,.55);
  white-space: nowrap;
}

/* portal-header = alias pentru site-header (minute.php) */
.portal-header {
  position:    sticky;
  top:         0;
  z-index:     100;
  height:      var(--header-h);
  background:  var(--maroon);
  color:       #fff;
  display:     flex;
  align-items: center;
  box-shadow:  0 2px 6px rgba(0,0,0,.25);
}

/* Navigare header */
.header-nav {
  display:     flex;
  align-items: center;
  gap:         .25rem;
  flex-shrink: 0;
}

.nav-link {
  font-size:     .875rem;
  font-weight:   500;
  color:         rgba(255,255,255,.82);
  padding:       .3rem .65rem;
  border-radius: var(--radius-sm);
  transition:    background var(--transition), color var(--transition);
  text-decoration: none;
  white-space:   nowrap;
}

.nav-link:hover {
  background:  rgba(255,255,255,.12);
  color:       #fff;
  text-decoration: none;
}

.nav-link:focus-visible {
  outline:       2px solid var(--gold);
  outline-offset: 1px;
}

.nav-link--active {
  background:  rgba(255,255,255,.18);
  color:       #fff;
  font-weight: 600;
}

.nav-link-subtle {
  font-size:   .8rem;
  color:       rgba(255,255,255,.6);
}

.nav-link-subtle:hover {
  color:       rgba(255,255,255,.9);
}

/* User zone header */
.header-user {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex-shrink: 0;
}

.header-avatar,
.user-avatar {
  width:         30px;
  height:        30px;
  border-radius: 50%;
  border:        2px solid rgba(255,255,255,.35);
  object-fit:    cover;
  flex-shrink:   0;
}

.user-pill {
  display:     flex;
  align-items: center;
  gap:         .5rem;
}

.user-name {
  font-size:    .875rem;
  font-weight:  500;
  color:        rgba(255,255,255,.9);
  max-width:    140px;
  overflow:     hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
}

.btn-logout {
  font-size:    .78rem;
  color:        rgba(255,255,255,.65);
  border:       1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-sm);
  padding:      .2rem .6rem;
  transition:   background var(--transition), color var(--transition);
  white-space:  nowrap;
  text-decoration: none;
}

.btn-logout:hover {
  background:  rgba(255,255,255,.15);
  color:       #fff;
  text-decoration: none;
}

/* Page container (index.php / dashboard.php) */
.page-container {
  width:      100%;
  max-width:  calc(var(--content-max) + 4rem);
  margin:     0 auto;
  padding:    0 2rem;
}

/* Footer inner */
.footer-inner {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  justify-content: center;
  flex-wrap:   wrap;
}

.footer-sep {
  opacity: .4;
}

/* ── Dashboard — widget grid ─────────────────────────────────── */

.db-greeting {
  margin-bottom: 2rem;
}

.db-greeting__title {
  font-family:  var(--font-display);
  font-size:    1.75rem;
  font-weight:  400;
  color:        var(--maroon);
  margin-bottom: .25rem;
}

.db-greeting__sub {
  font-size:  .9rem;
  color:      var(--text-muted);
}

.db-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:                   1.25rem;
  margin-top:            .5rem;
}

.db-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.5rem 1.75rem;
  box-shadow:    var(--shadow-sm);
  display:       flex;
  flex-direction: column;
  gap:           .4rem;
}

.db-card__icon {
  font-size:     1.6rem;
  line-height:   1;
  margin-bottom: .25rem;
}

.db-card__label {
  font-size:   .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:       var(--text-muted);
  margin:      0;
}

.db-card__value {
  font-family:  var(--font-display);
  font-size:    1.2rem;
  color:        var(--maroon);
  margin:       .1rem 0 0;
  line-height:  1.3;
}

.db-card__time {
  font-family:  var(--font-body);
  font-size:    .85rem;
  color:        var(--text-secondary);
}

.db-card__sub {
  font-size:  .85rem;
  color:      var(--text-secondary);
  margin:     0;
}

.db-card__badge {
  display:       inline-block;
  font-size:     .72rem;
  font-weight:   600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background:    var(--gold-light);
  color:         #7a6200;
  border:        1px solid var(--gold);
  border-radius: 999px;
  padding:       .15rem .55rem;
  margin-top:    .2rem;
  align-self:    flex-start;
}

.db-card__empty {
  font-size:  .9rem;
  color:      var(--text-muted);
  font-style: italic;
  margin:     .25rem 0 0;
}

.db-card__hint {
  font-size:  .8rem;
  color:      var(--text-muted);
  margin:     0;
}

.db-card__hint code {
  font-family: var(--font-mono);
  font-size:   .8em;
  background:  #f0ebec;
  padding:     .1em .3em;
  border-radius: 3px;
}

.db-card__link {
  font-size:   .85rem;
  font-weight: 500;
  color:       var(--maroon);
  text-decoration: none;
  margin-top:  auto;
  padding-top: .75rem;
  transition:  color var(--transition);
}

.db-card__link:hover {
  color:           var(--maroon-dark);
  text-decoration: underline;
}

/* Acțiuni rapide */
.db-actions {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        .375rem;
  margin-top: .25rem;
}

.db-action {
  display:       block;
  font-size:     .9rem;
  color:         var(--blue);
  padding:       .45rem .65rem;
  border-radius: var(--radius-sm);
  border:        1px solid var(--border-light);
  background:    #f8f8f8;
  text-decoration: none;
  transition:    background var(--transition), border-color var(--transition);
}

.db-action:hover {
  background:    var(--blue-light);
  border-color:  var(--blue);
  color:         var(--blue);
  text-decoration: none;
}

.db-action--admin {
  color:      var(--maroon);
  background: var(--maroon-light);
  border-color: var(--border);
}

.db-action--admin:hover {
  background:   #f0e8ea;
  border-color: var(--maroon);
}

/* page-heading (pentru index.php) */
.page-heading {
  margin-bottom: 1.75rem;
}

/* minutes-count */
.minutes-count {
  font-size:  .85rem;
  color:      var(--text-muted);
  margin-top: 1.25rem;
  text-align: center;
}

@media (max-width: 640px) {
  .header-inner {
    padding:  0 1rem;
    gap:      .75rem;
  }

  .brand-divider,
  .brand-portal,
  .user-name {
    display: none;
  }

  .nav-link {
    padding: .3rem .45rem;
    font-size: .8rem;
  }

  .db-grid {
    grid-template-columns: 1fr;
  }

  .db-greeting__title {
    font-size: 1.4rem;
  }

  .page-container {
    padding: 0 1rem;
  }
}