.iem-nav { background: #1f2937; color: #e5e7eb; padding: .5rem 1rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.iem-nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.iem-nav a { color: #e5e7eb; text-decoration: none; }
.iem-nav a:hover { color: #fff; text-decoration: underline; }
.iem-nav-brand { font-weight: 700; font-size: 1.05rem; margin-right: 1rem; }
.iem-nav ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; flex-wrap: wrap; }
.iem-nav-public { }
.iem-nav-internal { padding-left: 1rem; border-left: 1px solid #374151; }
.iem-nav-user { margin-left: auto; display: flex; align-items: center; gap: .75rem; color: #cbd5e1; font-size: .92rem; }
.iem-nav-user .iem-btn-link { color: #93c5fd; }
.iem-nav-current { font-weight: 700; color: #fff !important; }

.iem-page { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.iem-info { padding: .6rem .9rem; background: #eff6ff; border-left: 4px solid #3b82f6; margin: 1rem 0; }
.iem-toolbar { display: flex; justify-content: flex-end; gap: 1rem; margin-bottom: 1rem; }
.iem-card { max-width: 420px; margin: 2rem auto; padding: 1.5rem 2rem; border: 1px solid #ddd; border-radius: 6px; background: #fafafa; }
.iem-card h3 { margin-top: 0; }
.iem-card label { display: block; margin-bottom: .25rem; font-weight: 600; }
.iem-card input[type="email"], .iem-card input[type="password"] { width: 100%; padding: .5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
.iem-error { color: #c0392b; background: #fdecea; padding: .5rem .75rem; border-radius: 4px; }
.iem-success { color: #1b5e20; background: #e8f5e9; padding: .5rem .75rem; border-radius: 4px; }
.iem-banner { padding: .75rem 1rem; background: #eaf6ea; border-left: 4px solid #2e7d32; margin-bottom: 1rem; }
.iem-warn { padding: .75rem 1rem; background: #fff3cd; border-left: 4px solid #ffc107; }

.iem-filters { margin: 1rem 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.iem-filters select { padding: .35rem .5rem; }

.iem-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.iem-table th, .iem-table td { padding: .55rem .65rem; border-bottom: 1px solid #e5e5e5; text-align: left; vertical-align: top; }
.iem-table th { background: #f4f4f4; font-weight: 600; }
.iem-table tr.iem-past td { opacity: .6; }
.iem-table tr.iem-upcoming td { background: #f7fbff; }
.iem-center { text-align: center; }

.iem-detail-table .iem-notiz { width: 100%; min-height: 2.4em; font-family: inherit; padding: .25rem .35rem; border: 1px solid #ccc; border-radius: 3px; }
.iem-detail-table textarea:focus { border-color: #2271b1; }

.iem-btn { display: inline-block; padding: .4rem .9rem; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; font-size: .95rem; text-decoration: none; color: inherit; }
.iem-btn-primary { background: #2271b1; color: #fff; border-color: #2271b1; }
.iem-btn-primary:hover { background: #135e96; }
.iem-btn-danger { background: #fff; color: #c0392b; border-color: #e0a0a0; padding: .15rem .55rem; }
.iem-btn-danger:hover { background: #fdecea; }
.iem-btn-small { padding: .25rem .55rem; font-size: .85rem; }
.iem-btn-link { background: none; border: none; padding: 0 .25rem; color: #2271b1; cursor: pointer; }
.iem-inline { display: inline; }

.iem-add { margin-top: 1.5rem; }
.iem-add summary { cursor: pointer; display: inline-block; }
.iem-form { margin-top: 1rem; padding: 1rem; background: #f7f7f7; border-radius: 4px; max-width: 600px; }
.iem-form label { display: inline-block; margin-right: 1rem; font-weight: 600; }
.iem-form input, .iem-form select { padding: .35rem .5rem; margin-top: .25rem; }

.iem-meta { color: #555; }
.iem-kv th { width: 8em; text-align: left; }

.iem-row-form { display: contents; }
.iem-edit-cell { display: inline-block; position: relative; vertical-align: top; }
.iem-edit-cell summary { list-style: none; cursor: pointer; }
.iem-form-popover { position: absolute; right: 0; top: 100%; z-index: 50; min-width: 320px; max-width: 480px; background: #fff; border: 1px solid #d4d4d4; box-shadow: 0 6px 20px rgba(0,0,0,.15); margin-top: .25rem; padding: 1rem; }
.iem-w-full { width: 100%; box-sizing: border-box; }
.iem-form-popover label { display: block; font-weight: 600; margin-top: .5rem; }
.iem-form-popover input, .iem-form-popover select, .iem-form-popover textarea { font-size: .9rem; padding: .3rem .4rem; }

.iem-dauer { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; margin-left: .35rem; }
.iem-dauer .iem-bar { display: inline-block; width: 8px; height: 14px; background: linear-gradient(to top, #3b82f6, #60a5fa); border-radius: 1px; }
.iem-dauer small { color: #555; font-size: .78rem; margin-left: 4px; }

.iem-th-sortable { user-select: none; position: relative; padding-right: 1.2rem !important; }
.iem-th-sortable::after { content: "↕"; position: absolute; right: .4rem; opacity: .35; font-size: .85em; }
.iem-th-sortable[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: #2271b1; }
.iem-th-sortable[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: #2271b1; }
.iem-filter-row th { padding: .25rem .35rem !important; background: #fafafa !important; font-weight: 400; }
.iem-filter-input { width: 100%; box-sizing: border-box; padding: .25rem .35rem; font-size: .85rem; border: 1px solid #ccc; border-radius: 3px; }
