#terminPage { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: max(var(--page-padding),env(safe-area-inset-top)) max(var(--page-padding),env(safe-area-inset-right)) max(var(--page-padding),env(safe-area-inset-bottom)) max(var(--page-padding),env(safe-area-inset-left)); background: linear-gradient(rgba(8,10,12,.28),rgba(8,10,12,.62)),url('../images/backTerminMobile.jpg') center/cover no-repeat; }
.termin-box,.termin-box2 { width: min(100%,960px); border: 1px solid var(--panel-border); border-radius: 20px; background: var(--panel-bg); box-shadow: 0 18px 50px rgba(0,0,0,.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.termin-box { display: flex; flex-direction: column; gap: 12px; padding: clamp(16px,4vw,22px); }
.termin-box button { width: 100%; }
#terminError { width: 100%; color: var(--danger); font-size: .92rem; line-height: 1.35; }
.termin-box button:disabled { cursor: wait; opacity: .65; }
.termin-box2 { min-width: 0; padding: clamp(10px,3vw,18px); }
.tableContainer { max-height: min(62dvh,620px); overflow: auto; border-radius: 12px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#dataTable { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; color: #181a1e; }
#dataTable th,#dataTable td { padding: 13px 14px; border-right: 1px solid #d9dde2; border-bottom: 1px solid #d9dde2; background: rgba(255,255,255,.94); text-align: left; line-height: 1.35; }
#dataTable th:last-child,#dataTable td:last-child { border-right: 0; }
#dataTable th { position: sticky; top: 0; z-index: 1; background: #292c31; color: #fff; font-size: .9rem; }
#dataTable tbody tr { cursor: pointer; }
#dataTable tbody tr:nth-child(even) td { background: rgba(240,242,245,.96); }
#dataTable tbody tr:hover td { background: #3b4047; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#dataTable .action-column { width: 58px; padding: 5px; text-align: center; }
.delete-purchase-button { width: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid rgba(130,25,25,.3); border-radius: 10px; background: #8f2525; color: #fff; font-size: 1.8rem; font-weight: 400; line-height: 1; }
.delete-purchase-button:hover { background: #b52d2d; }
.delete-purchase-button:disabled { cursor: wait; opacity: .55; }
.delete-purchase-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.date-compact,.author-initial { display: none; }
@media (min-width: 700px) { #terminPage { gap: 20px; background-image: linear-gradient(rgba(8,10,12,.22),rgba(8,10,12,.56)),url('../images/backTermin.jpg'); } .termin-box { flex-flow: row wrap; align-items: center; } .termin-box input { flex: 1; min-width: 0; } .termin-box button { width: auto; min-width: 180px; } #terminError { flex-basis: 100%; } }
@media (max-width: 699px) {
    #terminPage { gap: 12px; padding: 14px; }
    .termin-box { gap: 10px; padding: 14px; }
    .termin-box input { min-height: 52px; }
    .termin-box #addterminBtn { display: none; }
    .termin-box2 { padding: 8px; background: rgba(15,18,22,.58); }
    .tableContainer { max-height: none; overflow: visible; border-radius: 14px; }
    #dataTable { display: block; min-width: 0; }
    #dataTable thead { display: none; }
    #dataTable tbody { display: grid; gap: 9px; }
    #dataTable tbody tr { display: grid; grid-template-columns: minmax(0,1fr) auto 52px; grid-template-areas: "product product action" "date author action"; align-items: center; min-width: 0; overflow: hidden; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(0,0,0,.16); cursor: default; }
    #dataTable th,#dataTable td { width: auto; padding: 0; border: 0; background: transparent !important; color: #181a1e !important; overflow-wrap: anywhere; }
    #dataTable .purchase-product { grid-area: product; padding: 13px 10px 3px 14px; font-size: 1.12rem; font-weight: 750; line-height: 1.25; }
    #dataTable .purchase-date { grid-area: date; padding: 3px 8px 13px 14px; color: #686d74 !important; font-size: .76rem; white-space: nowrap; }
    #dataTable .purchase-author { grid-area: author; padding: 3px 5px 10px; }
    #dataTable .action-column { grid-area: action; align-self: stretch; display: grid; place-items: center; width: 52px; padding: 4px; border-left: 1px solid #e0e2e5; }
    .date-full,.author-full { display: none; }
    .date-compact { display: inline; }
    .author-initial { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #292c31; color: #fff; font-size: .82rem; font-weight: 800; text-transform: uppercase; }
    .delete-purchase-button { width: 44px; min-width: 44px; min-height: 44px; border-radius: 11px; font-size: 1.15rem; }
}