:root {
    --font-sans: "Museo Sans", "Segoe UI", Arial, sans-serif;
    --font-display: "Museo", "Museo Sans", "Segoe UI", Arial, sans-serif;
    --zhp-green: #87a428;
    --zhp-green-light: #afca0b;
    --zhp-green-dark: #587d18;
    --zhp-white: #ffffff;
    --zhp-black: #000000;
    --zhp-gray: #a6adb3;
    --zhp-gray-light: #cfd3d7;
    --zhp-gray-dark: #717d85;
    --zhp-orange: #ef7d00;
    --zhp-orange-dark: #e15c11;
    --zhp-blue: #26b4e6;
    --zhp-blue-dark: #0083ac;
    --zhp-danger: #b91c1c;
    --text-main: #1f2933;
    --text-muted: #5f6670;
    --page-bg: #f4f6ef;
    --card-bg: #ffffff;
    --border-soft: #dfe5d6;
    --shadow-soft: 0 18px 45px rgba(88, 125, 24, 0.12);
}

/* GLOBAL */

body {
    background:
        linear-gradient(90deg, rgba(135, 164, 40, 0.08), transparent 24%),
        var(--page-bg);
    color: var(--text-main);
    font-family: var(--font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-main);
    font-family: var(--font-display);
    letter-spacing: 0.02em;
}

h1 {
    font-weight: 800;
    text-transform: uppercase;
}

h2 {
    font-weight: 800;
}

h3 {
    font-weight: 700;
}

a {
    color: var(--zhp-green-dark);
}

a:hover {
    color: var(--zhp-green);
}

/* NAV / HERO — biały pasek jak w shortenerze */

.nav-title,
.nav-brand,
.nav-link,
.nav-user,
.site-footer,
.site-footer-inner,
label,
.login-card-kicker,
.stat-value,
.stat-label,
.api-export-tile-label,
.pagination-info,
.toast {
    font-family: var(--font-display);
}

.nav-title {
    color: var(--text-main);
}

.hero {
    border-bottom: 8px solid var(--zhp-green-light);
    background:
        linear-gradient(
            135deg,
            rgba(88, 125, 24, 0.94),
            rgba(135, 164, 40, 0.92)
        );
    color: var(--zhp-white);
}

.hero h1 {
    color: var(--zhp-white);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero p {
    color: rgba(255, 255, 255, 0.92);
}

/* LAYOUT / CARDS */

.card,
.login-box,
.category {
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    box-shadow: var(--shadow-soft);
}

.card {
    border-top: 5px solid var(--zhp-green);
}

.category {
    border-left: 5px solid var(--zhp-green);
}

.category h3 {
    color: var(--zhp-green-dark);
}

.small,
.search-meta,
.date-help,
.pagination-info {
    color: var(--text-muted);
}

/* FORMS */

input,
select,
textarea {
    border: 1px solid var(--zhp-gray-light);
    background: var(--zhp-white);
    color: var(--text-main);
    font-family: var(--font-sans);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--zhp-green);
    box-shadow: 0 0 0 4px rgba(135, 164, 40, 0.18);
}

button,
.button-primary,
.office-login-button {
    border: 1px solid var(--zhp-green);
    background: var(--zhp-green);
    color: var(--zhp-white);
    font-family: var(--font-display);
    font-weight: 800;
}

button:hover,
.button-primary:hover {
    border-color: var(--zhp-green-dark);
    background: var(--zhp-green-dark);
}

button.secondary,
.secondary {
    border: 1px solid #d6dfc5;
    background: #eef3e4;
    color: var(--zhp-green-dark);
    font-family: var(--font-display);
}

button.secondary:hover,
.secondary:hover {
    background: #dfe9ce;
    color: var(--zhp-green-dark);
}

button.danger,
.danger {
    border-color: var(--zhp-danger);
    background: var(--zhp-danger);
    color: var(--zhp-white);
}

button.danger:hover,
.danger:hover {
    border-color: #991b1b;
    background: #991b1b;
}

.field-error {
    color: var(--zhp-danger);
}

/* TABLES */

.table-scroll {
    border: 1px solid var(--border-soft);
    border-radius: 18px;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

thead th {
    border-bottom: 2px solid var(--zhp-green);
    background: #eef3e4;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

tbody td {
    font-family: var(--font-sans);
}

tbody tr {
    background: var(--zhp-white);
}

tbody tr:hover {
    background: #f8fbf2;
}

td,
th {
    border-bottom: 1px solid #e4ead9;
}

.url-cell span {
    color: var(--text-main);
}

/* ACTIONS / STATUS */

.row-actions {
    gap: 7px;
}

.action-btn {
    border: 1px solid #d6dfc5;
    background: #f7faef;
    color: var(--zhp-green-dark);
    font-family: var(--font-display);
    font-weight: 800;
}

.action-btn:hover {
    background: #eef3e4;
    color: var(--zhp-green-dark);
    box-shadow: 0 8px 18px rgba(88, 125, 24, 0.14);
}

.action-link {
    color: var(--zhp-green-dark);
}

.action-danger {
    border-color: #f0c9c9;
    background: #fff7f7;
    color: var(--zhp-danger);
}

.action-danger:hover {
    background: #fee2e2;
    color: #991b1b;
}

.action-btn.copied,
.status-active {
    color: var(--zhp-green-dark);
}

.action-btn.copied {
    border-color: var(--zhp-green-light);
    background: #e8f4d8;
}

.status-badge {
    font-family: var(--font-display);
    font-weight: 800;
}

.status-active {
    border: 1px solid var(--zhp-green-light);
    background: #e8f4d8;
}

.status-neutral {
    border: 1px solid var(--zhp-gray-light);
    background: #f3f5f6;
    color: var(--zhp-gray-dark);
}

.status-expired {
    border: 1px solid #fecaca;
    background: #fee2e2;
    color: #991b1b;
}

/* QR / MODAL / TOAST */

.qr-container {
    text-align: center;
}

.qr-image {
    border: 8px solid #eef3e4;
    box-shadow: 0 18px 40px rgba(88, 125, 24, 0.18);
}

.modal {
    border-top: 6px solid var(--zhp-green);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.modal h3 {
    text-transform: uppercase;
}

.toast.success {
    background: var(--zhp-green-dark);
    color: var(--zhp-white);
}

.toast.error {
    background: var(--zhp-danger);
    color: var(--zhp-white);
}

/* ANALYTICS / STATES / PAGINATION */

.analytics-card {
    border-top-color: var(--zhp-green);
}

.analytics-target-url,
.empty-state {
    background: #f8fbf2;
    border-color: var(--border-soft);
}

.empty-state {
    border-style: dashed;
}

.empty-state-icon {
    color: var(--zhp-green);
}

.recently-created {
    animation: zhp-highlight-created 3s ease;
}

@keyframes zhp-highlight-created {
    0% {
        background: #e8f4d8;
    }

    100% {
        background: transparent;
    }
}

.pagination button {
    border-color: #d6dfc5;
    background: #eef3e4;
    color: var(--zhp-green-dark);
    font-family: var(--font-display);
}

.pagination button:hover {
    background: var(--zhp-green);
    color: var(--zhp-white);
}

.pagination-info {
    font-weight: 700;
}