/* ================================================================
   customer.css — ClearWorkSuite Customer Self-Service Portal
   Customer portal uses a teal/emerald accent vs webmaster's indigo.
   ================================================================ */

:root {
    /* Override panel accent for customer portal */
    --panel-primary:      #0d9488; /* teal-600 */
    --panel-primary-dark: #0f766e; /* teal-700 */
    --panel-sidebar-bg:   #134e4a; /* teal-900 */
}

/* ── Brand tag colour (customer vs webmaster) ── */
.panel-brand-tag {
    background: var(--panel-primary) !important;
}

/* ── Plan cards ── */
.plan-card {
    background: var(--panel-surface, #fff);
    border: 2px solid var(--panel-border);
    border-radius: .75rem;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color .2s, box-shadow .2s;
}
.plan-card:hover {
    border-color: var(--panel-primary);
    box-shadow: 0 4px 20px rgba(13,148,136,.12);
}
.plan-card.plan-highlight {
    border-color: var(--panel-primary);
    box-shadow: 0 4px 24px rgba(13,148,136,.18);
    position: relative;
}
.plan-badge {
    position: absolute;
    top: -1px; right: 1.25rem;
    background: var(--panel-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .2em .7em;
    border-radius: 0 0 .4rem .4rem;
}
.plan-price {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: var(--panel-text);
}
.plan-price sup {
    font-size: 1rem;
    font-weight: 600;
    vertical-align: top;
    margin-top: .4rem;
}
.plan-price small {
    font-size: .875rem;
    font-weight: 400;
    color: var(--panel-muted);
}
.plan-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.plan-feature-list li {
    padding: .35rem 0;
    font-size: .875rem;
    color: #374151;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.plan-feature-list li::before {
    content: '';
    display: inline-block;
    width: 16px; height: 16px;
    background-color: var(--panel-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    flex-shrink: 0;
}

/* ── Subscription status badges ── */
.sub-badge-active    { background: #d1fae5; color: #065f46; }
.sub-badge-trialing  { background: #dbeafe; color: #1e40af; }
.sub-badge-cancelled { background: #fee2e2; color: #991b1b; }
.sub-badge-expired   { background: #f3f4f6; color: #6b7280; }

/* ── Invoice status badges ── */
.inv-badge-open   { background: #fef3c7; color: #92400e; }
.inv-badge-paid   { background: #d1fae5; color: #065f46; }
.inv-badge-void   { background: #f3f4f6; color: #6b7280; }
.inv-badge-draft  { background: #ede9fe; color: #5b21b6; }

/* ── Tenant status indicators ── */
.tenant-status-active    { color: #059669; }
.tenant-status-trial     { color: #2563eb; }
.tenant-status-suspended { color: #dc2626; }

/* ── Payment method cards ── */
.payment-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    border-radius: .75rem;
    padding: 1.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.payment-card::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
}
.payment-card-brand  { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.payment-card-number { font-family: 'Courier New', monospace; font-size: 1.1rem; letter-spacing: .15em; margin: .75rem 0 .25rem; }
.payment-card-footer { display: flex; justify-content: space-between; align-items: flex-end; }
.payment-card-name   { font-size: .8rem; opacity: .8; }
.payment-card-expiry { font-size: .8rem; opacity: .8; text-align: right; }
.payment-card.is-default::before {
    content: 'Default';
    position: absolute;
    top: .75rem; right: .75rem;
    background: var(--panel-primary);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: .2em .6em;
    border-radius: 3px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Billing cycle toggle ── */
.cycle-toggle { display: flex; background: #f1f5f9; border-radius: .5rem; padding: 3px; gap: 3px; }
.cycle-toggle input[type="radio"] { display: none; }
.cycle-toggle label {
    flex: 1; text-align: center; padding: .375rem .75rem;
    border-radius: .35rem; cursor: pointer; font-size: .875rem; font-weight: 500;
    color: var(--panel-muted); transition: background .15s, color .15s;
}
.cycle-toggle input[type="radio"]:checked + label {
    background: #fff;
    color: var(--panel-text);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* ── Empty state ── */
.empty-state {
    text-align: center; padding: 3rem 1.5rem;
    color: var(--panel-muted);
}
.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: .4;
}

/* ── Quick-action tiles ── */
.quick-action {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    padding: 1.25rem;
    text-decoration: none;
    color: var(--panel-text);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: border-color .15s, box-shadow .15s;
}
.quick-action:hover {
    border-color: var(--panel-primary);
    box-shadow: 0 2px 12px rgba(13,148,136,.1);
    color: var(--panel-text);
}
.quick-action-icon {
    width: 44px; height: 44px;
    border-radius: .5rem;
    background: #ccfbf1;
    color: var(--panel-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ── Provision form ── */
.provision-section {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.provision-section-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--panel-muted);
    margin-bottom: 1rem;
}

/* ── Tenant portal link button ── */
.btn-tenant-portal {
    background: #0d9488;
    color: white;
    border: none;
}
.btn-tenant-portal:hover {
    background: #0f766e;
    color: white;
}

/* ── Subscription status: past_due (was missing) ── */
.sub-badge-past_due { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* ── Plan card: current-plan ring ── */
.plan-card.plan-current {
    border-color: var(--panel-primary);
    box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}
.plan-card.plan-current:hover { border-color: var(--panel-primary); }
/* Current Plan badge uses primary colour already set via inline style */

/* ── Plan card: unavailable / payment not configured ── */
.plan-card.plan-unavailable { opacity: .5; }
.plan-card.plan-unavailable:hover {
    border-color: var(--panel-border);
    box-shadow: none;
    cursor: default;
}

/* ── Annual savings note below price ── */
.plan-price-note {
    font-size: .78rem;
    color: #15803d;
    font-weight: 500;
    min-height: 1.25em; /* reserve space so layout doesn't jump on cycle switch */
}

/* ── Button loading spinner (double-submit prevention) ── */
.btn-loading, .btn-loading:hover { pointer-events: none; opacity: .75; }
.btn-spinner {
    display: inline-block;
    width: .85em; height: .85em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cwsSpin .6s linear infinite;
    margin-left: .4em;
    vertical-align: -.1em;
}
@keyframes cwsSpin { to { transform: rotate(360deg); } }