/*
 * File CSS: Regex Tester & Playground Styles
 * Thiết kế 2 cột: Tool Inputs/Output (Trái) và Knowledge Base (Phải).
 * Wrapper: .crop-tool-wrap để tránh xung đột với Theme
 */

/* 1. Các biến CSS (Màu Xanh Ngọc là chủ đạo) */
:root {
  --bg: #f4f7f9; 
  --card: #ffffff;
  --primary: #00bcd4; /* Màu xanh ngọc năng động */
  --secondary: #37474f; /* Màu tối */
  --thirst: #0097a7; /* Xanh ngọc đậm hơn */
  --muted: #6c757d;
  --accent: #ffeb3b; /* Màu nhấn phụ (Vàng sáng cho highlight) */
  --text: #111827;
}

.post-thumbnail {
  display: none;
}

/* === WRAPPER CHÍNH === */
.crop-tool-wrap {
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
    color: var(--secondary);
    background: var(--bg);
    margin: 0;
    padding: 0;
}

.crop-tool-wrap .wrap {
 /* max-width: 1200px; /* Tăng max-width để chứa 2 cột lớn */
  margin:0 auto;
  padding:20px 15px;
}

/* === HEADER/TIÊU ĐỀ === */
.crop-tool-wrap header{
  margin-bottom:12px;
  text-align: center;
}
.crop-tool-wrap h1{
  font-size:32px;
  margin:0;
  color: var(--primary);
  font-weight: 700;
}
.crop-tool-wrap p.lead{
  font-size:16px;
  margin:4px 0 30px;
  color: var(--muted);
}

/* === PANEL CHÍNH (BỐ CỤC 2 CỘT) === */
.crop-tool-wrap .panel {
    display: flex; 
    flex-direction: column; /* DỌC trên mobile */
    gap: 30px; /* Khoảng cách giữa 2 cột/phần trên mobile */
    padding: 5px;
}

/* CỘT CHỨA CÁC INPUT/OUTPUT (TOOL COLUMN) */
.crop-tool-wrap .tool-column {
    flex: 2; /* Sẽ chiếm 2 phần trên desktop */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.crop-tool-wrap .input-group {
    padding: 15px;
    background: var(--card);
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
}

.crop-tool-wrap label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 1.05em;
    color: var(--secondary);
}

/* INPUT & TEXTAREA STYLING */
.crop-tool-wrap input[type="text"], 
.crop-tool-wrap textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
    background: #e0f7fa; /* Nền xanh nhạt cho Regex */
    color: var(--text);
    resize: vertical;
    min-height: 50px;
}

.crop-tool-wrap textarea {
    background: var(--card); /* Nền trắng cho Text Input */
    min-height: 180px;
}

.crop-tool-wrap input[type="text"]:focus, 
.crop-tool-wrap textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.25);
    outline: none;
}

/* FLAGS AREA */
.crop-tool-wrap .flags-area {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    font-size: 0.95em;
    flex-wrap: wrap;
    align-items: center;
}
.crop-tool-wrap .flags-area label {
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
}
.crop-tool-wrap .flags-area input[type="checkbox"] {
    margin-right: 5px;
    cursor: pointer;
}

/* OUTPUT AREA */
.crop-tool-wrap .output-section {
    padding: 0px;
   /* background-color: #f8f9fa; /* Nền xám nhạt */
}
.crop-tool-wrap #outputArea {
   /* border: 1px solid #dee2e6;*/
    border-radius: 8px;
    padding: 15px;
    background-color: var(--card);
    min-height: 100px;
    overflow-x: auto;
    width: 100%;
}
.crop-tool-wrap #resultText {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
}

.crop-tool-wrap .highlighted-match {
    background-color: var(--accent); /* Vàng sáng */
    color: var(--secondary);
    font-weight: bold;
    padding: 1px 0;
    border-radius: 3px;
}

.crop-tool-wrap .error-message {
    color: #d32f2f;
    font-weight: bold;
    margin-top: 10px;
}

/* CỘT KIẾN THỨC (KNOWLEDGE COLUMN) */
.crop-tool-wrap .knowledge-column {
    flex: 1; /* Sẽ chiếm 1 phần trên desktop */
}
.crop-tool-wrap .knowledge-base {
    padding: 20px;
    background: var(--card);
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
}
.crop-tool-wrap .knowledge-base h2 {
    color: var(--thirst); /* Xanh ngọc đậm */
    text-align: left;
    font-size: 1.5em;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.crop-tool-wrap .knowledge-base h3 {
    color: var(--secondary);
    font-size: 1.2em;
    margin-top: 25px;
    margin-bottom: 10px;
}
.crop-tool-wrap .regex-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95em;
}
.crop-tool-wrap .regex-table th, .crop-tool-wrap .regex-table td {
    border: 1px solid #eee;
    padding: 10px;
    text-align: left;
}
.crop-tool-wrap .regex-table th {
    background-color: #e0f7fa; /* Nền xanh nhạt */
}
.crop-tool-wrap .regex-table code {
    background-color: #f1f1f1;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', 'Courier New', monospace;
}

/* === FOOTER === */
.crop-tool-wrap footer{
  margin-top:30px;
  font-size:13px;
  color: var(--muted);
  text-align:center;
}


/* === MEDIA QUERIES (Bố cục 2 Cột trên Desktop) === */

@media(min-width:900px){
  .crop-tool-wrap .panel{
    flex-direction: row; /* CHUYỂN sang NGANG (2 cột) */
    align-items: flex-start; /* Giữ nội dung cột trên cùng */
    gap: 30px;
  }
}