/* =====================================================================
 * preline-subscriptions-cards.css
 * ---------------------------------------------------------------------
 * Modern Preline-inspired card design for subscription lists in
 * .app-modal-body containers:
 *   - #izoneSubscriptionsList  (izone-subs-item / interest zones)
 *   - #guideSubscriptionsList  (guide-subs-item / travel guides)
 *   - #geotaskSubsList         (geotask-subs-item / geo-tasks)
 *
 * Design goals:
 *   - Clean business aesthetic (think Linear / Stripe / Notion cards)
 *   - Type-specific accent strip + icon container
 *   - Compact info grid: ID, owner, distance/progress, status, dates
 *   - Hover lift, subtle gradient header, dark-theme parity
 *   - Action buttons styled with Preline-like soft tones
 *
 * Naming convention: `.subc-*` (subc = subscription card).
 * Class structure inside each item:
 *   .subc-item             ← root card (theme: subc-item--geotask|izone|guide)
 *   .subc-accent           ← left accent strip
 *   .subc-body             ← main content wrapper
 *   .subc-head             ← header row (icon + title + status)
 *   .subc-icon             ← icon container
 *   .subc-title            ← main title
 *   .subc-subtitle         ← subtitle / owner line
 *   .subc-status           ← status badge
 *   .subc-grid             ← 2-column metadata grid
 *   .subc-cell             ← metadata cell (label + value)
 *   .subc-cell-label       ← caption label
 *   .subc-cell-value       ← primary value
 *   .subc-progress         ← progress bar wrapper (guide only)
 *   .subc-progress-bar     ← progress bar fill
 *   .subc-divider          ← horizontal divider
 *   .subc-actions          ← action button row
 *   .subc-btn              ← base action button
 *   .subc-btn--primary     ← primary CTA (Open)
 *   .subc-btn--secondary   ← secondary CTA (Copy)
 *   .subc-btn--danger      ← danger CTA (Unsubscribe)
 * ===================================================================== */

:root {
    --subc-radius: 14px;
    --subc-radius-sm: 10px;
    --subc-pad: 14px 16px;
    --subc-gap: 10px;

    --subc-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 1px 1px rgba(15, 23, 42, 0.03);
    --subc-shadow-hover:
        0 6px 16px -4px rgba(15, 23, 42, 0.08),
        0 4px 8px -4px rgba(15, 23, 42, 0.05);

    /* Type-specific accents (light theme) */
    --subc-geotask: #3b82f6;     /* blue-500 */
    --subc-geotask-soft: rgba(59, 130, 246, 0.08);
    --subc-geotask-strong: #1d4ed8;

    --subc-izone: #f59e0b;       /* amber-500 */
    --subc-izone-soft: rgba(245, 158, 11, 0.08);
    --subc-izone-strong: #b45309;

    --subc-guide: #10b981;       /* emerald-500 */
    --subc-guide-soft: rgba(16, 185, 129, 0.08);
    --subc-guide-strong: #047857;

    --subc-geokvest: #14b8a6;      /* teal-500 */
    --subc-geokvest-soft: rgba(20, 184, 166, 0.08);
    --subc-geokvest-strong: #0f766e;

    --subc-geoguide: #6366f1;      /* indigo-500 */
    --subc-geoguide-soft: rgba(99, 102, 241, 0.08);
    --subc-geoguide-strong: #4338ca;

    --subc-text: #0f172a;
    --subc-text-muted: #64748b;
    --subc-text-faint: #94a3b8;
    --subc-bg: #ffffff;
    --subc-bg-soft: #f8fafc;
    --subc-border: #e2e8f0;
    --subc-border-strong: #cbd5e1;
}

.dark-theme {
    --subc-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 1px 1px rgba(0, 0, 0, 0.18);
    --subc-shadow-hover:
        0 6px 20px -4px rgba(0, 0, 0, 0.40),
        0 4px 10px -4px rgba(0, 0, 0, 0.25);

    --subc-geotask: #60a5fa;
    --subc-geotask-soft: rgba(96, 165, 250, 0.12);
    --subc-geotask-strong: #93c5fd;

    --subc-izone: #fbbf24;
    --subc-izone-soft: rgba(251, 191, 36, 0.12);
    --subc-izone-strong: #fcd34d;

    --subc-guide: #34d399;
    --subc-guide-soft: rgba(52, 211, 153, 0.12);
    --subc-guide-strong: #6ee7b7;

    --subc-geokvest: #2dd4bf;
    --subc-geokvest-soft: rgba(45, 212, 191, 0.12);
    --subc-geokvest-strong: #5eead4;

    --subc-geoguide: #818cf8;
    --subc-geoguide-soft: rgba(129, 140, 248, 0.12);
    --subc-geoguide-strong: #a5b4fc;

    --subc-text: #e2e8f0;
    --subc-text-muted: #94a3b8;
    --subc-text-faint: #64748b;
    --subc-bg: #1e293b;
    --subc-bg-soft: #0f172a;
    --subc-border: #334155;
    --subc-border-strong: #475569;
}

/* ---------------------------------------------------------------------
 * Root card
 * ------------------------------------------------------------------- */
.subc-item {
    position: relative;
    background: var(--subc-bg);
    border: 1px solid var(--subc-border);
    border-radius: var(--subc-radius);
    box-shadow: var(--subc-shadow);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.subc-item:hover {
    box-shadow: var(--subc-shadow-hover);
    transform: translateY(-1px);
    border-color: var(--subc-border-strong);
}

/* Accent strip (left vertical bar) */
.subc-accent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--accent, var(--subc-geotask));
    border-top-left-radius: var(--subc-radius);
    border-bottom-left-radius: var(--subc-radius);
}

.subc-item--geotask {
    --accent: var(--subc-geotask);
    --accent-soft: var(--subc-geotask-soft);
    --accent-strong: var(--subc-geotask-strong);
}
.subc-item--izone {
    --accent: var(--subc-izone);
    --accent-soft: var(--subc-izone-soft);
    --accent-strong: var(--subc-izone-strong);
}
.subc-item--guide {
    --accent: var(--subc-guide);
    --accent-soft: var(--subc-guide-soft);
    --accent-strong: var(--subc-guide-strong);
}
.subc-item--geokvest {
    --accent: var(--subc-geokvest);
    --accent-soft: var(--subc-geokvest-soft);
    --accent-strong: var(--subc-geokvest-strong);
}
.subc-item--geoguide {
    --accent: var(--subc-geoguide);
    --accent-soft: var(--subc-geoguide-soft);
    --accent-strong: var(--subc-geoguide-strong);
}

/* Revoked/disabled state */
.subc-item--revoked {
    opacity: 0.65;
}
.subc-item--revoked:hover {
    transform: none;
}

/* ---------------------------------------------------------------------
 * Body
 * ------------------------------------------------------------------- */
.subc-body {
    padding: var(--subc-pad);
    display: flex;
    flex-direction: column;
    gap: var(--subc-gap);
}

.subc-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.subc-head-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.subc-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.subc-head-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subc-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--subc-text);
    line-height: 1.3;
    word-break: break-word;
    letter-spacing: -0.01em;
}

.subc-title em {
    font-style: italic;
    color: var(--subc-text-faint);
    font-weight: 500;
}

.subc-subtitle {
    font-size: 12px;
    color: var(--subc-text-muted);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    word-break: break-word;
}

/* ---------------------------------------------------------------------
 * Status badge
 * ------------------------------------------------------------------- */
.subc-status {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.subc-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.subc-status--active {
    color: #047857;
    background: rgba(16, 185, 129, 0.10);
}
.dark-theme .subc-status--active {
    color: #34d399;
    background: rgba(52, 211, 153, 0.14);
}

.subc-status--paused {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.10);
}
.dark-theme .subc-status--paused {
    color: #f87171;
    background: rgba(248, 113, 113, 0.14);
}

.subc-status--revoked {
    color: var(--subc-text-muted);
    background: rgba(100, 116, 139, 0.12);
}

/* ---------------------------------------------------------------------
 * Metadata grid (2 columns on wide screens, 1 on narrow)
 * ------------------------------------------------------------------- */
.subc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background: var(--subc-bg-soft);
    border: 1px solid var(--subc-border);
    border-radius: var(--subc-radius-sm);
    padding: 12px 14px;
}

.subc-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.subc-cell-label {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--subc-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.subc-cell-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--subc-text);
    line-height: 1.3;
    word-break: break-word;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.subc-cell-value i {
    color: var(--subc-text-muted);
    font-size: 11px;
    flex: 0 0 auto;
}

.subc-cell-value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

/* ---------------------------------------------------------------------
 * Inline tags (inside grid cells)
 * ------------------------------------------------------------------- */
.subc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.subc-tag--distance {
    color: var(--subc-geotask-strong);
    background: var(--subc-geotask-soft);
}
.subc-tag--inside {
    color: var(--subc-izone-strong);
    background: var(--subc-izone-soft);
}
.subc-tag--progress {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.10);
}
.dark-theme .subc-tag--progress {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.14);
}

/* ---------------------------------------------------------------------
 * Progress bar (guide)
 * ------------------------------------------------------------------- */
.subc-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.subc-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--subc-text-muted);
    font-weight: 500;
}

.subc-progress-meta strong {
    color: var(--subc-text);
    font-weight: 600;
}

.subc-progress-bar {
    position: relative;
    height: 6px;
    background: var(--subc-border);
    border-radius: 999px;
    overflow: hidden;
}

.subc-progress-bar-fill {
    position: absolute;
    inset: 0;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, white) 100%);
    border-radius: 999px;
    transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-theme .subc-progress-bar-fill {
    background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, black) 100%);
}

/* ---------------------------------------------------------------------
 * Divider
 * ------------------------------------------------------------------- */
.subc-divider {
    height: 1px;
    background: var(--subc-border);
    margin: 0;
    border: 0;
}

/* ---------------------------------------------------------------------
 * Actions row
 * ------------------------------------------------------------------- */
.subc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.subc-btn {
    flex: 1 1 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease,
                border-color 160ms ease, transform 80ms ease;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.subc-btn i {
    font-size: 12px;
    flex: 0 0 auto;
}

.subc-btn:active {
    transform: scale(0.97);
}

.subc-btn--primary {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.subc-btn--primary:hover {
    background: var(--accent-strong);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 40%, transparent);
}

.subc-btn--secondary {
    background: var(--subc-bg);
    color: var(--subc-text);
    border-color: var(--subc-border);
}
.subc-btn--secondary:hover {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.subc-btn--danger {
    background: var(--subc-bg);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.20);
}
.subc-btn--danger:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.40);
}
.dark-theme .subc-btn--danger {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.25);
}
.dark-theme .subc-btn--danger:hover {
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.45);
}

/* Disabled state for buttons without available action (e.g. no publicUrl) */
.subc-btn--disabled,
.subc-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto; /* still allow click so we can show explanation */
    filter: grayscale(0.3);
}
.subc-btn--disabled:hover,
.subc-btn[disabled]:hover {
    /* revert hover effects so it doesn't look "active" */
    background: var(--subc-bg);
    color: var(--subc-text);
    border-color: var(--subc-border);
    box-shadow: none;
}
.subc-btn--primary.subc-btn--disabled:hover,
.subc-btn--primary[disabled]:hover {
    background: var(--accent);
    color: #ffffff;
}

/* If only one button shown, let it span full width */
.subc-actions:has(.subc-btn:only-child) .subc-btn {
    flex-basis: 100%;
}

/* ---------------------------------------------------------------------
 * Empty / error states (keep using old class names for compatibility,
 * but tone them up to match new visual language)
 * ------------------------------------------------------------------- */
.geotask-subs-empty,
.izone-subs-empty,
.guide-subs-empty,
.geokvest-subs-empty,
.geoguide-subs-empty {
    padding: 36px 20px 28px;
}

.geotask-subs-empty-icon,
.izone-subs-empty-icon,
.guide-subs-empty-icon,
.geokvest-subs-empty-icon,
.geoguide-subs-empty-icon {
    width: 56px;
    height: 56px;
    font-size: 22px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}

.geotask-subs-empty-title,
.izone-subs-empty-title,
.guide-subs-empty-title,
.geokvest-subs-empty-title,
.geoguide-subs-empty-title {
    font-size: 16px;
    letter-spacing: -0.01em;
}

.geotask-subs-empty-hint,
.izone-subs-empty-hint,
.guide-subs-empty-hint,
.geokvest-subs-empty-hint,
.geoguide-subs-empty-hint {
    font-size: 13px;
}

.geotask-subs-load-error,
.izone-subs-load-error,
.guide-subs-load-error,
.geokvest-subs-load-error,
.geoguide-subs-load-error {
    padding: 18px;
    border-radius: var(--subc-radius);
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.18);
    color: #b91c1c;
    font-size: 13px;
    margin: 12px 0;
}