/* index_reorganized.css */

/* --- CSS Variables & Setup --- */
:root {
    /* Colors */
    --primary: #FF6B00;
    --primary-hover: #e05e00;
    --secondary: #FFF4E6;
    --bg-light: #F9F5F1;
    --bg-dark: #121212;
    --card-light: #FFFFFF;
    --card-dark: #1E1E1E;
    --text-main: #1F2937;
    --text-muted: #6B7280;
    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;
    
    /* Chart Colors */
    --blue-500: #3B82F6;
    --blue-100: #DBEAFE;
    --purple-600: #9333EA;
    --purple-100: #F3E8FF;
    --orange-600: #EA580C;
    --orange-100: #FFEDD5;
    --green-600: #16A34A;
    --green-100: #DCFCE7;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --toast-bg: #333333;

    /* Spacing & Sizes */
    --header-height: 6rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

/* Dark Mode */
.dark {
    --bg-light: #121212;
    --card-light: #1E1E1E;
    --text-main: #F3F4F6;
    --text-muted: #9CA3AF;
    --gray-100: #1F2937;
    --secondary: #374151;
}

/* Reset */
* { box-sizing: border-box; -ms-overflow-style: none; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; }
body {
    margin: 0;
    font-family: 'Anuphan', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s;
}

/* --- Stats Grid --- */
.stats-grid {
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 1rem; 
    padding-bottom: 1.5rem; 
    padding-right: 0;
    flex-shrink: 0;
}
@media(min-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 1024px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width: 1280px) { .stats-grid { grid-template-columns: repeat(5, 1fr); } }

.stat-card {
    background-color: var(--card-light); padding: 1rem; border-radius: 1rem;
    box-shadow: var(--shadow-soft); display: flex; flex-direction: column; justify-content: space-between;
    height: 8rem; position: relative; overflow: hidden;
}
.stat-card.clickable { border: 2px dashed var(--gray-200); cursor: pointer; transition: border-color 0.2s; }
.stat-card.clickable:hover { border-color: rgba(255, 107, 0, 0.5); }

/* Decoration Circles */
.stat-bg-decoration {
    position: absolute; right: 0; top: 0; width: 6rem; height: 6rem;
    border-bottom-left-radius: 50%; margin-right: -1rem; margin-top: -1rem;
    transition: transform 0.3s;
}
.stat-card:hover .stat-bg-decoration { transform: scale(1.1); }
.stat-bg-decoration.green { background: linear-gradient(to bottom right, var(--green-100), transparent); }
.stat-bg-decoration.blue { background: linear-gradient(to bottom right, var(--blue-100), transparent); }
.stat-bg-decoration.orange { background: linear-gradient(to bottom right, var(--orange-100), transparent); }
.stat-bg-decoration.purple { background: linear-gradient(to bottom right, var(--purple-100), transparent); }

.stat-header { display: flex; align-items: center; gap: 0.75rem; z-index: 10; }
.stat-icon-box { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; }
.stat-icon-box.green { background-color: var(--green-100); color: var(--green-600); }
.stat-icon-box.blue { background-color: var(--blue-100); color: var(--blue-500); }
.stat-icon-box.orange { background-color: var(--orange-100); color: var(--orange-600); }
.stat-icon-box.purple { background-color: var(--purple-100); color: var(--purple-600); }
.stat-icon-box.gray { background-color: var(--gray-100); color: var(--gray-500); }

.stat-label { font-size: 0.875rem; color: var(--text-muted); }
.stat-body { margin-top: 0.5rem; z-index: 10; }
.stat-body.flex-end { display: flex; justify-content: space-between; align-items: flex-end; }
.stat-value { font-size: 1.5rem; font-weight: 700; margin: 0; font-family: 'Inter', sans-serif; }
.stat-value.lg { font-size: 1.875rem; }
.stat-trend { font-size: 0.75rem; display: flex; align-items: center; margin-top: 0.25rem; font-family: 'Inter', sans-serif; }
.stat-trend.positive { color: var(--success); }
.stat-subtext { font-size: 0.75rem; color: var(--gray-400); margin-top: 0.25rem; font-family: 'Inter', sans-serif; }
.link-btn { background: none; border: none; font-size: 0.75rem; color: var(--primary); cursor: pointer; }

/* --- Content Grid --- */
.content-grid {
    flex: 1; 
    overflow-y: auto; 
    padding-right: 0.5rem; 
    padding-bottom: 4rem; 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem;
}
@media(min-width: 1024px) {
    .content-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
    .col-span-2 { grid-column: span 2; }
    .col-span-full { grid-column: 1 / -1; }
}
@media(min-width: 1280px) { .content-grid { grid-template-columns: repeat(4, 1fr); } }

/* =================================================================
   Card Layout Style (ตัวกลาง)
   ================================================================= */
.content-card {
    background-color: var(--card-light);
    border-radius: 1rem;
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    /* การ์ดปกติ (เช่น Project Status) ให้ยืดเต็มเหมือนเดิม */
    height: 100%; 
    box-sizing: border-box;
    justify-content: space-between; 
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem; 
    flex-shrink: 0;
}
.card-title { font-size: 1.125rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.btn-xs { padding: 0.25rem 0.5rem; background-color: var(--gray-100); border-radius: 0.25rem; color: var(--gray-500); border: none; cursor: pointer; font-size: 0.75rem; }


/* Map */
.map-placeholder { height: 12rem; background-color: var(--gray-100); border-radius: 0.75rem; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.map-grid-bg { position: absolute; inset: 0; opacity: 0.2; background-image: radial-gradient(#ccc 1px, transparent 1px); background-size: 20px 20px; }
.map-content { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; }
.map-point { position: absolute; width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.point-1 { top: 25%; left: 25%; background-color: var(--primary); }
.point-1.ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0.7; }
.point-2 { bottom: 33%; right: 33%; background-color: var(--success); }
.point-3 { top: 50%; right: 25%; background-color: var(--danger); }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* Team Widget & Full Card (Keep Original) */
.team-list { display: flex; flex-direction: column; gap: 1rem; }
.full-card { background-color: var(--card-light); border-radius: 1rem; box-shadow: var(--shadow-soft); height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--gray-100); }
.full-card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--gray-100); background-color: var(--card-light); }
.full-card-body { flex: 1; overflow-y: auto; padding: 0; background-color: rgba(249, 245, 241, 0.5); }
.full-card-body.centered { padding: 2rem; }
.form-container { max-width: 48rem; margin: 0 auto; background-color: var(--card-light); border-radius: 0.75rem; padding: 2rem; border: 1px solid var(--gray-100); }
.full-card-footer { padding: 1.5rem; border-top: 1px solid var(--gray-100); display: flex; justify-content: flex-end; gap: 0.75rem; background-color: var(--card-light); }

/* =================================================================
   Finance & Cash Flow, aligned with Finance dashboard donut card
   ================================================================= */
#finance-widget-placeholder {
    min-width: 0;
    color: #333333;
}

#finance-widget-placeholder > div {
    height: 100%;
    padding: 1.25rem !important;
    border: 1px solid #f1f5f9;
    border-radius: 1rem !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

#finance-widget-placeholder h3 {
    margin: 0 0 1rem 0 !important;
    color: #333333 !important;
    font-family: 'Anuphan', sans-serif;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1.35;
}

#finance-widget-placeholder .flex-1 {
    min-height: 136px;
}

#finance-widget-placeholder .w-32.h-32 {
    width: 8rem !important;
    height: 8rem !important;
    border: 6px solid #f9f9f9 !important;
    background: conic-gradient(#fc5b08 0% 65%, #e04f05 65% 100%) !important;
    box-shadow: inset 0 0 0 1px #f1f5f9;
}

#finance-widget-placeholder .w-32.h-32 > .absolute {
    background: #ffffff !important;
    box-shadow: 0 0 0 1px #f1f5f9;
}

#finance-widget-placeholder .text-xs {
    color: #666666 !important;
    font-family: 'Anuphan', sans-serif;
    font-size: 0.75rem !important;
}

#finance-widget-placeholder .font-bold.text-sm,
#finance-widget-placeholder .font-bold {
    color: #333333 !important;
    font-family: 'Inter', 'Anuphan', sans-serif;
    font-weight: 800 !important;
}

#finance-widget-placeholder .font-bold.text-sm::after {
    content: "";
    display: block;
    width: 16px;
    height: 3px;
    margin: 4px auto 0;
    border-radius: 999px;
    background: #d0ff2c;
}

#finance-widget-placeholder .mt-4 {
    margin-top: 1rem !important;
}

#finance-widget-placeholder .space-y-2 > * + * {
    margin-top: 0.625rem !important;
}

#finance-widget-placeholder .flex.justify-between.text-xs {
    color: #333333 !important;
    font-family: 'Anuphan', sans-serif;
}

#finance-widget-placeholder .flex.justify-between.text-xs span:first-child {
    color: #666666 !important;
    font-weight: 600;
}

#finance-widget-placeholder .flex.justify-between.text-xs span:last-child {
    color: #333333 !important;
    font-family: 'Inter', 'Anuphan', sans-serif;
    font-weight: 800 !important;
}

#finance-widget-placeholder .w-2.h-2.rounded-full {
    width: 0.75rem !important;
    height: 0.75rem !important;
}

#finance-widget-placeholder .bg-green-500 {
    background: #fc5b08 !important;
}

#finance-widget-placeholder .bg-red-500 {
    background: #e04f05 !important;
}

#finance-widget-placeholder .pt-2.border-t {
    margin-top: 0.875rem !important;
    padding-top: 0.875rem !important;
    border-top: 1px solid #f1f5f9 !important;
}

#finance-widget-placeholder .text-primary {
    color: #fc5b08 !important;
}

#finance-widget-placeholder .w-full.bg-gray-200 {
    height: 0.375rem !important;
    overflow: hidden;
    border-radius: 999px !important;
    background: #f1f5f9 !important;
}

#finance-widget-placeholder .w-full.bg-gray-200 > .bg-primary {
    height: 100% !important;
    border-radius: inherit !important;
    background: #fc5b08 !important;
}

/* =================================================================
   Project Status Snapshot, aligned with Finance dashboard table cards
   ================================================================= */
#project-status-placeholder {
    min-width: 0;
    color: #333333;
}

#project-status-placeholder > div {
    height: 100%;
    padding: 1.25rem !important;
    border: 1px solid #f1f5f9;
    border-radius: 1rem !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

#project-status-placeholder > div > .flex:first-child {
    align-items: center !important;
    margin-bottom: 1.25rem !important;
    gap: 1rem;
}

#project-status-placeholder h3 {
    margin: 0;
    color: #333333;
    font-family: 'Anuphan', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
}

#project-status-placeholder button {
    border: 1px solid #fed7aa !important;
    border-radius: 0.5rem !important;
    background: #fff7ed !important;
    color: #fc5b08 !important;
    font-family: 'Anuphan', sans-serif;
    font-size: 0.75rem !important;
    font-weight: 700;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#project-status-placeholder button:hover {
    background: #ffedd5 !important;
    border-color: #fdba74 !important;
    color: #e04f05 !important;
}

#project-status-placeholder .overflow-x-auto {
    margin-top: 1rem;
    overflow-x: auto;
    border-radius: 0.75rem;
}

#project-status-placeholder table {
    width: 100%;
    border-collapse: collapse;
    color: #333333;
    font-family: 'Anuphan', sans-serif;
    font-size: 0.875rem;
}

#project-status-placeholder thead {
    background: transparent !important;
}

#project-status-placeholder thead tr {
    border: none;
}

#project-status-placeholder thead th {
    padding: 0.75rem 1rem !important;
    background: #f9f9f9 !important;
    color: #666666 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
    vertical-align: middle;
}

#project-status-placeholder thead th:first-child {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

#project-status-placeholder thead th:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

#project-status-placeholder tbody {
    border-color: #f1f5f9 !important;
}

#project-status-placeholder tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s ease;
}

#project-status-placeholder tbody tr:last-child {
    border-bottom: none;
}

#project-status-placeholder tbody tr:hover {
    background: #f9f9f9 !important;
}

#project-status-placeholder td {
    padding: 0.875rem 1rem !important;
    color: #333333;
    vertical-align: middle;
}

#project-status-placeholder td:first-child {
    font-weight: 500;
}

#project-status-placeholder td .material-icons-round {
    color: #666666 !important;
    font-size: 1rem !important;
}

#project-status-placeholder td .w-full {
    min-width: 64px;
    height: 0.375rem !important;
    border-radius: 9999px !important;
    background: #f1f5f9 !important;
    overflow: hidden;
}

#project-status-placeholder td .w-full > div {
    height: 100% !important;
    border-radius: inherit !important;
}

#project-status-placeholder .bg-primary {
    background-color: #fc5b08 !important;
}

#project-status-placeholder .bg-warning {
    background-color: #e04f05 !important;
}

#project-status-placeholder .bg-red-500 {
    background-color: #e04f05 !important;
}

#project-status-placeholder td span.text-xs.font-sans {
    min-width: 2.25rem;
    color: #333333;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-align: right;
}

#project-status-placeholder td > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.25;
    white-space: nowrap;
    border: 1px solid transparent;
}

#project-status-placeholder td > span[class*="green"] {
    background: #f9f9f9 !important;
    border-color: #d0ff2c !important;
    color: #333333 !important;
}

#project-status-placeholder td > span[class*="yellow"] {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: #e04f05 !important;
}

#project-status-placeholder td > span[class*="red"] {
    background: #fff7ed !important;
    border-color: #e04f05 !important;
    color: #e04f05 !important;
}