/* ====== Reset & Base ====== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #f0f2f5; color: #2c3e50; min-height: 100vh; }
:root { --skin: #4a7fc1; --skin-light: #6ba3e0; --skin-text: #ffffff; }
body.skin-blue  { --skin: #4a7fc1; --skin-light: #6ba3e0; --skin-text: #fff; }
body.skin-gray  { --skin: #546e7a; --skin-light: #78909c; --skin-text: #fff; }
body.skin-red   { --skin: #c14a4a; --skin-light: #e06b6b; --skin-text: #fff; }
body.skin-white { --skin: #e8eaed; --skin-light: #f5f6f8; --skin-text: #2c3e50; }

/* ====== Topbar ====== */
.topbar { height: 60px; background: #fff; border-bottom: 1px solid #e0e2e5; display: flex; align-items: center; padding: 0 20px; position: sticky; top: 0; z-index: 100; }
.topbar-left { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; padding: 4px 8px; border-radius: 6px; transition: background 0.15s; }
.topbar-left:hover { background: #f5f6f8; }
.logo { font-size: 24px; font-weight: 700; background: linear-gradient(135deg, #1e3a5f, #4a7fc1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; flex-shrink: 0; }
.company-name { font-size: 18px; font-weight: 600; color: #2c3e50; white-space: nowrap; }
.welcome { font-size: 11px; color: #8a9aa8; white-space: nowrap; margin-left: 2px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0; }

/* Attendance */
.att-btn { display: flex; align-items: center; gap: 8px; padding: 6px 14px; cursor: pointer; border-radius: 6px; transition: background 0.15s; border-left: 1px solid #e8eaed; margin-left: 12px; }
.att-btn:hover { background: #f5f6f8; }
.att-icon { font-size: 20px; line-height: 1; }
.att-info { display: flex; flex-direction: column; gap: 1px; }
.att-line { font-size: 11px; color: #4a5a6a; line-height: 1.3; }
.att-line span { font-weight: 600; color: #2c3e50; }

/* Language */
.lang-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; cursor: pointer; border-radius: 6px; transition: background 0.15s; border-left: 1px solid #e8eaed; position: relative; }
.lang-btn:hover { background: #f5f6f8; }
.lang-btn .lang-icon { font-size: 15px; }
.lang-btn .lang-text { font-size: 11px; color: #4a5a6a; font-weight: 500; }
.lang-btn .arrow { font-size: 9px; color: #8a9aa8; }

/* User Settings */
.user-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer; border-radius: 6px; transition: background 0.15s; border-left: 1px solid #e8eaed; position: relative; }
.user-btn:hover { background: #f5f6f8; }
.user-btn .gear { font-size: 17px; }
.user-btn .user-label { display: flex; flex-direction: column; line-height: 1.15; }
.user-btn .user-label .line1 { font-size: 10px; color: #4a5a6a; }
.user-btn .user-label .line2 { font-size: 10px; color: #4a5a6a; }
.user-btn .arrow { font-size: 9px; color: #8a9aa8; }

/* Dropdown */
.dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: #fff; border: 1px solid #e0e2e5; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); min-width: 160px; z-index: 200; overflow: hidden; }
.dropdown-menu.show { display: block; }
.dropdown-item { padding: 10px 16px; font-size: 13px; color: #2c3e50; cursor: pointer; transition: background 0.15s; }
.dropdown-item:hover { background: #f5f6f8; color: var(--skin); }
.admin-only { display: none; }
.skin-item-header { cursor: default; font-size: 12px; color: #8a9aa8; padding-bottom: 4px; }
.skin-item-header:hover { background: none; color: #8a9aa8; }
.skin-swatches { display: flex; gap: 8px; padding: 6px 16px 10px; }
.skin-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.15s; }
.skin-swatch:hover { transform: scale(1.2); }
.skin-swatch.active { border-color: #2c3e50; }
.skin-swatch.s-blue { background: #4a7fc1; }
.skin-swatch.s-gray { background: #546e7a; }
.skin-swatch.s-red { background: #c14a4a; }
.skin-swatch.s-white { background: #f5f6f8; border: 2px solid #d0d6dc; }

/* ====== Navbar ====== */
.navbar { height: 42px; background: #fff; display: flex; align-items: center; padding: 0 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.07); position: sticky; top: 60px; z-index: 99; }
.nav-item { font-size: 14px; color: #2c3e50; cursor: pointer; padding: 0 16px; height: 42px; display: flex; align-items: center; border-bottom: 2px solid transparent; transition: all 0.2s; position: relative; font-weight: 700; letter-spacing: 0.5px; }
.nav-item::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: #e0e2e5; }
.nav-item:last-child::after { display: none; }
.nav-item:hover { color: var(--skin); background: rgba(74,127,193,0.04); }

/* ====== Main Container ====== */
.main-container { display: flex; width: 100%; padding: 16px 20px; gap: 16px; min-height: calc(100vh - 102px); }

/* ====== Left Sidebar - Tree Navigation ====== */
.sidebar-left { width: 220px; flex-shrink: 0; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); align-self: flex-start; }
.sidebar-title { background: var(--skin); color: var(--skin-text); padding: 10px 16px; font-size: 13px; font-weight: 600; }
.tree-nav { list-style: none; padding: 4px 0; }
.tree-item { padding: 9px 16px; font-size: 13px; color: #2c3e50; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 8px; border-left: 3px solid transparent; }
.tree-item:hover { background: #f5f6f8; color: var(--skin); }
.tree-icon { font-size: 14px; width: 18px; text-align: center; }

/* ====== Center Content - Main Area ====== */
.content-center { flex: 1; min-width: 0; }

/* Center + Right side-by-side rows */
.main-body { display: flex; flex: 1; gap: 16px; min-width: 0; }
.content-col { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.right-col { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }

/* Fixed-height rows for alignment */
.content-col .module-card { height: 0; flex: 1; min-height: 0; }
.right-col .module-card { height: 0; flex: 1; min-height: 0; }

/* ====== Module Card ====== */
.module-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; flex-direction: column; }
.module-header { background: var(--skin); color: var(--skin-text); padding: 10px 16px; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.module-header .more { font-size: 11px; opacity: 0.8; cursor: pointer; }
.module-body { padding: 12px 16px; flex: 1; overflow: hidden; }

/* ====== Notice Banner ====== */
.notice-banner { background: linear-gradient(135deg, var(--skin), var(--skin-light)); color: var(--skin-text); padding: 16px; border-radius: 6px; margin-bottom: 10px; }
.notice-banner h3 { font-size: 15px; margin-bottom: 4px; }
.notice-banner p { font-size: 11px; opacity: 0.9; }

/* Notice Layout: 1/3 carousel + 2/3 list */
.notice-layout { display: flex; gap: 12px; }
.notice-carousel { width: 33%; flex-shrink: 0; background: #f5f6f8; border-radius: 6px; display: flex; align-items: center; justify-content: center; min-height: 180px; }
.notice-carousel-inner { text-align: center; color: #aab5c0; font-size: 12px; }
.notice-carousel-inner .carousel-icon { font-size: 32px; margin-bottom: 6px; }
.notice-list-wrap { flex: 1; min-width: 0; }

/* Notice List */
.notice-list { list-style: none; }
.notice-item { display: flex; align-items: center; padding: 7px 0; border-bottom: 1px solid #f0f1f3; cursor: pointer; transition: color 0.15s; gap: 6px; }
.notice-item:hover { color: var(--skin); }
.notice-item:last-child { border-bottom: none; }
.notice-item .tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.notice-item .tag.top { background: #fee2e2; color: #dc2626; }
.notice-item .title { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-item .date { font-size: 11px; color: #8a9aa8; flex-shrink: 0; }

/* ====== Workbench ====== */
.workbench-tabs { display: flex; gap: 16px; margin-bottom: 10px; border-bottom: 1px solid #e8eaed; }
.workbench-tab { padding: 5px 0; font-size: 12px; color: #4a5a6a; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
.workbench-tab.active { color: var(--skin); border-bottom-color: var(--skin); }
.workbench-table { width: 100%; border-collapse: collapse; }
.workbench-table th { text-align: left; padding: 7px 8px; font-size: 11px; color: #8a9aa8; font-weight: 500; border-bottom: 1px solid #e8eaed; }
.workbench-table td { padding: 7px 8px; font-size: 12px; color: #2c3e50; border-bottom: 1px solid #f0f1f3; }
.workbench-table tr:nth-child(even) { background: #f8f9fa; }
.workbench-table tr:hover { background: #eef0f4; }
.status-tag { font-size: 10px; padding: 2px 6px; border-radius: 10px; }
.status-tag.pending { background: #fef3c7; color: #d97706; }
.status-tag.approved { background: #d1fae5; color: #059669; }

/* ====== Info List ====== */
.info-list { list-style: none; }
.info-item { padding: 7px 0; border-bottom: 1px solid #f0f1f3; cursor: pointer; transition: color 0.15s; }
.info-item:nth-child(even) { background: #f8f9fa; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.info-item:hover { color: var(--skin); }
.info-item:last-child { border-bottom: none; }
.info-item .title { font-size: 12px; margin-bottom: 2px; }
.info-item .meta { font-size: 10px; color: #8a9aa8; }

/* ====== Modal ====== */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 90%; max-width: 480px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
.modal-header { background: var(--skin); color: var(--skin-text); padding: 14px 20px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.modal-close { cursor: pointer; font-size: 20px; opacity: 0.8; }
.modal-close:hover { opacity: 1; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-footer { padding: 14px 20px; border-top: 1px solid #e8eaed; display: flex; justify-content: flex-end; gap: 10px; }

/* ====== Form ====== */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; color: #4a5a6a; margin-bottom: 6px; }
.form-group input { width: 100%; padding: 10px 12px; border: 1px solid #d0d6dc; border-radius: 6px; font-size: 14px; transition: all 0.2s; }
.form-group input:focus { outline: none; border-color: var(--skin); box-shadow: 0 0 0 3px rgba(74,127,193,0.1); }

/* ====== Buttons ====== */
.btn { padding: 10px 20px; border-radius: 6px; font-size: 13px; cursor: pointer; transition: all 0.2s; border: none; }
.btn-primary { background: var(--skin); color: var(--skin-text); }
.btn-primary:hover { opacity: 0.9; }
.btn-secondary { background: #f5f6f8; color: #4a5a6a; }
.btn-secondary:hover { background: #e8eaed; }

/* ====== Skin Selector ====== */
.skin-options { display: flex; gap: 16px; flex-wrap: wrap; }
.skin-option { width: 56px; height: 56px; border-radius: 8px; cursor: pointer; border: 3px solid transparent; transition: all 0.2s; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.skin-option:hover { transform: scale(1.05); }
.skin-option.active { border-color: #2c3e50; }
.skin-option.s-blue { background: #4a7fc1; color: #fff; }
.skin-option.s-gray { background: #546e7a; color: #fff; }
.skin-option.s-red { background: #c14a4a; color: #fff; }
.skin-option.s-white { background: #f5f6f8; color: #2c3e50; border: 1px solid #d0d6dc; }

/* ====== Module Toggle ====== */
.module-toggle-list { list-style: none; }
.module-toggle-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f1f3; font-size: 13px; }
.module-toggle-item:last-child { border-bottom: none; }
.toggle-switch { position: relative; width: 40px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #d0d6dc; border-radius: 22px; transition: 0.3s; }
.toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s; }
.toggle-switch input:checked + .toggle-slider { background: var(--skin); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }

/* ====== Toast ====== */
.toast { position: fixed; top: 80px; right: 24px; background: #2c3e50; color: #fff; padding: 10px 18px; border-radius: 6px; font-size: 13px; z-index: 2000; animation: toastIn 0.3s ease; }
.toast.success { background: #059669; }
.toast.error { background: #dc2626; }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }