:root {
    --bg-color: #0f1115;
    --card-bg: #181b21;
    --card-hover: #22262e;
    --primary-color: #6c5ce7;
    --primary-hover: #5b4cc4;
    --accent-color: #00cec9;
    --text-main: #dfe6e9;
    --text-muted: #b2bec3;
    --border-color: #2d3436;
    --danger-color: #ff7675;
    --success-color: #55efc4;

    --font-family: 'Outfit', sans-serif;
    --shadow-main: 0 10px 20px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.4);
    --radius: 12px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-family);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(108, 92, 231, 0.15) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(0, 206, 201, 0.15) 0%, transparent 20%);
}

.app-container {
    background: rgba(24, 27, 33, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    width: 100%;
    max-width: 800px;
    padding: 30px;
    box-shadow: var(--shadow-main);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

h1 {
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--text-main), var(--text-muted));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.8rem;
}

/* Definition of Grid Columns */
.initiative-list li,
.table-header {
    display: grid;
    /* Updated grid: Handle, Name, Init, HP, Color, Actions */
    grid-template-columns: 40px 3fr 1fr 1fr 60px 40px;
    gap: 15px;
    align-items: center;
    padding: 4px 15px;
}

/* Header Specifics */
.table-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.col-handle {
    text-align: center;
}

.col-handle i {
    padding: 10px;
}

.col-name {}

.col-init {
    text-align: center;
}

.col-hp {
    text-align: center;
}

.col-color {
    text-align: center;
    /* Vertically center the input */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* Ensure it takes full height of the grid cell if needed, though grid centering also works */
}

.col-actions {
    text-align: center;
}


/* List Items */
.initiative-list {
    list-style: none;
    margin-bottom: 25px;
}

.initiative-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px 15px 16px 15px;
    margin-bottom: 12px;
    transition: var(--transition);
    position: relative;
}

.initiative-row:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(108, 92, 231, 0.3);
    z-index: 2;
}

.initiative-row.has-bg {
    /* Style for rows with background color */
    border-color: rgba(0, 0, 0, 0.1);
}

/*
   User requirement:
   "If a background color is applied then all the texts in the inputs of this same row should be black with 70% opacity."
*/
.initiative-row.has-bg input {
    color: rgba(0, 0, 0, 0.7);
    /* Inputs should be transparent in general, so we don't need to set background here unless specified. 
       User asked for "background-color transparent" for inputs broadly. Use inheritance or explicit transparent. */
    background: transparent;
    border-color: transparent;
}

.initiative-row.has-bg input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

/* Update icons in colored rows to black 70% opacity */
.initiative-row.has-bg .btn-icon,
.initiative-row.has-bg .drag-handle {
    color: rgba(0, 0, 0, 0.7);
}

.initiative-row.has-bg .btn-icon:hover {
    color: rgba(0, 0, 0, 1.0);
    /* Full black on hover? Or standard danger color? 
                                  User didn't specify hover for colored rows, but standard hover is danger color.
                                  Let's keep standard hover behavior or slight darkening if it contradicts. 
                                  For now, sticking to base color change. */
}

.initiative-row.dragging {
    opacity: 0.5;
    transform: scale(0.98);
    box-shadow: none;
    border: 2px dashed var(--primary-color);
    background: transparent !important;
}

/* Form Elements within Row */
input {
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 8px 12px;
    border-radius: 8px;
    /* Radius might not be visible without border/bg but good for selection highlight if any */
    font-family: var(--font-family);
    font-size: 1rem;
    width: 100%;
    transition: color 0.2s;
}

input:focus {
    outline: none;
    /* Never highlighted border or background even when focused */
    border: none;
    background: transparent;
    box-shadow: none;
}

.row-name-input {
    font-weight: 500;
}

.row-init-input {
    text-align: center;
    font-family: 'Consolas', monospace;
    /* Monospace for numbers feels tabular */
    font-weight: 700;
    /* Removed color: var(--accent-color) */
}

.row-hp-input {
    text-align: center;
    font-weight: 600;
}

/* Color Picker */
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
    border: 2px solid var(--card-bg);
}

/* Action Buttons */
.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.2s;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--danger-color);
}

.drag-handle {
    cursor: grab;
    color: var(--text-muted);
    opacity: 0.5;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Prevent default touch actions like scrolling when dragging handle */
    touch-action: none;
}

.initiative-row:hover .drag-handle {
    opacity: 1;
}

/* Mobile Drag Ghost (Unified) */
.dragging-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    list-style: none;
    background: var(--card-bg);
    border: 1px solid var(--primary-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    opacity: 0.9;
    border-radius: var(--radius);
    padding: 16px 15px;
    /* Match row padding */
    display: flex;
    align-items: center;
    /* Width will be set by JS */
    overflow: hidden;
    white-space: nowrap;
}

/* While dragging, prevent selection and set cursor */
body.is-dragging {
    user-select: none;
    -webkit-user-select: none;
    cursor: grabbing;
}

body.is-dragging .initiative-row {
    cursor: grabbing;
}

/* Style for the placeholder/original row being dragged */
.initiative-row.dragging-source {
    opacity: 0.3;
    border: 2px dashed var(--primary-color);
    background: transparent !important;
}

/* Main Buttons (Sort, Add) */
.btn-primary,
.btn-secondary {
    padding: 10px 20px;
    border-radius: var(--radius);
    border: none;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
}

.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.4);
}

.btn-secondary {
    background: transparent;
    border: 1px dashed var(--text-muted);
    color: var(--text-muted);
    width: 100%;
    justify-content: center;
    padding: 15px;
}

.btn-secondary:hover {
    border-color: var(--text-main);
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.03);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0f1115;
}

::-webkit-scrollbar-thumb {
    background: #2d3436;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}