@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap");

:root {
    --econt-ink: #0D0F10;
    --econt-forest: #14201B;
    --econt-green: #78927F;
    --econt-green-hover: #687D6E;
    --econt-gold: #C8A45D;
    --econt-light: #ECE9E2;
    --econt-cream: #F6F1E8;
    --econt-muted: #706D66;
    --econt-line: rgba(20, 32, 27, 0.16);
    --econt-danger: #8F3F3F;
    --econt-danger-soft: #F4E2DE;
    --econt-shadow: 0 18px 50px rgba(13, 15, 16, 0.14);
}

html {
    background: var(--econt-light);
}

body.econt-app {
    min-height: 100vh;
    color: var(--econt-ink);
    background:
        radial-gradient(circle at top left, rgba(200, 164, 93, 0.16), transparent 28rem),
        linear-gradient(180deg, var(--econt-cream) 0%, var(--econt-light) 100%) !important;
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
}

body.econt-app.econt-auth {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 20% 12%, rgba(200, 164, 93, 0.22), transparent 22rem),
        radial-gradient(circle at 80% 8%, rgba(120, 146, 127, 0.18), transparent 20rem),
        linear-gradient(145deg, #0D0F10 0%, #14201B 100%) !important;
}

body.econt-app.econt-auth::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 20% 12%, rgba(200, 164, 93, 0.22), transparent 22rem),
        radial-gradient(circle at 80% 8%, rgba(120, 146, 127, 0.18), transparent 20rem),
        linear-gradient(145deg, #0D0F10 0%, #14201B 100%);
}

.econt-app h1,
.econt-app h2,
.econt-app h3,
.econt-app .font-bold,
.econt-app .font-semibold {
    letter-spacing: 0;
}

.econt-app h1,
.econt-app h2,
.econt-app h3 {
    font-family: "Sora", "Manrope", system-ui, sans-serif;
}

.econt-app img[src*="logo"] {
    object-fit: contain;
}

.econt-app > .flex.justify-between.items-center,
.econt-app header,
.econt-app .econt-header {
    background: linear-gradient(135deg, var(--econt-ink), var(--econt-forest)) !important;
    color: var(--econt-light) !important;
    border-bottom: 1px solid rgba(200, 164, 93, 0.24);
    box-shadow: 0 12px 28px rgba(13, 15, 16, 0.18);
}

.econt-app > .flex.justify-between.items-center img,
.econt-app header img {
    max-height: 3.25rem;
}

.econt-app main,
.econt-app .max-w-2xl,
.econt-app .max-w-3xl,
.econt-app .max-w-4xl,
.econt-app .max-w-5xl,
.econt-app .max-w-6xl,
.econt-app .max-w-7xl {
    width: min(100% - 2rem, var(--max-width, 1180px));
}

.econt-app .bg-white,
.econt-app .bg-gray-50,
.econt-app .bg-gray-100,
.econt-app .bg-blue-50,
.econt-app .bg-sky-50 {
    background-color: rgba(246, 241, 232, 0.96) !important;
}

.econt-app .shadow,
.econt-app .shadow-md,
.econt-app .shadow-lg {
    box-shadow: var(--econt-shadow) !important;
}

.econt-app .rounded,
.econt-app .rounded-md,
.econt-app .rounded-lg,
.econt-app .rounded-xl {
    border-radius: 8px !important;
}

.econt-app .border,
.econt-app .border-gray-200,
.econt-app .border-gray-300,
.econt-app .border-blue-200,
.econt-app .border-blue-300,
.econt-app .border-sky-200 {
    border-color: var(--econt-line) !important;
}

.econt-app .text-blue-500,
.econt-app .text-blue-600,
.econt-app .text-blue-700,
.econt-app .text-blue-800,
.econt-app .text-sky-700 {
    color: var(--econt-green) !important;
}

.econt-app .bg-blue-500,
.econt-app .bg-blue-600,
.econt-app .bg-blue-700,
.econt-app .bg-blue-800,
.econt-app .bg-green-600,
.econt-app .bg-green-700 {
    background-color: var(--econt-green) !important;
    color: var(--econt-light) !important;
}

.econt-app .hover\:bg-blue-500:hover,
.econt-app .hover\:bg-blue-600:hover,
.econt-app .hover\:bg-blue-700:hover,
.econt-app .hover\:bg-blue-800:hover,
.econt-app .hover\:bg-green-600:hover,
.econt-app .hover\:bg-green-700:hover {
    background-color: var(--econt-green-hover) !important;
}

.econt-app .bg-blue-100,
.econt-app .bg-sky-100 {
    background-color: rgba(120, 146, 127, 0.16) !important;
}

.econt-app a {
    color: var(--econt-green);
    text-underline-offset: 3px;
}

.econt-app a:hover {
    color: var(--econt-forest);
}

.econt-app button,
.econt-app a[class*="bg-"],
.econt-app input[type="submit"] {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.econt-app button:hover,
.econt-app a[class*="bg-"]:hover,
.econt-app input[type="submit"]:hover {
    transform: translateY(-1px);
}

.econt-app input,
.econt-app select,
.econt-app textarea {
    background-color: #fffdf8 !important;
    border-color: rgba(20, 32, 27, 0.22) !important;
    color: var(--econt-ink) !important;
    border-radius: 8px !important;
}

.econt-app input:focus,
.econt-app select:focus,
.econt-app textarea:focus {
    outline: none !important;
    border-color: var(--econt-green) !important;
    box-shadow: 0 0 0 3px rgba(120, 146, 127, 0.22) !important;
}

.econt-app label {
    color: var(--econt-forest);
    font-weight: 700;
}

.econt-app table {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--econt-ink);
}

.econt-app thead,
.econt-app thead tr,
.econt-app th {
    background-color: var(--econt-forest) !important;
    color: var(--econt-light) !important;
}

.econt-app th {
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
}

.econt-app tbody tr {
    transition: background-color 140ms ease;
}

.econt-app tbody tr:hover {
    background-color: rgba(200, 164, 93, 0.12) !important;
}

.econt-app td {
    border-color: rgba(20, 32, 27, 0.1) !important;
}

.econt-app .bg-green-100,
.econt-app .text-green-800 {
    background-color: rgba(120, 146, 127, 0.18) !important;
    color: #304D38 !important;
}

.econt-app .bg-yellow-100,
.econt-app .bg-orange-100,
.econt-app .text-yellow-800,
.econt-app .text-orange-800 {
    background-color: rgba(200, 164, 93, 0.2) !important;
    color: #6D5424 !important;
}

.econt-app .bg-red-100,
.econt-app .text-red-700,
.econt-app .text-red-800 {
    background-color: var(--econt-danger-soft) !important;
    color: var(--econt-danger) !important;
}

.econt-app .bg-red-500,
.econt-app .bg-red-600,
.econt-app button.bg-red-500,
.econt-app button.bg-red-600,
.econt-app a.bg-red-500,
.econt-app a.bg-red-600 {
    background-color: var(--econt-danger) !important;
    color: var(--econt-light) !important;
}

.econt-app .hover\:bg-red-700:hover,
.econt-app .hover\:bg-red-600:hover {
    background-color: #7B3434 !important;
    color: var(--econt-light) !important;
}

.econt-app .bg-gray-200,
.econt-app .bg-gray-300 {
    background-color: rgba(13, 15, 16, 0.08) !important;
}

.econt-app .bg-white.text-gray-800,
.econt-app [id*="Dropdown"],
.econt-app [id*="dropdown"] {
    background-color: #fffdf8 !important;
    border: 1px solid var(--econt-line);
}

.econt-app [id*="Dropdown"] a:hover,
.econt-app [id*="dropdown"] a:hover {
    background-color: rgba(120, 146, 127, 0.12) !important;
}

.econt-app .text-gray-500,
.econt-app .text-gray-600,
.econt-app .text-gray-700 {
    color: var(--econt-muted) !important;
}

.econt-app .text-white {
    color: var(--econt-light) !important;
}

.econt-app .modal,
.econt-app [id*="modal"],
.econt-app [id*="Modal"] {
    color: var(--econt-ink);
}

.econt-app .fixed.inset-0 {
    backdrop-filter: blur(3px);
}

.econt-app .resize-handle,
.econt-app [class*="resize"] {
    accent-color: var(--econt-gold);
}

.econt-auth .auth-shell {
    width: min(100% - 2rem, 440px);
}

.econt-auth .auth-card {
    background: rgba(246, 241, 232, 0.96);
    border: 1px solid rgba(200, 164, 93, 0.26);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

.econt-auth .auth-logo-mark {
    background: var(--econt-cream);
    border: 1px solid rgba(200, 164, 93, 0.28);
}

.econt-auth .auth-logo-mark img {
    width: 5rem;
    height: 5rem;
}

.econt-auth > .auth-shell > img {
    width: 7rem;
    height: 7rem;
}

.econt-auth .auth-title {
    color: var(--econt-ink);
}

.econt-auth .auth-subtitle {
    color: var(--econt-muted);
}

@media (max-width: 768px) {
    .econt-app > .flex.justify-between.items-center,
    .econt-app header {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        gap: 0.75rem;
    }

    .econt-app table {
        min-width: 720px;
    }
}