/* WorksON v2 - Enhanced Responsive Styles */
:root {
  --works-green: #03c75a;
  --works-dark: #02a34a;
  --works-navy: #1a1a2e;
  --works-sidebar: #16213e;
  --works-sidebar-hover: #0f3460;
  --sidebar-w: 64px;
  --sidebar-expanded-w: 220px;
  --header-h: 56px;
  --mobile-nav-h: 60px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; margin:0; padding:0; background:#f0f2f5; overscroll-behavior-y:none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:#f1f1f1; }
::-webkit-scrollbar-thumb { background:#c1c1c1; border-radius:3px; }

/* ── Desktop Sidebar ── */
#sidebar {
  background: var(--works-sidebar);
  width: var(--sidebar-w);
  min-height: 100vh;
  position: fixed; left:0; top:0;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0; z-index: 200;
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
#sidebar.expanded { width: var(--sidebar-expanded-w); }

.sidebar-logo {
  width:44px; height:44px;
  background: linear-gradient(135deg, var(--works-green), #00a86b);
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  color:white; font-weight:900; font-size:20px;
  margin-bottom: 20px; cursor:pointer; flex-shrink:0;
  box-shadow: 0 4px 12px rgba(3,199,90,0.4);
  transition: transform 0.2s;
}
.sidebar-logo:hover { transform: scale(1.05); }

.nav-item {
  width: calc(100% - 8px); margin: 2px 4px;
  display:flex; align-items:center;
  padding: 10px 11px;
  cursor:pointer; border-radius:10px;
  transition: all 0.2s; color: #8892a4;
  position:relative; white-space:nowrap; overflow:hidden;
}
.nav-item:hover { background: var(--works-sidebar-hover); color:white; }
.nav-item.active { background: var(--works-green); color:white; }
.nav-item:active { transform: scale(0.97); }

.nav-icon { font-size:17px; width:42px; text-align:center; flex-shrink:0; }
.nav-label { margin-left:4px; font-size:13px; font-weight:500; display:none; opacity:0; transition: opacity 0.15s; }
#sidebar.expanded .nav-label { display:block; opacity:1; }
#sidebar.expanded .nav-item { padding:10px 14px; }

.nav-badge {
  background:#ef4444; color:white; font-size:10px;
  min-width:18px; height:18px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  position:absolute; right:6px; top:6px; padding:0 4px;
}
#sidebar.expanded .nav-badge { position:relative; right:auto; top:auto; margin-left:auto; }

/* ── Main Content ── */
#main-content {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  transition: margin-left 0.25s cubic-bezier(0.4,0,0.2,1);
}
#main-content.sidebar-expanded { margin-left: var(--sidebar-expanded-w); }

/* ── Top Header ── */
.top-header {
  background:white; border-bottom:1px solid #e5e7eb;
  padding: 0 16px; height: var(--header-h);
  display:flex; align-items:center;
  position:sticky; top:0; z-index:50;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ── Cards ── */
.card { background:white; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.08); transition:transform 0.2s, box-shadow 0.2s; }
.card:hover { transform:translateY(-1px); box-shadow:0 4px 6px rgba(0,0,0,0.07); }
.stat-card { background:white; border-radius:12px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.08); }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-green { background:#dcfce7; color:#16a34a; }
.badge-red { background:#fee2e2; color:#dc2626; }
.badge-yellow { background:#fef9c3; color:#ca8a04; }
.badge-blue { background:#dbeafe; color:#2563eb; }
.badge-gray { background:#f3f4f6; color:#6b7280; }
.badge-purple { background:#f3e8ff; color:#7c3aed; }
.badge-orange { background:#fff7ed; color:#ea580c; }

/* ── Table ── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { background:#f8fafc; padding:10px 12px; text-align:left; font-size:12px; font-weight:600; color:#64748b; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
.data-table td { padding:11px 12px; font-size:13px; color:#334155; border-bottom:1px solid #f1f5f9; }
.data-table tbody tr:hover { background:#f8fafc; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── Buttons ── */
.btn { padding:8px 16px; border-radius:8px; border:none; cursor:pointer; font-size:13px; font-weight:500; transition:all 0.2s; display:inline-flex; align-items:center; gap:5px; }
.btn:active { transform:scale(0.97); }
.btn-primary { background:var(--works-green); color:white; }
.btn-primary:hover { background:var(--works-dark); }
.btn-secondary { background:#f1f5f9; color:#475569; }
.btn-secondary:hover { background:#e2e8f0; }
.btn-danger { background:#fee2e2; color:#dc2626; }
.btn-danger:hover { background:#fecaca; }
.btn-outline { background:white; border:1px solid #e2e8f0; color:#475569; }
.btn-outline:hover { background:#f8fafc; }
.btn-sm { padding:5px 10px; font-size:12px; border-radius:6px; }

/* ── Forms ── */
.form-input, .form-select, .form-textarea { width:100%; padding:9px 12px; border:1.5px solid #e2e8f0; border-radius:8px; font-size:14px; color:#334155; background:white; outline:none; transition:border-color 0.2s; appearance:auto; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--works-green); box-shadow:0 0 0 3px rgba(3,199,90,0.12); }
.form-label { font-size:13px; font-weight:500; color:#475569; margin-bottom:4px; display:block; }
.form-group { margin-bottom:14px; }

/* ── Modal ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:1000; display:flex; align-items:flex-end; justify-content:center; padding:0; }
@media(min-width:640px) { .modal-overlay { align-items:center; padding:20px; } }
.modal-box { background:white; border-radius:20px 20px 0 0; width:100%; max-height:92vh; overflow-y:auto; }
@media(min-width:640px) { .modal-box { border-radius:16px; max-width:600px; max-height:90vh; } }

/* ── Login ── */
.login-screen { min-height:100vh; background:linear-gradient(145deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%); display:flex; align-items:center; justify-content:center; padding:20px; }

/* ── Calendar ── */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-day { min-height:72px; background:white; border:1px solid #f1f5f9; border-radius:6px; padding:5px; cursor:pointer; transition:background 0.15s; }
.cal-day:hover { background:#f8fafc; }
.cal-day.today { border-color:var(--works-green); background:#f0fff7; }
.cal-day.other-month { background:#f8fafc; opacity:0.5; }
.cal-event { font-size:10px; padding:1px 4px; border-radius:3px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:white; }

/* ── Tabs ── */
.tab-list { display:flex; border-bottom:2px solid #e5e7eb; margin-bottom:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tab-item { padding:9px 16px; cursor:pointer; font-size:13px; font-weight:500; color:#6b7280; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.2s; white-space:nowrap; flex-shrink:0; }
.tab-item.active { color:var(--works-green); border-bottom-color:var(--works-green); }

/* ── Avatar ── */
.avatar { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; color:white; flex-shrink:0; }

/* ── Toast ── */
.toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:#1a1a2e; color:white; padding:10px 20px; border-radius:20px; font-size:13px; z-index:9999; animation:fadeIn 0.3s ease; box-shadow:0 4px 20px rgba(0,0,0,0.3); white-space:nowrap; }
.toast.success { background:#16a34a; }
.toast.error { background:#dc2626; }
@media(min-width:640px) { .toast { bottom:24px; } }

/* ── Loading ── */
.loading-spinner { width:28px; height:28px; border:3px solid #e5e7eb; border-top-color:var(--works-green); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto; }

/* ── Priority ── */
.priority-urgent { background:#fee2e2; color:#dc2626; }
.priority-high { background:#fff7ed; color:#ea580c; }
.priority-normal { background:#f0fff7; color:#16a34a; }
.priority-low { background:#f3f4f6; color:#6b7280; }

/* ── Animations ── */
@keyframes fadeIn { from{opacity:0;transform:translateX(-50%) translateY(8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes slideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

.fade-in { animation:slideUp 0.25s ease; }

/* ── Page ── */
.page-container { padding:16px; max-width:1400px; }
.page-title { font-size:20px; font-weight:700; color:#1a1a2e; margin:0; }
.section-title { font-size:14px; font-weight:600; color:#334155; }

/* ── Mobile Bottom Nav ── */
#mobile-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0;
  height: var(--mobile-nav-h);
  background:white; border-top:1px solid #e5e7eb;
  z-index:200;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}
.mobile-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; color:#9ca3af; gap:3px; padding:6px 4px; position:relative; transition:color 0.2s; }
.mobile-nav-item.active { color:var(--works-green); }
.mobile-nav-item i { font-size:18px; }
.mobile-nav-item span { font-size:10px; font-weight:500; }
.mobile-nav-badge { position:absolute; top:4px; right:calc(50% - 18px); background:#ef4444; color:white; font-size:9px; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; }

/* ── Responsive ── */
@media(max-width:767px) {
  #sidebar { display:none !important; }
  #main-content { margin-left:0 !important; padding-bottom:var(--mobile-nav-h); }
  #mobile-nav { display:flex; }
  .top-header { padding:0 12px; }
  .page-container { padding:12px; }
  .page-title { font-size:17px; }
  .modal-box { border-radius:20px 20px 0 0; }
}
@media(min-width:768px) and (max-width:1024px) {
  :root { --sidebar-w: 56px; }
}

/* ── Embedded Systems ── */
.embed-frame { width:100%; height:calc(100vh - var(--header-h) - 32px); border:none; border-radius:12px; }
.embed-toolbar { background:white; border-radius:12px 12px 0 0; padding:10px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #e5e7eb; }

/* ── NAS Status ── */
.nas-status { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:500; }
.nas-status.connected { background:#dcfce7; color:#16a34a; }
.nas-status.disconnected { background:#fee2e2; color:#dc2626; }

/* ── Log table ── */
.log-row-login { border-left:3px solid #10b981; }
.log-row-login_fail { border-left:3px solid #ef4444; }
.log-row-message { border-left:3px solid #8b5cf6; }
.log-row-checkin, .log-row-checkout { border-left:3px solid #3b82f6; }
.log-row-approve, .log-row-reject { border-left:3px solid #f59e0b; }

/* ── Permission chips ── */
.perm-chip { display:inline-flex; align-items:center; padding:3px 8px; background:#f1f5f9; border-radius:20px; font-size:11px; color:#475569; margin:2px; }
.perm-chip.active { background:#dcfce7; color:#16a34a; }

/* ── Shortcut cards (page content) ── */
.shortcut-card { background:white; border-radius:16px; padding:24px; cursor:pointer; text-align:center; transition:all 0.25s; border:2px solid transparent; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.shortcut-card:hover { border-color:var(--works-green); transform:translateY(-3px); box-shadow:0 8px 24px rgba(3,199,90,0.15); }
.shortcut-icon { width:64px; height:64px; border-radius:18px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-size:28px; }

/* ── Sidebar shortcut section ── */
.shortcut-section { padding:4px 0; }
.shortcut-title { font-size:9px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.8px; padding:4px 8px 4px; }
.shortcut-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:0 4px 4px; }
.shortcut-grid .shortcut-card {
  background:#1e293b; border-radius:10px; padding:10px 4px 8px;
  cursor:pointer; text-align:center; transition:all .2s;
  border:1px solid #334155; box-shadow:none;
}
.shortcut-grid .shortcut-card:hover { background:#2d3f55; border-color:#4a6080; transform:translateY(-1px); }
.shortcut-grid .shortcut-card .shortcut-icon {
  width:34px; height:34px; border-radius:9px; margin:0 auto 5px;
  display:flex; align-items:center; justify-content:center; font-size:15px; color:white;
}
.shortcut-grid .shortcut-card span { font-size:10px; color:#94a3b8; font-weight:500; display:block; line-height:1.2; }
.shortcut-icons-only { display:none; }
/* 사이드바 접힌 상태 */
#sidebar:not(.expanded) .shortcut-grid,
#sidebar:not(.expanded) .shortcut-title { display:none; }
#sidebar:not(.expanded) .shortcut-icons-only { display:block; }
#sidebar.expanded .shortcut-icons-only { display:none; }
#sidebar.expanded .shortcut-grid,
#sidebar.expanded .shortcut-title { display:block; }
#sidebar.expanded .shortcut-grid { display:grid; }

/* Clock */
.clock-display { font-size:40px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-2px; }

/* Grid helpers */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }

@media(max-width:640px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr 1fr; } }
@media(max-width:400px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* Overflow table wrapper */
.responsive-table { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }

/* iOS safe area */
@supports(padding:env(safe-area-inset-bottom)) {
  #mobile-nav { padding-bottom:env(safe-area-inset-bottom); height:calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); }
}