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

:root {
    --tida-orange: #ff6a00;
    --tida-orange-500: #ff8a33;
    --tida-orange-400: #ff9a4c;
    --tida-orange-300: #ffc2a0;
    --tida-orange-200: #ffd6b5;
    --tida-orange-700: #e04d00;
    --tida-orange-600: #cc3400;
    --tida-orange-800: #9c2d00;
    --tida-charcoal: #1e1e1e;
    --tida-light-gray: #f3f4f6;
    --tida-white: #ffffff;
    --tida-success: #16a34a;
    --tida-info: #2563eb;
    --tida-warning: #f59e0b;
    --tida-danger: #dc2626;
    --tida-border: #e5e7eb;
    --tida-muted: #6b7280;
    --tida-radius-sm: 4px;
    --tida-radius-md: 12px;
    --tida-radius-lg: 16px;
    --tida-shadow-sm: 0 1px 2px rgba(30, 30, 30, 0.06);
    --tida-shadow-md: 0 8px 24px rgba(30, 30, 30, 0.10);
    --tida-shadow-lg: 0 18px 48px rgba(30, 30, 30, 0.14);
}

html,
body {
    font-family: "Segoe UI", "Sarabun", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body {
    color: var(--tida-charcoal);
    background-color: var(--tida-light-gray);
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font-family: inherit !important;
}

::selection {
    color: var(--tida-white);
    background: var(--tida-orange);
}

:focus-visible {
    outline: 2px solid rgba(255, 106, 0, 0.45);
    outline-offset: 2px;
}

.tida-brand-text {
    color: var(--tida-orange);
}

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

.tida-surface {
    background: var(--tida-white);
    border: 1px solid var(--tida-border);
    box-shadow: var(--tida-shadow-sm);
}

.tida-card {
    background: var(--tida-white);
    border: 1px solid var(--tida-border);
    border-radius: var(--tida-radius-md);
    box-shadow: var(--tida-shadow-sm);
}

.tida-card-elevated {
    background: var(--tida-white);
    border: 1px solid rgba(229, 231, 235, 0.85);
    border-radius: var(--tida-radius-md);
    box-shadow: var(--tida-shadow-md);
}

.tida-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--tida-white);
    background: linear-gradient(180deg, var(--tida-orange), var(--tida-orange-700));
    border: 1px solid rgba(224, 77, 0, 0.65);
    border-radius: var(--tida-radius-sm);
    box-shadow: 0 8px 18px rgba(255, 106, 0, 0.24);
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.tida-btn-primary:hover {
    filter: brightness(1.03);
    box-shadow: 0 10px 24px rgba(255, 106, 0, 0.30);
}

.tida-btn-primary:active {
    transform: translateY(1px);
}

.tida-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--tida-orange-700);
    background: linear-gradient(180deg, #fff4ed, var(--tida-orange-200));
    border: 1px solid rgba(255, 154, 76, 0.35);
    border-radius: var(--tida-radius-sm);
    font-weight: 600;
}

.tida-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--tida-orange-700);
    background: var(--tida-white);
    border: 1px solid var(--tida-orange);
    border-radius: var(--tida-radius-sm);
    font-weight: 600;
}

.tida-input,
.tida-select,
.tida-textarea {
    width: 100%;
    color: var(--tida-charcoal);
    background: var(--tida-white);
    border: 1px solid #d1d5db;
    border-radius: var(--tida-radius-sm);
    box-shadow: inset 0 1px 1px rgba(30, 30, 30, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tida-input:focus,
.tida-select:focus,
.tida-textarea:focus {
    border-color: var(--tida-orange-500);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.14);
    outline: none;
}

.tida-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.tida-badge-success {
    color: #166534;
    background: #dcfce7;
}

.tida-badge-warning {
    color: #92400e;
    background: #fef3c7;
}

.tida-badge-danger {
    color: #991b1b;
    background: #fee2e2;
}

.tida-badge-info {
    color: #1d4ed8;
    background: #dbeafe;
}

.tida-admin-shell {
    background:
        linear-gradient(180deg, rgba(255, 214, 181, 0.22), rgba(243, 244, 246, 0) 18rem),
        var(--tida-light-gray);
}

.tida-admin-sidebar {
    background:
        linear-gradient(180deg, #a8451d 0%, #8a3517 52%, #632513 100%) !important;
    box-shadow: 10px 0 28px rgba(156, 45, 0, 0.22);
}

.tida-admin-sidebar-header {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.tida-admin-sidebar .text-gray-300,
.tida-admin-sidebar .text-gray-400,
.tida-admin-sidebar .text-gray-500,
.tida-admin-sidebar .text-gray-600,
.tida-admin-sidebar .text-indigo-200,
.tida-admin-sidebar .text-indigo-300,
.tida-admin-sidebar .text-indigo-400,
.tida-tenant-sidebar .text-gray-300,
.tida-tenant-sidebar .text-gray-400,
.tida-tenant-sidebar .text-gray-500,
.tida-tenant-sidebar .text-gray-600,
.tida-tenant-sidebar .text-indigo-200,
.tida-tenant-sidebar .text-indigo-300,
.tida-tenant-sidebar .text-indigo-400 {
    color: rgba(255, 255, 255, 0.78) !important;
}

.tida-admin-sidebar .nav-group-toggle,
.tida-tenant-sidebar .nav-group-toggle {
    color: rgba(255, 255, 255, 0.62) !important;
}

.tida-admin-sidebar .nav-group-toggle i,
.tida-admin-sidebar .nav-group-toggle span,
.tida-tenant-sidebar .nav-group-toggle i,
.tida-tenant-sidebar .nav-group-toggle span {
    color: rgba(255, 255, 255, 0.62) !important;
}

.tida-admin-sidebar .nav-chevron,
.tida-tenant-sidebar .nav-chevron {
    color: rgba(255, 255, 255, 0.52) !important;
}

.tida-admin-sidebar a:not([href*="logout.php"]),
.tida-tenant-sidebar a:not([href*="logout.php"]) {
    color: rgba(255, 255, 255, 0.86) !important;
}

.tida-admin-sidebar a:not([href*="logout.php"]) i,
.tida-tenant-sidebar a:not([href*="logout.php"]) i {
    color: rgba(255, 255, 255, 0.74) !important;
}

.tida-admin-sidebar a:not([href*="logout.php"]):hover,
.tida-admin-sidebar a:not([href*="logout.php"]):hover i,
.tida-tenant-sidebar a:not([href*="logout.php"]):hover,
.tida-tenant-sidebar a:not([href*="logout.php"]):hover i {
    color: var(--tida-white) !important;
}

.tida-admin-sidebar .bg-red-500,
.tida-tenant-sidebar .bg-red-500 {
    color: var(--tida-orange-800) !important;
    background: var(--tida-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.72);
}

.tida-admin-sidebar a[href*="logout.php"],
.tida-tenant-sidebar a[href*="logout.php"] {
    color: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.tida-admin-sidebar a[href*="logout.php"] i,
.tida-tenant-sidebar a[href*="logout.php"] i {
    color: rgba(255, 255, 255, 0.70) !important;
}

.tida-admin-sidebar a[href*="logout.php"]:hover,
.tida-admin-sidebar a[href*="logout.php"]:hover i,
.tida-tenant-sidebar a[href*="logout.php"]:hover,
.tida-tenant-sidebar a[href*="logout.php"]:hover i {
    color: var(--tida-white) !important;
}

.tida-admin-shell .bg-gray-700 {
    background-color: rgba(255, 255, 255, 0.22) !important;
}

.tida-admin-shell .hover\:bg-gray-700:hover {
    background-color: rgba(255, 255, 255, 0.16) !important;
}

.tida-admin-shell .border-indigo-400 {
    border-color: rgba(255, 255, 255, 0.86) !important;
}

.tida-admin-shell .border-indigo-100,
.tida-admin-shell .border-indigo-200,
.tida-admin-shell .border-indigo-300,
.tida-admin-shell .border-indigo-400,
.tida-admin-shell .border-indigo-500 {
    border-color: var(--tida-orange-300) !important;
}

.tida-admin-shell .text-indigo-600,
.tida-login-page .text-indigo-600 {
    color: var(--tida-orange-700) !important;
}

.tida-admin-shell .text-indigo-500,
.tida-login-page .text-indigo-500 {
    color: var(--tida-orange) !important;
}

.tida-admin-shell .text-indigo-700,
.tida-login-page .text-indigo-700 {
    color: var(--tida-orange-800) !important;
}

.tida-admin-shell .bg-indigo-50,
.tida-login-page .bg-indigo-50 {
    background-color: #fff4ed !important;
}

.tida-admin-shell .bg-indigo-600,
.tida-login-page .bg-indigo-600,
.tida-admin-shell .bg-blue-600,
.tida-admin-shell .bg-cyan-600 {
    background: linear-gradient(180deg, var(--tida-orange), var(--tida-orange-700)) !important;
}

.tida-admin-shell .hover\:bg-indigo-700:hover,
.tida-login-page .hover\:bg-indigo-700:hover,
.tida-admin-shell .hover\:bg-blue-700:hover,
.tida-admin-shell .hover\:bg-cyan-700:hover {
    background: linear-gradient(180deg, var(--tida-orange-500), var(--tida-orange-700)) !important;
}

.tida-admin-shell .focus\:ring-indigo-500:focus,
.tida-login-page .focus\:ring-indigo-500:focus,
.tida-admin-shell .focus\:ring-blue-500:focus,
.tida-admin-shell .focus\:ring-cyan-500:focus {
    --tw-ring-color: rgba(255, 106, 0, 0.26) !important;
}

.tida-admin-shell .focus\:border-indigo-500:focus,
.tida-login-page .focus\:border-indigo-500:focus,
.tida-admin-shell .focus\:border-blue-500:focus,
.tida-admin-shell .focus\:border-cyan-500:focus {
    border-color: var(--tida-orange-500) !important;
}

.tida-admin-shell .text-blue-500,
.tida-admin-shell .text-blue-600,
.tida-admin-shell .text-blue-700,
.tida-admin-shell .text-cyan-500,
.tida-admin-shell .text-cyan-600,
.tida-admin-shell .text-cyan-700,
.tida-admin-shell .text-indigo-50,
.tida-admin-shell .text-indigo-100,
.tida-admin-shell .text-indigo-200,
.tida-admin-shell .text-indigo-300,
.tida-admin-shell .text-indigo-400,
.tida-admin-shell .text-indigo-500,
.tida-admin-shell .text-indigo-600,
.tida-admin-shell .text-indigo-700 {
    color: var(--tida-orange-700) !important;
}

.tida-admin-shell .bg-blue-50,
.tida-admin-shell .bg-cyan-50,
.tida-admin-shell .bg-indigo-50,
.tida-admin-shell .bg-indigo-100 {
    background-color: #fff4ed !important;
}

.tida-admin-shell .border-blue-100,
.tida-admin-shell .border-blue-200,
.tida-admin-shell .border-cyan-100,
.tida-admin-shell .border-cyan-200,
.tida-admin-shell .border-indigo-100,
.tida-admin-shell .border-indigo-200 {
    border-color: var(--tida-orange-200) !important;
}

.tida-admin-bottom-nav {
    box-shadow: 0 -8px 22px rgba(30, 30, 30, 0.08);
}

.tida-login-page {
    background:
        radial-gradient(circle at top left, rgba(255, 106, 0, 0.16), transparent 24rem),
        linear-gradient(180deg, #fff7f1, var(--tida-light-gray));
}

.tida-login-card {
    border: 1px solid rgba(255, 154, 76, 0.18);
    border-radius: var(--tida-radius-lg);
    box-shadow: var(--tida-shadow-lg);
}

.tida-tenant-shell,
.tida-liff-shell,
.tida-public-invoice {
    background:
        linear-gradient(180deg, rgba(255, 214, 181, 0.20), rgba(243, 244, 246, 0) 16rem),
        var(--tida-light-gray) !important;
}

.tida-tenant-sidebar {
    background:
        linear-gradient(180deg, #a8451d 0%, #8a3517 52%, #632513 100%) !important;
    box-shadow: 10px 0 28px rgba(156, 45, 0, 0.20);
}

.tida-tenant-sidebar-header {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.tida-tenant-shell .bg-indigo-800 {
    background-color: rgba(255, 255, 255, 0.22) !important;
}

.tida-tenant-shell .hover\:bg-indigo-800:hover {
    background-color: rgba(255, 255, 255, 0.16) !important;
}

.tida-tenant-shell .border-indigo-300 {
    border-color: rgba(255, 255, 255, 0.86) !important;
}

.tida-tenant-shell .text-indigo-200,
.tida-tenant-shell .text-indigo-300,
.tida-tenant-shell .text-indigo-400 {
    color: rgba(255, 255, 255, 0.72) !important;
}

.tida-tenant-shell .text-indigo-600,
.tida-tenant-shell .text-indigo-700,
.tida-liff-shell .text-green-600,
.tida-liff-shell .text-indigo-600,
.tida-liff-shell .text-indigo-700,
.tida-liff-auth .text-cyan-600,
.tida-liff-auth .hover\:text-cyan-600:hover,
.tida-public-invoice .text-indigo-600 {
    color: var(--tida-orange-700) !important;
}

.tida-tenant-shell .bg-indigo-50,
.tida-liff-shell .bg-indigo-50,
.tida-liff-shell .bg-green-50,
.tida-liff-auth .bg-cyan-50 {
    background-color: #fff4ed !important;
}

.tida-tenant-shell .bg-indigo-100,
.tida-liff-shell .bg-indigo-100 {
    background-color: var(--tida-orange-200) !important;
}

.tida-tenant-shell .bg-indigo-600,
.tida-liff-shell .bg-indigo-600,
.tida-liff-auth .bg-indigo-600,
.tida-liff-auth .bg-cyan-600,
.tida-public-invoice .bg-indigo-600 {
    background: linear-gradient(180deg, var(--tida-orange), var(--tida-orange-700)) !important;
}

.tida-tenant-shell .hover\:bg-indigo-700:hover,
.tida-liff-shell .hover\:bg-indigo-700:hover,
.tida-liff-auth .hover\:bg-indigo-700:hover,
.tida-liff-auth .hover\:bg-cyan-700:hover {
    background: linear-gradient(180deg, var(--tida-orange-500), var(--tida-orange-700)) !important;
}

.tida-tenant-shell .focus\:ring-indigo-500:focus,
.tida-liff-shell .focus\:ring-indigo-500:focus,
.tida-liff-auth .focus\:ring-indigo-500:focus,
.tida-liff-auth .focus\:ring-cyan-500:focus {
    --tw-ring-color: rgba(255, 106, 0, 0.26) !important;
}

.tida-tenant-shell .focus\:border-indigo-500:focus,
.tida-liff-shell .focus\:border-indigo-500:focus,
.tida-liff-auth .focus\:border-indigo-500:focus,
.tida-liff-auth .focus\:border-cyan-500:focus {
    border-color: var(--tida-orange-500) !important;
}

.tida-tenant-bottom-nav,
.tida-liff-bottom-nav {
    box-shadow: 0 -8px 22px rgba(30, 30, 30, 0.08);
}

.tida-liff-bottom-nav .bg-green-500 {
    background-color: var(--tida-orange) !important;
}

.tida-liff-auth {
    background:
        radial-gradient(circle at top left, rgba(255, 106, 0, 0.20), transparent 18rem),
        linear-gradient(135deg, var(--tida-orange) 0%, var(--tida-orange-700) 52%, var(--tida-charcoal) 100%) !important;
    min-height: 100vh;
}

.tida-liff-auth .input-focus:focus {
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.20) !important;
}

.tida-liff-auth .text-cyan-100 {
    color: #fff1e8 !important;
}

.tida-liff-auth .text-cyan-500,
.tida-liff-auth .text-cyan-600 {
    color: var(--tida-orange) !important;
}

.tida-public-invoice .tida-invoice-card {
    border: 1px solid rgba(255, 154, 76, 0.18);
    border-radius: var(--tida-radius-lg);
    box-shadow: var(--tida-shadow-lg);
}

.tida-public-invoice .tida-invoice-header {
    background:
        linear-gradient(180deg, var(--tida-orange), var(--tida-orange-700)) !important;
}

.tida-public-invoice .text-indigo-200 {
    color: #fff1e8 !important;
}