/* Design system ------------------------------------------------------------ */

:root {
    --color-bg:             #f7f5f1;
    --color-surface:        #ffffff;
    --color-surface-alt:    #f2f1ed;

    --color-text:           #252a27;
    --color-text-muted:     #747b76;

    --color-border:         #dedfdc;

    --color-primary:        #27856b;
    --color-primary-hover:  #20725c;
    --color-primary-soft:   #e5f2ed;

    --color-danger:         #c94b4b;
    --color-danger-soft:    #faeaea;

    --font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-size-sm:         12px;
    --font-size-base:       14px;
    --font-size-lg:         16px;
    --font-size-title:      22px;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-bold:     600;

    --space-xs:             4px;
    --space-sm:             8px;
    --space-md:             12px;
    --space-lg:             16px;
    --space-xl:             24px;
    --space-2xl:            32px;

    --radius-sm:            6px;
    --radius-md:            8px;
    --radius-lg:            12px;

    --control-height:       38px;
    --control-padding-x:    12px;

    --sidebar-width:        210px;
    --content-max-width:    900px;

    --shadow-card:
        0 1px 3px rgba(25, 35, 30, 0.08),
        0 4px 12px rgba(25, 35, 30, 0.04);
}


/* Base  ------------------------------------------------------------ */

* {
    box-sizing: border-box;
}

html {
    font-family: var(--font-family);
    font-size: var(--font-size-base);

    color: var(--color-text);
    background: var(--color-bg);
}

body {
    margin: 0;

    color: var(--color-text);
    background: var(--color-bg);

    line-height: 1.45;
}

button,
input,
select,
textarea {
    font: inherit;
}

.text-muted {
    color: var(--color-text-muted);
}


/* Page ------------------------------------------------------------ */

.page {
    width: 100%;
    max-width: var(--content-max-width);

    margin: 0 auto;
    padding: var(--space-xl);
}

.page-center,
.page-wide  {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-lg);
}

.page-center {
	align-items: center;
}

.page-center > .card {
    width: 100%;
    max-width: 400px;
}

.page-wide {
	align-items: flex-start;
	padding-top: var(--space-2xl);
}

.page-wide > .card {
	width: 100%;
	max-width: 1200px;
}



/* Page headings ------------------------------------------------------------ */

.page-heading
{
	margin-bottom: var(--space-xl);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.page-heading-content
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-left: auto;
}

.page-title {
    margin: 0;

    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.page-subtitle {
    margin-top: var(--space-xs);

    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.section-title {
    margin:
        var(--space-xl)
        0
        var(--space-md);

    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

/* message ------------------------------------------------------------ */

.message {
    margin-bottom: var(--space-lg);
    padding: 10px 12px;

    border-radius: var(--radius-md);

    font-size: var(--font-size-base);
}

.message-error {
    color: #9f3535;
    background: var(--color-danger-soft);
}

.message-success {
    color: var(--color-primary-hover);
    background: var(--color-primary-soft);
}

.message-info {
    color: var(--color-text);
    background: var(--color-surface-alt);
}

.message-warning {
    color: #795f20;
    background: #faf3dd;
}

/* Card  ------------------------------------------------------------ */

.card {
    padding: var(--space-xl);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}


/* Form  ------------------------------------------------------------ */

.form {
    width: 100%;
}

.field {
    margin-bottom: var(--space-lg);
}

.field-label {
    display: block;

    margin-bottom: var(--space-xs);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.required {
    color: var(--color-danger);
}

.form-row {
    display: flex;
    gap: var(--space-md);
}

.form-row > .field {
    flex: 1;
    min-width: 0;
}


/* Input / Select / Textarea ------------------------------------------------------------ */

.input,
.select,
.textarea {
    display: block;

    width: 100%;

    color: var(--color-text);
    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    outline: none;

    transition:
        border-color 0.12s ease,
        box-shadow 0.12s ease,
        background-color 0.12s ease;
}

.input,
.select {
    height: var(--control-height);

    padding: 0 var(--control-padding-x);
}

.textarea {
    min-height: 90px;

    padding: 9px var(--control-padding-x);

    line-height: 1.45;

    resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
    color: #a0a5a1;
}


/* Hover */

.input:hover,
.select:hover,
.textarea:hover {
    border-color: #c4c8c5;
}


/* Focus */

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--color-primary);

    box-shadow:
        0 0 0 3px var(--color-primary-soft);
}


/* Disabled */

.input:disabled,
.select:disabled,
.textarea:disabled {
    color: var(--color-text-muted);
    background: var(--color-surface-alt);

    cursor: not-allowed;

    opacity: 0.75;
}


/* Error */

.field-error .input,
.field-error .select,
.field-error .textarea {
    border-color: var(--color-danger);
}

.field-error .input:focus,
.field-error .select:focus,
.field-error .textarea:focus {
    box-shadow:
        0 0 0 3px var(--color-danger-soft);
}

.field-message {
    margin-top: var(--space-xs);

    color: var(--color-danger);

    font-size: var(--font-size-sm);
}

.field-help {
    margin-top: var(--space-xs);

    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}

.field-value {
    display: flex;
    gap: 12px;
    margin: 6px 0;
}

.field-value-label {
    min-width: 120px;
    color: var(--text-muted);
}

.field-value-text {
    color: var(--text);
}
/* Checkbox ------------------------------------------------------------ */

.check {
    display: inline-flex;

    align-items: center;

    gap: var(--space-sm);

    cursor: pointer;

    user-select: none;
}

.check-input {
    width: 17px;
    height: 17px;

    margin: 0;

    accent-color: var(--color-primary);

    cursor: pointer;
}

.check-input:disabled {
    cursor: not-allowed;
}

.check-input:disabled + .check-label {
    color: var(--color-text-muted);
}


/* Toggle ------------------------------------------------------------ */

.toggle {
    display: inline-flex;

    align-items: center;

    gap: var(--space-sm);

    cursor: pointer;

    user-select: none;
}

.toggle-input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.toggle-control {
    position: relative;

    flex: 0 0 auto;

    width: 36px;
    height: 20px;

    background: #c9cdca;

    border-radius: 10px;

    transition:
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.toggle-control::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 14px;
    height: 14px;

    background: #ffffff;

    border-radius: 50%;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.15s ease;
}

.toggle-input:checked + .toggle-control {
    background: var(--color-primary);
}

.toggle-input:checked + .toggle-control::after {
    transform: translateX(16px);
}

.toggle-input:focus + .toggle-control {
    box-shadow:
        0 0 0 3px var(--color-primary-soft);
}

.toggle-input:disabled + .toggle-control {
    opacity: 0.5;
}

.toggle-input:disabled ~ .toggle-label {
    color: var(--color-text-muted);
}


/* Buttons ------------------------------------------------------------ */

.button > svg
{
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	margin-right: 8px;
}

.button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;

    min-height: var(--control-height);

    padding: 0 16px;

    color: var(--color-text);
    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    font-weight: var(--font-weight-medium);

    cursor: pointer;

    transition:
        background-color 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}

.button:hover {
    background: var(--color-surface-alt);
}

.button:focus {
    outline: none;

    box-shadow:
        0 0 0 3px var(--color-primary-soft);
}


/* Primary */

.button-primary {
    color: #ffffff;
    background: var(--color-primary);

    border-color: var(--color-primary);
}

.button-primary:hover {
    background: var(--color-primary-hover);

    border-color: var(--color-primary-hover);
}


/* Secondary */

.button-secondary {
    color: var(--color-primary-hover);
    background: var(--color-primary-soft);

    border-color: transparent;
}

.button-secondary:hover {
    background: #d9ebe4;
}


/* Danger */

.button-danger {
    color: var(--color-danger);
    background: var(--color-danger-soft);

    border-color: transparent;
}

.button-danger:hover {
    background: #f4dddd;
}


/* Disabled */

.button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


/* Form actions ------------------------------------------------------------ */

.form-actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: var(--space-sm);

    margin-top: var(--space-xl);
}

.form > .form-actions
{
	position: sticky;
	bottom: 0;
	z-index: 1;
	padding: var(--space-md) 0;
	padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
}

/*
 * When the first action is destructive, keep it on the left.
 */

.form-actions .button-danger:first-child {
    margin-right: auto;
}


/* Tags ------------------------------------------------------------ */

.tag {
    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding: 2px 9px;

    color: var(--color-primary-hover);
    background: var(--color-primary-soft);

    border-radius: 12px;

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    white-space: nowrap;
}

.tag-icon {
	display: block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
}

/* Application layout  ============================================================ */

.app {
    display: flex;

    min-height: 100vh;
}


/* Logo  ------------------------------------------------------------ */

.app-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--color-primary);
	text-decoration: none;
}

.app-logo-mark {
    display: block;

    width: 32px;
    height: 32px;

    flex: 0 0 auto;
}

.app-logo-mark svg {
    display: block;

    width: 100%;
    height: 100%;
}

.app-logo-text {
    color: var(--color-text);

    font-size: 20px;
    font-weight: var(--font-weight-bold);

    letter-spacing: -0.4px;
}

.app-logo-text span {
    color: var(--color-primary);
}


/* Sidebar ------------------------------------------------------------ */

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;

    flex: 0 0 var(--sidebar-width);

    padding:
        var(--space-xl)
        var(--space-lg);

    background: var(--color-surface);
    border-right: 1px solid var(--color-border);

	display: flex;
    flex-direction: column;
	box-sizing: border-box;
}

.sidebar-logo {
	display: flex;
    margin-bottom: var(--space-2xl);

    padding-left: var(--space-sm);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
	flex: 1;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}


/* Navigation ------------------------------------------------------------ */

.nav-item {
    display: flex;
    align-items: center;
	gap: var(--space-md);
    min-height: 40px;
    padding:   0 var(--space-md);
    color: var(--color-text);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: color 0.12s ease,  background-color 0.12s ease;
}

.nav-item:hover {
    background: var(--color-surface-alt);
}

.nav-button {
    width: 100%;

    background: transparent;
    border: 0;

    text-align: left;
    cursor: pointer;
}

.nav-item.active {
    color: var(--color-primary-hover);

    background: var(--color-primary-soft);

    font-weight: var(--font-weight-medium);
}

.nav-label {
    min-width: 0;

    flex: 1;
}

.nav-count {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 24px;
    height: 24px;

    padding: 0 7px;

    color: var(--color-text-muted);
    background: rgba(0, 0, 0, 0.045);

    border-radius: 12px;

    font-size: var(--font-size-sm);
}

.nav-item.active .nav-count {
    color: var(--color-primary-hover);

    background: rgba(39, 133, 107, 0.10);
}

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

	width: 20px;
	height: 20px;

	flex: 0 0 20px;

	color: var(--color-text-muted);
}

.nav-icon svg {
	display: block;

	width: 20px;
	height: 20px;
}

.nav-item:hover .nav-icon {
	color: var(--color-text);
}

.nav-item.active .nav-icon {
	color: var(--color-primary-hover);
}

.ui-picker-choice {
	cursor: pointer;
}

.ui-picker-icon {
	width: 40px;
}

.ui-picker-icon svg {
	display: block;
	width: 22px;
	height: 22px;
}

.ui-picker-heading {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	cursor: pointer;
	list-style: none;
}

.ui-picker-heading::-webkit-details-marker {
	display: none;
}

.ui-picker-label {
	flex: 1;
	font-weight: var(--font-weight-medium);
}

.ui-picker-toggle {
	min-height: 30px;
	padding: 0 10px;
}

.ui-picker-toggle svg {
	width: 18px;
	height: 18px;
}

.ui-picker-up {
	display: none;
}

.ui-picker[open] .ui-picker-down {
	display: none;
}

.ui-picker[open] .ui-picker-up {
	display: inline-flex;
}

.ui-picker-choice:has(input:checked) > .ui-table-cell {
	background: var(--color-primary-soft);
	font-weight: var(--font-weight-bold);
}

.ui-picker-choice:has(input:checked) > .ui-table-cell:first-child {
	box-shadow: inset 3px 0 0 var(--color-primary);
}

/* ------------------------------------------------------------
   Main application content
   ------------------------------------------------------------ */

.app-content {
    width: 100%;
    max-width: calc(
        var(--content-max-width) +
        var(--space-xl) * 2
    );

    padding: var(--space-xl);

    margin-right: auto;
}


/* Mobile header  ------------------------------------------------------------ */

.mobile-header {
    display: none;
}

/* Filters  ------------------------------------------------------------ */

.filters {
    display: flex;

    align-items: center;

    gap: var(--space-sm);

    margin-bottom: var(--space-lg);

    overflow-x: auto;

    scrollbar-width: none;
}

.filters::-webkit-scrollbar {
    display: none;
}

.filter {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 30px;

    padding:
        0
        12px;

    flex: 0 0 auto;

    color: var(--color-text);

    background: var(--color-surface-alt);

    border: 0;
    border-radius: 15px;

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    cursor: pointer;

    white-space: nowrap;
}

.filter:hover {
    background: #e9e8e4;
}

.filter.active {
    color: var(--color-primary-hover);

    background: var(--color-primary-soft);
}

.filter-count {
    color: var(--color-text-muted);
}

.filter.active .filter-count {
    color: var(--color-primary-hover);
}


/* table ------------------------------------------------------------ */

.ui-table {
	display: table;
	width: 100%;
	overflow: hidden;

	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);

	border-collapse: collapse;
}

.ui-table-header,
.ui-table-row {
	display: table-row;
}

.ui-table-cell {
	display: table-cell;
	padding:
		var(--space-sm)
		var(--space-md);

	vertical-align: middle;
	border-bottom: 1px solid var(--color-border);
}

.ui-table-header .ui-table-cell {
	font-weight: 600;
	color: var(--color-text-muted);
	background: #fbfbf9;
}

.ui-table-row .ui-table-cell {
	min-height: 60px;
}

.ui-table-row:last-child .ui-table-cell {
	border-bottom: 0;
}

.ui-table-row:hover .ui-table-cell {
	background: #fbfbf9;
}

.ui-table-left {
	text-align: left;
}

.ui-table-center {
	text-align: center;
}

.ui-table-right {
	text-align: right;
}

.ui-table-compact {
	width: 1%;
	white-space: nowrap;
}

/* list ------------------------------------------------------------------ */

.ui-list-box {
	width: 100%;
}

.ui-list-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: var(--space-sm);
}

.ui-list {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
}

.ui-list-row {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.ui-list-row:last-child {
	border-bottom: 0;
}

.ui-list-cell {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex: 1;
	min-width: 0;
}

.ui-list-icon,
.ui-list-check,
.ui-list-chevron {
	flex: 0 0 auto;
}

.ui-list-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
}

.ui-list-content
{
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ui-list-note
{
	white-space: pre-wrap;
}

.catalog-results
{
	display: grid;
	gap: var(--space-xs);
	max-height: 16rem;
	overflow-y: auto;
}

.catalog-results .button
{
	text-align: left;
	justify-content: flex-start;
	white-space: normal;
	overflow-wrap: anywhere;
}

#list-add [hidden]
{
	display: none;
}

.ui-list-title {
	font-weight: var(--font-weight-bold);
}

.ui-list-description {
	margin-top: var(--space-xs);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.ui-list-chevron {
	display: flex;
	align-items: center;
	color: var(--color-text-muted);
}


/* reorder */

.ui-list-order-toggle[aria-pressed="true"]
{
	color: var(--color-primary-hover);
	background: var(--color-primary-soft);
	border-color: var(--color-primary);
}

.ui-list-handle {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;

	cursor: grab;
	user-select: none;
	touch-action: none;

	color: var(--color-text-muted);
}

.ui-list-box.is-ordering .ui-list-handle {
	display: flex;
}

.ui-list-box.is-ordering .ui-list-cell {
	pointer-events: none;
}

.ui-list-row.is-dragging {
	opacity: .45;
}

.ui-list-row.is-dragging .ui-list-handle {
	cursor: grabbing;
}

/* Responsive ------------------------------------------------------------ */


@media (max-width: 600px) {

    :root {
        --control-height: 42px;
    }

    .page {
        padding: var(--space-lg);
    }

    .page-heading {
        margin-bottom: var(--space-lg);
    }

    .card {
        padding: var(--space-lg);
    }

    .form-row {
        flex-direction: column;

        gap: 0;
    }

    /*
     * Used for short fields that should remain side-by-side
     * on mobile, e.g. quantity + unit.
     */

    .form-row-keep {
        flex-direction: row;

        gap: var(--space-md);
    }

    .form-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 700px) {

	.app
	{
		position: relative;
		display: block;
	}

	.sidebar.is-open
	{
		display: flex;
		position: absolute;
		top: 58px;
		right: 0;
		z-index: 10;
		height: auto;
		max-width: 100%;
		max-height: calc(100vh - 58px);
		overflow-y: auto;
		border: 1px solid var(--color-border);
	}

	.sidebar .sidebar-logo
	{
		display: none;
	}

    .sidebar {
        display: none;
    }

    .mobile-header {
        display: flex;

        align-items: center;

        height: 58px;

        padding:
            0
            var(--space-lg);

        background: var(--color-surface);

        border-bottom:
            1px solid var(--color-border);
    }

    .mobile-menu-button {
        width: 36px;
        height: 36px;

		margin-left: auto;
        padding: 0;

        color: var(--color-text);
        background: transparent;

        border: 0;
        border-radius: var(--radius-sm);

        font-size: 22px;

        cursor: pointer;
    }

    .mobile-header .app-logo-mark {
        width: 28px;
        height: 28px;
    }

    .mobile-header .app-logo-text {
        font-size: 18px;
    }

    .app-content {
        max-width: none;

        padding: var(--space-lg);
    }

    .list-toolbar {
        gap: var(--space-sm);
    }

    .filters {
        margin-left: calc(-1 * var(--space-lg));
        margin-right: calc(-1 * var(--space-lg));

        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }

    .list-entry {
        min-height: 62px;

        padding-left: var(--space-sm);
        padding-right: var(--space-xs);
    }

    .list-entry-meta {
        margin-left: var(--space-sm);
    }

    .list-entry-menu {
        margin-left: var(--space-xs);
    }

}