thankcard-system/resources/css/app.css

@font-face {
    font-family: 'SVN-Poppins-Regular';
    src: url('/fonts/FZ Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Poppins-Medium';
    src: url('/fonts/FZ Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Poppins-SemiBold';
    src: url('/fonts/FZ Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('/fonts/FZ Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('/fonts/FZ Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('/fonts/FZ Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Poppins';
    src: url('/fonts/FZ Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";
@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'SVN-Poppins', 'SVN-Poppins-SemiBold', 'SVN-Poppins-Regular', 'SVN-Poppins-Medium', 'Roboto', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --color-primary: #0f4c81;
    --color-primary-hover: #0a3356;
    --color-primary-light: #e8f0fe;
    --color-secondary: #ef222e;
    --color-success: #2e7d32;
    --color-warning: #ed6c02;
    --color-info: #0288d1;
    
    --color-bg-main: #f0f4f9;
    --color-bg-sidebar: #ffffff;
    --color-bg-card: #ffffff;
    --color-bg-card-soft: #eef2f6;
    
    --color-border-light: #e2e8f0;
    --color-border-medium: #cbd5e1;
    
    --color-text-dark: #1e293b;
    --color-text-medium: #475569;
    --color-text-light: #64748b;
    --color-text-muted: #94a3b8;
    
    --color-calendar-header: #4b729f;

    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-sidebar: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    --shadow-header: 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

@layer base {
    body {
        @apply bg-bg-main text-text-dark antialiased;
    }
}

.app-layout {
    @apply min-h-screen flex bg-bg-main;
}

.sidebar {
    @apply w-60 bg-bg-sidebar border-r border-border-light flex flex-col justify-between shrink-0 shadow-sidebar transition-all duration-300;
}

.main-content {
    @apply flex-1 flex flex-col min-w-0;
}

.top-header {
    @apply h-16 bg-bg-sidebar border-b border-border-light flex items-center justify-between px-6 shadow-header;
}

.sidebar-link {
    @apply flex items-center gap-3 px-4 py-3 text-text-medium font-medium rounded-lg hover:bg-gray-50 hover:text-primary transition-all duration-200;
}

.sidebar-link-active {
    @apply text-primary bg-primary-light font-bold;
}

.card-stat {
    @apply bg-bg-card-soft text-primary p-5 rounded-lg border border-transparent shadow-card relative overflow-hidden transition-all duration-200 hover:shadow-md;
}

.card-stat-active {
    @apply bg-primary text-white p-5 rounded-lg border border-transparent shadow-card relative overflow-hidden transition-all duration-200 hover:shadow-md;
}

.card-stat::after, .card-stat-active::after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 76, 129, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.card-stat-active::after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
}

.calendar-card {
    @apply bg-bg-card rounded-lg shadow-card border border-border-light overflow-hidden;
}

.calendar-header {
    @apply grid grid-cols-7 bg-calendar-header text-white font-bold text-center py-3;
}

.calendar-grid {
    @apply grid grid-cols-7 border-t border-l border-border-light;
}

.calendar-day {
    @apply bg-bg-card border-r border-b border-border-light min-h-[100px] p-2 flex flex-col justify-between transition-colors duration-150 hover:bg-gray-50;
}

.calendar-day-weekend {
    @apply bg-gray-50;
}

/* --- FORM DESIGN SYSTEM --- */
.form-container {
    @apply w-full max-w-[1100px] mx-auto bg-white rounded-xl shadow-sm border border-[#d9dfe7] overflow-hidden;
}

.form-header {
    @apply px-6 py-6 sm:px-8 sm:py-8 border-b border-[#d9dfe7] flex items-center justify-between;
}

.form-header-title {
    @apply text-[24px] sm:text-[32px] font-[600] text-text-dark leading-tight;
}

.form-body {
    @apply p-6 sm:p-8; /* 32px top/bottom card padding */
}

.form-group {
    @apply mb-6 relative; /* 24px gap */
}

.form-label {
    @apply block text-[16px] font-[600] text-text-dark mb-2; /* 8px label gap */
}

/* Standard Input & Select */
.form-input {
    @apply w-full h-[48px] px-4 bg-white border border-[#d9dfe7] rounded-lg outline-none text-text-dark text-base placeholder-text-muted focus:border-primary focus:ring-2 focus:ring-primary/20 hover:border-gray-400 transition-all duration-200 shadow-sm;
}

select.form-input {
    @apply appearance-none pr-10 cursor-pointer bg-no-repeat;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-size: 1.25em 1.25em;
}

.form-input[type="checkbox"] {
    @apply w-5 h-5 min-h-0 text-primary border-[#d9dfe7] rounded focus:ring-primary focus:ring-2 focus:ring-offset-1 cursor-pointer transition-colors hover:border-gray-400;
}

.form-input-with-icon {
    @apply pl-11;
}

.form-input-icon {
    @apply absolute left-4 text-text-light pointer-events-none w-5 h-5 flex items-center justify-center;
}

.form-input-group {
    @apply relative flex items-center w-full;
}

.form-actions {
    @apply mt-2 flex flex-col sm:flex-row justify-end gap-4;
}

.form-footer {
    @apply px-6 py-6 sm:px-8 sm:py-6 border-t border-[#d9dfe7] bg-gray-50/30 flex flex-col sm:flex-row justify-end gap-3;
}

.helper-text {
    @apply text-[14px] text-text-muted mt-2 leading-snug block;
}

.error-text {
    @apply text-red-500 text-[14px] font-semibold mt-2 block;
}

/* Action Buttons */
.btn-primary {
    @apply bg-primary hover:bg-primary-hover text-white font-[600] h-[45px] max-h-[45px] px-8 border border-transparent rounded-lg shadow-sm transition-all duration-200 text-center cursor-pointer inline-flex items-center justify-center focus:ring-2 focus:ring-offset-1 focus:ring-primary/50 box-border;
}

.btn-secondary {
    @apply bg-white hover:bg-gray-50 text-text-medium border border-[#d9dfe7] font-[600] h-[45px] max-h-[45px] px-8 rounded-lg shadow-sm transition-all duration-200 text-center cursor-pointer inline-flex items-center justify-center focus:ring-2 focus:ring-offset-1 focus:ring-gray-200 box-border;
}

.nav-badge {
    @apply bg-secondary text-white text-[10px] font-bold px-1.5 py-0.5 rounded-md uppercase ml-2 animate-pulse;
}

.notification-badge {
    @apply absolute -top-1 -right-1 bg-secondary text-white text-[10px] font-bold w-4.5 h-4.5 rounded-full flex items-center justify-center;
}