@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* ═══════════════════════════════════════════════════
     THE TACTILE GALLERY — Complete Color Token Set
     Source: stitch/stitch_pozitif_meet_premium_redesign
     RULE: Only these tokens may be used across the site.
  ═══════════════════════════════════════════════════ */

  /* Primary (Bronze / Gold) */
  --primary:                  #775a19;
  --primary-container:        #ffdea5;
  --on-primary:               #fff6ed;
  --on-primary-container:     #694d0c;
  --primary-dim:              #6a4e0d;   /* primary hover */
  --primary-fixed-dim:        #f8cf83;   /* decorative accent */
  --on-primary-fixed-variant: #745716;
  --inverse-primary:          #fbd185;   /* primary on dark surface */

  /* Secondary (Warm Greige) */
  --secondary:                #696360;
  --secondary-container:      #e9e1dc;
  --on-secondary:             #ffffff;
  --on-secondary-container:   #56514d;
  --secondary-dim:            #5d5754;
  --secondary-fixed-dim:      #dbd3ce;
  --on-secondary-fixed-variant: #605a57;

  /* Tertiary (Warm Amber / Caramel) */
  --tertiary:                 #796039;
  --tertiary-container:       #fcdbaa;
  --on-tertiary:              #ffffff;
  --on-tertiary-container:    #634c27;
  --tertiary-dim:             #6c542e;

  /* Surfaces (Warm Paper Hierarchy) */
  --background:               #fffcf7;  /* page canvas */
  --surface:                  #fffcf7;
  --surface-bright:           #fffcf7;
  --surface-container-lowest: #ffffff;  /* cards / pop elements */
  --surface-container-low:    #fcf9f3;  /* input backgrounds */
  --surface-container:        #f6f4ec;  /* content sections */
  --surface-container-high:   #f0eee5;  /* nav / drawers */
  --surface-container-highest: #eae8de; /* secondary button bg */
  --surface-dim:              #e4e3d7;  /* list hover bg */
  --surface-variant:          #eae8de;  /* scrollbar / dividers */

  /* Text & Icons */
  --on-background:            #383831;
  --on-surface:               #383831;
  --on-surface-variant:       #65655c;

  /* Borders */
  --outline:                  #818178;  /* accessible border */
  --outline-variant:          #babab0;  /* ghost border (use at 15% opacity) */

  /* Error */
  --error:                    #a54731;
  --error-container:          #fe8b70;
  --on-error:                 #ffffff;
  --on-error-container:       #742410;

  /* Dark / Inverse */
  --inverse-surface:          #0e0e0c;  /* darkest — warm charcoal, NOT pure black */
  --inverse-on-surface:       #9e9d98;

  /* ═══════════════════════════════════════════════════
     LEGACY ALIASES — map old style.css vars to Tactile Gallery.
     Do NOT use these in new code; use the tokens above.
  ═══════════════════════════════════════════════════ */
  --bg-main:      var(--background);
  --card-bg:      var(--surface-container-lowest);
  --text-main:    var(--on-surface);
  --text-muted:   var(--on-surface-variant);
  --border-color: var(--outline-variant);
  --danger:       var(--error);
  --warning:      var(--tertiary);
  --info:         var(--secondary);
  --success:      var(--primary-container);
  --primary-hover: var(--primary-dim);

  /* Border Radii */
  --radius-sm:    0.5rem;
  --radius-md:    1.5rem;
  --radius-lg:    2rem;
  --radius-xl:    3rem;
  --radius-full:  9999px;

  /* Fonts */
  --font-headline: 'Plus Jakarta Sans', sans-serif;
  --font-body:     'Geist', sans-serif;
  --font-label:    'Geist', sans-serif;
}

/* Base Body Application */
body {
  font-family: var(--font-body);
  background-color: var(--background);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
}

/* Typography Utility Classes */
.text-display-lg {
  font-family: var(--font-headline);
  font-size: 3.5rem;
  letter-spacing: -0.02em;
  font-weight: 700; 
}

.text-headline-lg {
  font-family: var(--font-headline);
  font-size: 2rem;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.text-body-lg {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

.text-label-md {
  font-family: var(--font-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

.text-label-sm {
  font-family: var(--font-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 500;
}

/* "Glass & Gradient" Rule */
.custom-glass {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.primary-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
}

/* Ambient Shadows and Ghost Border */
.shadow-ambient {
  box-shadow: 0 40px 60px -15px rgba(56, 56, 49, 0.08);
}

.border-ghost {
  border: 1px solid rgba(186, 186, 176, 0.15); /* outline-variant at 15% */
}

/* Material Symbols Adjustments */
.material-symbols-outlined { 
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; 
}

/* Input Fields overrides */
.lux-input {
  background-color: var(--surface-container-low);
  border-radius: var(--radius-md);
  border: none;
  outline: none;
  transition: all 0.3s ease;
  color: var(--on-surface);
  padding: 1rem 1.5rem;
}

.lux-input:focus {
  background-color: var(--surface-container-lowest);
  box-shadow: 0 0 0 2px rgba(119, 90, 25, 0.2);
}

/* Cards */
.lux-card {
  background-color: var(--surface-container-lowest);
  border-radius: var(--radius-lg);
  border: none; 
}

/* Card internals */
.lux-card-inner {
  border-radius: var(--radius-sm);
}

/* Lists */
.lux-list-item {
  margin-bottom: 1rem;
  transition: background-color 0.3s ease;
  padding: 1rem;
  border-radius: var(--radius-sm);
}

.lux-list-item:hover {
  background-color: var(--surface-dim);
}

/* Buttons */
.btn-primary {
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  color: var(--on-primary);
  border: none;
  padding: 0.75rem 2rem;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 15px -3px rgba(119, 90, 25, 0.1);
}

.btn-secondary {
  background-color: var(--surface-container-highest);
  color: var(--on-surface);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.75rem 2rem;
  font-weight: 600;
}

.btn-tertiary {
  background-color: transparent;
  color: var(--primary);
  border: none;
  padding: 0;
  font-weight: 600;
}
.btn-tertiary:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Scrollbar customization */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--surface-variant); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--outline); }

/* ═══ Glass Navigation ═══ */
.glass-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 252, 247, 0.85);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-bottom: 1px solid rgba(186, 186, 176, 0.15);
}

/* ═══ Action Cards (Dashboard) ═══ */
.action-icon-wrapper {
  background-color: var(--surface-container-high);
  color: var(--on-surface-variant);
}
.action-card.schedule .action-icon-wrapper { background-color: var(--tertiary-container); color: var(--tertiary); }
.action-card.record   .action-icon-wrapper { background-color: var(--primary-container);  color: var(--primary); }
.action-card.import   .action-icon-wrapper { background-color: var(--secondary-container); color: var(--secondary); }
.action-card:hover    .action-icon-wrapper { background-color: var(--primary); color: var(--on-primary); }
.action-card.schedule:hover { background-color: var(--surface-dim); border-color: transparent; }
.action-card.record:hover   { background-color: var(--surface-dim); border-color: transparent; }
.action-card.import:hover   { background-color: var(--surface-dim); border-color: transparent; }

/* ═══ Status Badges ═══ */
.status-badge-completed {
  background-color: var(--primary-fixed-dim);
  color: var(--on-primary-container);
  border-color: var(--primary-container);
}
.status-badge-processing,
.status-badge-queued {
  background-color: var(--surface-container-high);
  color: var(--on-surface-variant);
  border-color: var(--outline-variant);
  font-style: italic;
}
.status-badge-failed {
  background-color: var(--error-container);
  color: var(--on-error-container);
  border-color: var(--error);
}
.status-badge-recording {
  background-color: var(--tertiary-container);
  color: var(--on-tertiary-container);
  border-color: var(--tertiary);
}

/* ═══ Card Hover (Meeting Cards) ═══ */
.meeting-card-hover:hover {
  background-color: var(--surface-dim);
  border-color: transparent;
  transform: translateY(-1px);
}

/* ═══ Nav Item Active State ═══ */
.nav-item-active {
  background-color: var(--surface-container-high);
  color: var(--primary);
}
.nav-item-active .nav-icon-box {
  background-color: var(--primary);
  color: var(--on-primary);
}

/* ═══ Alert / Info Boxes ═══ */
.alert-warning {
  background-color: var(--tertiary-container);
  border-color: var(--tertiary);
  color: var(--on-tertiary-container);
}
.alert-error {
  background-color: var(--error-container);
  border-color: var(--error);
  color: var(--on-error-container);
}
.alert-info {
  background-color: var(--surface-container-high);
  border-color: var(--outline-variant);
  color: var(--on-surface-variant);
}

/* ═══ Tactile Gallery Color Utilities ═══ */
.bg-background               { background-color: var(--background); }
.bg-surface                  { background-color: var(--surface); }
.bg-surface-lowest           { background-color: var(--surface-container-lowest); }
.bg-surface-low              { background-color: var(--surface-container-low); }
.bg-surface-container        { background-color: var(--surface-container); }
.bg-surface-high             { background-color: var(--surface-container-high); }
.bg-surface-highest          { background-color: var(--surface-container-highest); }
.bg-surface-dim              { background-color: var(--surface-dim); }
.bg-primary-container        { background-color: var(--primary-container); }
.bg-secondary-container      { background-color: var(--secondary-container); }
.bg-tertiary-container       { background-color: var(--tertiary-container); }
.bg-error-container          { background-color: var(--error-container); }
.bg-primary-fixed-dim        { background-color: var(--primary-fixed-dim); }
.bg-secondary-fixed-dim      { background-color: var(--secondary-fixed-dim); }
.bg-surface-container-highest { background-color: var(--surface-container-highest); }

.text-primary                  { color: var(--primary); }
.text-primary-dim              { color: var(--primary-dim); }
.text-on-primary               { color: var(--on-primary); }
.text-on-primary-container     { color: var(--on-primary-container); }
.text-secondary                { color: var(--secondary); }
.text-secondary-dim            { color: var(--secondary-dim); }
.text-tertiary                 { color: var(--tertiary); }
.text-on-tertiary-container    { color: var(--on-tertiary-container); }
.text-on-surface               { color: var(--on-surface); }
.text-on-surface-variant       { color: var(--on-surface-variant); }
.text-on-primary-fixed-variant { color: var(--on-primary-fixed-variant); }
.text-on-secondary-fixed-variant { color: var(--on-secondary-fixed-variant); }
.text-error                    { color: var(--error); }
.text-on-error-container       { color: var(--on-error-container); }
.text-inverse-surface          { color: var(--inverse-surface); }
.text-inverse-on-surface       { color: var(--inverse-on-surface); }

/* ═══ The Tactile Gallery Sidebar (lux-sidebar) ═══ */
.lux-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 5rem;
    background: rgba(255, 252, 247, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(186, 186, 176, 0.15);
    z-index: 50;
    overflow-x: visible;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lux-sidebar.expanded {
    width: 17rem;
    box-shadow: 10px 0 40px -10px rgba(56,56,49,0.06);
}

/* Menü Toggle Butonu */
.sidebar-toggle-btn {
    position: absolute;
    right: -1rem;
    top: 1.5rem;
    width: 2rem;
    height: 2rem;
    background: var(--surface-container-lowest);
    border: 1px solid rgba(186, 186, 176, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    z-index: 60;
    transition: transform 0.3s ease;
    color: var(--on-surface-variant);
}
.sidebar-toggle-btn:hover { background: var(--surface-container-low); color: var(--primary); }
.lux-sidebar.expanded .sidebar-toggle-btn { transform: rotate(180deg); }

/* Menü Grup Başlıkları */
.lux-nav-group-title {
    font-family: var(--font-label);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--outline);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1.5rem 1.5rem 0.25rem 1.5rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.lux-sidebar.expanded .lux-nav-group-title {
    opacity: 1;
}

.lux-nav-item {
    display: flex;
    align-items: center;
    padding: 0.65rem 1.5rem;
    border-left: 3px solid transparent;
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin: 0.15rem 0;
}
.lux-nav-item:hover {
    background-color: rgba(119, 90, 25, 0.04);
    color: var(--on-surface);
}
.lux-nav-item--active {
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
    background-color: rgba(119, 90, 25, 0.08);
}
.lux-nav-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}
.lux-nav-text {
    margin-left: 1.1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.lux-sidebar.expanded .lux-nav-text {
    opacity: 1;
}
.lux-sidebar-bottom {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid rgba(186, 186, 176, 0.15);
}
/* Ana İçerik Kaydırması */
.lux-main-content {
    margin-left: 5rem; 
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lux-main-content.expanded {
    margin-left: 17rem;
}
html {
    overflow-x: hidden;
    width: 100%;
}

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
}

/* Global Reset for UI elements */
button, input, textarea, select {
    font-family: inherit;
    color: inherit;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
}
input, textarea, select {
    cursor: text;
}

/* Restored Core Layout Utilities (Migration Polyfill) */
.flex-col { flex-direction: column !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }

.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }

.gap-1 { gap: 0.25rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }

/* Typography */
h1, h2, h3, h4 {
    font-family: var(--font-headline);
    letter-spacing: -0.025em;
}

/* Card System — Tactile Gallery */
.modern-card {
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: 0 40px 60px -15px rgba(56, 56, 49, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-card:hover {
    box-shadow: 0 40px 60px -10px rgba(56, 56, 49, 0.10);
}

/* Glassmorphism */
.glass {
    background: rgba(255, 252, 247, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* Buttons */
.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-premium-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary);
    box-shadow: 0 4px 14px 0 rgba(119, 90, 25, 0.25);
}
.btn-premium-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(119, 90, 25, 0.3);
}

.btn-premium-ghost {
    background: var(--surface-container-high);
    color: var(--on-surface);
    border: none;
    font-weight: 700;
}
.btn-premium-ghost:hover {
    background: var(--surface-dim);
}

/* Inputs */
.input-premium {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--surface-container-low);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    transition: all 0.2s;
    color: var(--on-surface);
}
.input-premium:focus {
    background: var(--surface-container-lowest);
    box-shadow: 0 0 0 2px rgba(119, 90, 25, 0.2);
    outline: none;
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.4s ease-out forwards;
}

/* Layout */
.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 768px) {
    .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Navbar — Glass Header */
.navbar {
    background: rgba(255, 252, 247, 0.85);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(186, 186, 176, 0.15);
}
.navbar-inner {
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-links {
    display: none;
    align-items: center;
    gap: 1rem;
}
@media (min-width: 768px) { .nav-links { display: flex; } }

.nav-link {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--on-surface-variant);
    padding: 0.5rem;
    transition: color 0.2s;
    text-decoration: none;
}
.nav-link:hover { color: var(--primary); }

/* Utility Classes */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.grid { display: grid; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

.hidden { display: none; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }

.bg-white { background-color: var(--surface-container-lowest); }
.bg-gray-50 { background-color: var(--surface-container-low); }
.bg-black-60 { background-color: rgba(14, 14, 12, 0.6); }

.border-t { border-top: 1px solid rgba(186, 186, 176, 0.15); }
.border-b { border-bottom: 1px solid rgba(186, 186, 176, 0.15); }

.mt-12 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }

.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.max-w-6xl { max-width: 72rem; margin-left: auto; margin-right: auto; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
    .grid-cols-4 { grid-template-columns: 1fr; }
    .col-span-2 { grid-column: span 1; }
}
.col-span-2 { grid-column: span 2; }

/* Footer & Bottom Nav */
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav {
    height: 4rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--on-surface-variant);
    text-decoration: none;
    width: 100%;
}
.bottom-nav-item:hover, .bottom-nav-item.active { color: var(--primary); }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-center { text-align: center; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.uppercase { text-transform: uppercase; }

.rounded-lg { border-radius: var(--radius-sm); }
.rounded-xl { border-radius: var(--radius-md); }
.rounded-2xl { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 9999px; }

.shadow-sm  { box-shadow: 0 20px 40px -10px rgba(56, 56, 49, 0.04); }
.shadow-md  { box-shadow: 0 30px 50px -12px rgba(56, 56, 49, 0.06); }
.shadow-lg  { box-shadow: 0 40px 60px -15px rgba(56, 56, 49, 0.08); }

.transition-all    { transition: all 0.2s ease-in-out; }
.transition-colors { transition: color 0.2s, background-color 0.2s, border-color 0.2s; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }

/* Mobile Drawer */
.mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 14, 12, 0.5);
    z-index: 60;
    backdrop-filter: blur(4px);
}
.mobile-drawer {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 80%;
    max-width: 320px;
    background: var(--surface-container-lowest);
    box-shadow: -4px 0 40px rgba(56, 56, 49, 0.08);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* Action Cards */
.action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .action-grid { grid-template-columns: repeat(3, 1fr); }
}
.action-card {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    cursor: pointer;
    border: none;
    width: 100%;
    transition: all 0.2s ease;
    box-shadow: 0 20px 40px -10px rgba(56, 56, 49, 0.04);
}
.action-card:hover {
    background: var(--surface-dim);
    transform: translateY(-2px);
    box-shadow: 0 30px 50px -12px rgba(56, 56, 49, 0.08);
}

/* Legacy named icon wrappers — kept for old HTML */
.action-card.record .action-icon-wrapper { color: var(--error); background: var(--error-container); }
.action-card.import .action-icon-wrapper { color: var(--secondary); background: var(--secondary-container); }
.action-card.schedule .action-icon-wrapper { color: var(--tertiary); background: var(--tertiary-container); }

/* Typography Color Utilities (Tactile Gallery only) */
.text-white { color: var(--on-primary); }
.text-muted { color: var(--on-surface-variant); }

/* ── Removed Tailwind color classes replaced with Tactile Gallery ── */
.text-slate-300 { color: var(--outline-variant); }
.text-slate-400 { color: var(--outline); }
.text-slate-500 { color: var(--on-surface-variant); }
.text-slate-800 { color: var(--on-surface); }

/* Status Colors (Tactile Gallery mapped) */
.text-green-600  { color: var(--on-primary-container); }
.bg-green-100   { background-color: var(--primary-fixed-dim); }
.text-rose-500  { color: var(--error); }
.text-rose-600  { color: var(--error); }
.bg-rose-100    { background-color: var(--error-container); }
.text-indigo-600 { color: var(--primary); }
.text-indigo-500 { color: var(--primary-dim); }
.text-green-500 { color: var(--on-primary-container); }
.text-emerald-500 { color: var(--on-primary-container); }
.text-emerald-600 { color: var(--on-primary-container); }
.text-blue-600  { color: var(--secondary); }
.text-amber-600 { color: var(--on-tertiary-container); }
.bg-amber-100   { background-color: var(--tertiary-container); }
.bg-blue-100    { background-color: var(--secondary-container); }

/* Surface bg utilities */
.bg-indigo-50  { background-color: var(--surface-container-high); }
.bg-slate-50   { background-color: var(--surface-container-low); }
.bg-slate-100  { background-color: var(--surface-container-high); }
.bg-emerald-50 { background-color: var(--primary-fixed-dim); }

/* Hover utilities */
.hover\:text-indigo-600:hover { color: var(--primary); }
.hover\:text-rose-500:hover   { color: var(--error); }
.hover\:bg-emerald-50:hover   { background-color: var(--primary-fixed-dim); }
.hover\:bg-indigo-50:hover    { background-color: var(--surface-container-high); }
.hover\:bg-rose-50:hover      { background-color: var(--error-container); }
.hover\:bg-slate-50:hover     { background-color: var(--surface-container-low); }

/* Border utilities */
.border-emerald-100 { border-color: rgba(186, 186, 176, 0.15); }
.border-emerald-200 { border-color: rgba(186, 186, 176, 0.15); }
.border-indigo-100  { border-color: rgba(186, 186, 176, 0.15); }
.border-indigo-200  { border-color: rgba(186, 186, 176, 0.15); }
.border-rose-100    { border-color: rgba(186, 186, 176, 0.15); }
.border-rose-200    { border-color: rgba(186, 186, 176, 0.15); }
.border-slate-100   { border-color: rgba(186, 186, 176, 0.15); }
.hover\:border-indigo-200:hover { border-color: var(--outline-variant); }

/* Group hover utilities */
.group:hover .group-hover\:bg-indigo-50 { background-color: var(--surface-container-high); }
.group:hover .group-hover\:text-indigo-600 { color: var(--primary); }

/* Pulse animation */
.animate-pulse { animation: tg-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes tg-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* ── Modal ── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(14, 14, 12, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-box {
    background-color: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 28rem;
    padding: 2rem;
    box-shadow: 0 40px 60px -15px rgba(56, 56, 49, 0.10);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-title {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--on-surface);
    margin-bottom: 0.5rem;
}
.modal-desc {
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* ── Header Components ── */
.header-logo-link { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; cursor: pointer; }
.header-logo-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    padding: 0.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(119, 90, 25, 0.25);
}
.header-svg-white  { width: 1.5rem; height: 1.5rem; color: var(--on-primary); }
.header-logo-text  { font-family: var(--font-headline); font-weight: 800; font-size: 1.25rem; color: var(--on-surface); margin: 0; }
.hidden-desktop    { display: none !important; }
@media(max-width: 768px) { .hidden-desktop { display: flex !important; } }

/* Credit Display Pill */
.credit-display {
    display: flex;
    align-items: center;
    background: rgba(119, 90, 25, 0.08);
    border: 1px solid rgba(186, 186, 176, 0.25);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    margin-right: 0.5rem;
}
.credit-info { display: flex; align-items: center; gap: 0.5rem; }
.credit-val {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--primary);
}
.credit-plan {
    font-weight: 700;
    font-size: 0.65rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.header-dropdown-wrapper { position: relative; }
.header-user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem;
    background: var(--surface-container-low);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}
.header-user-btn:hover { background: var(--surface-container-high); }
.header-user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--primary-container);
    color: var(--on-primary-container);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}
.header-svg-small  { width: 1rem; height: 1rem; color: var(--on-surface-variant); }
.header-svg-medium { width: 1.5rem; height: 1.5rem; color: inherit; }
.header-svg-icon   { width: 1.25rem; height: 1.25rem; }

.header-dropdown-content {
    position: absolute;
    right: 0;
    margin-top: 0.5rem;
    width: 15rem;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-md);
    box-shadow: 0 40px 60px -15px rgba(56, 56, 49, 0.10);
    border: none;
    padding: 0.5rem 0;
    z-index: 50;
}
.dropdown-user-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(186, 186, 176, 0.15);
}
.dropdown-user-label { font-size: 0.625rem; font-weight: 700; color: var(--on-surface-variant); text-transform: uppercase; margin: 0; }
.dropdown-user-name  { font-size: 0.75rem; font-weight: 700; color: var(--on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0.25rem 0 0 0; }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--on-surface);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}
.dropdown-item:hover { background-color: var(--surface-dim); color: var(--primary); padding-left: 1.25rem; }
.dropdown-item svg   { color: var(--on-surface-variant); transition: color 0.2s; }
.dropdown-item:hover svg { color: var(--primary); }

.dropdown-alert     { color: var(--tertiary); }
.dropdown-alert svg { color: var(--tertiary); }
.dropdown-alert:hover { color: var(--on-tertiary-container); background-color: var(--tertiary-container); }
.dropdown-alert:hover svg { color: var(--on-tertiary-container); }

.dropdown-footer { border-top: 1px solid rgba(186, 186, 176, 0.15); margin-top: 0.25rem; padding-top: 0.25rem; }
.dropdown-btn-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--error);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}
.dropdown-btn-logout:hover { background-color: var(--error-container); padding-left: 1.25rem; }

/* ── NAVBAR REPAIRS ── */
.navbar-inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── MOBILE DRAWER ── */
.mobile-toggle-btn { padding: 0.5rem; color: var(--on-surface-variant); background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.2s; }
.mobile-toggle-btn:hover { color: var(--primary); }
.mobile-toggle-icon { width: 1.75rem; height: 1.75rem; }
.mobile-drawer-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100vh;
    background: rgba(14, 14, 12, 0.55);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 99999; display: flex; justify-content: flex-end;
}
@media(min-width: 769px) { .mobile-drawer-overlay { display: none !important; } }
.mobile-drawer {
    width: 85%; max-width: 320px;
    background: var(--surface-container-lowest);
    height: 100vh; overflow-y: auto; padding: 1.5rem;
    box-shadow: -4px 0 40px rgba(56, 56, 49, 0.08);
    display: flex; flex-direction: column;
    animation: slideInRight 0.3s forwards;
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-header  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.drawer-title   { font-family: var(--font-headline); font-weight: 900; font-size: 1.25rem; color: var(--on-surface); margin: 0; }
.drawer-close-btn { padding: 0.5rem; color: var(--on-surface-variant); background: transparent; border: none; cursor: pointer; display: flex; transition: color 0.2s; }
.drawer-close-btn:hover { color: var(--error); }
.drawer-nav-list { display: flex; flex-direction: column; gap: 0.75rem; }
.drawer-nav-item {
    padding: 1rem;
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
    display: flex; align-items: center; gap: 1rem;
    color: var(--on-surface); text-decoration: none;
    font-size: 0.95rem; font-weight: 600; transition: all 0.2s;
}
.drawer-nav-item svg { color: var(--on-surface-variant); transition: color 0.2s; }
.drawer-nav-item:hover { background: var(--surface-dim); color: var(--primary); transform: translateX(5px); }
.drawer-nav-item:hover svg { color: var(--primary); }
.drawer-footer { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid rgba(186, 186, 176, 0.15); }
.drawer-btn-logout {
    width: 100%; padding: 1rem;
    background: var(--error-container);
    color: var(--on-error-container);
    border-radius: var(--radius-lg); border: none;
    font-size: 0.95rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    cursor: pointer; transition: all 0.2s;
}
.drawer-btn-logout:hover { filter: brightness(0.95); transform: translateY(-2px); }

/* ── SITE FOOTER ── */
.site-footer {
    margin-top: 4rem; padding: 4rem 0 2rem 0;
    border-top: 1px solid rgba(186, 186, 176, 0.15);
    background: var(--surface-container-low);
}
.footer-container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media(min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 4rem; } }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; text-decoration: none; }
.footer-brand-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    padding: 0.6rem; border-radius: 0.75rem;
    box-shadow: 0 4px 10px rgba(119, 90, 25, 0.2);
}
.footer-brand-svg  { width: 1.25rem; height: 1.25rem; color: var(--on-primary); }
.footer-brand-text { font-family: var(--font-headline); font-size: 1.25rem; font-weight: 900; color: var(--on-surface); text-transform: uppercase; letter-spacing: -0.05em; margin: 0; }
.footer-desc  { font-size: 0.85rem; color: var(--on-surface-variant); font-weight: 500; max-width: 20rem; line-height: 1.6; margin: 0; }
.footer-title { font-size: 0.65rem; font-weight: 900; color: var(--on-surface); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.25rem; margin-top: 0; }
.footer-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-link  { font-size: 0.85rem; font-weight: 700; color: var(--on-surface-variant); text-decoration: none; transition: all 0.2s; display: block; }
.footer-link:hover { color: var(--primary); transform: translateX(5px); }

/* ── Filter Panel ── */
.filter-panel {
    background: var(--surface-container-low);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}
.filter-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media(min-width: 768px) { .filter-grid { grid-template-columns: repeat(3, 1fr); } }
.filter-label { display: block; font-size: 10px; font-weight: 800; color: var(--on-surface-variant); margin-bottom: 0.25rem; }
.filter-actions {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid rgba(186, 186, 176, 0.15);
}
.btn-clear { background: transparent; border: none; color: var(--on-surface-variant); font-size: 10px; font-weight: 700; cursor: pointer; letter-spacing: 0.05em; }
.btn-clear:hover { color: var(--error); }

/* ── Sizing helpers ── */
.w-4  { width: 1rem; }   .h-4  { height: 1rem; }
.w-5  { width: 1.25rem; } .h-5 { height: 1.25rem; }
.w-6  { width: 1.5rem; }  .h-6 { height: 1.5rem; }
.w-8  { width: 2rem; }    .h-8 { height: 2rem; }
.w-12 { width: 3rem; }    .h-12 { height: 3rem; }
.w-16 { width: 4rem; }    .h-16 { height: 4rem; }
.w-full { width: 100%; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.p-3  { padding: 0.75rem; }

.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none !important; }

.tracking-widest { letter-spacing: 0.1em; }
.tracking-wider  { letter-spacing: 0.05em; }
.tracking-tight  { letter-spacing: -0.025em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shrink-0 { flex-shrink: 0; }

.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }

.rounded-\[40px\] { border-radius: var(--radius-xl) !important; }
.rounded-\[32px\] { border-radius: var(--radius-lg) !important; }