/* DoroKantine Style - UKHD Blue Edition (Rounded UI & Nudge Controls) */
:root {
    --bg-main: #eef0f2;
    --bg-header: #f8f9fa;
    --bg-card: #ffffff;
    --bg-input: #f4f6f8;
    --text-primary: #1e2022;
    --text-muted: #6c757d;
    --border-color: #d1d5db;
    --ukhd-blue: #004171;
}

body.dark-mode {
    --bg-main: #121212;
    --bg-header: #1c1c1c;
    --bg-card: #1c1c1c;
    --bg-input: #262626;
    --text-primary: #e4e4e4;
    --text-muted: #888888;
    --border-color: #383838;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;}
body { background-color: var(--bg-main); color: var(--text-primary); padding: 25px; min-height: 100vh; transition: background-color 0.3s ease, color 0.3s ease; }

.dashboard-container { max-width: 1700px; margin: 0 auto; transition: filter 0.3s; }

/* HEADER */
.main-header { display: flex; align-items: stretch; background-color: var(--bg-header); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 25px; overflow: hidden; }
.header-section { padding: 15px 25px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border-color); }
.branding-section { min-width: 250px; }
.branding-top h1 { font-size: 24px; font-weight: 900; letter-spacing: -0.5px; color: var(--text-primary);}
.branding-top h1 span { font-weight: 400; }
.clock-date-group { display: flex; flex-direction: column; margin-top: 8px; }
.live-clock { font-family: 'Courier New', monospace; font-size: 24px; font-weight: 800; color: var(--text-primary); letter-spacing: -1px; line-height: 1; margin-bottom: 4px; }
.live-date { font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }

.middle-section { flex: 1; padding: 15px 25px; }
.section-label { font-family: 'Courier New', monospace; font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--text-primary); text-transform: uppercase; margin-bottom: 6px; }

.tools-section { display: flex; flex-direction: row; align-items: center; gap: 15px; }
.theme-toggle { background: transparent; border: 1px solid var(--border-color); border-radius: 6px; width: 36px; height: 36px; cursor: pointer; color: var(--text-primary); display: flex; align-items: center; justify-content: center; transition: 0.2s;}
.theme-toggle:hover { background: var(--border-color); }
.btn-icon { background: transparent; border: none; outline: none; }

/* WORKSPACE GRID */
.workspace-grid { display: grid; grid-template-columns: 1fr 440px; gap: 25px; align-items: stretch; }

.grid-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.step-banner { padding: 15px 20px; font-weight: 900; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color); flex-shrink:0;}
.card-body { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.flex-col { display: flex; flex-direction: column; flex: 1; }

/* BUTTONS */
.btn-massive { width: 100%; padding: 14px 20px; border: none; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 1px; cursor: pointer; margin-bottom: 20px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-massive:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-flat-primary { background-color: var(--ukhd-blue); color: #ffffff; border: 1px solid var(--ukhd-blue); box-shadow: none; border-radius: 6px; }
.btn-flat-primary:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-flat-outline { background-color: transparent; color: var(--text-primary); border: 1px solid var(--border-color); box-shadow: none; border-radius: 6px; }
.btn-flat-outline:hover { background-color: var(--ukhd-blue); color: #ffffff; border-color: var(--ukhd-blue); transform: translateY(-1px); }

.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--text-primary); padding: 8px 14px; font-size: 11px; font-weight: 700; border-radius: 4px; cursor: pointer; transition: 0.2s;}
.btn-secondary:hover { background: var(--text-primary); color: var(--bg-card); }

.btn-success { background: #1e2022 !important; color: #ffffff !important; border: 1px solid #1e2022 !important; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 8px 14px; transition: 0.2s;}
.btn-xs { padding: 5px 10px; font-size: 9px; }

/* THEME SWITCHER */
.btn-bg-select {
    background: transparent; color: var(--text-primary); border: 1px solid var(--border-color);
    border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 10px; padding: 8px 0; transition: 0.2s; white-space: nowrap; outline: none;
}
.btn-bg-select:hover { border-color: var(--text-muted); }
.btn-bg-select.active { background: var(--text-primary); color: var(--bg-card); border-color: var(--text-primary); }

/* BLINK ANIMATION */
@keyframes blink-btn {
    0% { background: var(--ukhd-blue); color: #fff; box-shadow: 0 0 0px var(--ukhd-blue); }
    50% { background: transparent; color: var(--text-primary); box-shadow: 0 0 10px var(--ukhd-blue); }
    100% { background: var(--ukhd-blue); color: #fff; box-shadow: 0 0 0px var(--ukhd-blue); }
}
.btn-blink { animation: blink-btn 2s infinite; border: 2px solid var(--ukhd-blue); }

.mcp-sync-banner { background:var(--bg-input); border:1px solid var(--border-color); padding:10px 15px; border-radius:6px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; }

.field-group { display: flex; flex-direction: column; margin-bottom: 18px; }

.field-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.field-header label { font-size: 9px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0; display: block;}

/* KW STEPPER */
.btn-stepper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    outline: none;
}
.btn-stepper:hover {
    background: var(--ukhd-blue);
    color: #fff;
    border-color: var(--ukhd-blue);
}

.nudge-controls { display: flex; gap: 4px; }
.btn-nudge { 
    background: transparent; 
    border: 1px solid var(--border-color); 
    color: var(--text-muted); 
    border-radius: 4px; 
    width: 22px; 
    height: 22px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 10px; 
    cursor: pointer; 
    transition: 0.2s; 
    outline: none;
}
.btn-nudge:hover { 
    background: var(--bg-input); 
    color: var(--text-primary); 
    border-color: var(--text-primary); 
}

.menu-field { background-color: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; padding: 12px; color: var(--text-primary); font-size: 13px; font-weight: 600; outline: none; width: 100%; resize: vertical; transition: border-color 0.2s;}
.menu-field:focus { border-color: var(--ukhd-blue); }

.spacer-line { height: 1px; background: var(--border-color); margin: 25px 0; width: 100%; }