.cr-login-wrap { max-width: 420px; margin: 2em auto; padding: 2em; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
.cr-form p { margin-bottom: 1em; }
.cr-form label { display: block; font-weight: 600; margin-bottom: .3em; }
.cr-form input[type="text"],
.cr-form input[type="password"],
.cr-form input[type="file"],
.cr-form textarea,
.cr-form select { width: 100%; padding: .5em; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }

.cr-btn { display: inline-block; padding: .55em 1.1em; background: #2c3e50; color: #fff; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; font-weight: 600; font-size: .95em; }
.cr-btn:hover { background: #1a252f; color: #fff; }
.cr-btn-primary { background: #2271b1; }
.cr-btn-primary:hover { background: #135e96; }
.cr-btn-small { padding: .35em .7em; font-size: .85em; }
.cr-btn-logout { background: #a94442; }

.cr-notice { padding: 1em; background: #f0f6fc; border-left: 4px solid #2271b1; margin: 1em 0; }
.cr-alert { padding: .8em 1em; border-radius: 4px; margin-bottom: 1em; }
.cr-alert-success { background: #edf7ed; border-left: 4px solid #46b450; }
.cr-alert-error { background: #fbeaea; border-left: 4px solid #dc3232; }

.cr-dashboard { margin: 1.5em 0; }
.cr-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #eee; }

.cr-create-details, .cr-update-details, .cr-export-details { margin-bottom: .5em; }
.cr-create-details summary, .cr-update-details summary, .cr-export-details summary { list-style: none; cursor: pointer; }
.cr-create-details summary::-webkit-details-marker, .cr-update-details summary::-webkit-details-marker, .cr-export-details summary::-webkit-details-marker { display: none; }
.cr-create-details[open] summary, .cr-update-details[open] summary, .cr-export-details[open] summary { margin-bottom: 1em; }
.cr-create-form { max-width: 520px; padding: 1.2em; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; margin-top: .5em; }
.cr-update-form { min-width: 260px; padding: .8em; border: 1px solid #ddd; border-radius: 6px; background: #fafafa; margin-top: .3em; }
.cr-export-form { min-width: 220px; padding: 1.2em; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; margin-top: .5em; }

.cr-toolbar { display: flex; gap: 1em; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1em; }
.cr-btn-export { background: #4b5563; }
.cr-btn-export:hover { background: #374151; }

.cr-filters { margin: 1em 0; }
.cr-filters select { padding: .3em; }

.cr-table-wrap { overflow-x: auto; }
.cr-table { width: 100%; border-collapse: collapse; background: #fff; }
.cr-table th, .cr-table td { border: 1px solid #e2e2e2; padding: .6em .7em; text-align: left; vertical-align: top; font-size: .92em; }
.cr-table th { background: #f5f5f5; }
.cr-desc { max-width: 240px; white-space: normal; }
.cr-empty { text-align: center; padding: 2em; color: #777; }

.cr-badge { display: inline-block; padding: .2em .6em; border-radius: 12px; font-size: .8em; font-weight: 600; color: #fff; }
.cr-priority-critical { background: #b91c1c; }
.cr-priority-high { background: #dc6803; }
.cr-priority-medium { background: #ca8a04; }
.cr-priority-low { background: #4b5563; }

.cr-status-open { background: #dc3232; }
.cr-status-in_progress { background: #d97706; }
.cr-status-closed { background: #16a34a; }

/* SLA tracking bar */
.cr-sla-wrap { min-width: 140px; }
.cr-sla-track { width: 100%; height: 10px; background: #e5e7eb; border-radius: 6px; overflow: hidden; }
.cr-sla-fill { height: 100%; border-radius: 6px; transition: width 1s linear, background-color .4s ease; }
.cr-sla-green { background: #16a34a; }
.cr-sla-amber { background: #d97706; }
.cr-sla-red { background: #dc2626; }
.cr-sla-label { font-size: .78em; margin-top: .3em; color: #444; white-space: nowrap; }

.cr-sla-static { display: inline-block; padding: .2em .6em; border-radius: 12px; font-size: .8em; font-weight: 600; color: #fff; }
.cr-sla-ontime { background: #16a34a; }
.cr-sla-late { background: #dc2626; }
