/* ==========================================================================
   PaletteBuilder — App-Specific Overrides
   Layered on top of the shared design system (variables.css, design-system.css, etc.)
   ========================================================================== */

/* ---- PB-specific color overrides ---- */
:root {
    --pb-primary: var(--color-orange);
    --pb-primary-dark: #B5691A;
    --pb-primary-light: #FFF4E6;
    --pb-accent: var(--color-blue);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background: #F5F5F5;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-size: var(--font-size-base);
}
a { color: var(--pb-primary); text-decoration: none; }
a:hover { color: var(--pb-primary-dark); }
img { max-width: 100%; height: auto; }

/* ---- Header bar — logo + user nav (matches CF layout pattern) ---- */
#header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: #fff;
}
.header-bar {
    display: flex; align-items: center; gap: var(--space-lg);
    padding: 8px 16px;
    background: linear-gradient(135deg, #fafbfc 0%, #f4f5f7 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}
.header-bar::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange-light) 40%, transparent 80%);
    opacity: 0.6;
}
.header-bar .logo { flex-shrink: 0; }
.header-bar .logo a { display: flex; align-items: center; gap: var(--space-md); text-decoration: none; }
.logo-text { font-family: var(--font-heading); font-size: var(--font-size-lg); color: var(--color-text-primary); }
.logo-text strong { color: var(--pb-primary); }
.env-badge {
    font-size: var(--font-size-xs); background: var(--pb-primary); color: #fff;
    padding: 2px 8px; border-radius: 999px; font-weight: 600; text-transform: uppercase;
}
.header-nav {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    margin-left: auto; font-family: var(--font-heading);
}
.header-nav a.sel {
    color: var(--color-text-secondary); text-decoration: none;
    padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: 500;
    letter-spacing: 0.01em; transition: background 180ms ease, color 180ms ease;
    white-space: nowrap;
}
.header-nav a.sel + a.sel::before {
    content: "\00B7"; color: var(--color-border-light); margin-right: 6px;
    font-weight: bold; font-size: 16px;
}
.header-nav a.sel:hover { background: rgba(210, 123, 26, 0.08); color: var(--color-text-primary); }
.header-nav a.sel.nav-active { color: var(--pb-primary); font-weight: 600; }
.header-user {
    font-family: var(--font-heading); font-weight: 600; color: var(--color-text-primary);
    padding: 4px 12px 4px 0; font-size: 13px;
    border-right: 1px solid var(--color-border); margin-right: 4px; letter-spacing: -0.01em;
}
.header-user small { font-weight: 400; opacity: 0.6; font-size: 11px; }

/* ---- Page title bar — orange left accent ---- */
#content .sub_tit {
    font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: #1a1d23;
    letter-spacing: -0.02em; border-left: 3px solid var(--color-orange); border-bottom: none;
    padding: 6px 0 6px 14px; margin-bottom: 18px; line-height: 1.3;
}
#content .sub_tit:empty { display: none; }

/* ---- Loading status indicator ---- */
#status1 {
    position: sticky; top: 20px; z-index: var(--z-sticky); text-align: center;
    width: 90px; margin: auto; height: 0; line-height: 18px; overflow: hidden;
}

/* ---- Footer ---- */
#footer {
    background: linear-gradient(135deg, #fafbfc 0%, #f4f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: var(--space-md) 0; text-align: center; position: relative;
}
#footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange-light) 40%, transparent 80%);
    opacity: 0.4;
}
.footer-inner { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.separator { margin: 0 var(--space-sm); }

/* ---- Legacy notification flash ----
   Superseded by pb-notifications.css. The legacy `#notify-wrapper` and `.msg`
   markup is still rendered (hidden) by footer.php so pb-notifications.js can
   harvest the message text on load. Do NOT re-position or auto-show these —
   the authoritative notification system is PBNotify. */
#notify-wrapper[hidden] { display: none !important; }
.msg { /* structural only — PBNotify re-renders with its own visual system */ }

/* ---- Cards ---- */
.card {
    background: var(--color-white); border: 1px solid var(--color-border);
    border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden;
}
.card-header {
    padding: var(--space-md) var(--space-xl); border-bottom: 1px solid var(--color-border);
    font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-md);
    background: #FAFAFA;
}
.card-body { padding: var(--space-xl); }

/* ---- Forms ---- */
.form-group { margin-bottom: var(--form-field-gap); }
.form-label {
    display: block; font-size: var(--font-size-sm); font-weight: 500;
    margin-bottom: var(--form-label-gap); color: var(--color-text-primary);
    text-transform: uppercase; letter-spacing: 0.02em;
}
.form-input {
    width: 100%; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-base);
    height: var(--form-input-height);
    border: 1px solid var(--color-border-light); border-radius: 4px;
    background: var(--color-white); color: var(--color-text-primary);
    transition: border-color 150ms, box-shadow 150ms;
}
.form-input:focus {
    outline: none; border-color: var(--pb-primary);
    box-shadow: 0 0 0 3px rgba(210,123,26,0.15);
}
.form-input.is-invalid { border-color: var(--color-error); }
.form-error { font-size: var(--font-size-xs); color: var(--color-error); margin-top: var(--space-xs); }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-xl); font-size: var(--font-size-sm); font-weight: 600;
    border: 1px solid transparent; border-radius: 4px; cursor: pointer;
    transition: all 150ms; text-decoration: none; line-height: 1.4;
    height: var(--form-input-height);
}
.btn-primary { background: var(--pb-primary); color: #fff; }
.btn-primary:hover { background: var(--pb-primary-dark); color: #fff; }
.btn-secondary { background: var(--color-white); color: var(--color-text-primary); border-color: var(--color-border-light); }
.btn-secondary:hover { background: #F5F5F5; }
.btn-danger { background: var(--color-error); color: #fff; }
.btn-danger:hover { background: var(--color-error-dark); color: #fff; }
.btn-sm { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-xs); height: auto; }
.btn-block { width: 100%; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
th {
    text-align: left; padding: var(--space-md); font-weight: 600;
    background: var(--color-table-header-bg); color: var(--color-table-header-text);
}
td { padding: var(--space-md); border-bottom: 1px solid var(--color-border); }
tr:nth-child(odd) td { background: var(--color-table-odd); }
tr:nth-child(even) td { background: var(--color-table-even); }
tr:hover td { background: var(--color-table-hover); }

.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.data-table th, .data-table td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--color-border); }
.data-table thead th { background: var(--color-table-header-bg); color: var(--color-table-header-text); font-weight: 600; position: sticky; top: 0; }
.data-table tbody tr:hover { background: var(--color-table-hover); }
.data-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* ---- Page heading ---- */
.page-heading { margin-bottom: var(--space-xl); }
.page-heading h1 {
    font-family: var(--font-heading); font-size: var(--font-size-2xl);
    font-weight: 700; margin: 0 0 var(--space-xs) 0; color: var(--color-text-primary);
}
.page-heading p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---- Badges ---- */
.badge { display: inline-block; padding: 2px var(--space-sm); border-radius: 9999px; font-size: var(--font-size-xs); font-weight: 500; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-muted { background: #f3f4f6; color: #6b7280; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-info { background: var(--color-highlight); color: var(--color-blue); }
.badge-warning { background: var(--color-warning-bg); color: #92400e; }

/* ---- Filter Form ---- */
.filter-form .form-row { display: flex; gap: var(--form-col-gap); flex-wrap: wrap; }
.filter-form .form-row .form-group { min-width: 150px; }
.form-actions { display: flex; gap: var(--space-sm); align-items: center; margin-top: var(--space-md); }

/* ---- Pagination ---- */
.pagination-wrapper { margin: var(--space-md) 0; }
.pagination-wrapper ul { display: flex; list-style: none; padding: 0; gap: var(--space-xs); }
.pagination-wrapper li a, .pagination-wrapper li span {
    display: inline-block; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-border);
    border-radius: 4px; font-size: var(--font-size-xs); text-decoration: none; color: var(--color-text-primary);
}
.pagination-wrapper li a:hover { background: var(--pb-primary-light); }
.pagination-wrapper li.active span { background: var(--pb-primary); color: #fff; border-color: var(--pb-primary); }

/* ---- Login page ---- */
.login-container { max-width: 400px; margin: 4rem auto; padding: 0 var(--space-lg); }
.login-card { text-align: center; }
.login-card .card-body { padding: var(--space-xxl); }
.login-logo { font-family: var(--font-heading); font-size: var(--font-size-xl); color: var(--pb-primary); font-weight: 700; margin-bottom: var(--space-xl); }
.login-links { margin-top: var(--space-lg); font-size: var(--font-size-sm); }
.login-links a { margin: 0 var(--space-sm); }

/* ---- Color Swatch Grid (PB-specific) ---- */
.swatch-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-lg);
}
.swatch-card {
    text-align: center; padding: var(--space-md);
    border: 1px solid var(--color-border); border-radius: 8px;
    transition: box-shadow 150ms;
}
.swatch-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.swatch-circle {
    width: 80px; height: 80px; margin: 0 auto var(--space-sm);
    border-radius: 50%; border: 1px solid var(--color-border-light);
}
.swatch-name { font-weight: 600; font-size: var(--font-size-sm); }
.swatch-code { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ---- Palette Options Grid ---- */
.options-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
}
.option-chip {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border); border-radius: 6px;
    background: var(--color-white); font-size: var(--font-size-sm);
}
.option-chip:hover { border-color: var(--pb-primary); }

/* ---- Details/Summary ---- */
details.card > summary { list-style: none; cursor: pointer; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: '\25B6'; margin-right: var(--space-sm); font-size: var(--font-size-xs); }
details.card[open] > summary::before { content: '\25BC'; }

/* ---- Inline editable rows ---- */
.inline-edit-row input { font-size: var(--font-size-sm); }
.inline-edit-row.saved { animation: flash-green 0.6s ease; }
@keyframes flash-green { 0%, 100% { background: transparent; } 50% { background: #d1fae5; } }

/* ---- Utility overrides ---- */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-lg); }
.mt-3 { margin-top: var(--space-xl); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-lg); }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-sm); }
.gap-2 { gap: var(--space-lg); }
.hidden { display: none; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .header-bar { flex-wrap: wrap; padding: var(--space-sm) var(--space-md); gap: var(--space-sm); }
    .header-nav { font-size: var(--font-size-xs); gap: 2px; }
    .header-user { font-size: 11px; padding-right: 8px; }
    main#content { padding: var(--space-lg); }
    .login-container { margin: 2rem auto; }
    .swatch-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}
@media (max-width: 480px) {
    .header-bar .logo .logo-text { font-size: var(--font-size-base); }
    .header-nav a.sel + a.sel::before { display: none; }
    .header-nav a.sel { padding: 3px 6px; font-size: 11px; }
}