/* GPOS₹ Design System — Redesigned */

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

* { -webkit-tap-highlight-color: transparent; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body { -webkit-overflow-scrolling: touch; }

/* ── Touch targets ── */
a, button, [role="button"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

p a, .inline-link {
    min-height: unset;
    display: inline;
}

/* ── CSS Custom Properties ── */
:root {
    --canvas:    #FAFAFA;
    --surface:   #FFFFFF;
    --surface-2: #F4F4F5;
    --border:    #E4E4E7;
    --border-2:  #D4D4D8;
    --fg:        #18181B;
    --fg-2:      #52525B;
    --fg-3:      #A1A1AA;
    --accent:    #059669;
    --accent-h:  #047857;
    --accent-fg: #FFFFFF;
    --cta:       #D97706;
    --cta-h:     #B45309;
    --cta-fg:    #FFFFFF;
    --nav-bg:    rgba(250,250,250,0.85);
    --nav-border:rgba(228,228,231,0.7);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.07);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.1);
    --radius:    0.875rem;
    --radius-sm: 0.5rem;
    --radius-lg: 1.25rem;
    --accent-l:  #10B981;
    --focus-ring: rgba(5,150,105,0.15);
    --status-open-bg:    rgba(234,88,12,0.1);  --status-open-fg:    #c2410c;
    --status-pending-bg: rgba(234,179,8,0.1);  --status-pending-fg: #a16207;
    --status-paid-bg:    rgba(5,150,105,0.1);  --status-paid-fg:    #047857;
    --status-locked-bg:  rgba(99,102,241,0.1); --status-locked-fg:  #4338ca;
    --success-bg:  rgba(22,163,74,0.1);   --success-fg:  #15803d;
    --warning-bg:  rgba(217,119,6,0.1);   --warning-fg:  #b45309;
    --critical-bg: rgba(220,38,38,0.1);   --critical-fg: #b91c1c;
    --info-bg:     rgba(37,99,235,0.1);   --info-fg:     #1d4ed8;
}

.dark {
    --canvas:    #000000;
    --surface:   #0C0C0C;
    --surface-2: #141414;
    --border:    #222222;
    --border-2:  #2C2C2C;
    --fg:        #FAFAFA;
    --fg-2:      #A1A1AA;
    --fg-3:      #52525B;
    --accent:    #10B981;
    --accent-h:  #34D399;
    --accent-fg: #000000;
    --cta:       #F59E0B;
    --cta-h:     #FBBF24;
    --cta-fg:    #000000;
    --nav-bg:    rgba(0,0,0,0.88);
    --nav-border:rgba(34,34,34,0.8);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 1px 3px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.5);
    --accent-l:  #34D399;
    --focus-ring: rgba(16,185,129,0.2);
    --status-open-bg:    rgba(251,146,60,0.15);  --status-open-fg:    #fb923c;
    --status-pending-bg: rgba(251,191,36,0.15);  --status-pending-fg: #fbbf24;
    --status-paid-bg:    rgba(52,211,153,0.15);  --status-paid-fg:    #34d399;
    --status-locked-bg:  rgba(129,140,248,0.15); --status-locked-fg:  #818cf8;
    --success-bg:  rgba(74,222,128,0.15);  --success-fg:  #4ade80;
    --warning-bg:  rgba(251,191,36,0.15);  --warning-fg:  #fbbf24;
    --critical-bg: rgba(248,113,113,0.15); --critical-fg: #f87171;
    --info-bg:     rgba(96,165,250,0.15);  --info-fg:     #60a5fa;
}

/* ── Semantic utility classes using CSS vars ── */
.gp-canvas { background-color: var(--canvas); }
.gp-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.gp-card-2 {
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.gp-nav {
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.gp-text { color: var(--fg); }
.gp-text-2 { color: var(--fg-2); }
.gp-text-3 { color: var(--fg-3); }
.gp-border { border-color: var(--border); }
.gp-btn-accent {
    background-color: var(--accent);
    color: var(--accent-fg);
}
.gp-btn-accent:hover { background-color: var(--accent-h); }
.gp-btn-cta {
    background-color: var(--cta);
    color: var(--cta-fg);
}
.gp-btn-cta:hover { background-color: var(--cta-h); }
.gp-accent { color: var(--accent); }
.gp-accent-bg { background-color: var(--accent); color: var(--accent-fg); }
.gp-surface-2 { background-color: var(--surface-2); }

/* Input styling */
.gp-input {
    background-color: var(--surface-2);
    border: 1.5px solid var(--border);
    color: var(--fg);
    border-radius: var(--radius-sm);
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gp-input::placeholder { color: var(--fg-3); }
.gp-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── Animations ── */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

@keyframes pulse-ring {
    0%   { transform: scale(1);    opacity: 0.6; }
    100% { transform: scale(1.35); opacity: 0; }
}

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

@keyframes bounce-soft {
    0%, 100% { transform: translateY(0);    opacity: 0.5; }
    50%       { transform: translateY(4px);  opacity: 1; }
}

.animate-fade-in {
    animation: fade-in-up 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
.animate-fade-in-delay { animation-delay: 0.08s; }
.animate-fade-in-delay-2 { animation-delay: 0.16s; }

.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
    border-radius: var(--radius-sm);
}

/* ── Card hover ── */
.card-hover {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    cursor: default;
}
.card-hover:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

/* ── Badge ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ── Focus ring ── */
.focus-ring { outline: none; }
.focus-ring:focus-visible {
    box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);
}

/* ── Theme toggle ── */
.theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--fg-2);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { background: var(--border); color: var(--fg); }

/* ── Nav link ── */
.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--fg-2);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.nav-link:hover { background: var(--surface-2); color: var(--fg); }
.nav-link.active { background: var(--surface-2); color: var(--fg); font-weight: 600; }

/* ── File drop zone ── */
.drop-zone-active {
    border-color: var(--accent) !important;
    background-color: rgba(5,150,105,0.04);
}
.dark .drop-zone-active { background-color: rgba(16,185,129,0.06); }

.file-selected {
    border-color: var(--accent);
    border-style: solid;
    background-color: rgba(5,150,105,0.04);
}
.dark .file-selected { background-color: rgba(16,185,129,0.06); }

/* ── Status badges ── */
.status-open    { background: var(--status-open-bg);    color: var(--status-open-fg); }
.status-pending { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.status-paid    { background: var(--status-paid-bg);    color: var(--status-paid-fg); }
.status-locked  { background: var(--status-locked-bg);  color: var(--status-locked-fg); }
.status-success  { background: var(--success-bg);  color: var(--success-fg); }
.status-warning  { background: var(--warning-bg);  color: var(--warning-fg); }
.status-critical { background: var(--critical-bg); color: var(--critical-fg); }
.status-info     { background: var(--info-bg);     color: var(--info-fg); }

/* ── Avatar palette — deterministic ── */
.av-0 { background: #059669; }
.av-1 { background: #D97706; }
.av-2 { background: #2563EB; }
.av-3 { background: #7C3AED; }
.av-4 { background: #0891B2; }
.av-5 { background: #BE185D; }
.av-6 { background: #065F46; }
.av-7 { background: #92400E; }

/* ── Sheet ── */
body.sheet-open { overflow: hidden; }

.owner-sheet {
    max-height: 84dvh;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    will-change: transform;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    box-shadow: 0 -4px 40px rgba(0,0,0,0.18);
}

#owner-trigger {
    border: 1.5px solid var(--border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#owner-trigger:hover { border-color: var(--accent); }
#owner-trigger:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); outline: none; }
#owner-trigger.has-selection { border-color: var(--accent); }

#owner-listbox li:hover:not([aria-selected="true"]) { background: var(--surface-2); }

/* ── Admin tabs ── */
.admin-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    color: rgba(255,255,255,0.5);
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    text-decoration: none;
}
.admin-tab:hover { color: rgba(255,255,255,0.85); }
.admin-tab.active { border-bottom-color: var(--accent); color: #fff; }

/* ── Print ── */
@media print {
    nav, footer, button, a[href="/"], .no-print { display: none !important; }
    body { background: white !important; color: #18181B !important; }
    #receipt-block {
        border: 2px solid #059669;
        padding: 24px;
        margin: 0;
        border-radius: 8px;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .card-hover:hover { transform: none; }
    .animate-fade-in { animation: none; opacity: 1; transform: none; }
    [style*="bounce-soft"] { animation: none !important; opacity: 0.5; }
}