/*
    Kaypic admin material layer
    Purpose: small Bulma-safe refinements for hierarchy, spacing, controls,
    feedback, and responsive behavior without changing WebForms behavior.
*/

:root {
    --kmat-space-1: 0.5rem;
    --kmat-space-2: 1rem;
    --kmat-space-3: 1.5rem;
    --kmat-space-4: 2rem;
    --kmat-radius-sm: 4px;
    --kmat-radius-md: 8px;
    --kmat-radius-lg: 12px;
    --kmat-border: #dbe3ef;
    --kmat-border-strong: #c6d2e3;
    --kmat-surface: #ffffff;
    --kmat-surface-muted: #f7f9fc;
    --kmat-ink: #17243a;
    --kmat-ink-muted: #53647a;
    --kmat-primary: #1457b8;
    --kmat-primary-dark: #103d78;
    --kmat-focus: rgba(20, 87, 184, 0.22);
    --kmat-shadow-1: 0 1px 2px rgba(17, 38, 61, 0.08), 0 4px 12px rgba(17, 38, 61, 0.05);
    --kmat-shadow-2: 0 2px 4px rgba(17, 38, 61, 0.08), 0 8px 20px rgba(17, 38, 61, 0.07);
}

body {
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

.admin-shell-page .admin-content-shell,
.main-content > .px-2.py-1 {
    padding-top: var(--kmat-space-1) !important;
    padding-bottom: var(--kmat-space-3) !important;
}

.admin-shell-page .section,
.main-content .section {
    padding: var(--kmat-space-3) var(--kmat-space-2);
}

.admin-shell-page .field:not(:last-child),
.main-content .field:not(:last-child) {
    margin-bottom: var(--kmat-space-2);
}

.admin-shell-page .columns:not(:last-child),
.main-content .columns:not(:last-child) {
    margin-bottom: var(--kmat-space-2);
}

body .title {
    line-height: 1.18;
}

body .subtitle {
    line-height: 1.45;
}

body .box,
body .card,
body .message,
body .modal-card,
.kadmin-surface-card {
    border-color: var(--kmat-border) !important;
    border-radius: var(--kmat-radius-lg) !important;
    box-shadow: var(--kmat-shadow-1) !important;
}

body .box,
.kadmin-surface-card--padded {
    padding: var(--kmat-space-3) !important;
}

body .card:hover {
    transform: none;
}

body .card-header {
    box-shadow: inset 0 -1px 0 var(--kmat-border);
}

body .card-header-title,
.kadmin-card-head {
    color: var(--kmat-ink) !important;
}

body .label {
    color: var(--kmat-ink) !important;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
    text-transform: none;
}

body .help,
body .validation,
body .errMsg,
body .error {
    font-size: 0.86rem;
    line-height: 1.4;
}

body .errMsg,
body .error,
body .help.is-danger,
body span[style*="color:Red"],
body span[style*="color:red"] {
    color: #b42335 !important;
}

body .input,
body .textarea,
body .select select,
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="date"],
body input[type="time"],
body input[type="search"],
body textarea,
body select {
    border-color: var(--kmat-border) !important;
    border-radius: var(--kmat-radius-md) !important;
    box-shadow: none !important;
    color: var(--kmat-ink) !important;
    min-height: 2.5rem;
}

body textarea,
body .textarea {
    min-height: 7rem;
}

body .input:hover,
body .textarea:hover,
body .select select:hover,
body input[type="text"]:hover,
body input[type="email"]:hover,
body input[type="password"]:hover,
body input[type="number"]:hover,
body input[type="date"]:hover,
body input[type="time"]:hover,
body input[type="search"]:hover,
body textarea:hover,
body select:hover {
    border-color: var(--kmat-border-strong) !important;
}

body .input:focus,
body .textarea:focus,
body .select select:focus,
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body input[type="number"]:focus,
body input[type="date"]:focus,
body input[type="time"]:focus,
body input[type="search"]:focus,
body textarea:focus,
body select:focus,
body a:focus-visible,
body .button:focus-visible {
    border-color: var(--kmat-primary) !important;
    box-shadow: 0 0 0 3px var(--kmat-focus) !important;
    outline: none;
}

body .button,
body input[type="submit"],
body input[type="button"] {
    align-items: center;
    border-radius: var(--kmat-radius-md) !important;
    font-weight: 700;
    justify-content: center;
    min-height: 2.5rem;
    padding-left: var(--kmat-space-2);
    padding-right: var(--kmat-space-2);
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

body .button:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover {
    transform: none !important;
}

body .button.is-link,
body .button.is-primary,
body .button-primary {
    background-color: var(--kmat-primary) !important;
    border-color: var(--kmat-primary) !important;
    color: #ffffff !important;
    box-shadow: var(--kmat-shadow-1) !important;
}

body .button.is-link:hover,
body .button.is-primary:hover,
body .button-primary:hover {
    background-color: var(--kmat-primary-dark) !important;
    border-color: var(--kmat-primary-dark) !important;
}

body .button.is-light,
body .button-submit {
    background-color: var(--kmat-surface) !important;
    border-color: var(--kmat-border) !important;
    color: var(--kmat-primary) !important;
}

body .buttons,
body .field.is-grouped,
body .level-right,
body .level-left {
    gap: var(--kmat-space-1);
}

body .buttons .button {
    margin-bottom: 0 !important;
}

body .table-container {
    border-radius: var(--kmat-radius-lg);
}

body .table {
    border-collapse: separate;
    border-color: var(--kmat-border) !important;
    border-radius: var(--kmat-radius-lg) !important;
    border-spacing: 0;
    box-shadow: var(--kmat-shadow-1) !important;
    overflow: hidden;
}

body .table thead th {
    background: var(--kmat-surface-muted) !important;
    color: var(--kmat-ink-muted) !important;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

body .table td,
body .table th {
    border-color: var(--kmat-border) !important;
    padding: 0.75rem 0.85rem;
    vertical-align: middle;
}

body .table.is-hoverable tbody tr:hover {
    background-color: #f7fbff;
}

body .tag,
.kadmin-status-pill {
    border-radius: 999px !important;
    font-size: 0.76rem;
    font-weight: 700;
    min-height: 1.55rem;
}

body .tag.is-success,
.kadmin-status-pill--success {
    background-color: #e8f6ef !important;
    color: #0f7a4f !important;
}

body .tag.is-warning,
.kadmin-status-pill--warning {
    background-color: #fff5db !important;
    color: #8a5a00 !important;
}

body .tag.is-danger,
.kadmin-status-pill--danger {
    background-color: #fdecef !important;
    color: #a61b2b !important;
}

body .tag.is-info,
body .tag.is-link {
    background-color: #eaf2ff !important;
    color: var(--kmat-primary) !important;
}

body .notification,
body .message {
    border: 1px solid var(--kmat-border);
    border-radius: var(--kmat-radius-lg);
    box-shadow: none;
}

body .notification {
    padding: var(--kmat-space-2) var(--kmat-space-3);
}

body .notification.is-success,
body .message.is-success .message-body {
    background-color: #edf9f3 !important;
    border-color: #bde5cf !important;
    color: #0f6b46 !important;
}

body .notification.is-danger,
body .message.is-danger .message-body {
    background-color: #fff1f3 !important;
    border-color: #f3c7cf !important;
    color: #9f1d2f !important;
}

body .notification.is-warning,
body .message.is-warning .message-body {
    background-color: #fff8e8 !important;
    border-color: #f1d28a !important;
    color: #795200 !important;
}

body .notification.is-info,
body .message.is-info .message-body {
    background-color: #eef6ff !important;
    border-color: #bed8f7 !important;
    color: #174f86 !important;
}

body .modal-card {
    overflow: hidden;
}

body .modal-card-head,
body .modal-card-foot {
    background-color: var(--kmat-surface-muted);
    border-color: var(--kmat-border);
    padding: var(--kmat-space-2) var(--kmat-space-3);
}

body .modal-card-title {
    color: var(--kmat-ink);
    font-weight: 700;
}

.kadmin-empty-state,
body .NoItemsUserControl,
body .errMsg:only-child {
    background: var(--kmat-surface-muted);
    border: 1px dashed var(--kmat-border-strong);
    border-radius: var(--kmat-radius-lg);
    color: var(--kmat-ink-muted) !important;
    display: block;
    padding: var(--kmat-space-3);
    text-align: center;
}

.admin-shell-page .admin-nav .category-title {
    letter-spacing: 0.04em;
}

.admin-shell-page .menu a,
.admin-shell-page .signout a {
    border-radius: var(--kmat-radius-md);
    min-height: 2.35rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.admin-shell-page .menu a:hover,
.admin-shell-page .menu a:focus-visible {
    background-color: #f1f5fb;
}

@media screen and (max-width: 768px) {
    body .box,
    .kadmin-surface-card--padded {
        padding: var(--kmat-space-2) !important;
    }

    body .buttons,
    body .field.is-grouped {
        align-items: stretch;
        flex-direction: column;
    }

    body .buttons .button,
    body .field.is-grouped .button,
    body input[type="submit"],
    body input[type="button"] {
        width: 100%;
    }

    body .table td,
    body .table th {
        padding: 0.65rem 0.7rem;
    }
}