/* =========================================
   Dashboard — Premium Bento Grid
   ========================================= */

/* ---------- Bento Grid Layout ---------- */
.dashboard-bento {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto;
   gap: 16px;
   grid-template-areas:
      "greeting  greeting  greeting"
      "summary   tasks     schedule"
      "habits    ai        ai"
      "stats     ai        ai";
}

/* ---------- Base Card ---------- */
.bento-card {
   background: var(--card-bg);
   border: 1px solid var(--card-border);
   border-radius: 16px;
   padding: 22px;
   transition: border-color var(--transition), box-shadow var(--transition);
}

.bento-card:hover {
   border-color: rgba(255, 255, 255, 0.1);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.bento-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 18px;
}

.bento-card-title {
   font-size: 0.82rem;
   font-weight: 600;
   color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.6px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.bento-badge {
   background: var(--accent);
   color: #fff;
   font-size: 0.7rem;
   font-weight: 700;
   padding: 2px 9px;
   border-radius: 20px;
   min-width: 22px;
   text-align: center;
}

.bento-refresh-btn {
   background: none;
   border: 1px solid var(--card-border);
   border-radius: 8px;
   padding: 6px;
   cursor: pointer;
   color: var(--text-secondary);
   transition: all var(--transition);
   display: flex;
   align-items: center;
   justify-content: center;
}

.bento-refresh-btn:hover {
   color: var(--text-primary);
   border-color: rgba(255, 255, 255, 0.15);
}

.bento-refresh-btn svg {
   width: 16px;
   height: 16px;
}

.bento-refresh-btn.spinning svg {
   animation: spin 0.8s linear infinite;
}

/* ---------- Grid Areas ---------- */
.bento-greeting {
   grid-area: greeting;
}

.bento-summary {
   grid-area: summary;
}

.bento-tasks {
   grid-area: tasks;
}

.bento-schedule {
   grid-area: schedule;
}

.bento-habits {
   grid-area: habits;
}

.bento-ai {
   grid-area: ai;
}

.bento-stats {
   grid-area: stats;
}

/* ---------- 1. Karşılama Kartı ---------- */
.bento-greeting {
   background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(16, 185, 129, 0.12) 50%, rgba(139, 92, 246, 0.1) 100%);
   border-color: rgba(99, 102, 241, 0.2);
   padding: 16px 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.greeting-content {
   display: flex;
   align-items: center;
   gap: 18px;
}

.greeting-icon {
   width: 50px;
   height: 50px;
   border-radius: 14px;
   background: rgba(99, 102, 241, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.greeting-icon svg {
   width: 26px;
   height: 26px;
   color: #818cf8;
}

.greeting-text-wrap h3 {
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--text-primary);
   margin-bottom: 2px;
}

.greeting-text-wrap p {
   font-size: 0.85rem;
   color: var(--text-secondary);
}

.greeting-quote {
   font-size: 0.82rem;
   color: var(--text-secondary);
   font-style: italic;
   max-width: 340px;
   text-align: right;
   line-height: 1.5;
}

/* ---------- 2. Bugünün Özeti ---------- */
.summary-body {
   display: flex;
   align-items: center;
   gap: 24px;
}

.summary-ring {
   position: relative;
   width: 100px;
   height: 100px;
   flex-shrink: 0;
}

.summary-ring svg {
   width: 100%;
   height: 100%;
   transform: rotate(-90deg);
}

.ring-bg {
   fill: none;
   stroke: rgba(255, 255, 255, 0.06);
   stroke-width: 8;
}

.ring-fill {
   fill: none;
   stroke: var(--accent);
   stroke-width: 8;
   stroke-linecap: round;
   stroke-dasharray: 314.16;
   stroke-dashoffset: 314.16;
   transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.ring-label {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.3rem;
   font-weight: 700;
   color: var(--text-primary);
}

.summary-stats {
   display: flex;
   flex-direction: column;
   gap: 12px;
   flex: 1;
}

.summary-stat {
   display: flex;
   flex-direction: column;
}

.summary-stat-val {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.summary-stat-label {
   font-size: 0.72rem;
   color: var(--text-secondary);
   margin-top: 1px;
}

/* ---------- 3. Hızlı Görevler ---------- */
.dash-tasks-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   max-height: 260px;
   overflow-y: auto;
}

.dash-task-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 12px;
   border-radius: 10px;
   cursor: pointer;
   transition: background var(--transition);
}

.dash-task-item:hover {
   background: rgba(255, 255, 255, 0.04);
}

.dash-task-check {
   width: 20px;
   height: 20px;
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 6px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition);
   cursor: pointer;
}

.dash-task-check:hover {
   border-color: var(--accent);
   background: rgba(16, 185, 129, 0.1);
}

.dash-task-check.checked {
   background: var(--accent);
   border-color: var(--accent);
}

.dash-task-check.checked svg {
   opacity: 1;
}

.dash-task-check svg {
   width: 12px;
   height: 12px;
   stroke: #fff;
   stroke-width: 3;
   opacity: 0;
   transition: opacity var(--transition);
}

.dash-task-text {
   font-size: 0.88rem;
   color: var(--text-primary);
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.dash-task-text.completed {
   text-decoration: line-through;
   color: var(--text-secondary);
}

.dash-task-priority {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
}

/* ---------- 4. Günlük Program ---------- */
.dash-schedule-list {
   display: flex;
   flex-direction: column;
   gap: 6px;
   max-height: 260px;
   overflow-y: auto;
}

.dash-schedule-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 12px;
   border-radius: 10px;
   border-left: 3px solid var(--accent);
   transition: background var(--transition);
}

.dash-schedule-item:hover {
   background: rgba(255, 255, 255, 0.04);
}

.dash-schedule-item.active-now {
   background: rgba(16, 185, 129, 0.08);
   border-left-color: var(--accent);
}

.dash-schedule-item.past {
   opacity: 0.5;
}

.schedule-time {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--text-secondary);
   white-space: nowrap;
   min-width: 45px;
}

.schedule-title {
   font-size: 0.88rem;
   color: var(--text-primary);
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* ---------- 5. Alışkanlık Takibi ---------- */
.dash-habits-list {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.dash-habit-row {
   display: flex;
   align-items: center;
   gap: 14px;
}

.dash-habit-name {
   font-size: 0.85rem;
   color: var(--text-primary);
   min-width: 90px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.dash-habit-dots {
   display: flex;
   gap: 6px;
}

.dash-habit-dot {
   width: 18px;
   height: 18px;
   border-radius: 5px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.55rem;
   color: var(--text-secondary);
   transition: all var(--transition);
}

.dash-habit-dot.done {
   background: rgba(16, 185, 129, 0.2);
   border-color: rgba(16, 185, 129, 0.4);
   color: #10b981;
}

.dash-habit-dot.missed {
   background: rgba(239, 68, 68, 0.1);
   border-color: rgba(239, 68, 68, 0.2);
   color: #ef4444;
}

.dash-habit-streak {
   font-size: 0.72rem;
   color: var(--text-secondary);
   margin-left: auto;
   white-space: nowrap;
}

/* ---------- 6. AI Önerileri ---------- */
.bento-ai {
   border-color: rgba(99, 102, 241, 0.2);
   position: relative;
   overflow: hidden;
}

.bento-ai::before {
   content: '';
   position: absolute;
   inset: -1px;
   border-radius: 16px;
   padding: 1px;
   background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(16, 185, 129, 0.2), rgba(139, 92, 246, 0.3));
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   pointer-events: none;
   opacity: 0.6;
}

.ai-sparkle-icon {
   width: 16px;
   height: 16px;
   color: #818cf8;
}

.dash-ai-list {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.dash-ai-card {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--card-border);
   border-radius: 12px;
   padding: 16px;
   animation: fadeSlideUp 0.4s ease both;
}

.dash-ai-card:nth-child(1) {
   animation-delay: 0s;
}

.dash-ai-card:nth-child(2) {
   animation-delay: 0.1s;
}

.dash-ai-card:nth-child(3) {
   animation-delay: 0.2s;
}

.dash-ai-text {
   font-size: 0.88rem;
   color: var(--text-primary);
   line-height: 1.55;
   margin-bottom: 12px;
}

.dash-ai-actions {
   display: flex;
   gap: 8px;
}

.dash-ai-btn {
   font-size: 0.76rem;
   font-weight: 600;
   padding: 6px 16px;
   border-radius: 8px;
   cursor: pointer;
   transition: all var(--transition);
   border: none;
}

.dash-ai-btn.approve {
   background: var(--accent);
   color: #fff;
}

.dash-ai-btn.approve:hover {
   filter: brightness(1.15);
}

.dash-ai-btn.reject {
   background: rgba(255, 255, 255, 0.06);
   color: var(--text-secondary);
   border: 1px solid var(--card-border);
}

.dash-ai-btn.reject:hover {
   background: rgba(255, 255, 255, 0.1);
   color: var(--text-primary);
}

/* AI Shimmer Loading */
.dash-ai-loading {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.ai-shimmer {
   height: 60px;
   border-radius: 12px;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.03) 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s ease-in-out infinite;
}

.ai-shimmer.short {
   height: 45px;
   width: 75%;
}

/* ---------- 7. Haftalık İstatistik ---------- */
.dash-bar-chart {
   display: flex;
   align-items: flex-end;
   gap: 8px;
   height: 120px;
   padding: 0 4px;
}

.bar-col {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   height: 100%;
   justify-content: flex-end;
}

.bar-col span {
   font-size: 0.65rem;
   color: var(--text-secondary);
   font-weight: 500;
}

.bar-fill {
   width: 100%;
   min-height: 4px;
   border-radius: 6px 6px 2px 2px;
   background: linear-gradient(to top, var(--accent), rgba(99, 102, 241, 0.8));
   transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bar-col.today .bar-fill {
   background: linear-gradient(to top, var(--accent), #34d399);
   box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.stats-legend {
   text-align: center;
   margin-top: 14px;
}

.stats-total {
   font-size: 0.76rem;
   color: var(--text-secondary);
}

/* ---------- Empty State ---------- */
.dash-empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 28px 0;
   opacity: 0.5;
}

.dash-empty-state svg {
   width: 28px;
   height: 28px;
   stroke: var(--text-secondary);
}

.dash-empty-state span {
   font-size: 0.82rem;
   color: var(--text-secondary);
}

/* ---------- Animations ---------- */
@keyframes fadeSlideUp {
   from {
      opacity: 0;
      transform: translateY(12px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes shimmer {
   0% {
      background-position: -200% 0;
   }

   100% {
      background-position: 200% 0;
   }
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* ---------- Scrollbar ---------- */
.dash-tasks-list::-webkit-scrollbar,
.dash-schedule-list::-webkit-scrollbar {
   width: 4px;
}

.dash-tasks-list::-webkit-scrollbar-thumb,
.dash-schedule-list::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.1);
   border-radius: 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
   .dashboard-bento {
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas:
         "greeting  greeting"
         "summary   tasks"
         "schedule  habits"
         "ai        ai"
         "stats     stats";
   }

   .greeting-quote {
      display: none;
   }
}

@media (max-width: 640px) {
   .dashboard-bento {
      grid-template-columns: 1fr;
      grid-template-areas:
         "greeting"
         "summary"
         "tasks"
         "schedule"
         "habits"
         "ai"
         "stats";
   }

   .bento-greeting {
      padding: 20px;
   }

   .greeting-icon {
      width: 40px;
      height: 40px;
   }

   .greeting-icon svg {
      width: 20px;
      height: 20px;
   }

   .greeting-text-wrap h3 {
      font-size: 1.2rem;
   }

   .summary-body {
      flex-direction: column;
      align-items: flex-start;
   }

   .summary-stats {
      flex-direction: row;
      gap: 16px;
   }
}

/* ---------- White Theme Overrides ---------- */
body[data-theme="white"] .bento-card:hover {
   border-color: rgba(0, 0, 0, 0.12);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

body[data-theme="white"] .bento-greeting {
   background: linear-gradient(135deg, rgba(48, 92, 222, 0.08) 0%, rgba(16, 185, 129, 0.06) 50%, rgba(139, 92, 246, 0.05) 100%);
   border-color: rgba(48, 92, 222, 0.15);
}

body[data-theme="white"] .greeting-icon {
   background: rgba(48, 92, 222, 0.1);
}

body[data-theme="white"] .greeting-icon svg {
   color: #305cde;
}

body[data-theme="white"] .ring-bg {
   stroke: rgba(0, 0, 0, 0.06);
}

body[data-theme="white"] .dash-task-check {
   border-color: rgba(0, 0, 0, 0.2);
}

body[data-theme="white"] .dash-task-check:hover {
   border-color: var(--accent);
   background: rgba(48, 92, 222, 0.08);
}

body[data-theme="white"] .dash-task-item:hover,
body[data-theme="white"] .dash-schedule-item:hover {
   background: rgba(0, 0, 0, 0.03);
}

body[data-theme="white"] .dash-schedule-item.active-now {
   background: rgba(48, 92, 222, 0.06);
}

body[data-theme="white"] .dash-habit-dot {
   background: rgba(0, 0, 0, 0.04);
   border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="white"] .bento-ai {
   border-color: rgba(48, 92, 222, 0.15);
}

body[data-theme="white"] .bento-ai::before {
   background: linear-gradient(135deg, rgba(48, 92, 222, 0.2), rgba(16, 185, 129, 0.15), rgba(139, 92, 246, 0.2));
}

body[data-theme="white"] .dash-ai-card {
   background: rgba(0, 0, 0, 0.02);
   border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="white"] .dash-ai-btn.reject {
   background: rgba(0, 0, 0, 0.04);
   border-color: rgba(0, 0, 0, 0.1);
   color: rgba(0, 0, 0, 0.55);
}

body[data-theme="white"] .dash-ai-btn.reject:hover {
   background: rgba(0, 0, 0, 0.08);
   color: #111;
}

body[data-theme="white"] .ai-shimmer {
   background: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 25%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.03) 75%);
   background-size: 200% 100%;
}

body[data-theme="white"] .bar-fill {
   background: linear-gradient(to top, var(--accent), rgba(48, 92, 222, 0.7));
}

body[data-theme="white"] .bar-col.today .bar-fill {
   background: linear-gradient(to top, var(--accent), #3b82f6);
   box-shadow: 0 0 12px rgba(48, 92, 222, 0.2);
}

body[data-theme="white"] .bento-refresh-btn:hover {
   border-color: rgba(0, 0, 0, 0.2);
}

body[data-theme="white"] .dash-tasks-list::-webkit-scrollbar-thumb,
body[data-theme="white"] .dash-schedule-list::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.12);
}