/* ============================================
   Tamil Paalam — Accessibility Tools
   Shared across the authenticated layout (base.html)
   and every public page (landing / login / register).

   Everything here is namespaced under .tp-a11y-* / .tp-lang-*
   (and #tpA11y* ids) so it cannot collide with existing
   Bootstrap, page or dashboard styles.
   ============================================ */

:root {
  --tpa11y-ink:        #052240;
  --tpa11y-ink-soft:   #0B3D6B;
  --tpa11y-gold:       #F5B700;
  --tpa11y-gold-soft:  #FFD447;
  --tpa11y-bg:         #ffffff;
  --tpa11y-border:     #D9E1EC;
  --tpa11y-muted:      #5B6B80;
  --tpa11y-danger:     #EF4444;
}

/* ---------------------------------------------
   Header toolbar (trigger buttons)
   --------------------------------------------- */
.tp-a11y-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tp-a11y-trigger,
.tp-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(5,34,64,0.18) !important;
  background: #ffffff !important;
  color: var(--tpa11y-ink) !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  box-shadow: 0 1px 3px rgba(5,34,64,0.08);
}
.tp-a11y-trigger:hover,
.tp-lang-toggle:hover {
  background: #f26522 !important;
  border-color: #f26522 !important;
  color: var(--tpa11y-ink) !important;
}
.tp-a11y-trigger:focus-visible,
.tp-lang-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245,183,0,0.55) !important;
}
.tp-a11y-trigger svg { flex-shrink: 0; }
.tp-a11y-trigger-label { display: inline; }

@media (max-width: 480px) {
  .tp-a11y-trigger-label { display: none; }
  .tp-a11y-trigger { padding: 8px !important; }
}

/* ---------------------------------------------
   Overlay + slide-in panel
   --------------------------------------------- */
.tp-a11y-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,34,64,0.38);
  z-index: 2100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease;
}
.tp-a11y-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tp-a11y-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--tpa11y-bg);
  color: var(--tpa11y-ink);
  z-index: 2200;
  box-shadow: -8px 0 32px rgba(5,34,64,0.28);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .25s ease;
  font-family: 'Manrope', 'Catamaran', 'Segoe UI', system-ui, sans-serif;
}
.tp-a11y-panel.is-open {
  transform: translateX(0);
  visibility: visible;
}

.tp-a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--tpa11y-border);
  flex-shrink: 0;
  background: var(--tpa11y-ink);
}
.tp-a11y-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}
.tp-a11y-panel-title svg { flex-shrink: 0; }

.tp-a11y-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.tp-a11y-close:hover { background: rgba(239,68,68,0.9); border-color: rgba(239,68,68,0.9); }
.tp-a11y-close:focus-visible { outline: 3px solid var(--tpa11y-gold); outline-offset: 2px; }

.tp-a11y-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
}

.tp-a11y-section { margin: 0 0 24px; padding: 0; }
.tp-a11y-section:last-child { margin-bottom: 0; }

.tp-a11y-section-title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--tpa11y-ink-soft);
  margin: 0 0 10px;
}

.tp-a11y-btn-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.tp-a11y-btn-row:last-child { margin-bottom: 0; }
.tp-a11y-btn-row.tp-a11y-row-2 { grid-template-columns: repeat(2, 1fr); }

.tp-a11y-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 11px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--tpa11y-border);
  background: #fafcff;
  color: var(--tpa11y-ink);
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s, color .15s;
  min-height: 42px;
}
.tp-a11y-opt:hover {
  border-color: var(--tpa11y-ink-soft);
  background: #eef4fb;
}
.tp-a11y-opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11,61,107,0.35);
}
.tp-a11y-opt.is-active,
.tp-a11y-opt[aria-pressed="true"] {
  background: var(--tpa11y-ink-soft);
  border-color: var(--tpa11y-ink-soft);
  color: #ffffff;
}
.tp-a11y-opt-reset-all {
  border-color: rgba(239,68,68,0.4);
  color: var(--tpa11y-danger);
}
.tp-a11y-opt-reset-all:hover {
  background: rgba(239,68,68,0.08);
  border-color: var(--tpa11y-danger);
}

.tp-a11y-hint {
  font-size: 11.5px;
  color: var(--tpa11y-muted);
  line-height: 1.6;
  margin: 10px 0 0;
}

body.tp-a11y-panel-open { overflow: hidden; }

@media (max-width: 480px) {
  .tp-a11y-panel { width: 100%; max-width: 100vw; }
  .tp-a11y-btn-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------
   Contrast Adjustment — High Contrast mode
   --------------------------------------------- */
html.tp-a11y-contrast body {
  background: #000000 !important;
}
html.tp-a11y-contrast body *:not(.tp-a11y-panel):not(.tp-a11y-panel *):not(.tp-a11y-trigger):not(.tp-a11y-trigger *):not(.tp-lang-toggle):not(.tp-lang-toggle *):not(.tp-a11y-overlay) {
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.tp-a11y-contrast a:not(.tp-a11y-trigger):not(.tp-lang-toggle),
html.tp-a11y-contrast a:not(.tp-a11y-trigger):not(.tp-lang-toggle) * {
  color: #ffe066 !important;
  text-decoration: underline !important;
}
html.tp-a11y-contrast .btn,
html.tp-a11y-contrast button:not(.tp-a11y-trigger):not(.tp-lang-toggle):not(.tp-a11y-close):not(.tp-a11y-opt),
html.tp-a11y-contrast input,
html.tp-a11y-contrast select,
html.tp-a11y-contrast textarea,
html.tp-a11y-contrast .card,
html.tp-a11y-contrast .form-card,
html.tp-a11y-contrast .kpi-tile,
html.tp-a11y-contrast table,
html.tp-a11y-contrast th,
html.tp-a11y-contrast td,
html.tp-a11y-contrast .sidebar,
html.tp-a11y-contrast .topbar,
html.tp-a11y-contrast .modal-content,
html.tp-a11y-contrast .dropdown-menu,
html.tp-a11y-contrast .navbar-tp,
html.tp-a11y-contrast .toast {
  border: 1.5px solid #ffffff !important;
}
html.tp-a11y-contrast img:not(.tp-a11y-trigger img) {
  filter: grayscale(0.15) contrast(1.2);
}

/* ---------------------------------------------
   Spacing / Line height
   --------------------------------------------- */
html.tp-a11y-spacing body,
html.tp-a11y-spacing body * {
  letter-spacing: 0.045em !important;
  word-spacing: 0.14em !important;
}
html.tp-a11y-leading body,
html.tp-a11y-leading body * {
  line-height: 1.85 !important;
}

/* ---------------------------------------------
   Hide images (logos / brand marks are preserved)
   --------------------------------------------- */
html.tp-a11y-hide-images img:not(.sidebar-brand-icon):not(.brand-mark) {
  visibility: hidden !important;
}

/* ---------------------------------------------
   Big cursor
   --------------------------------------------- */
html.tp-a11y-big-cursor,
html.tp-a11y-big-cursor * {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNCAyIEw0IDE5IEw4LjIgMTUuNCBMMTEgMjEuNSBMMTQgMjAuMSBMMTEuMiAxNCBMMTggMTQgWiIgZmlsbD0iIzBCMUYzMyIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjEuNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=') 4 4, auto !important;
}

/* ---------------------------------------------
   Screen Reader — Audio Controls panel
   (reuses .tp-a11y-panel / .tp-a11y-section / .tp-a11y-opt —
   only the pieces unique to this panel are styled here)
   --------------------------------------------- */
.tp-sr-desc {
  font-size: 12.5px;
  color: var(--tpa11y-muted);
  margin: 0 0 10px;
}

.tp-sr-select {
  width: 100%;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tpa11y-ink);
  background: #fafcff;
  border: 1.5px solid var(--tpa11y-border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23052240' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}
.tp-sr-select:hover { border-color: var(--tpa11y-ink-soft); }
.tp-sr-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11,61,107,0.35);
  border-color: var(--tpa11y-ink-soft);
}
.tp-sr-select:disabled { background-color: #f3f5f8; color: var(--tpa11y-muted); cursor: not-allowed; }

.tp-a11y-opt:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tp-a11y-opt:disabled:hover {
  border-color: var(--tpa11y-border);
  background: #fafcff;
}

.tp-sr-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tp-sr-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--tpa11y-muted);
}
.tp-sr-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tpa11y-muted);
}
.tp-sr-status[data-state="reading"] { color: #16803D; }
.tp-sr-status[data-state="reading"]::before { background: #16A34A; }
.tp-sr-status[data-state="paused"] { color: #B45309; }
.tp-sr-status[data-state="paused"]::before { background: var(--tpa11y-gold); }