/* TJA Portal - shared styles. tp- prefix, same cross-app convention as jc-/js-/jb- in the
   Nextcloud apps. Own CSS custom-property palette since there's no Nextcloud theme to inherit
   from - light by default, dark via prefers-color-scheme. */

:root {
    --tp-bg: #f4f5f7;
    --tp-surface: #ffffff;
    --tp-text: #1b1f24;
    --tp-text-dim: #5b6472;
    --tp-border: #dde1e6;
    --tp-primary: #2b5fd9;
    --tp-primary-text: #ffffff;
    --tp-error: #b3261e;
    --tp-error-bg: #fbeae9;
    --tp-success: #1e6b3e;
    --tp-success-bg: #e8f5ec;
    --tp-info-bg: #eaf1fd;
    --tp-warn-bg: #fff3cd;
    --tp-warn-text: #7a5b00;
    --tp-radius: 8px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tp-bg: #14171c;
        --tp-surface: #1c2128;
        --tp-text: #e6e9ee;
        --tp-text-dim: #9aa4b2;
        --tp-border: #2d333d;
        --tp-primary: #6b93ee;
        --tp-primary-text: #0d1117;
        --tp-error: #ff6b64;
        --tp-error-bg: #3a1f1f;
        --tp-success: #5fd48a;
        --tp-success-bg: #1c3324;
        --tp-info-bg: #1f2a3d;
        --tp-warn-bg: #3a2f10;
        --tp-warn-text: #f0c667;
    }
}

* { box-sizing: border-box; }
:root { color-scheme: light dark; } /* native controls (date picker, calendar icon) follow theme */
body {
    margin: 0;
    background: var(--tp-bg);
    color: var(--tp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.tp-header { background: var(--tp-surface); border-bottom: 1px solid var(--tp-border); }
.tp-header-inner {
    max-width: 960px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.tp-brand { font-weight: 700; font-size: 1.1em; }
.tp-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tp-nav a { color: var(--tp-text); text-decoration: none; }
.tp-nav a:hover { text-decoration: underline; }
.tp-user { color: var(--tp-text-dim); font-size: 0.9em; }
.tp-inline-form { display: inline; }
.tp-link-button {
    background: none; border: none; color: var(--tp-primary); cursor: pointer; padding: 0;
    font: inherit; text-decoration: underline;
}

.tp-main { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }

.tp-card {
    background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius);
    padding: 20px 24px; margin-bottom: 20px;
}
.tp-card-narrow { max-width: 420px; }

/* Multi-section forms (e.g. employee edit): each section is its own card, arranged as a
   2-column grid on wider screens and a single column on phones - just fine on mobile as-is,
   this only changes the desktop presentation. */
.tp-form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
.tp-form-grid .tp-card { margin-bottom: 0; }
.tp-form-grid .tp-card-span2 { grid-column: 1 / -1; }
@media (min-width: 700px) {
    .tp-form-grid { grid-template-columns: 1fr 1fr; }
}
.tp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tp-subform { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--tp-border); }

h1 { font-size: 1.4em; margin: 0 0 16px; }
h2 { font-size: 1.05em; margin: 0 0 10px; }

label { display: block; margin-bottom: 14px; font-size: 0.9em; color: var(--tp-text-dim); }
label.tp-checkbox { display: flex; align-items: center; gap: 8px; color: var(--tp-text); }
input[type=email], input[type=password], input[type=text], input[type=date], select {
    display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
    border: 1px solid var(--tp-border); border-radius: 6px; background: var(--tp-bg); color: var(--tp-text);
    font-size: 1em;
}
label.tp-checkbox input { width: auto; margin: 0; }

button[type=submit], .tp-button {
    display: inline-block; background: var(--tp-primary); color: var(--tp-primary-text);
    border: none; border-radius: 6px; padding: 9px 16px; font-size: 0.95em; cursor: pointer;
    text-decoration: none;
}
button[type=submit]:hover, .tp-button:hover { opacity: 0.9; }

.tp-alert {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9em;
    transition: opacity 0.25s ease;
}
.tp-alert-error { background: var(--tp-error-bg); color: var(--tp-error); }
.tp-alert-success { background: var(--tp-success-bg); color: var(--tp-success); }
.tp-alert-info { background: var(--tp-info-bg); color: var(--tp-text); }
.tp-alert-close {
    background: none; border: none; cursor: pointer; font-size: 1.2em; line-height: 1;
    color: inherit; opacity: 0.6; padding: 2px 6px; flex-shrink: 0;
}
.tp-alert-close:hover { opacity: 1; }

.tp-hint { color: var(--tp-text-dim); font-size: 0.85em; margin: -8px 0 14px; }
/* Links/notes that follow a form (not a field) need normal spacing, not the hint's pull-up. */
.tp-form-footer { margin: 16px 0 0; font-size: 0.9em; }

.tp-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.75em; margin-left: 6px; }
.tp-badge-warn { background: var(--tp-warn-bg); color: var(--tp-warn-text); }

.tp-table { width: 100%; border-collapse: collapse; }
.tp-table th, .tp-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--tp-border); }
.tp-table th { color: var(--tp-text-dim); font-weight: 600; font-size: 0.85em; }
.tp-sortable-header { cursor: pointer; user-select: none; }
.tp-sortable-header:hover { color: var(--tp-text); }
.tp-sortable-header::after { content: '\2195'; opacity: 0.35; margin-left: 4px; font-size: 0.9em; }
.tp-sort-asc::after { content: '\2191'; opacity: 1; }
.tp-sort-desc::after { content: '\2193'; opacity: 1; }
.tp-row-inactive { opacity: 0.55; }

/* Per-row table actions (e.g. "Edit") - browser default link colors (blue/purple visited)
   read poorly on a dark background, so override explicitly rather than leaving them unstyled. */
.tp-row-action, .tp-row-action:visited { color: var(--tp-primary); text-decoration: none; font-weight: 600; }
.tp-row-action:hover { text-decoration: underline; }

/* Responsive table->card pattern, same technique used across the Nextcloud apps (jc-stack) -
   collapses to stacked cards below 700px instead of forcing horizontal scroll. */
@media (max-width: 700px) {
    .tp-table.tp-stack, .tp-table.tp-stack thead, .tp-table.tp-stack tbody,
    .tp-table.tp-stack th, .tp-table.tp-stack td, .tp-table.tp-stack tr { display: block; }
    .tp-table.tp-stack thead { display: none; }
    .tp-table.tp-stack tr {
        border: 1px solid var(--tp-border); border-radius: var(--tp-radius); margin-bottom: 10px; padding: 8px 10px;
    }
    .tp-table.tp-stack td { border-bottom: none; padding: 4px 0; }
    .tp-table.tp-stack td[data-label]:not([data-label=""])::before {
        content: attr(data-label); display: block; font-size: 0.72em; text-transform: uppercase;
        letter-spacing: 0.03em; color: var(--tp-text-dim); margin-bottom: 1px;
    }
}