/**
 * IMSATT Uniform Design System
 * Colors: #31b7e4 (primary cyan), #b03876 (accent magenta)
 * Used by: IMSATT dashboard, student dashboard, messages dashboard,
 * student tracking, student attendance, student communication
 */

/* === Page & Container === */
.imsatt-page { background: #f5f5f5; padding: 20px; min-height: 100vh; }
.imsatt-container { width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* Full-width banner inside IMSATT container (natural aspect ratio, no crop) */
.imsatt-container .imsatt-banner-image-wrap { line-height: 0; background: #fff; border-bottom: 1px solid #e0e0e0;text-align: -webkit-center; }
.imsatt-container .imsatt-banner-image {width: auto; height: auto; display: block; height: 115px;}
.imsatt-banner-image-wrap img {
    width: 100%;
    width: stretch;
}

/* === Header Bar (#31b7e4) === */
.imsatt-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; background: #31b7e4; color: #fff; }
.imsatt-header-title { margin: 0; font-size: 1.5rem; font-weight: 700; }
.imsatt-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* === Buttons === */
.imsatt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: all 0.2s; border: none; cursor: pointer; }
.imsatt-btn-primary { background: #31b7e4; color: #fff !important; }
.imsatt-btn-primary:hover { background: #2aa3cc; color: #fff !important; }
.imsatt-btn-secondary { background: rgba(255,255,255,0.25); color: #fff !important; }
.imsatt-btn-secondary:hover { background: rgba(255,255,255,0.35); color: #fff !important; }
.imsatt-btn-success { background: #2e7d32; color: #fff !important; }
.imsatt-btn-success:hover { background: #1b5e20; color: #fff !important; }
.imsatt-btn-logout { background: #c62828; color: #fff !important; }
.imsatt-btn-logout:hover { background: #b71c1c; color: #fff !important; }

/* Icon images on dashboard actions / stat cards */
.imsatt-btn.imsatt-btn-with-icon { flex-direction: column; gap: 8px; text-align: center; padding-top: 14px; padding-bottom: 14px; }
.imsatt-btn .imsatt-action-icon { width: 48px; height: 48px; object-fit: contain; display: block; flex-shrink: 0; }
.imsatt-btn .imsatt-btn-label { display: block; line-height: 1.25; }
.imsatt-stat-icon { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto 12px; flex-shrink: 0; }

/* === Welcome / Text === */
.imsatt-welcome { font-size: 1.15rem; font-weight: 600; color: #31b7e4; }

/* === Cards & Panels === */
.imsatt-card { background: #e8f7fc; padding: 20px; border: 1px solid #b8e4f8; border-radius: 6px; }
.imsatt-card-title { margin: 0 0 16px 0; font-size: 1.05rem; font-weight: 600; color: #31b7e4; }

/* === Tabs / Action Row === */
.imsatt-tabs { display: flex; gap: 10px; padding: 16px 20px; background: #f0fafd; border-bottom: 1px solid #b8e4f8; flex-wrap: wrap; }
.imsatt-tab { padding: 10px 18px; border-radius: 6px; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.imsatt-tab-active { background: #31b7e4; color: #fff !important; }
.imsatt-tab-inactive { background: #fff; color: #31b7e4; border: 1px solid #31b7e4; }
.imsatt-tab-inactive:hover { background: #e8f7fc; }

/* === Stats / Numbers === */
.imsatt-stat-card { background: #e8f7fc; padding: 20px; border-radius: 6px; text-align: center; border: 1px solid #b8e4f8; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.imsatt-stat-number { font-size: 1.8rem; font-weight: 700; color: #31b7e4; }
.imsatt-stat-label { font-size: 0.9rem; color: #2d5a6a; font-weight: 500; }

/* === Tables === */
.imsatt-table { width: 100%; border-collapse: collapse; }
.imsatt-table th { background: #e8f7fc; color: #31b7e4; padding: 12px 16px; font-weight: 600; font-size: 0.9rem; border: 1px solid #b8e4f8; text-align: left; }
.imsatt-table td { padding: 12px 16px; border: 1px solid #e0e0e0; font-size: 0.9rem; }
.imsatt-table tbody tr:hover { background: #f0fafd; }

/* === Inputs === */
.imsatt-input { padding: 8px 12px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 0.95rem; }
.imsatt-input:focus { border-color: #31b7e4; outline: none; }
.imsatt-input-box { background: #e8f7fc; padding: 16px; border-radius: 6px; border: 1px solid #b8e4f8; }

/* === Empty State === */
.imsatt-empty { text-align: center; color: #757575; padding: 48px 24px; }

/* === Avatar === */
.imsatt-avatar { width: 100px; height: 100px; object-fit: cover; border: 3px solid #31b7e4; border-radius: 8px; display: block; }