/* ========== DIALOG SYSTEM - Modern & Elegant ========== */

.dialog-overlay{
  position:fixed; inset:0; background:rgba(10,20,15,0.75); z-index:70;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  backdrop-filter:blur(8px);
  overscroll-behavior:contain; touch-action:none;
}

.dialog-overlay.show{ opacity:1; pointer-events:auto; }

.dialog-container{
  position:fixed; inset:0; z-index:75;
  display:flex; align-items:center; justify-content:center;
  padding:24px; pointer-events:none;
  opacity:0; transition:opacity .3s var(--ease);
}

.dialog-container.show{ opacity:1; pointer-events:auto; }

.dialog-box{
  background:var(--glass-bg-strong);
  backdrop-filter:var(--blur-lg) saturate(1.2);
  -webkit-backdrop-filter:var(--blur-lg) saturate(1.2);
  border-radius:var(--radius-lg);
  width:min(440px, 100%); max-width:100%;
  max-height:85vh;
  box-shadow:0 32px 64px rgba(40,112,47,0.24);
  transform:scale(0.92); opacity:0;
  transition:all .3s var(--ease);
  border:1px solid var(--glass-border);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.dialog-container.show .dialog-box{
  transform:scale(1); opacity:1;
}

.dialog-icon{
  display:flex; align-items:center; justify-content:center;
  padding:32px 24px 20px;
}

.dialog-icon svg{
  display:block;
}

/* Icon colors by type */
.dialog-info .dialog-icon{ color:#3498db; }
.dialog-warning .dialog-icon{ color:#f39c12; }
.dialog-danger .dialog-icon{ color:#e74c3c; }
.dialog-success .dialog-icon{ color:var(--primary-600); }

.dialog-content{
  padding:0 28px 24px;
  text-align:center;
  overflow-y:auto; /* Make content scrollable */
  max-height:calc(85vh - 280px); /* Reserve space for icon and buttons */
}

.dialog-title{
  font-size:20px; font-weight:800; color:var(--ink-900);
  margin:0 0 12px; line-height:1.3;
  position:sticky;
  top:0;
  background:transparent;
  padding-top:8px;
  z-index:1;
}

.dialog-message{
  font-size:15px; color:var(--ink-600); line-height:1.65;
  margin:0; white-space:pre-line;
  text-align:center;
}

.dialog-date-picker{
  margin-top:16px;
  display:flex;
  justify-content:center;
}

.dialog-date-input{
  width:100%;
  max-width:280px;
  padding:12px 16px;
  font-family:'Noto Sans Thai',sans-serif;
  font-size:15px;
  font-weight:600;
  border:2px solid rgba(0,0,0,0.1);
  border-radius:10px;
  background:#FAFAFA;
  color:var(--ink-900);
  transition:all .2s var(--ease);
  cursor:pointer;
  text-align:center;
}

.dialog-date-input:hover{
  border-color:var(--primary-500);
  background:#FFFFFF;
}

.dialog-date-input:focus{
  outline:none;
  border-color:var(--primary-600);
  background:#FFFFFF;
  box-shadow:0 0 0 3px rgba(34,181,97,0.1);
}

.dialog-actions{
  display:flex; gap:10px; padding:20px 24px 24px;
  justify-content:center;
  background:transparent;
  border-top:1px solid var(--glass-border);
  flex-shrink:0; /* Don't shrink buttons */
}

.dialog-btn{
  flex:1; min-width:110px;
  border:none; padding:14px 20px; border-radius:var(--radius-sm);
  font-family:'Noto Sans Thai',sans-serif; font-weight:700; font-size:15px;
  cursor:pointer; transition:all .22s var(--ease);
  box-shadow:var(--shadow-xs);
}

.dialog-btn-cancel{
  background:var(--cream-100); color:var(--ink-700);
  border:2px solid var(--line);
}

.dialog-btn-cancel:hover{
  background:var(--cream-200);
  border-color:var(--ink-400);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

.dialog-btn-cancel:active{
  transform:translateY(0);
}

.dialog-btn-confirm{
  color:#fff;
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.2);
  position:relative;
  overflow:hidden;
}

.dialog-btn-confirm::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
  opacity:0;
  transition:opacity .22s var(--ease);
}

.dialog-btn-confirm:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.3);
}

.dialog-btn-confirm:hover::before{ opacity:1; }

.dialog-btn-confirm:active{
  transform:translateY(0);
}

/* Confirm button colors by type */
.dialog-btn-info{
  background:linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.dialog-btn-info:hover{
  box-shadow:0 8px 20px rgba(52,152,219,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

.dialog-btn-warning{
  background:linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.dialog-btn-warning:hover{
  box-shadow:0 8px 20px rgba(243,156,18,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

.dialog-btn-danger{
  background:linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

.dialog-btn-danger:hover{
  box-shadow:0 8px 20px rgba(231,76,60,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

.dialog-btn-success{
  background:linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
}

.dialog-btn-success:hover{
  box-shadow:0 8px 20px rgba(34,181,97,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* Focus styles */
.dialog-btn:focus-visible{
  outline:3px solid var(--primary-500);
  outline-offset:2px;
}