/* FMS Components */
.fms-card { background: var(--fms-bg-card); border: 1px solid var(--fms-border); border-radius: var(--fms-radius-lg); box-shadow: var(--fms-shadow-sm); }
.fms-card-header { padding: var(--fms-space-sm) var(--fms-space-md); border-bottom: 1px solid var(--fms-border); display: flex; align-items: center; justify-content: space-between; }
.fms-card-body { padding: var(--fms-space-md); }

.fms-btn { font-family: var(--fms-font); font-size: var(--fms-text-sm); font-weight: 500; padding: 6px 14px; border-radius: var(--fms-radius); border: 1px solid transparent; cursor: pointer; transition: all var(--fms-transition); display: inline-flex; align-items: center; gap: 6px; }
.fms-btn-primary { background: var(--fms-primary); color: var(--fms-text-inverse); border-color: var(--fms-primary); }
.fms-btn-primary:hover { background: var(--fms-primary-hover); color: var(--fms-text-inverse); }
.fms-btn-accent { background: var(--fms-accent); color: white; }
.fms-btn-accent:hover { background: var(--fms-accent-hover); color: white; }
.fms-btn-success { background: var(--fms-success); color: white; }
.fms-btn-outline { background: transparent; color: var(--fms-text); border-color: var(--fms-border); }
.fms-btn-outline:hover { background: var(--fms-bg); border-color: var(--fms-text-secondary); color: var(--fms-text); }
.fms-btn-sm { font-size: var(--fms-text-xs); padding: 4px 10px; }

.fms-badge { font-size: var(--fms-text-xs); font-weight: 500; padding: 2px 8px; border-radius: 4px; display: inline-flex; align-items: center; }
.fms-badge-primary { background: var(--fms-primary); color: white; }
.fms-badge-info { background: var(--fms-info); color: white; }
.fms-badge-success { background: var(--fms-success); color: white; }
.fms-badge-warning { background: var(--fms-warning); color: white; }
.fms-badge-danger { background: var(--fms-danger); color: white; }
.fms-badge-outline { background: transparent; border: 1px solid var(--fms-border); color: var(--fms-text-secondary); }

.fms-input, .fms-select { font-family: var(--fms-font); font-size: var(--fms-text-sm); padding: 6px 10px; border: 1px solid var(--fms-border); border-radius: var(--fms-radius); background: var(--fms-bg-card); color: var(--fms-text); transition: border-color var(--fms-transition); }
.fms-input:focus, .fms-select:focus { outline: none; border-color: var(--fms-accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.fms-label { font-size: var(--fms-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fms-text-secondary); margin-bottom: 4px; display: block; }

.fms-search { position: relative; display: inline-flex; }
.fms-search input { padding-right: 30px; }
.fms-search .fms-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--fms-text-secondary); cursor: pointer; font-size: 14px; display: none; padding: 0; }
.fms-search .fms-search-clear.visible { display: block; }
.fms-search .fms-search-clear:hover { color: var(--fms-danger); }

.fms-alert { padding: var(--fms-space-sm) var(--fms-space-md); border-radius: var(--fms-radius); font-size: var(--fms-text-sm); display: flex; align-items: center; gap: var(--fms-space-sm); margin-bottom: var(--fms-space-md); }
.fms-alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.fms-alert-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.fms-alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
[data-theme="dark"] .fms-alert-warning { background: #3d3200; color: #fde68a; border-color: #4a3d00; }
[data-theme="dark"] .fms-alert-danger { background: #2d1111; color: #fecaca; border-color: #3d1111; }
[data-theme="dark"] .fms-alert-success { background: #052e16; color: #a7f3d0; border-color: #064e3b; }

.fms-theme-toggle { background: none; border: 1px solid var(--fms-border); border-radius: var(--fms-radius); padding: 4px 8px; cursor: pointer; color: var(--fms-text); font-size: var(--fms-text-md); }

/* Sync sidebar */
.sync-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.3); z-index: 1040; }
.sync-sidebar { position: fixed; top: 0; right: -420px; width: 400px; height: 100vh; background: var(--fms-bg-card); box-shadow: -4px 0 20px rgba(0,0,0,.15); z-index: 1050; transition: right .3s ease; display: flex; flex-direction: column; }
.sync-sidebar.open { right: 0; }
.sync-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--fms-border); background: var(--fms-bg); }
.sync-sidebar-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.sync-card { border: 1px solid var(--fms-border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.sync-card-header { background: var(--fms-bg); padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--fms-border); }
.sync-card-body { padding: 10px 12px; }
.sync-now-btn.syncing { pointer-events: none; opacity: .7; }
@media(max-width:576px) { .sync-sidebar { width: 100%; right: -100%; } }
@keyframes spin { 100% { transform: rotate(360deg); } }
.spin-icon { animation: spin 1s linear infinite; display: inline-block; }