/* Site Manager - Product CSS */
:root {
    --sidebar-width: 250px;
    --sidebar-bg: #1e293b;
    --sidebar-text: #94a3b8;
    --sidebar-active: #3b82f6;
    --sidebar-hover-bg: #334155;
    --topbar-height: 56px;
    --content-max-width: 1400px;
    --bg-body: #f1f5f9;
    --card-shadow: 0 1px 3px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
body { margin:0; padding:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif; font-size:14px; background:var(--bg-body); color:#1e293b; }

.app-wrapper { display:flex; min-height:100vh; }
.app-sidebar { width:var(--sidebar-width); background:var(--sidebar-bg); color:var(--sidebar-text); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:1040; overflow-y:auto; transition:transform .25s ease; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:18px 20px; font-size:17px; font-weight:700; color:#fff; border-bottom:1px solid #334155; white-space:nowrap; }
.sidebar-brand i { font-size:22px; color:var(--sidebar-active); }
.sidebar-nav { list-style:none; margin:0; padding:8px 0; flex:1; }
.sidebar-nav li a { display:flex; align-items:center; gap:10px; padding:10px 20px; color:var(--sidebar-text); text-decoration:none; font-size:13.5px; transition:background .15s,color .15s; position:relative; }
.sidebar-nav li a:hover { background:var(--sidebar-hover-bg); color:#e2e8f0; }
.sidebar-nav li.active a { background:var(--sidebar-hover-bg); color:#fff; border-right:3px solid var(--sidebar-active); }
.sidebar-nav li.active a i { color:var(--sidebar-active); }
.sidebar-nav li a i { font-size:17px; width:22px; text-align:center; }
.sidebar-section { padding:16px 20px 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#64748b; font-weight:600; }
.sidebar-badge { margin-left:auto; background:#ef4444; color:#fff; font-size:11px; padding:1px 7px; border-radius:10px; font-weight:600; }
.sidebar-footer { border-top:1px solid #334155; padding:12px 16px; }
.sidebar-user { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sidebar-user i { font-size:28px; color:#64748b; }
.sidebar-user-name { font-size:13px; color:#e2e8f0; font-weight:500; }
.sidebar-user-role { font-size:11px; color:#64748b; }
.sidebar-logout { display:flex; align-items:center; gap:8px; color:#64748b; text-decoration:none; font-size:12.5px; padding:6px 4px; border-radius:6px; transition:background .15s; }
.sidebar-logout:hover { background:var(--sidebar-hover-bg); color:#f87171; }

.app-main { flex:1; margin-left:var(--sidebar-width); display:flex; flex-direction:column; min-height:100vh; }
.app-topbar { height:var(--topbar-height); background:#fff; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; padding:0 24px; gap:16px; position:sticky; top:0; z-index:1030; }
.topbar-title { font-size:16px; font-weight:600; margin:0; flex:1; color:#1e293b; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-alert { position:relative; color:#64748b; font-size:20px; text-decoration:none; }
.topbar-alert:hover { color:#1e293b; }
.topbar-alert-badge { position:absolute; top:-4px; right:-6px; background:#ef4444; color:#fff; font-size:10px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; }
.sidebar-toggle { color:#475569; padding:4px 8px; display:none; }

.app-content { padding:24px; max-width:var(--content-max-width); width:100%; margin:0 auto; flex:1; }

.app-login-wrapper { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#1e293b 0%,#334155 100%); }
.login-card { background:#fff; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.2); padding:40px; width:100%; max-width:420px; }
.login-brand { text-align:center; margin-bottom:28px; }
.login-brand i { font-size:40px; color:var(--sidebar-active); }
.login-brand h1 { font-size:22px; margin:8px 0 0; color:#1e293b; }

.card { border:none; border-radius:8px; box-shadow:var(--card-shadow); background:#fff; }
.card-header { background:#fff; border-bottom:1px solid #f1f5f9; font-weight:600; font-size:14px; padding:14px 20px; }
.card-body { padding:20px; }
.card-footer { background:#fafbfc; border-top:1px solid #f1f5f9; padding:12px 20px; }

.stat-card { border-radius:8px; padding:20px; background:#fff; box-shadow:var(--card-shadow); display:flex; align-items:center; gap:16px; }
.stat-icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; }
.stat-icon.blue { background:linear-gradient(135deg,#3b82f6,#2563eb); }
.stat-icon.green { background:linear-gradient(135deg,#22c55e,#16a34a); }
.stat-icon.orange { background:linear-gradient(135deg,#f97316,#ea580c); }
.stat-icon.red { background:linear-gradient(135deg,#ef4444,#dc2626); }
.stat-icon.purple { background:linear-gradient(135deg,#8b5cf6,#7c3aed); }
.stat-value { font-size:24px; font-weight:700; color:#1e293b; line-height:1; }
.stat-label { font-size:12px; color:#64748b; margin-top:2px; }

.table { font-size:13.5px; margin-bottom:0; }
.table th { background:#f8fafc; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:#64748b; border-bottom:2px solid #e2e8f0; padding:10px 14px; white-space:nowrap; }
.table td { padding:10px 14px; vertical-align:middle; border-bottom:1px solid #f1f5f9; }
.table-hover tbody tr:hover { background:#f8fafc; }

.badge { font-weight:500; font-size:11.5px; padding:4px 8px; border-radius:5px; }
.btn { font-size:13.5px; border-radius:6px; }
.btn-sm { font-size:12px; padding:4px 10px; }
.btn-primary { background:#3b82f6; border-color:#3b82f6; }
.btn-primary:hover { background:#2563eb; border-color:#2563eb; }

.form-control,.form-select { font-size:13.5px; border-radius:6px; border-color:#e2e8f0; }
.form-control:focus,.form-select:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.form-label { font-size:13px; font-weight:500; color:#475569; margin-bottom:4px; }
.form-text { font-size:12px; }

.pw-mask { font-family:monospace; letter-spacing:2px; }
.pw-toggle { cursor:pointer; color:#64748b; }
.pw-toggle:hover { color:#1e293b; }

.alert { border-radius:8px; font-size:13.5px; border:none; }
.alert-success { background:#f0fdf4; color:#166534; }
.alert-danger { background:#fef2f2; color:#991b1b; }
.alert-warning { background:#fffbeb; color:#92400e; }

.nav-tabs .nav-link { font-size:13.5px; color:#64748b; border:none; padding:10px 16px; }
.nav-tabs .nav-link.active { color:#3b82f6; border-bottom:2px solid #3b82f6; background:transparent; }

.pagination .page-link { font-size:13px; border-radius:6px; margin:0 2px; }
.pagination .page-item.active .page-link { background:#3b82f6; border-color:#3b82f6; }

.filter-card .card-body { padding:14px 20px; }

.font-monospace { font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace; }

@media (max-width:991.98px) {
    .app-sidebar { transform:translateX(-100%); }
    .app-sidebar.show { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,.3); }
    .app-main { margin-left:0; }
    .sidebar-toggle { display:block; }
}
@media (max-width:575.98px) {
    .app-content { padding:16px; }
    .topbar-title { font-size:14px; }
}
@media print {
    .app-sidebar,.app-topbar,.sidebar-toggle { display:none!important; }
    .app-main { margin-left:0!important; }
    .app-content { max-width:100%; padding:0; }
}