/*
Theme Name: Calicrim
Theme URI: https://calicrim.com
Author: Code Cobalt
Author URI: https://codecobalt.com
Description: Custom WordPress theme for Calicrim.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: calicrim
*/

/* ===== Base ===== */
:root {
    --max-w:1200px;

    /* Spacing */
    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-6:1.5rem;
    --space-8:2rem;

    --radius:.5rem;

    /* Core palette */
    --bg:#ffffff;
    --surface:#ffffff;
    --text:#111111;
    --muted:#666666;

    /* Borders & outlines */
    --border:#e5e7eb;
    --sidebar-border:#cccccc;

    /* Accents */
    --accent:#2563eb;
    --accent-contrast:#ffffff;

    /* States */
    --error-bg:#fef2f2;
    --error-text:#991b1b;
    --error-border:#fecaca;

    /* Component surfaces */
    --flash-bg:#f8fafc;
    --hover-bg:#f3f4f6;
    --sidebar-bg:#ffffff;

    /* Cards */
    --card-bg: var(--surface);
    --card-border: var(--border);
    --card-hover-ring: color-mix(in oklab, var(--accent) 15%, transparent);

    /* Semantic accents */
    --success:#16a34a;
    --success-contrast:#ffffff;
    --success-bg: color-mix(in oklab, var(--success) 10%, var(--bg));
    --success-border: color-mix(in oklab, var(--success) 35%, var(--border));

    --danger:#dc2626;
    --danger-contrast:#ffffff;
    --danger-bg: color-mix(in oklab, var(--danger) 10%, var(--bg));
    --danger-border: color-mix(in oklab, var(--danger) 35%, var(--border));

    --warning:#a16207;
    --warning-contrast:#111111;
    --warning-bg: color-mix(in oklab, var(--warning) 12%, var(--bg));
    --warning-border: color-mix(in oklab, var(--warning) 35%, var(--border));

    --info:#2563eb;
    --info-contrast:#ffffff;
    --info-bg: color-mix(in oklab, var(--info) 85%, var(--bg));
    --info-border: color-mix(in oklab, var(--info) 35%, var(--border));
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; height:100% }

body {
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    min-height: 100vh;
    margin: 0;
}

img,svg,video{ max-width:100%; height:auto }

/* ===== Sidebar (app) ===== */
.sidebar{
    display:flex;
    flex-direction:column;
    padding:var(--space-4);
    border-right:1px solid var(--sidebar-border);
    background:var(--sidebar-bg);
}
.sidebar__logo{ margin:0 0 var(--space-6); text-align:center }
.sidebar__logo-img{ display:block; height:48px; width:auto; margin:0 auto }
.sidebar__user{ margin:0 0 var(--space-6) }
.sidebar__user-name{ font-weight:600 }
.sidebar__user-company{ color:var(--muted); font-size:.875rem }

.sidebar__nav{
    list-style:none; padding:0; margin:0;
    display:grid; gap:var(--space-2);
}
.sidebar__nav a{
    display:block; padding:.4rem .6rem;
    border-radius:var(--radius);
    text-decoration:none; color:inherit;
}
.sidebar__nav a:hover{ background:var(--hover-bg) }

/* ===== Main ===== */
.l-main{
    min-width:0;
    padding:var(--space-8);
    background:var(--surface);
}
.page-title{
    margin:0 0 var(--space-6);
    font-size:1.5rem;
    letter-spacing:.2px;
    max-width:100%;
}

/* ===== Flash / Alerts ===== */
.flash{
    padding:var(--space-3) var(--space-4);
    margin:0 0 var(--space-6);
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:var(--flash-bg);
}
.flash--error{
    background:var(--error-bg);
    color:var(--error-text);
    border-color:var(--error-border);
}

/* ===== Forms ===== */
.form{ display:grid; gap:var(--space-4); max-width:560px }
.form--wide {
    max-width: 800px;
}
.field{ display:grid; gap:var(--space-2) }
.label{ font-weight:600 }
.input{
    width:100%;
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:.6rem .7rem;
    font:inherit;
    background:var(--surface);
    color:var(--text);
}
.input:focus{
    outline:2px solid color-mix(in oklab, var(--accent) 40%, var(--bg));
    outline-offset:1px;
}
.actions{ margin-top:var(--space-2) }

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5ch;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    padding: .55rem .9rem;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    transition: filter .15s, transform .15s;
    position: relative; /* NEW: ensure spinner aligns well */
    justify-content: center;
    line-height: 1.2;
    min-height: 42px;
    font-size: 1rem;
}
.btn:hover:not(:disabled) { filter: brightness(.97); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn--sm { padding:.35rem .65rem; font-size:.85rem; }
.btn--outline {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}
.btn--outline:hover {
    background: color-mix(in oklab, var(--accent) 8%, var(--bg));
}
.btn--danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--danger-contrast);
}
.btn--danger:hover { filter: brightness(.96); }

/* ===== Button Spinner (NEW) ===== */
.btn-spinner {
    width: 1em;
    height: 1em;
    border: 2px solid transparent;
    border-top-color: currentColor; /* matches text color */
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: none; /* hidden by default */
}
.btn.loading .btn-spinner {
    display: inline-block;
}
.btn.loading .btn-text {
    opacity: 0.75;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== Divider ===== */
.divider{
    margin:var(--space-8) 0;
    border:none; border-top:1px solid var(--border);
}

/* ===== Tables ===== */
.table-wrapper{ overflow-x:auto }
.table{
    width:100%; border-collapse:collapse;
    margin-bottom:var(--space-6); font-size:.95rem;
}
.table th,.table td{
    padding:var(--space-3) var(--space-4);
    border:1px solid var(--border); text-align:left;
}
.table th{ background:var(--flash-bg); font-weight:600 }
.table tbody tr:nth-child(even){ background:var(--flash-bg) }
.table tbody tr:hover{ background:var(--hover-bg) }

/* ===== Pagination ===== */
.pagination{
    display:flex; align-items:center; gap:var(--space-3);
    margin-top:var(--space-6); font-size:.95rem;
}
.pagination__link{
    color:var(--accent); text-decoration:none;
    padding:.3rem .6rem; border-radius:var(--radius);
    border:1px solid transparent;
}
.pagination__link:hover{ background:var(--hover-bg); border-color:var(--border) }
.pagination__status{ font-weight:500; color:var(--muted) }

/* ===== Per-page dropdown ===== */
.per-page{
    margin-bottom:var(--space-6);
    display:flex; align-items:center; gap:var(--space-2);
    font-size:.95rem;
}
.per-page__label{ font-weight:500 }
.per-page__select{
    border:1px solid var(--border); border-radius:var(--radius);
    padding:.4rem .5rem; background:var(--surface); font:inherit;
}

/* ===== Search form ===== */
.search-form{
    margin-bottom:var(--space-6);
    display:flex;
    align-items: flex-start;
    gap:var(--space-3);
    flex-wrap:wrap;
    max-width: fit-content;
}
.search-form__label{ font-weight:500 }
.search-form__input{ }
.search-form__btn{ margin-top:auto }

/* ===== Settings Layout (nested inside main) ===== */
.settings-layout{ display:flex; min-height:100% }
.settings-sidebar{
    width:220px;
    border-right:1px solid var(--border);
    padding:var(--space-4);
    background:var(--surface);
}
.settings-sidebar__list{
    list-style:none; padding:0; margin:0;
    display:grid; gap:.25rem;
}
.settings-sidebar__link{
    display:block; padding:.5rem .75rem;
    border-radius:var(--radius);
    text-decoration:none; color:inherit;
}
.settings-sidebar__link:hover{ background:var(--hover-bg) }
.settings-sidebar__link--active{
    font-weight:600; background:var(--flash-bg);
}
.settings-layout__content{
    flex:1; padding:var(--space-8); background:var(--surface);
}

/* ===== Plan Cards ===== */
.plan-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:var(--space-6);
}
.plan-card{
    background:var(--card-bg);
    border:2px solid var(--card-border);
    border-radius:12px;
    padding:var(--space-6);
    transition:box-shadow .18s ease,border-color .18s ease,transform .06s ease;
}
.plan-card:hover{ box-shadow:0 0 0 3px var(--card-hover-ring) }
.plan-card:active{ transform:translateY(1px) }
.plan-card--active{
    border-color:var(--success-border);
    background:var(--success-bg);
}
.plan-card__header{ margin:0 0 var(--space-3) }
.plan-card__title{
    margin:0; font-size:1.25rem; font-weight:600;
}
.plan-card__price{ font-size:1.1rem; font-weight:600; margin-bottom:var(--space-2) }
.plan-card__desc{ margin:0 0 var(--space-4); color:var(--muted) }
.plan-card__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2) }

/* New status fields (instead of badges) */
.plan-card__status {
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--flash-bg);
    font-size: .9rem;
}
.plan-card__status div {
    margin-bottom: .25rem;
}
.plan-card__status span {
    font-weight: 600;
}

/* Notices / Boxes */
.notice{
    padding:.75rem 1rem;
    border:1px solid var(--info-border);
    background:var(--info-bg);
    border-radius:8px;
    margin:.5rem 0 var(--space-6);
}
.scheduled-box{ border-color:var(--warning-border); background:var(--warning-bg) }

.cancel-box{
    margin-top:var(--space-8);
    padding:var(--space-6);
    border:2px solid var(--danger-border);
    border-radius:12px;
    background:var(--surface);
}
.cancel-box h3{ margin-top:0 }

/* Usage */
.usage-box{
    margin-top:var(--space-6);
    padding:var(--space-4);
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--flash-bg);
}
.muted{ color:var(--muted) }

/* Trial */
.trial-box {
    border: 1px solid var(--info-border);
    background: var(--info-bg);
    border-radius: 8px;
    padding: var(--space-4);
    margin: var(--space-6) 0;
}
.trial-box strong {
    color: var(--info-contrast);
}

/* ===== Responsive ===== */
@media (max-width:960px){
    body{ grid-template-columns:1fr } /* stack sidebar above main */
    .sidebar{
        border-right:none;
        border-bottom:1px solid var(--sidebar-border);
        align-items:center; text-align:center;
    }
    .l-main{ padding:var(--space-4) }
    .settings-layout{ flex-direction:column }
    .settings-sidebar{
        width:auto; border-right:none; border-bottom:1px solid var(--border);
    }
}

/* Inline forms used inside table cells */
.inline-form { display:inline }

/* Modal */
.modal{
    position:fixed; inset:0; z-index:9999;
    display:grid; place-items:center;
    background:color-mix(in oklab, #000 60%, transparent); /* overlay using mix */
}
.modal[hidden]{ display:none }
.modal__dialog{
    background:var(--surface);
    color:var(--text);
    width:min(92vw, 560px);
    border-radius:12px;
    border:1px solid var(--border);
    padding:var(--space-6);
    position:relative;
    box-shadow:0 10px 30px color-mix(in oklab, #000 20%, transparent);
}
.modal__title{ margin:0 0 var(--space-4); font-size:1.1rem }
.modal__close{
    position:absolute; top:.4rem; right:.6rem;
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:999px;
    width:28px; height:28px; line-height:26px;
    text-align:center; cursor:pointer;
}
.modal__close:hover{ background:var(--hover-bg) }

/* ===== Contact Card ===== */
.contact-card {
    margin-top: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--flash-bg);
    max-width: 480px;
}
.contact-card__title {
    margin: 0 0 var(--space-3);
    font-size: 1.1rem;
    font-weight: 600;
}
.contact-card__link {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}
.contact-card__link:hover {
    text-decoration: underline;
}

/* ===== Marketing Layout Utilities ===== */
.container{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.section{
    padding: var(--space-8) 0;
}

/* ===== Hero ===== */
.hero{
    padding: calc(var(--space-8) * 1.5) 0 var(--space-8);
    background: var(--surface);
}
.hero__title{
    margin: 0 0 var(--space-4);
    font-size: clamp(1.6rem, 2.4vw + 1rem, 2.2rem);
    letter-spacing: .2px;
}
.hero__lead{
    max-width: 80ch;
    color: var(--muted);
}
.hero__actions{
    display:flex; gap: var(--space-2); flex-wrap: wrap;
}

/* ===== Cards / Stats ===== */
.card{
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: var(--space-6);
}
.stat-grid{
    display:grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stat{ text-align:center }
.stat__value{
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: .25rem;
}
.stat__label{ color: var(--muted) }

/* ===== Two-column block ===== */
.grid-2{
    display:grid;
    gap: var(--space-8);
    grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 900px){
    .grid-2{ grid-template-columns: 1fr }
}

/* ===== Lists / Steps ===== */
.list{
    display:grid; gap: .6rem;
    padding-left: 1rem; /* simple browser bullets */
}
.steps{
    counter-reset: step;
    display:grid; gap: .75rem;
    padding-left: 0; list-style:none;
    margin: var(--space-4) 0;
}
.steps li{
    position: relative;
    padding-left: 2.2rem;
}
.steps li::before{
    counter-increment: step;
    content: counter(step);
    position: absolute; left: 0; top: .1rem;
    width: 1.6rem; height: 1.6rem;
    display:grid; place-items:center;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--flash-bg);
    font-size: .9rem; font-weight: 600;
    color: var(--text);
}

/* ===== CTA row ===== */
.cta{
    display:flex; gap: var(--space-2); flex-wrap:wrap;
    margin-top: var(--space-6);
}

/* ===== Contact Card (reuse from earlier) ===== */
.contact-card{
    margin-top: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--flash-bg);
    max-width: 520px;
}
.contact-card__title{
    margin: 0 0 var(--space-3);
    font-size: 1.1rem; font-weight: 600;
}
.contact-card__link{
    color: var(--accent); font-weight: 500; text-decoration: none;
}
.contact-card__link:hover{ text-decoration: underline }

/* uncategorized */

.dashboard-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 100vh;
}

/* responsive */
@media (max-width:960px){
    .dashboard-layout { grid-template-columns: 1fr }
    .sidebar {
        border-right: none;
        border-bottom: 1px solid var(--sidebar-border);
        align-items: center;
        text-align: center;
    }
    .l-main { padding: var(--space-4) }
    .settings-layout { flex-direction: column }
    .settings-sidebar {
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
}


/* public header */
.site-header {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between; /* room for future nav */
}
.site-header__logo img {
    height: 40px;
    width: auto;
}

/* Auth wrapper (for login/register/forgot) */
.auth {
    max-width: 420px;
    margin: var(--space-8) auto;
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.auth--wide {
    max-width: 720px;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ===== Subscription Flow ===== */

/* Small inline note (under plan grid) */
.note {
    color: var(--muted);
    font-size: .9rem;
}

/* Order Summary box */
.order-summary {
    margin-block: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--flash-bg);
    font-size: .95rem;
}
.order-summary h3 {
    margin-top: 0;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-4);
}
.order-summary div {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.order-summary strong {
    font-weight: 600;
}

/* Billing disclosure text */
.billing-disclosure {
    font-size: .95rem;
    line-height: 1.5;
}
.billing-disclosure p {
    margin: 0 0 var(--space-3);
}
.billing-disclosure .small {
    color: var(--muted);
    font-size: .85rem;
}

/* ===== Alerts / Notices ===== */
.alert {
    padding: var(--space-4);
    border: 1px solid;
    border-radius: var(--radius);
    margin: var(--space-4) 0;
    font-size: .95rem;
    line-height: 1.5;
}
.alert strong {
    font-weight: 600;
}

/* Variants */
.alert--info {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-contrast);
}
.alert--success {
    background: var(--success-bg);
    border-color: var(--success-border);
}
.alert--warning {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-contrast);
}
.alert--danger {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-contrast);
}

/* ===== Column Chooser ===== */
.column-chooser {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-4);
}

.column-chooser .button {
    font-size: .9rem;
    padding: .4rem .75rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s;
}
.column-chooser .button:hover {
    background: var(--hover-bg);
}

.chooser-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    margin-top: .4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    padding: var(--space-3) var(--space-4);
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    font-size: .9rem;
    display: none;
    background: var(--surface);
    max-width: 300px;
}
.chooser-dropdown label {
    display: block;
    margin-bottom: .35rem;
    cursor: pointer;
}
.chooser-dropdown strong {
    display: block;
    margin: var(--space-2) 0;
    font-size: .85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ===== Table improvements for many columns ===== */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    white-space: nowrap; /* prevent wrapping inside cells */
}
.table td, .table th {
    vertical-align: top;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Optional: sticky header */
.table th {
    position: sticky;
    top: 0;
    z-index: 5;
}

.table-wrapper::-webkit-scrollbar {
    height: 8px;
}
.table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}