@import "colors.css";
@import "text.css";
@import "variables.css";

.login-card {
    display: flex;
    width: 30rem;
    padding: 2.5rem;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    gap: 2rem;

    border-radius: 0.5rem;
    border: 1px solid var(--Grey-300);
}

.text-input {
    border-radius: 0.25rem;
    border: 1px solid var(--Border-colour-border---default, #AEAEAE);
    background: var(--Field-colour-Field---1, #FFF);
    padding: var(--Padding-Padding-S, .5rem) var(--Padding-Padding-M, .75rem);
    width: 100%
}

.text-input:focus {
    border: 1px solid var(--Border-colour-border---interactive, #15A78E);
    outline: none;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page {
    min-height: 100svh;
    min-width: 100svh;
    margin: 0;
}

.flex-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.gap-4p { gap: 0.25rem; }
.gap-8p { gap: 0.5rem; }
.gap-16p { gap: 1rem; }
.gap-32p { gap: 2rem; }

.row-8p {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.row-space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.divider {
    height: 1px;
    background: var(--Grey-300);
    align-self: stretch;
    width: 100%;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
    font-family: inherit;
    font-weight: inherit;
}

.btn--primary {
    padding: var(--padding-md) var(--padding-lg);
    border: 1px solid var(--Border-colour-border---buttonprimary, #15A78E);
    background: var(--Button-colour-Button---primary, #15A78E);
    color: var(--Text-colour-text-on-buttonprimary, #FFF);
}

.btn--primary:hover {
    background: var(--Button-colour-Button---primary---hover, #15A78E);
}

.btn--secondary {
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---buttonsecondary, #15a78e);
    background: var(--Button-colour-Button---secondary, #fff);
    color: var(--Text-colour-text-on-buttonsecondary, #15a78e);
}

.btn--secondary:hover {
    background: var(--Button-colour-Button---secondary---hover, #d0ede8);
}

.btn--tertiary {
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---buttontertiary, #e2e2e2);
    background: var(--Button-colour-Button---tertiary, #fff);
    color: var(--Text-colour-text-on-buttontertiary, #0b0b0b);
}

.btn--tertiary:hover {
    background: var(--Button-colour-Button---tertiary---hover, #e2e2e2);
}

.btn--destructive {
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---buttondestructive, #ff4040);
    background: var(--Button-colour-Button-destructive, #fff);
    color: var(--Text-colour-text-on-buttondestructive, #ff4040);
}

.btn--destructive:hover {
    background: var(--Button-colour-Button-destructive-hover, #cc3333);
    color: var(--Text-colour-text-on-buttonprimary, #fff);
}

.btn--disabled {
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    border: 1px solid var(--Border-colour-border---buttontertiary, #e2e2e2);
    background: var(--Button-colour-Button---tertiary, #fff);
    color: var(--Text-colour-text-on-buttondisbled, #AEAEAE);
}

.btn--stretch {
    align-self: stretch;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
}

.check-box {
    width: 1.125rem;
    height: 1.125rem;
}

.modal-backing {
    z-index: 1;
    height: 100svh;
    width: 100vw;

    opacity: 0.4;
    background: var(--black, #000);
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    z-index: 1;
    display: flex;
    width: 37.5rem;
    padding: var(--Gap-Gap-XL, 1rem);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Gap-Gap-XL, 1rem);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: var(--Field-colour-Field---1, #FFF);

    position: fixed; 
    opacity: 1;
}

.modal-button-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    align-self: stretch;
}

.no-margin {
    margin-block-start: 0;
    margin-block-end: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: var(--Font-Brand, Inter), sans-serif;
}

body {
    background: var(--Background-colour-background, #fff);
    color: var(--Text-colour-text-primary, #0B0B0B);
    overflow: hidden;
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100svh;
    background: var(--Background-colour-background, #fff);
}

.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 3rem;
    padding: var(--Padding-Padding-M, 0.75rem) var(--Padding-Padding-L, 1rem);
    background: var(--Background-colour-background, #fff);
    flex-shrink: 0;
}

.header-logo {
    height: 1.5rem;
    width: auto;
}

.footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-L, 1rem);
    gap: var(--Gap-Gap-XXL, 1.5rem);
    background: var(--Background-colour-background, #fff);
    flex-shrink: 0;
}

.footer-item {
    font-size: var(--Body-Small-Size, 0.75rem);
    font-weight: var(--Body-Small-Weight, 400);
    line-height: var(--Body-Small-Height, 1rem);
    letter-spacing: var(--Body-Small-Spacing, 0.0125rem);
    color: var(--Text-colour-text-primary, #0b0b0b);
}

.horizontal-divider {
    height: 1px;
    width: 100%;
    background: var(--Divider-colour-divider---00, #E2E2E2);
    flex-shrink: 0;
}

.main-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    background: var(--Background-colour-background, #fff);
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 5rem;
    flex-shrink: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: sticky;
    top: 0;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--Padding-Padding-M, 0.75rem);
    gap: var(--Gap-Gap-L, 0.5rem);
    text-decoration: none;
    color: var(--Icon-colour-Icon-secondary, #AEAEAE);
    transition: background-color 0.15s ease;
}

.info-button {
    width: 1.25rem;
    height: 1.25rem;
    fill: #19191B;

    border: none;
    background-color: var(--Background-colour-background, #fff);
}

.sidebar-item:hover {
    background: var(--Background-colour-hover, #E2E2E2);
    color: var(--Text-colour-text-active, #15A78E);
}

.sidebar-item.active {
    color: var(--Text-colour-text-active, #15A78E);
}

.sidebar-icon {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--Icon-colour-Icon-secondary, #AEAEAE);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.sidebar-item:hover .sidebar-icon {
    background-color: var(--Icon-colour-icon-active-hover, #15A78E);
}

.sidebar-item.active .sidebar-icon {
    background-color: var(--Icon-colour-icon-active, #15A78E);
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: sticky;
    bottom: 0;
}

.sidebar-divider {
    width: 1px;
    background: var(--Divider-colour-divider---00, #E2E2E2);
    flex-shrink: 0;
}

.content-area {
    flex: 1;
    padding: var(--Padding-Padding-L, 1rem);
    overflow: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.page-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--Gap-Gap-L, 0.5rem);
    flex: 1;
    min-height: 0;
}

.page-container-refresh {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--Gap-Gap-L, 0.5rem);
    flex: 1;
    min-height: 0;
}

.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.5rem;
}

.page-title h1 {
    font-size: var(--Title-Large-Size, 1.375rem);
    font-weight: 500;
    line-height: var(--Title-Large-Height, 1.75rem);
    color: var(--Text-colour-text-primary, #0b0b0b);
    margin: 0;
}

.section-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 3rem;
    padding: 0.25rem 0.5rem;
    background: var(--Background-colour-title, #f4f4f4);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: var(--Gap-Gap-L, 0.5rem);
}

.section-title {
    font-size: var(--Title-Medium-Size, 1rem);
    font-weight: var(--Title-Medium-Weight, 500);
    line-height: var(--Title-Medium-Height, 1.5rem);
    letter-spacing: var(--Title-Medium-Spacing, 0.15px);
    color: var(--Text-colour-text-primary, #0b0b0b);
    margin: 0;
}

.section-count {
    font-size: var(--Title-Medium-Size, 1rem);
    font-weight: var(--Title-Medium-Weight, 500);
    line-height: var(--Title-Medium-Height, 1.5rem);
    letter-spacing: var(--Title-Medium-Spacing, 0.15px);
    color: var(--Text-colour-text-primary, #0b0b0b);
    margin: 0;
}

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3rem;
}

.empty-state-text {
    font-size: var(--Body-Large-Size, 1rem);
    font-weight: var(--Body-Large-Weight, 400);
    line-height: var(--Body-Large-Height, 1.5rem);
    color: var(--Text-colour-text-secondary, #aeaeae);
    margin: 0;
    text-align: center;
}

/* ============================================
   Messages (from new_queue.html)
   ============================================ */

.messages-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.message {
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.message-error {
    background: var(--Coral-Red-100, #ffd9d9);
    color: var(--Coral-Red-600, #cc3333);
    border: 1px solid var(--Coral-Red-500, #ff4040);
}

.message-success {
    background: var(--Silken-Jade-100, #d0ede8);
    color: var(--Silken-Jade-700, #0d6455);
    border: 1px solid var(--Silken-Jade-500, #15a78e);
}

.list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
    min-height: 5.5rem;
}

.column-headers {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem;
    gap: var(--Gap-Gap-L, 0.5rem);
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--Background-colour-background, #fff);
}

.column-header-text {
    font-size: var(--Title-Medium-Size, 1rem);
    font-weight: var(--Title-Medium-Weight, 500);
    line-height: var(--Title-Medium-Height, 1.5rem);
    letter-spacing: var(--Title-Medium-Spacing, 0.15px);
    color: var(--Text-colour-text-primary, #0b0b0b);
    margin: 0;
}

.list-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 3rem;
    padding: 0.25rem 0.5rem;
    gap: var(--Gap-Gap-L, 0.5rem);
    overflow: hidden;
    flex-shrink: 0;
}

.column-index {
    width: 2.5rem;
    flex-shrink: 0;
}

.column-print,
.column-printer,
.column-progress {
    flex: 1;
    min-width: 0;
}

.column-buffer {
    flex: 0.5;
}

.column-actions {
    width: 6.5rem;
    flex-shrink: 0;
}

.column-empty {
    width: 2.5rem;
    flex-shrink: 0;
}

.column-name {
    flex: 1;
    min-width: 0;
}

.column-status {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--Gap-Gap-M, 0.25rem)
}

.column-temp {
    flex: 1;
    min-width: 0;
}

.column-print-job {
    flex: 2;
    min-width: 0;
}

.column-actions-wide {
    width: 11.5rem;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}

.cell-index {
    width: 2.5rem;
    flex-shrink: 0;
    font-size: var(--Body-Large-Size, 1rem);
    font-weight: var(--Body-Large-Weight, 400);
    line-height: var(--Body-Large-Height, 1.5rem);
    color: var(--Text-colour-text-primary, #0b0b0b);
}

.cell-content {
    flex: 1;
    min-width: 0;
    font-size: var(--Body-Large-Size, 1rem);
    font-weight: var(--Body-Large-Weight, 400);
    line-height: var(--Body-Large-Height, 1.5rem);
    color: var(--Text-colour-text-primary, #0b0b0b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-content-fixed {
    font-size: var(--Body-Large-Size, 1rem);
    font-weight: var(--Body-Large-Weight, 400);
    line-height: var(--Body-Large-Height, 1.5rem);
    color: var(--Text-colour-text-primary, #0b0b0b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-actions {
    width: 6.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.cell-actions-wide {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--Gap-Gap-L, 0.5rem);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--Padding-Padding-XS, 0.25rem) var(--Padding-Padding-S, 0.5rem);
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    font-size: var(--Label-Medium-Size, 0.75rem);
    font-weight: var(--Label-Medium-Weight, 500);
    line-height: var(--Label-Medium-Height, 1rem);
    text-transform: capitalize;
}

.status-printing {
    background: var(--Support-colour-Support-success, #15a78e);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}

.status-standby {
    background: var(--Support-colour-Support-ready, #1376bd);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}

.status-failed {
    background: var(--Support-colour-Support-destructive, #ff4040);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}

.status-cancelled {
    background: var(--Support-colour-Support-destructive, #ff4040);
    color: var(--Text-colour-text-on-buttonprimary, #ffffff);
}

.status-paused {
    background: var(--Grey-500, #aeaeae);
    color: var(--Text-colour-text-primary, #0b0b0b);
}

.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--Border-colour-border---buttontertiary, #e2e2e2);
    border-radius: 0.25rem;
    background: var(--Button-colour-Button---tertiary, #fff);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.icon-button:hover {
    background: var(--Background-colour-hover, #e2e2e2);
}

.icon-button-add {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--Icon-colour-icon-on-tertiarybutton, #0b0b0b);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.btn--sm {
    height: 2.5rem;
    padding: var(--Padding-Padding-S, 0.5rem) var(--Padding-Padding-M, 0.75rem);
    font-size: var(--Title-Medium-Size, 1rem);
    font-weight: var(--Title-Medium-Weight, 500);
    line-height: var(--Title-Medium-Height, 1.5rem);
    letter-spacing: var(--Title-Medium-Spacing, 0.0094rem);
}

.btn--fluid {
    height: 2.5rem;
    width: 2.5rem;
    padding: var(--Padding-Padding-S, 0.5rem);
}

.btn--lg {
    font-size: var(--Title-Medium-Size, 1rem);
    font-weight: var(--Title-Medium-Weight, 500);
}

.indent {
    margin-left: 1.5rem;
}

.progress-text-row {
    display: flex;
    justify-content: space-between;
}

.progress-bar {
    width: 100%;
    height: 0.5rem;
    background-color: var(--Background-colour-title, #f4f4f4);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--Support-colour-Support-success, #15a78e);
}

.progress-bar-fill-error {
    height: 100%;
    background-color: var(--Support-colour-Support-destructive, #ff4040);
}

@media (max-width: 56.25rem) {
    .column-progress,
    .cell-progress,
    .column-temp {
        display: none;
    }
}

@media (max-width: 43.75rem) {
    .column-printer,
    .cell-printer,
    .column-print-job {
        display: none;
    }
}

.error-page-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--Spacing-Spacing-250, 2.5rem);
    min-height: 100svh;
}

.error-page-image {
    flex-shrink: 0;
}

.error-page-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 12rem;
}

.password-input-wrapper {
    position: relative;
    align-self: stretch;
}

.password-input-wrapper .text-input {
    padding-right: 2.5rem;
}

.password-toggle-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.account-section {
    display: flex;
    flex-direction: column;
    gap: var(--Gap-Gap-XL, 1rem);
    align-items: flex-start;
}

.account-info {
    display: flex;
    flex-direction: column;
    gap: var(--Gap-Gap-L, 0.5rem);
}

.account-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--Gap-Gap-L, 0.5rem);
}

dialog {
    width: 42.5625rem;
    padding: var(--Gap-Gap-XL, 1rem);
    border: none;
    border-radius: var(--Corner-Radius-Corneradius-02, 0.25rem);
    background: var(--Field-colour-Field---1, #fff);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog .modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--Gap-Gap-XL, 1rem);
}

.toast-container {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.toast {
    background: #ff4040;
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: var(--Body-Large-Size, 1rem);
    font-weight: var(--Body-Large-Weight, 400);
    line-height: var(--Body-Large-Height, 1.5rem);
    animation: toastFadeIn 0.3s ease;
}

.toast.toast-fade-out {
    animation: toastFadeOut 0.3s ease forwards;
}

@keyframes toastFadeIn {
    from { opacity: 0; transform: translateY(-1rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-1rem); }
}