/* ============================================================
   Air — Canvas Stylesheet
   ============================================================ */


/* ── Design tokens ────────────────────────────────────────── */

:root {
    --air-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                        'Helvetica Neue', Arial, sans-serif;
    --air-font-mono:    'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

    --air-bg:           #f5f6fa;
    --air-surface:      #ffffff;
    --air-text:         #111827;
    --air-muted:        #6b7280;
    --air-border:       #e5e7eb;
    --air-border-focus: #2271b1;

    --air-primary:      #2271b1;
    --air-primary-dark: #135e96;
    --air-danger:       #c0392b;
    --air-success:      #16a34a;
    --air-warning:      #d97706;

    --air-radius:       6px;
    --air-radius-lg:    10px;
    --air-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --air-shadow-md:    0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);

    --air-pad:          24px;
    --air-max:          1440px;
}


/* ── Reset ────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; scroll-behavior: smooth; }

body {
    font-family:              var(--air-font);
    font-size:                14px;
    line-height:              1.6;
    color:                    var(--air-text);
    background:               var(--air-bg);
    min-height:               100%;
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--air-primary); }
a:hover { color: var(--air-primary-dark); }


/* ── Admin bar offset ─────────────────────────────────────── */

.admin-bar .air-main { padding-top: 32px; }
@media (max-width: 782px) {
    .admin-bar .air-main { padding-top: 46px; }
}


/* ── Layout ───────────────────────────────────────────────── */

.air-main {
    width:      100%;
    min-height: 100vh;
}

.air-content {
    max-width: var(--air-max);
    margin:    0 auto;
    padding:   var(--air-pad);
}

/* Embed mode: transparent background, zero padding, full width.
   The content fills the iframe exactly. */
body.air-embed {
    background: transparent;
}
body.air-embed .air-main,
body.air-embed .air-content {
    max-width: 100%;
    padding:   0;
    min-height: 0;
}


/* ── Typography ───────────────────────────────────────────── */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-weight:   600;
    line-height:   1.3;
    color:         var(--air-text);
    margin-top:    1.4em;
    margin-bottom: .4em;
}
.entry-content > *:first-child,
.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child { margin-top: 0; }

.entry-content h1 { font-size: 1.75rem; }
.entry-content h2 { font-size: 1.375rem; }
.entry-content h3 { font-size: 1.125rem; }
.entry-content h4 { font-size: 1rem; }

.entry-content p  { margin-bottom: 1em; }
.entry-content p:last-child { margin-bottom: 0; }

.entry-content ul,
.entry-content ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}
.entry-content li + li { margin-top: .25em; }

.entry-content blockquote {
    border-left: 3px solid var(--air-border-focus);
    padding: .5em 1em;
    margin: 1em 0;
    color: var(--air-muted);
    font-style: italic;
}

.entry-content code {
    font-family: var(--air-font-mono);
    font-size:   .875em;
    background:  #f3f4f6;
    color:       #b91c1c;
    padding:     .15em .4em;
    border-radius: 3px;
}

.entry-content pre {
    font-family:  var(--air-font-mono);
    font-size:    .875em;
    background:   #1e1e2e;
    color:        #cdd6f4;
    padding:      1.25rem;
    border-radius: var(--air-radius);
    overflow-x:   auto;
    margin-bottom: 1em;
    line-height:  1.7;
}
.entry-content pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: 1em;
}

.air-page-title {
    font-size:     1.75rem;
    font-weight:   700;
    margin-bottom: 1.25rem;
    color:         var(--air-text);
}


/* ── Block alignments ─────────────────────────────────────── */

.entry-content .alignwide {
    max-width: 100%;
}
.entry-content .alignfull {
    margin-left:  calc(-1 * var(--air-pad));
    margin-right: calc(-1 * var(--air-pad));
    max-width:    none;
}
body.air-embed .entry-content .alignfull {
    margin-left:  0;
    margin-right: 0;
}
.entry-content .aligncenter {
    margin-left:  auto;
    margin-right: auto;
    display:      block;
}
.entry-content .alignleft  { float: left;  margin-right: 1.5em; }
.entry-content .alignright { float: right; margin-left:  1.5em; }


/* ── Tables ───────────────────────────────────────────────── */

.entry-content table,
.air-table {
    width:         100%;
    border-collapse: collapse;
    font-size:     13px;
    background:    var(--air-surface);
    border-radius: var(--air-radius);
    overflow:      hidden;
    box-shadow:    var(--air-shadow);
    margin-bottom: 1.5em;
}
.entry-content table th,
.air-table th {
    background:      #f9fafb;
    font-weight:     600;
    text-align:      left;
    padding:         10px 14px;
    border-bottom:   2px solid var(--air-border);
    color:           var(--air-muted);
    font-size:       11px;
    text-transform:  uppercase;
    letter-spacing:  .05em;
    white-space:     nowrap;
}
.entry-content table td,
.air-table td {
    padding:       10px 14px;
    border-bottom: 1px solid var(--air-border);
    vertical-align: middle;
}
.entry-content table tr:last-child td,
.air-table tr:last-child td { border-bottom: none; }
.entry-content table tr:hover td,
.air-table tr:hover td { background: #fafafa; }


/* ── Cards ────────────────────────────────────────────────── */

.air-card {
    background:    var(--air-surface);
    border:        1px solid var(--air-border);
    border-radius: var(--air-radius-lg);
    padding:       20px 24px;
    box-shadow:    var(--air-shadow);
}
.air-card-title {
    font-size:     13px;
    font-weight:   600;
    color:         var(--air-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.air-card-value {
    font-size:   2rem;
    font-weight: 700;
    line-height: 1;
    color:       var(--air-text);
}


/* ── Form elements ────────────────────────────────────────── */

.air-field { margin-bottom: 1rem; }

.air-field label {
    display:       block;
    font-weight:   500;
    font-size:     13px;
    margin-bottom: 5px;
    color:         var(--air-text);
}

.air-field input[type="text"],
.air-field input[type="email"],
.air-field input[type="password"],
.air-field input[type="number"],
.air-field input[type="search"],
.air-field input[type="url"],
.air-field input[type="tel"],
.air-field select,
.air-field textarea {
    width:         100%;
    padding:       8px 12px;
    border:        1px solid var(--air-border);
    border-radius: var(--air-radius);
    font-family:   var(--air-font);
    font-size:     14px;
    color:         var(--air-text);
    background:    var(--air-surface);
    transition:    border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.air-field input:focus,
.air-field select:focus,
.air-field textarea:focus {
    outline:      none;
    border-color: var(--air-border-focus);
    box-shadow:   0 0 0 3px rgba(34, 113, 177, .15);
}
.air-field textarea { resize: vertical; min-height: 100px; }


/* ── Buttons ──────────────────────────────────────────────── */

.air-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         8px 18px;
    border-radius:   var(--air-radius);
    font-family:     var(--air-font);
    font-size:       14px;
    font-weight:     500;
    line-height:     1.4;
    cursor:          pointer;
    border:          1px solid transparent;
    text-decoration: none;
    transition:      background .15s, border-color .15s, box-shadow .15s, color .15s;
    white-space:     nowrap;
    -webkit-appearance: none;
}
.air-btn:focus-visible {
    outline:    none;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, .3);
}

.air-btn-primary {
    background: var(--air-primary);
    color:      #fff;
    width:      100%;
    padding:    10px 18px;
}
.air-btn-primary:hover {
    background: var(--air-primary-dark);
    color:      #fff;
    text-decoration: none;
}

.air-btn-ghost {
    background:   transparent;
    border-color: var(--air-border);
    color:        var(--air-muted);
}
.air-btn-ghost:hover {
    background: #f3f4f6;
    color:      var(--air-text);
    text-decoration: none;
}

.air-btn-danger {
    background: var(--air-danger);
    color:      #fff;
}
.air-btn-danger:hover { background: #a93226; color: #fff; text-decoration: none; }


/* ── Login shortcode ──────────────────────────────────────── */

.air-login-wrap {
    max-width:     380px;
    margin:        2rem auto;
    padding:       2rem 2.25rem;
    background:    var(--air-surface);
    border:        1px solid var(--air-border);
    border-radius: var(--air-radius-lg);
    box-shadow:    var(--air-shadow-md);
}
.air-login-error {
    background:    #fef2f2;
    color:         var(--air-danger);
    border:        1px solid #fecaca;
    border-radius: var(--air-radius);
    padding:       10px 14px;
    font-size:     13px;
    margin-bottom: 1.25rem;
}
.air-login-meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}
.air-login-meta label {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-weight: 400;
    margin-bottom: 0;
    cursor: pointer;
}
.air-forgot {
    font-size:       12px;
    color:           var(--air-muted);
    text-decoration: none;
}
.air-forgot:hover { color: var(--air-primary); }

.air-login-form .air-btn-primary { margin-top: .75rem; }

.air-logged-in {
    text-align:    center;
    padding:       1.5rem;
}
.air-welcome    { margin-bottom: 1rem; color: var(--air-muted); }
.air-welcome strong { color: var(--air-text); }


/* ── 404 ──────────────────────────────────────────────────── */

.air-404 {
    min-height:      70vh;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1rem;
    text-align:      center;
    padding:         2rem;
}
.air-404-code {
    font-size:   6rem;
    font-weight: 800;
    color:       var(--air-border);
    line-height: 1;
    display:     block;
}
.air-404-msg  { color: var(--air-muted); font-size: 1rem; }
.air-404 .air-btn { max-width: 160px; }


/* ── Notices / alerts ─────────────────────────────────────── */

.air-notice {
    padding:       12px 16px;
    border-radius: var(--air-radius);
    font-size:     13px;
    margin-bottom: 1rem;
    border-left:   3px solid transparent;
}
.air-notice-info    { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.air-notice-success { background: #f0fdf4; border-color: var(--air-success); color: #15803d; }
.air-notice-warning { background: #fffbeb; border-color: var(--air-warning); color: #92400e; }
.air-notice-error   { background: #fef2f2; border-color: var(--air-danger);  color: #991b1b; }


/* ── WP Data Access integration ───────────────────────────── */
/* Ensure WPDA tables inherit Air's typography and fit the canvas layout */

.wpda_table_view,
.wpda-list-table,
.wpdaDataTable,
table.dataTable {
    font-family: var(--air-font) !important;
    font-size:   13px !important;
    width:       100% !important;
}
table.dataTable thead th,
.wpdaDataTable thead th {
    background:     #f9fafb !important;
    color:          var(--air-muted) !important;
    font-size:      11px !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    border-bottom:  2px solid var(--air-border) !important;
}
table.dataTable tbody tr:hover {
    background: #fafafa !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border:        1px solid var(--air-border) !important;
    border-radius: var(--air-radius) !important;
    padding:       6px 10px !important;
    font-family:   var(--air-font) !important;
    font-size:     13px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--air-radius) !important;
    font-size:     13px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background:  var(--air-primary) !important;
    border-color: var(--air-primary) !important;
    color:       #fff !important;
}


/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    :root { --air-max: 100%; }
}

@media (max-width: 768px) {
    :root { --air-pad: 16px; }

    .air-login-wrap { padding: 1.5rem; }

    .entry-content .alignleft,
    .entry-content .alignright {
        float:        none;
        margin-left:  0;
        margin-right: 0;
        margin-bottom: 1em;
    }
}

@media (max-width: 480px) {
    :root { --air-pad: 12px; }
    .air-btn { font-size: 13px; }
}