/**
 * Duplicate Text & Line Remover — Public Stylesheet
 * Scoped under #dtr-* agar tidak konflik dengan tema WordPress.
 *
 * @package DuplicateTextRemover
 * @since   1.0.0
 */

/* ─── CSS Custom Properties ─────────────────────────────────────────────── */
.dtr-wrap {
    --dtr-primary:      #4f46e5;
    --dtr-primary-h:    #4338ca;
    --dtr-success:      #16a34a;
    --dtr-danger:       #dc2626;
    --dtr-warning:      #d97706;
    --dtr-text:         #1e293b;
    --dtr-text-muted:   #64748b;
    --dtr-border:       #e2e8f0;
    --dtr-bg:           #f8fafc;
    --dtr-card-bg:      #ffffff;
    --dtr-radius:       10px;
    --dtr-radius-sm:    6px;
    --dtr-shadow:       0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --dtr-shadow-md:    0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --dtr-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --dtr-mono:         "SFMono-Regular", Consolas, "Liberation Mono", Courier, monospace;
    --dtr-transition:   0.18s ease;

    font-family:        var(--dtr-font);
    color:              var(--dtr-text);
    line-height:        1.6;
    box-sizing:         border-box;
}

.dtr-wrap *,
.dtr-wrap *::before,
.dtr-wrap *::after {
    box-sizing: inherit;
}

/* ─── Header ────────────────────────────────────────────────────────────── */
.dtr-header {
    text-align: center;
    margin-bottom: 24px;
}

.dtr-icon {
    display:       inline-block;
    font-size:     28px;
    color:         var(--dtr-primary);
    margin-bottom: 4px;
    animation:     dtr-spin 8s linear infinite;
}

@keyframes dtr-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.dtr-title {
    font-size:     1.5rem;
    font-weight:   700;
    color:         var(--dtr-text);
    margin:        4px 0 8px;
    line-height:   1.3;
}

.dtr-desc {
    color:     var(--dtr-text-muted);
    font-size: .875rem;
    margin:    0;
}

/* ─── Options Panel ─────────────────────────────────────────────────────── */
.dtr-options-wrap {
    margin-bottom: 16px;
}

.dtr-toggle-options {
    display:       flex;
    align-items:   center;
    gap:           6px;
    background:    none;
    border:        1px solid var(--dtr-border);
    border-radius: var(--dtr-radius-sm);
    padding:       7px 14px;
    font-size:     .875rem;
    font-weight:   600;
    color:         var(--dtr-text-muted);
    cursor:        pointer;
    transition:    all var(--dtr-transition);
}

.dtr-toggle-options:hover {
    border-color: var(--dtr-primary);
    color:        var(--dtr-primary);
    background:   #f5f3ff;
}

.dtr-toggle-arrow {
    margin-left:  auto;
    transition:   transform var(--dtr-transition);
}

.dtr-toggle-options[aria-expanded="true"] .dtr-toggle-arrow {
    transform: rotate(180deg);
}

.dtr-options {
    margin-top:    10px;
    padding:       16px;
    background:    var(--dtr-bg);
    border:        1px solid var(--dtr-border);
    border-radius: var(--dtr-radius);
}

.dtr-options[hidden] {
    display: none;
}

.dtr-options-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   12px;
    margin-bottom:         12px;
}

.dtr-opt-item {
    display:       flex;
    flex-direction: column;
    gap:           3px;
    cursor:        pointer;
    padding:       10px 12px;
    background:    var(--dtr-card-bg);
    border:        1px solid var(--dtr-border);
    border-radius: var(--dtr-radius-sm);
    transition:    border-color var(--dtr-transition);
}

.dtr-opt-item:hover {
    border-color: var(--dtr-primary);
}

.dtr-opt-item input[type="checkbox"] {
    width:  16px;
    height: 16px;
    margin: 0 0 4px;
    accent-color: var(--dtr-primary);
}

.dtr-opt-item span {
    font-weight: 600;
    font-size:   .875rem;
}

.dtr-opt-item small {
    color:     var(--dtr-text-muted);
    font-size: .75rem;
}

.dtr-sort-dir-wrap {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   .875rem;
}

.dtr-sort-dir-wrap label {
    font-weight: 600;
    color:       var(--dtr-text-muted);
}

.dtr-opt-sort-dir {
    border:        1px solid var(--dtr-border);
    border-radius: var(--dtr-radius-sm);
    padding:       5px 10px;
    font-size:     .875rem;
    color:         var(--dtr-text);
    background:    var(--dtr-card-bg);
}

/* ─── Workspace Layout ──────────────────────────────────────────────────── */
.dtr-workspace {
    display:        grid;
    grid-template-columns: 1fr auto 1fr;
    gap:            12px;
    align-items:    start;
}

@media (max-width: 640px) {
    .dtr-workspace {
        grid-template-columns: 1fr;
    }
    .dtr-action-col {
        justify-self: center;
    }
}

/* ─── Panel (Input / Output) ─────────────────────────────────────────────── */
.dtr-panel {
    background:    var(--dtr-card-bg);
    border:        1px solid var(--dtr-border);
    border-radius: var(--dtr-radius);
    overflow:      hidden;
    box-shadow:    var(--dtr-shadow);
}

.dtr-panel-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         10px 14px;
    background:      var(--dtr-bg);
    border-bottom:   1px solid var(--dtr-border);
}

.dtr-panel-label {
    font-weight: 700;
    font-size:   .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       var(--dtr-text-muted);
}

.dtr-count-input,
.dtr-count-output {
    font-size:   .75rem;
    font-weight: 600;
    color:       var(--dtr-primary);
    background:  #ede9fe;
    padding:     2px 8px;
    border-radius: 99px;
}

/* ─── Textarea ──────────────────────────────────────────────────────────── */
.dtr-textarea {
    width:       100%;
    min-height:  160px;
    padding:     12px;
    border:      none;
    outline:     none;
    resize:      vertical;
    font-family: var(--dtr-mono);
    font-size:   .8125rem;
    line-height: 1.65;
    color:       var(--dtr-text);
    background:  transparent;
    display:     block;
}

.dtr-textarea::placeholder {
    color:       var(--dtr-text-muted);
    font-style:  italic;
}

.dtr-panel-output .dtr-textarea {
    background: #fafdf9;
    color:      #166534;
}

/* ─── Panel Footer (Tombol) ──────────────────────────────────────────────── */
.dtr-panel-footer {
    display:     flex;
    flex-wrap:   wrap;
    gap:         6px;
    padding:     10px 12px;
    border-top:  1px solid var(--dtr-border);
    background:  var(--dtr-bg);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.dtr-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       6px 14px;
    border:        1px solid var(--dtr-border);
    border-radius: var(--dtr-radius-sm);
    font-size:     .8125rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    all var(--dtr-transition);
    background:    var(--dtr-card-bg);
    color:         var(--dtr-text-muted);
}

.dtr-btn:hover {
    border-color: var(--dtr-primary);
    color:        var(--dtr-primary);
    background:   #f5f3ff;
}

.dtr-btn:active {
    transform: scale(.97);
}

/* Proses button — utama */
.dtr-btn-process {
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    padding:        14px 16px;
    background:     var(--dtr-primary);
    border-color:   var(--dtr-primary);
    color:          #fff;
    border-radius:  var(--dtr-radius);
    font-size:      .875rem;
    min-width:      72px;
    box-shadow:     var(--dtr-shadow-md);
}

.dtr-btn-process:hover {
    background:   var(--dtr-primary-h);
    border-color: var(--dtr-primary-h);
    color:        #fff;
}

.dtr-btn-arrow {
    font-size: 1.25rem;
}

.dtr-btn-process:disabled,
.dtr-btn-process[aria-busy="true"] {
    opacity:    .7;
    cursor:     not-allowed;
    transform:  none;
}

/* ─── Action Column (tengah) ────────────────────────────────────────────── */
.dtr-action-col {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding-top:    52px; /* Align dengan textarea setelah header panel */
}

@media (max-width: 640px) {
    .dtr-action-col {
        padding-top: 0;
    }
    .dtr-btn-process {
        flex-direction: row;
        width:         100%;
        justify-content: center;
    }
}

/* ─── Stats Bar ──────────────────────────────────────────────────────────── */
.dtr-stats {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   12px;
    margin-top:            16px;
}

.dtr-stats[hidden] {
    display: none;
}

.dtr-stat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        14px;
    background:     var(--dtr-card-bg);
    border:         1px solid var(--dtr-border);
    border-radius:  var(--dtr-radius);
    text-align:     center;
}

.dtr-stat-success { border-color: #bbf7d0; background: #f0fdf4; }
.dtr-stat-danger  { border-color: #fecaca; background: #fef2f2; }

.dtr-stat-num {
    font-size:   1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color:       var(--dtr-text);
}

.dtr-stat-success .dtr-stat-num { color: var(--dtr-success); }
.dtr-stat-danger  .dtr-stat-num { color: var(--dtr-danger); }

.dtr-stat-label {
    font-size:  .75rem;
    font-weight: 600;
    color:      var(--dtr-text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

@media (max-width: 480px) {
    .dtr-stats {
        grid-template-columns: 1fr;
    }
}

/* ─── Notice / Toast ─────────────────────────────────────────────────────── */
.dtr-notice {
    margin-top:    12px;
    padding:       10px 16px;
    border-radius: var(--dtr-radius-sm);
    font-size:     .875rem;
    font-weight:   600;
    animation:     dtr-fadein .2s ease;
}

.dtr-notice[hidden] { display: none; }

.dtr-notice.is-success {
    background:   #f0fdf4;
    border:       1px solid #bbf7d0;
    color:        var(--dtr-success);
}

.dtr-notice.is-error {
    background:   #fef2f2;
    border:       1px solid #fecaca;
    color:        var(--dtr-danger);
}

@keyframes dtr-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}