@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('./icons.css');
@import url('./app-ui.css');
@import url('./app-records.css');

@import url('./app-layout.css');
@import url('./app-shipment.css');
@import url('./app-operations.css');
@import url('./app-masterdata.css');
@import url('./app-finance.css');
@import url('./app-fiscal.css');
@import url('./app-dashboard.css');
@import url('./app-admin.css');
@import url('./app-auth.css');
@import url('./app-responsive-fixes.css');
@import url('./app-construction.css');

:root,
html[data-theme-palette="blue"],
body[data-theme-palette="blue"] {
    --app-accent-rgb: 47, 109, 246;
    --app-accent-600: #2f6df6;
    --app-accent-700: #1d4ed8;
    --app-accent-200: #bfdbfe;
    --app-accent-soft: rgba(var(--app-accent-rgb), 0.14);
    --app-accent-soft-strong: rgba(var(--app-accent-rgb), 0.22);
    --app-accent-glow: rgba(var(--app-accent-rgb), 0.18);
    --app-accent-glow-alt: rgba(15, 118, 110, 0.14);
    --app-bg-body: radial-gradient(circle at top left, rgba(255, 255, 255, 0.42), transparent 25%), radial-gradient(circle at top right, rgba(191, 219, 254, 0.52), transparent 24%), linear-gradient(180deg, #edf4fb 0%, #dbeafe 100%);
    --app-bg-page: radial-gradient(circle at top left, rgba(219, 234, 254, 0.7), transparent 28%), radial-gradient(circle at bottom right, rgba(186, 230, 253, 0.44), transparent 24%), linear-gradient(180deg, #edf4fb 0%, #dbeafe 100%);
    --app-text-primary: #0f172a;
    --app-text-secondary: #64748b;
    --app-text-muted: #94a3b8;
    --app-surface-1: rgba(255, 255, 255, 0.82);
    --app-surface-2: rgba(255, 255, 255, 0.96);
    --app-surface-panel: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.9) 100%);
    --app-surface-panel-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.98) 100%);
    --app-border-soft: rgba(148, 163, 184, 0.16);
    --app-border-strong: rgba(var(--app-accent-rgb), 0.24);
    --app-shadow-soft: 0 18px 38px rgba(15, 23, 42, 0.14);
    --app-shadow-strong: 0 22px 44px rgba(15, 23, 42, 0.14);
    --app-nav-text: #111827;
    --app-nav-text-muted: #6b7280;
    --app-nav-hover-bg: rgba(17, 24, 39, 0.035);
    --app-nav-active-bg: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.14) 0%, rgba(99, 102, 241, 0.08) 100%);
    --app-nav-active-border: rgba(var(--app-accent-rgb), 0.16);
    --app-nav-active-text: #0f172a;
    --app-nav-branch: rgba(203, 213, 225, 0.9);
}

html[data-theme-palette="pastel"],
body[data-theme-palette="pastel"] {
    --app-accent-rgb: 198, 123, 180;
    --app-accent-600: #c67bb4;
    --app-accent-700: #a85b95;
    --app-accent-200: #f3cfe7;
    --app-accent-soft: rgba(var(--app-accent-rgb), 0.16);
    --app-accent-soft-strong: rgba(var(--app-accent-rgb), 0.22);
    --app-accent-glow: rgba(var(--app-accent-rgb), 0.16);
    --app-accent-glow-alt: rgba(138, 196, 184, 0.16);
    --app-bg-body: radial-gradient(circle at top left, rgba(255, 255, 255, 0.46), transparent 25%), radial-gradient(circle at top right, rgba(245, 216, 232, 0.56), transparent 24%), linear-gradient(180deg, #fff5f7 0%, #f7efe7 100%);
    --app-bg-page: radial-gradient(circle at top left, rgba(243, 207, 231, 0.6), transparent 28%), radial-gradient(circle at bottom right, rgba(221, 245, 238, 0.46), transparent 24%), linear-gradient(180deg, #fff7fb 0%, #f7efe7 100%);
    --app-text-primary: #3f3143;
    --app-text-secondary: #7a667c;
    --app-text-muted: #ab93ab;
    --app-surface-1: rgba(255, 252, 253, 0.84);
    --app-surface-2: rgba(255, 251, 252, 0.97);
    --app-surface-panel: linear-gradient(135deg, rgba(255, 251, 252, 0.98) 0%, rgba(252, 245, 247, 0.92) 100%);
    --app-surface-panel-strong: linear-gradient(180deg, rgba(255, 251, 252, 0.99) 0%, rgba(251, 244, 246, 0.98) 100%);
    --app-border-soft: rgba(203, 175, 198, 0.34);
    --app-border-strong: rgba(var(--app-accent-rgb), 0.28);
    --app-shadow-soft: 0 18px 38px rgba(90, 68, 96, 0.14);
    --app-shadow-strong: 0 22px 44px rgba(90, 68, 96, 0.16);
    --app-nav-text: #4a3f4e;
    --app-nav-text-muted: #8e7b92;
    --app-nav-hover-bg: rgba(198, 123, 180, 0.08);
    --app-nav-active-bg: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.14) 0%, rgba(138, 196, 184, 0.12) 100%);
    --app-nav-active-border: rgba(var(--app-accent-rgb), 0.2);
    --app-nav-active-text: #3f3143;
    --app-nav-branch: rgba(220, 200, 216, 0.96);
}

html[data-theme-palette="gray"],
body[data-theme-palette="gray"] {
    --app-accent-rgb: 107, 114, 128;
    --app-accent-600: #6b7280;
    --app-accent-700: #4b5563;
    --app-accent-200: #d1d5db;
    --app-accent-soft: rgba(var(--app-accent-rgb), 0.14);
    --app-accent-soft-strong: rgba(var(--app-accent-rgb), 0.22);
    --app-accent-glow: rgba(148, 163, 184, 0.18);
    --app-accent-glow-alt: rgba(107, 114, 128, 0.12);
    --app-bg-body: radial-gradient(circle at top left, rgba(255, 255, 255, 0.42), transparent 25%), radial-gradient(circle at top right, rgba(226, 232, 240, 0.52), transparent 24%), linear-gradient(180deg, #eef2f7 0%, #dbe2ea 100%);
    --app-bg-page: radial-gradient(circle at top left, rgba(226, 232, 240, 0.66), transparent 28%), radial-gradient(circle at bottom right, rgba(203, 213, 225, 0.38), transparent 24%), linear-gradient(180deg, #eef2f7 0%, #dbe2ea 100%);
    --app-text-primary: #111827;
    --app-text-secondary: #6b7280;
    --app-text-muted: #9ca3af;
    --app-surface-1: rgba(255, 255, 255, 0.84);
    --app-surface-2: rgba(255, 255, 255, 0.97);
    --app-surface-panel: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(245, 247, 250, 0.92) 100%);
    --app-surface-panel-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(244, 246, 248, 0.98) 100%);
    --app-border-soft: rgba(148, 163, 184, 0.22);
    --app-border-strong: rgba(var(--app-accent-rgb), 0.28);
    --app-shadow-soft: 0 18px 38px rgba(51, 65, 85, 0.14);
    --app-shadow-strong: 0 22px 44px rgba(51, 65, 85, 0.16);
    --app-nav-text: #1f2937;
    --app-nav-text-muted: #6b7280;
    --app-nav-hover-bg: rgba(51, 65, 85, 0.045);
    --app-nav-active-bg: linear-gradient(135deg, rgba(148, 163, 184, 0.18) 0%, rgba(203, 213, 225, 0.12) 100%);
    --app-nav-active-border: rgba(var(--app-accent-rgb), 0.2);
    --app-nav-active-text: #111827;
    --app-nav-branch: rgba(203, 213, 225, 0.92);
}

html[data-theme-palette="emerald"],
body[data-theme-palette="emerald"] {
    --app-accent-rgb: 5, 150, 105;
    --app-accent-600: #059669;
    --app-accent-700: #047857;
    --app-accent-200: #a7f3d0;
    --app-accent-soft: rgba(var(--app-accent-rgb), 0.16);
    --app-accent-soft-strong: rgba(var(--app-accent-rgb), 0.24);
    --app-accent-glow: rgba(var(--app-accent-rgb), 0.18);
    --app-accent-glow-alt: rgba(16, 185, 129, 0.14);
    --app-bg-body: radial-gradient(circle at top left, rgba(255, 255, 255, 0.4), transparent 25%), radial-gradient(circle at top right, rgba(167, 243, 208, 0.5), transparent 24%), linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    --app-bg-page: radial-gradient(circle at top left, rgba(167, 243, 208, 0.66), transparent 28%), radial-gradient(circle at bottom right, rgba(110, 231, 183, 0.36), transparent 24%), linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    --app-text-primary: #062f26;
    --app-text-secondary: #3f6f63;
    --app-text-muted: #6b9a8f;
    --app-surface-1: rgba(255, 255, 255, 0.84);
    --app-surface-2: rgba(255, 255, 255, 0.97);
    --app-surface-panel: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(240, 253, 250, 0.92) 100%);
    --app-surface-panel-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(236, 253, 245, 0.98) 100%);
    --app-border-soft: rgba(16, 185, 129, 0.18);
    --app-border-strong: rgba(var(--app-accent-rgb), 0.28);
    --app-shadow-soft: 0 18px 38px rgba(6, 47, 38, 0.14);
    --app-shadow-strong: 0 22px 44px rgba(6, 47, 38, 0.16);
    --app-nav-text: #062f26;
    --app-nav-text-muted: #4b7c70;
    --app-nav-hover-bg: rgba(5, 150, 105, 0.08);
    --app-nav-active-bg: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.16) 0%, rgba(110, 231, 183, 0.12) 100%);
    --app-nav-active-border: rgba(var(--app-accent-rgb), 0.22);
    --app-nav-active-text: #062f26;
    --app-nav-branch: rgba(167, 243, 208, 0.96);
}

html[data-theme-palette="sunset"],
body[data-theme-palette="sunset"] {
    --app-accent-rgb: 234, 88, 12;
    --app-accent-600: #ea580c;
    --app-accent-700: #c2410c;
    --app-accent-200: #fdba74;
    --app-accent-soft: rgba(var(--app-accent-rgb), 0.16);
    --app-accent-soft-strong: rgba(var(--app-accent-rgb), 0.24);
    --app-accent-glow: rgba(var(--app-accent-rgb), 0.18);
    --app-accent-glow-alt: rgba(251, 146, 60, 0.14);
    --app-bg-body: radial-gradient(circle at top left, rgba(255, 255, 255, 0.38), transparent 25%), radial-gradient(circle at top right, rgba(253, 186, 116, 0.52), transparent 24%), linear-gradient(180deg, #fff7ed 0%, #fed7aa 100%);
    --app-bg-page: radial-gradient(circle at top left, rgba(254, 215, 170, 0.64), transparent 28%), radial-gradient(circle at bottom right, rgba(251, 146, 60, 0.34), transparent 24%), linear-gradient(180deg, #fff7ed 0%, #fed7aa 100%);
    --app-text-primary: #4a2310;
    --app-text-secondary: #7b4a2b;
    --app-text-muted: #aa6f46;
    --app-surface-1: rgba(255, 255, 255, 0.84);
    --app-surface-2: rgba(255, 252, 248, 0.97);
    --app-surface-panel: linear-gradient(135deg, rgba(255, 252, 248, 0.98) 0%, rgba(255, 237, 213, 0.92) 100%);
    --app-surface-panel-strong: linear-gradient(180deg, rgba(255, 252, 248, 0.99) 0%, rgba(255, 247, 237, 0.98) 100%);
    --app-border-soft: rgba(251, 146, 60, 0.2);
    --app-border-strong: rgba(var(--app-accent-rgb), 0.3);
    --app-shadow-soft: 0 18px 38px rgba(92, 46, 19, 0.14);
    --app-shadow-strong: 0 22px 44px rgba(92, 46, 19, 0.16);
    --app-nav-text: #4a2310;
    --app-nav-text-muted: #8a5a35;
    --app-nav-hover-bg: rgba(234, 88, 12, 0.08);
    --app-nav-active-bg: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.18) 0%, rgba(251, 146, 60, 0.12) 100%);
    --app-nav-active-border: rgba(var(--app-accent-rgb), 0.24);
    --app-nav-active-text: #4a2310;
    --app-nav-branch: rgba(253, 186, 116, 0.9);
}

html[data-theme-palette="crimson"],
body[data-theme-palette="crimson"] {
    --app-accent-rgb: 220, 38, 38;
    --app-accent-600: #dc2626;
    --app-accent-700: #b91c1c;
    --app-accent-200: #fca5a5;
    --app-accent-soft: rgba(var(--app-accent-rgb), 0.16);
    --app-accent-soft-strong: rgba(var(--app-accent-rgb), 0.24);
    --app-accent-glow: rgba(var(--app-accent-rgb), 0.18);
    --app-accent-glow-alt: rgba(248, 113, 113, 0.14);
    --app-bg-body: radial-gradient(circle at top left, rgba(255, 255, 255, 0.38), transparent 25%), radial-gradient(circle at top right, rgba(252, 165, 165, 0.5), transparent 24%), linear-gradient(180deg, #fef2f2 0%, #fecaca 100%);
    --app-bg-page: radial-gradient(circle at top left, rgba(254, 202, 202, 0.62), transparent 28%), radial-gradient(circle at bottom right, rgba(248, 113, 113, 0.34), transparent 24%), linear-gradient(180deg, #fef2f2 0%, #fecaca 100%);
    --app-text-primary: #4a1417;
    --app-text-secondary: #7f3d44;
    --app-text-muted: #ad6670;
    --app-surface-1: rgba(255, 255, 255, 0.84);
    --app-surface-2: rgba(255, 250, 250, 0.97);
    --app-surface-panel: linear-gradient(135deg, rgba(255, 250, 250, 0.98) 0%, rgba(254, 226, 226, 0.92) 100%);
    --app-surface-panel-strong: linear-gradient(180deg, rgba(255, 250, 250, 0.99) 0%, rgba(254, 242, 242, 0.98) 100%);
    --app-border-soft: rgba(248, 113, 113, 0.2);
    --app-border-strong: rgba(var(--app-accent-rgb), 0.3);
    --app-shadow-soft: 0 18px 38px rgba(74, 20, 23, 0.14);
    --app-shadow-strong: 0 22px 44px rgba(74, 20, 23, 0.16);
    --app-nav-text: #4a1417;
    --app-nav-text-muted: #8d4c54;
    --app-nav-hover-bg: rgba(220, 38, 38, 0.08);
    --app-nav-active-bg: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.18) 0%, rgba(248, 113, 113, 0.12) 100%);
    --app-nav-active-border: rgba(var(--app-accent-rgb), 0.24);
    --app-nav-active-text: #4a1417;
    --app-nav-branch: rgba(252, 165, 165, 0.92);
}

html.theme-dark,
html.theme-dark body,
body.theme-dark {
    --app-bg-body: radial-gradient(circle at top left, var(--app-accent-glow) 0%, transparent 25%), radial-gradient(circle at top right, rgba(var(--app-accent-rgb), 0.12) 0%, transparent 24%), linear-gradient(180deg, #07111f 0%, #0f172a 100%);
    --app-bg-page: radial-gradient(circle at top left, rgba(var(--app-accent-rgb), 0.16) 0%, transparent 28%), radial-gradient(circle at bottom right, rgba(var(--app-accent-rgb), 0.1) 0%, transparent 24%), linear-gradient(180deg, #07111f 0%, #0f172a 100%);
    --app-text-primary: #f8fafc;
    --app-text-secondary: #94a3b8;
    --app-text-muted: #cbd5e1;
    --app-surface-1: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 32, 58, 0.88) 100%);
    --app-surface-2: rgba(15, 23, 42, 0.96);
    --app-surface-panel: linear-gradient(180deg, rgba(15, 23, 42, 0.86) 0%, rgba(15, 32, 58, 0.82) 100%);
    --app-surface-panel-strong: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 32, 58, 0.82) 100%);
    --app-border-soft: rgba(var(--app-accent-rgb), 0.18);
    --app-border-strong: rgba(var(--app-accent-rgb), 0.32);
    --app-shadow-soft: 0 18px 36px rgba(2, 6, 23, 0.34);
    --app-shadow-strong: 0 22px 44px rgba(2, 6, 23, 0.4);
    --app-nav-text: #e5e7eb;
    --app-nav-text-muted: #94a3b8;
    --app-nav-hover-bg: rgba(255, 255, 255, 0.05);
    --app-nav-active-bg: linear-gradient(135deg, rgba(var(--app-accent-rgb), 0.22) 0%, rgba(255, 255, 255, 0.04) 100%);
    --app-nav-active-border: rgba(var(--app-accent-rgb), 0.3);
    --app-nav-active-text: #eff6ff;
    --app-nav-branch: rgba(148, 163, 184, 0.18);
}

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
    background: var(--app-bg-body);
    color: var(--app-text-primary);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}

html.app-theme-switching *,
body.app-theme-switching * {
    transition: none !important;
}

.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}

.button-link {
    text-decoration: unset;
}

:where(
    .app-action-icon,
    .companies-button__icon,
    .party-button__icon,
    .process-button__icon,
    .users-button__icon,
    .vessel-button__icon
) {
    width: 0.875rem;
    height: 0.875rem;
    min-width: 0.875rem;
    min-height: 0.875rem;
    display: block;
    flex: 0 0 auto;
    fill: currentColor;
}

:where(
    .app-action-icon--image,
    .companies-button__icon--image,
    .party-button__icon--image,
    .process-button__icon--image,
    .users-button__icon--image,
    .vessel-button__icon--image
) {
    object-fit: contain;
}

.app-user-card__avatar-image,
.app-user-card__avatar-text {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    max-width: 34px;
    max-height: 34px;
    border-radius: 999px;
    flex: 0 0 34px;
}

.app-user-card__avatar-image {
    display: block;
    object-fit: cover;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title.title-secondary {
    padding: 0.313rem 0 0;
    color: var(--dxds-color-content-secondary-default-rest);
}

.title-header-text {
    font-size: var(--dxds-font-size-headline-lg);
    font-weight: var(--dxds-font-weight-headline-default);
    letter-spacing: var(--dxds-letter-spacing-headline-lg);
    line-height: var(--dxds-line-height-headline-lg);
}

.title-content-text {
    font-size: var(--dxds-font-size-base-lg);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-lg);
    line-height: var(--dxds-line-height-base-lg);
}

.main-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.block-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: auto;
    max-width: 100%;
    width: 31.25rem;
}

.or {
    align-items: center;
    display: flex;
    flex-direction: row;
    padding: 0.3125rem 0;
}

.or .or-line {
    opacity: 0.2;
    width: 100%;
    border-bottom: 1px solid var(--dxds-color-content-neutral-default-rest);
}

.or .or-text {
    padding: 0 0.625rem 0 0.625rem;
    font-size: var(--dxds-font-size-caption-md);
    line-height: var(--dxds-line-height-caption-md);
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.links-container {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.links-container .dot {
    border-radius: 50%;
    height: 0.3125rem;
    margin: 0 0.1875rem;
    opacity: 0.7;
    width: 0.3125rem;
    background-color: var(--dxds-color-surface-neutral-default-rest);
}

.manage-layout {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.info-message {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0.625rem 1rem 0.625rem 1rem;
    position: relative;
    background: var(--dxds-color-surface-info-subdued-rest);
}

.info-message.info-panel {
    margin-bottom: 0.625rem;
}

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.large-input {
    font-size: 1.875rem;
    height: 4.3125rem;
}

.title-content-text-secondary {
    font-size: var(--dxds-font-size-title-md);
    line-height: var(--dxds-line-height-title-md);
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.confirm-button {
    margin-top: 0.3125rem;
}

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

html.theme-dark .page {
    background: var(--app-bg-page);
}


html.theme-dark .drawer-content,
html.theme-dark .page-content-container,
body.theme-dark .drawer-content,
body.theme-dark .page-content-container {
    color: var(--app-text-primary);
}