body {
  background-color: #f8f9fa; /* Light background for admin */
}

/* --- Admin Header --- */
.admin-header {
  background-color: #fff;
  border-bottom: 0.0625rem solid #dee2e6; /* 1px / 16 */
  padding: 0.625rem 0; /* 10px / 16 */
  position: center; /* Note: 'center' is not a valid value for 'position'. Common values are static, relative, absolute, fixed, sticky. Assuming this was intended to be handled differently or is a typo. */
  top: 0;
  z-index: 1000;
}
.admin-header .header-container { padding-top: 0.3125rem; padding-bottom: 0.3125rem; align-items: center; } /* 5px / 16 */
.admin-header .admin-header-nav { display: flex; align-items: center; }
#admin-user-email { font-size: 0.875rem; color: #555; margin-right: 0.9375rem; } /* 14px / 16, 15px / 16 */


/* --- NEW Admin Banner Styles --- */
.page-banner.admin-banner {
padding: 3.125rem 0; /* 50px / 16 */
/* Different background example for admin */
background-color: #e9ecef; /* Lighter grey */
/* Example subtle pattern or image */
background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)), url('images/placeholder-admin-bg.png');
min-height: 11.25rem; /* 180px / 16 */
color: #343a40; /* Darker text */
display: flex;
align-items: center;
justify-content: center;
}

.page-banner.admin-banner .container {
text-align: center;   /* center everything inside */
}

.admin-banner h1 {
text-shadow: none;
font-size: 1.875rem; /* 30px / 16 */
color: #212529;
}
.admin-banner p {
text-shadow: none;
font-size: 1rem; /* 16px / 16 */
color: #495057;
}


/* --- Main Admin Container & Heading --- */
.admin-container { padding-top: 1.875rem; padding-bottom: 3.75rem; max-width: 68.75rem; } /* 30px / 16, 60px / 16, 1100px / 16 */
.admin-container h2 { text-align: center; margin-bottom: 1.875rem; color: #415669; font-size: 1.625rem; } /* 30px / 16, 26px / 16 */




.ticket-item {
background-color: #fff;
border: 0.0625rem solid #d1d9e1; /* 1px / 16 */
border-left: 0.3125rem solid #343a40; /* 5px / 16 */
border-radius: 0.375rem; /* 6px / 16 */
padding: 1.25rem 1.5625rem; /* 20px / 16, 25px / 16 */
margin-bottom: 1.5625rem; /* 25px / 16 */
box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.07); /* 2px / 16, 5px / 16 */
}
.ticket-item:hover { box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1); } /* 4px / 16, 12px / 16 */

.ticket-item h3 {
margin: 0 0 0.9375rem 0; font-size: 1.1rem; color: #333; display: flex; /* 15px / 16. font-size already in rem */
justify-content: space-between; align-items: center; flex-wrap: wrap;
gap: 0.625rem; padding-bottom: 0.625rem; border-bottom: 0.0625rem dashed #eee; /* 10px / 16, 10px / 16, 1px / 16 */
}
/* Status Badge Styling (Reuse from dashboard.css or styles.css) */
.ticket-item h3 .ticket-status { font-size: 0.8rem; font-weight: 700; padding: 0.3125rem 0.625rem; border-radius: 0.9375rem; text-transform: uppercase; letter-spacing: 0.03125rem; } /* font-size already rem. 5px / 16, 10px / 16, 15px / 16, 0.5px / 16 */
.ticket-item h3 .ticket-status.status-new { background-color: #e7f3ff; color: #0d47a1; border: 0.0625rem solid #bbdefb; } /* 1px / 16 */
.ticket-item h3 .ticket-status.status-in-progress { background-color: #fff8e1; color: #f57f17; border: 0.0625rem solid #ffecb3; } /* 1px / 16 */
.ticket-item h3 .ticket-status.status-completed { background-color: #e8f5e9; color: #1b5e20; border: 0.0625rem solid #c8e6c9; } /* 1px / 16 */
.ticket-item h3 .ticket-status.status-on-hold { background-color: #f3e5f5; color: #4a148c; border: 0.0625rem solid #e1bee7; } /* 1px / 16 */
.ticket-item h3 .ticket-status.status-closed { background-color: #eceff1; color: #37474f; border: 0.0625rem solid #cfd8dc; } /* 1px / 16 */


/* Ticket details */
.ticket-item p { margin-bottom: 0.625rem; font-size: 0.9375rem; color: #444; line-height: 1.6; } /* 10px / 16, 15px / 16 */
.ticket-item p strong { color: #111; margin-right: 0.3125rem; font-weight: 600; } /* 5px / 16 */
.ticket-item .file-links { margin-top: 0.625rem; } /* 10px / 16 */
.ticket-item .file-links strong { display: block; margin-bottom: 0.3125rem; } /* 5px / 16 */
.ticket-item .file-links a { margin-right: 0.9375rem; font-size: 0.875rem; color: #0061cc; text-decoration: none; } /* 15px / 16, 14px / 16 */
.ticket-item .file-links a:hover { text-decoration: underline; }

/* Parts list table */
.ticket-item h4 { font-size: 1rem; color: #333; margin-top: 0.9375rem; margin-bottom: 0.5rem; } /* font-size already rem. 15px / 16, 8px / 16 */
.parts-list-table { width: 100%; margin-top: 0.625rem; border-collapse: collapse; font-size: 0.875rem; } /* 10px / 16, 14px / 16 */
.parts-list-table th, .parts-list-table td { border: 0.0625rem solid #eee; padding: 0.375rem 0.5rem; text-align: left; vertical-align: top; } /* 1px / 16, 6px / 16, 8px / 16 */
.parts-list-table th { background-color: #f8f9fa; font-weight: 600; color: #444; }
.parts-list-table td:first-child { width: 3.125rem; text-align: center; } /* 50px / 16 */

/* --- Admin Actions in Ticket --- */
.ticket-actions {
  text-align: right; margin-top: 0.9375rem; padding-top: 0.9375rem; border-top: 0.0625rem dashed #eee; /* 15px / 16, 15px / 16, 1px / 16 */
  display: flex; /* Use flex for better alignment */
  justify-content: flex-end; /* Align actions right */
  align-items: center;
  gap: 0.625rem; /* Space between action items */ /* 10px / 16 */
}
.admin-action-separator {
  color: #ccc;
  margin: 0 0.3125rem; /* 5px / 16 */
}
.status-label {
  font-size: 0.875rem; /* 14px / 16 */
  color: #555;
  font-weight: 600;
}
.admin-status-select {
  padding: 0.3125rem 0.5rem; /* 5px / 16, 8px / 16 */
  border: 0.0625rem solid #ccc; /* 1px / 16 */
  border-radius: 0.25rem; /* 4px / 16 */
  font-size: 0.875rem; /* 14px / 16 */
  margin-left: 0.3125rem; /* Space after label */ /* 5px / 16 */
}
.delete-button {
  background: none;
  border: none;
  color: #dc3545; /* Red for delete */
  cursor: pointer;
  font-size: 0.875rem; /* 14px / 16 */
  font-weight: 600;
  padding: 0.375rem 0.625rem; /* 6px / 16, 10px / 16 */
  text-decoration: underline;
}
.delete-button:hover {
  color: #a71d2a;
}

/* --- Reply Section Styles (Reuse from dashboard.css or shared styles) --- */
.reply-button { padding: 0.5rem 1.125rem; background-color: #555; color: white; border: none; font-weight: 600; font-size: 0.875rem; border-radius: 0.25rem; cursor: pointer; transition: background-color 0.3s ease; } /* 8px / 16, 18px / 16, 14px / 16, 4px / 16 */
.reply-button:hover { background-color: #333; }
.reply-section { margin-top: 1.25rem; padding: 1.25rem; background-color: #f8f9fa; border: 0.0625rem solid #e9ecef; border-radius: 0.3125rem; } /* 20px / 16, 20px / 16, 1px / 16, 5px / 16 */
.reply-section h4 { margin-top: 0; margin-bottom: 0.9375rem; color: #415669; font-size: 1rem; } /* 15px / 16, 16px / 16 */
.message-history { max-height: 18.75rem; overflow-y: auto; margin-bottom: 1.25rem; padding: 0.625rem; background-color: #f0f0f0; border-radius: 0.25rem; border: 0.0625rem solid #e0e0e0; } /* 300px / 16, 20px / 16, 10px / 16, 4px / 16, 1px / 16 */

/* Message Styling */
.message-item { padding: 0.625rem; margin-bottom: 0.75rem; border-radius: 0.5rem; line-height: 1.5; max-width: 85%; word-wrap: break-word; } /* 10px / 16, 12px / 16, 8px / 16 */
.message-item.message-user { background-color: #e7f3ff; margin-right: auto; /* Admin viewing user reply */ border-radius: 0.5rem 0.5rem 0.5rem 0; text-align: left;} /* 8px / 16 */
.message-item.message-other { background-color: #e7f3ff; margin-right: auto; /* Treat other users same as current non-admin user */ border-radius: 0.5rem 0.5rem 0.5rem 0; text-align: left;} /* 8px / 16 */
.message-item.message-admin { background-color: #d1eaff; margin-left: auto; /* Admin reply align right */ border-radius: 0.5rem 0.5rem 0 0.5rem; text-align: right;} /* Blue bg for admin replies */ /* 8px / 16 */
.message-meta { font-size: 0.75rem; color: #666; margin-bottom: 0.25rem; } /* 12px / 16, 4px / 16 */
.message-admin .message-meta { text-align: right; }
.message-other .message-meta, .message-user .message-meta { text-align: left; }
.message-text { font-size: 0.9375rem; color: #212529; } /* 15px / 16 */
.message-admin .message-text { text-align: right; }
.message-other .message-text, .message-user .message-text { text-align: left; }
.message-attachment { margin-top: 0.5rem; font-size: 0.8125rem; } /* 8px / 16, 13px / 16 */
.message-attachment a { color: #0056b3; text-decoration: none; }
.message-attachment a:hover { text-decoration: underline; }

/* Reply Form */
.reply-form textarea { width: 100%; min-height: 5rem; padding: 0.625rem; border: 0.0625rem solid #ccc; border-radius: 0.25rem; margin-bottom: 0.625rem; box-sizing: border-box; font-family: inherit; font-size: 0.875rem; } /* 80px / 16, 10px / 16, 1px / 16, 4px / 16, 10px / 16, 14px / 16 */
.reply-form .file-input-group { border: 0.0625rem solid #eee; padding: 0.9375rem; border-radius: 0.25rem; background-color: #f9f9f9; margin-bottom: 0.9375rem; } /* 1px / 16, 15px / 16, 4px / 16, 15px / 16 */
.reply-form .file-input-group > label:first-of-type { display: block; font-weight: 600; font-size: 0.9375rem; color: #333; margin-bottom: 0.625rem; } /* 15px / 16, 10px / 16 */
.reply-form .file-upload-btn { display: inline-block; padding: 0.5rem 0.9375rem; background-color: #415669; color: #fff; border: none; border-radius: 0.25rem; cursor: pointer; font-size: 0.8125rem; font-weight: 600; transition: background-color 0.3s ease; margin-right: 0.625rem; } /* 8px / 16, 15px / 16, 4px / 16, 13px / 16, 10px / 16 */
.reply-form .file-upload-btn:hover { background-color: #314252; }
.reply-form .file-input-group small { display: inline; font-size: 0.75rem; color: #666; } /* 12px / 16 */
.reply-form .file-list-display { margin-top: 0.75rem; max-height: 6.25rem; overflow-y: auto; } /* 12px / 16, 100px / 16 */
.reply-form .file-list-display .no-files { color: #888; font-size: 0.8125rem; font-style: italic; } /* 13px / 16 */
.reply-form .file-item { display: flex; justify-content: space-between; align-items: center; padding: 0.375rem 0.5rem; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; margin-bottom: 0.375rem; font-size: 0.8125rem; } /* 6px / 16, 8px / 16, 1px / 16, 4px / 16, 6px / 16, 13px / 16 */
.reply-form .file-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 0.5rem; color: #333; } /* 8px / 16 */
.reply-form .file-remove-btn { background: none; border: none; color: #cc0000; font-size: 1rem; font-weight: bold; cursor: pointer; padding: 0 0.25rem; line-height: 1; opacity: 0.7; transition: opacity 0.2s ease; } /* 16px / 16, 4px / 16 */
.reply-form .file-remove-btn:hover { opacity: 1; color: #a00000; }
.reply-form button[type="submit"] { display: block; width: 100%; padding: 0.75rem; font-size: 0.9375rem; margin-top: 0.9375rem; background-color: #0061cc; color: #fff; border: none; border-radius: 0.25rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } /* 12px / 16, 15px / 16, 15px / 16, 4px / 16 */
.reply-form button[type="submit"]:hover { background-color: #004a9e; }