/* ============================================================
   components.css – Shared UI Components
   (buttons, cards, forms, badges, tables, toasts)
   ============================================================ */

/* ═══ CARDS ═══ */
.card {
    background: var(--surface-0);
    border: 1px solid var(--surface-200);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-md);
    padding: var(--sp-6);
    transition: all var(--t-base);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card--flat { box-shadow: none; }
.card--flat:hover { transform: none; box-shadow: none; }

.card-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: var(--sp-5); gap: var(--sp-4);
}
.card-title { font-size: var(--text-lg); font-weight: 700; color: var(--surface-900); }
.card-subtitle { font-size: var(--text-sm); color: var(--surface-500); margin-top: 2px; }
.card-icon {
    width: 44px; height: 44px; border-radius: var(--r-xl);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.card-icon--blue   { background: var(--brand-100); }
.card-icon--green  { background: var(--color-success-bg); }
.card-icon--amber  { background: var(--color-warning-bg); }
.card-icon--red    { background: var(--color-danger-bg); }

/* ═══ BUTTONS ═══ */

/* Primary – gradient brand (kế thừa từ HUBSP btn-premium) */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5); border-radius: var(--r-xl);
    font-size: var(--text-sm); font-weight: 600; cursor: pointer;
    transition: all var(--t-base); border: none; white-space: nowrap;
    text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.btn-primary {
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
    color: #fff; box-shadow: var(--shadow-brand);
}
.btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-brand-hover); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    background: var(--surface-50); color: var(--surface-700);
    border: 1px solid var(--surface-200);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-100); border-color: var(--surface-300); }

.btn-danger {
    background: var(--color-danger-bg); color: var(--color-danger);
    border: 1px solid var(--color-danger-border);
}
.btn-danger:hover:not(:disabled) { background: var(--color-danger); color: #fff; }

.btn-ghost { color: var(--surface-500); }
.btn-ghost:hover { background: var(--surface-50); color: var(--surface-800); }

.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); border-radius: var(--r-lg); }
.btn-lg { padding: var(--sp-4) var(--sp-6); font-size: var(--text-base); }
.btn-full { width: 100%; }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--r-lg); }

/* Loading spinner inside button */
.btn-spinner {
    width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: spin 0.6s linear infinite;
}

/* ═══ FORMS ═══ */
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-row    { display: grid; gap: var(--sp-3); }
.form-row-2  { grid-template-columns: 1fr 1fr; }
.form-row-3  { grid-template-columns: 1fr 1fr 1fr; }

.form-label {
    font-size: var(--text-xs); font-weight: 600; color: var(--surface-500);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.form-input, .form-select {
    width: 100%; padding: var(--sp-3) var(--sp-4);
    background: var(--surface-50); color: var(--surface-800);
    border: 1px solid var(--surface-300); border-radius: var(--r-xl);
    font-size: var(--text-sm); font-weight: 500;
    transition: all var(--t-fast); outline: none;
}
.form-input::placeholder { color: var(--surface-400); }
.form-input:focus, .form-select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(0,82,204,0.12);
    background: var(--surface-0);
}
.form-input.error { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.form-error {
    font-size: var(--text-xs); color: var(--color-danger); font-weight: 500;
    display: flex; align-items: center; gap: var(--sp-1);
}
.form-section {
    background: var(--surface-50); border: 1px solid var(--surface-200);
    border-radius: var(--r-2xl); padding: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.form-section-title { font-size: var(--text-sm); font-weight: 700; color: var(--surface-700); }

/* ═══ BADGES ═══ */
.badge {
    display: inline-flex; align-items: center;
    padding: 2px var(--sp-2); border-radius: var(--r-full);
    font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}
.badge--blue    { background: var(--brand-100);              color: var(--brand-700); }
.badge--green   { background: var(--color-success-bg);       color: #15803d; }
.badge--amber   { background: var(--color-warning-bg);       color: #92400e; }
.badge--red     { background: var(--color-danger-bg);        color: #b91c1c; }
.badge--gray    { background: var(--surface-100);            color: var(--surface-600); }
.badge--violet  { background: #f5f3ff;                       color: #6d28d9; }

/* ═══ TABLE ═══ */
.table-wrapper {
    overflow-x: auto; border-radius: var(--r-xl);
    border: 1px solid var(--surface-200);
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead tr {
    background: var(--surface-50); border-bottom: 1px solid var(--surface-200);
}
.data-table th {
    padding: var(--sp-3) var(--sp-4);
    text-align: left; font-size: var(--text-xs); font-weight: 700;
    color: var(--surface-500); text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap;
}
.data-table td {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-sm); color: var(--surface-700);
    border-bottom: 1px solid var(--surface-100);
    vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--surface-50); }
.data-table tbody tr.overdue td { background: rgba(239,68,68,0.04); }
.data-table tbody tr.completed td { opacity: 0.5; }
.data-table tbody tr.completed td .row-title { text-decoration: line-through; }

/* ═══ EMPTY STATE ═══ */
.empty-state {
    padding: var(--sp-12) var(--sp-8);
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
    text-align: center;
}
.empty-state-icon { font-size: 2.5rem; }
.empty-state-title { font-size: var(--text-base); font-weight: 700; color: var(--surface-700); }
.empty-state-desc  { font-size: var(--text-sm); color: var(--surface-400); }

/* ═══ ALERT / NOTICE ═══ */
.alert {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-xl);
    font-size: var(--text-sm); font-weight: 500;
    animation: slideUp 0.3s ease;
}
.alert--danger  { background: var(--color-danger-bg);  border: 1px solid var(--color-danger-border);  color: #b91c1c; }
.alert--warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); color: #92400e; }
.alert--success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: #15803d; }
.alert--info    { background: var(--brand-50);          border: 1px solid var(--brand-100);            color: var(--brand-800); }
.alert-icon { font-size: var(--text-lg); flex-shrink: 0; }

/* ═══ TOAST ═══ */
.toast {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-xl);
    background: var(--surface-900); color: #fff;
    box-shadow: var(--shadow-xl); font-size: var(--text-sm); font-weight: 500;
    animation: toastIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
    min-width: 240px;
}
.toast.hide { animation: toastOut 0.3s ease both; }
.toast--success { background: #14532d; }
.toast--danger  { background: #7f1d1d; }
.toast--warning { background: #78350f; }
.toast-icon { font-size: var(--text-lg); }

/* ═══ FILTER TABS ═══ */
.filter-tabs {
    display: flex; gap: var(--sp-2);
    padding: 4px; background: var(--surface-100);
    border-radius: var(--r-xl); width: fit-content;
}
.filter-tab {
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-lg);
    font-size: var(--text-xs); font-weight: 700; cursor: pointer;
    transition: all var(--t-base); color: var(--surface-500); white-space: nowrap;
}
.filter-tab.active {
    background: var(--surface-0); color: var(--brand-700);
    box-shadow: var(--shadow-sm);
}

/* ═══ CHECKBOX ═══ */
.checkbox-wrap {
    display: flex; align-items: center; gap: var(--sp-2); cursor: pointer;
}
.checkbox-wrap input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--brand-500); cursor: pointer;
}

/* ═══ DIVIDER ═══ */
.divider { border: none; border-top: 1px solid var(--surface-100); margin: var(--sp-4) 0; }

/* ═══ GPA SUMMARY CARD ═══ */
.gpa-summary {
    background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-500) 100%);
    border-radius: var(--r-2xl); padding: var(--sp-6) var(--sp-8);
    color: #fff; display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-brand);
}
.gpa-value { font-size: var(--text-3xl); font-weight: 900; line-height: 1; }
.gpa-label { font-size: var(--text-sm); opacity: 0.8; margin-top: 4px; }
.gpa-letter {
    font-size: 3rem; font-weight: 900; opacity: 0.9; line-height: 1;
    text-align: right;
}

/* ═══ CALENDAR VIEW ═══ */
.calendar-view {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.calendar-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-2);
}
.calendar-month-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--surface-800);
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--surface-200);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--surface-0);
}
.calendar-weekday {
    padding: var(--sp-3) var(--sp-1);
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--surface-500);
    background: var(--surface-50);
    border-bottom: 1px solid var(--surface-200);
    text-transform: uppercase;
}
.calendar-day {
    min-height: 80px;
    padding: var(--sp-2);
    border-bottom: 1px solid var(--surface-100);
    border-right: 1px solid var(--surface-100);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: background var(--t-fast);
    position: relative;
}
.calendar-day:nth-child(7n) {
    border-right: none;
}
.calendar-day:hover:not(.calendar-day--empty) {
    background: var(--surface-50);
}
.calendar-day--empty {
    background: var(--surface-50);
    opacity: 0.4;
    cursor: default;
}
.calendar-day--today {
    background: rgba(0, 82, 204, 0.03);
}
.calendar-day--today .calendar-day-num {
    background: var(--brand-500);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.calendar-day--selected {
    box-shadow: inset 0 0 0 2px var(--brand-500);
}
.calendar-day-num {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--surface-700);
    align-self: flex-start;
}
.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    margin-top: auto;
    padding-top: var(--sp-1.5);
    overflow: hidden;
}
.calendar-event {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 2px;
}
.calendar-event--exam {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.15);
}
.calendar-event--study {
    background: rgba(0, 82, 204, 0.08);
    color: var(--brand-700);
    border: 1px solid rgba(0, 82, 204, 0.15);
}
.calendar-event--done {
    background: rgba(21, 128, 61, 0.08);
    color: #15803d;
    border: 1px solid rgba(21, 128, 61, 0.15);
    text-decoration: line-through;
    opacity: 0.7;
}
.calendar-event--makeup {
    background: rgba(217, 119, 6, 0.08);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.15);
}
.calendar-event--missed {
    background: rgba(234, 88, 12, 0.08);
    color: #c2410c;
    border: 1px solid rgba(234, 88, 12, 0.15);
}

/* Panel chi tiết ngày */
.day-details-panel {
    margin-top: var(--sp-4);
    animation: fadeIn var(--t-base) ease;
}
.day-details-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--surface-800);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.day-details-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.day-event-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-50);
    border: 1px solid var(--surface-200);
    border-radius: var(--r-xl);
    gap: var(--sp-3);
}
.day-event-item--exam   { border-left: 4px solid #dc2626; }
.day-event-item--study  { border-left: 4px solid var(--brand-500); }
.day-event-item--makeup { border-left: 4px solid #d97706; }
.day-event-item--missed { border-left: 4px solid #ea580c; background: rgba(234, 88, 12, 0.02); }

.day-event-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.day-event-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--surface-800);
}
.day-event-desc {
    font-size: var(--text-xs);
    color: var(--surface-500);
}
.day-event-actions {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Daily Study Notes & Todo list (expanded) */
.day-event-details-area {
    width: 100%;
    margin-top: var(--sp-3);
    padding: var(--sp-4);
    background: var(--surface-50);
    border: 1px solid var(--surface-200);
    border-radius: var(--r-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    animation: fadeIn var(--t-fast) ease;
}

.day-notes-textarea {
    resize: vertical;
    font-family: inherit;
    font-size: var(--text-xs) !important;
    padding: var(--sp-2) var(--sp-3) !important;
    min-height: 50px;
    background: var(--surface-0) !important;
    border: 1px solid var(--surface-300) !important;
}

.day-todo-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.day-todo-items {
    max-height: 150px;
    overflow-y: auto;
}

.day-todo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-1.5) 0;
    border-bottom: 1px dashed var(--surface-200);
}

.day-todo-item:last-child {
    border-bottom: none;
}

.completed-text {
    text-decoration: line-through;
    color: var(--surface-400);
}

.btn-toggle-notes {
    font-size: var(--text-xs);
    color: var(--brand-600);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color var(--t-base);
}
.btn-toggle-notes:hover {
    color: var(--brand-800);
    text-decoration: underline;
}

/* ═══ DAY NOTES & TODO – Premium Design ═══ */
.day-notes-area {
    width: 100%;
    margin-top: var(--sp-3);
    border-top: 1px solid var(--surface-100);
    padding-top: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.day-notes-area--empty {
    padding-top: var(--sp-2);
    border-top: 1px solid var(--surface-100);
    margin-top: var(--sp-2);
}

.day-notes-area-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
}

.day-notes-area-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--surface-600);
    letter-spacing: 0.02em;
}


.day-notes-section,
.day-todo-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.day-section-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.day-section-icon {
    font-size: 13px;
    line-height: 1;
}

.day-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--surface-600);
    letter-spacing: 0.02em;
    flex: 1;
}

.day-divider {
    height: 1px;
    background: var(--surface-100);
}

/* Notes view */
.day-notes-view-wrap {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}

.day-notes-content {
    flex: 1;
    font-size: var(--text-xs);
    color: var(--surface-700);
    line-height: 1.6;
    min-height: 28px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-50);
    border-radius: var(--r-lg);
}

.day-placeholder {
    color: var(--surface-400);
    font-style: italic;
    font-size: var(--text-xs);
}

/* Notes edit */
.day-notes-edit-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.day-notes-textarea {
    width: 100%;
    resize: vertical;
    font-family: inherit;
    font-size: var(--text-xs);
    padding: var(--sp-2) var(--sp-3);
    min-height: 60px;
    background: var(--surface-0);
    border: 1px solid var(--brand-300);
    border-radius: var(--r-lg);
    color: var(--surface-800);
    outline: none;
    line-height: 1.6;
    transition: border-color var(--t-fast);
    box-sizing: border-box;
}
.day-notes-textarea:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(0,82,204,0.1);
}

.day-notes-edit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    color: var(--surface-400);
}

/* Action buttons */
.day-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--r-lg);
    cursor: pointer;
    border: none;
    transition: all var(--t-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.day-action-btn--ghost {
    background: transparent;
    color: var(--brand-600);
    border: 1px solid var(--brand-200);
}
.day-action-btn--ghost:hover {
    background: var(--brand-50);
    border-color: var(--brand-400);
}

.day-action-btn--primary {
    background: var(--brand-500);
    color: #fff;
}
.day-action-btn--primary:hover {
    background: var(--brand-700);
}

.day-action-btn--danger {
    background: transparent;
    color: var(--color-danger);
    border: 1px solid transparent;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: var(--r-md);
}
.day-action-btn--danger:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
}

/* Todo rows */
.day-todo-list-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.day-todo-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-lg);
    transition: background var(--t-fast);
}
.day-todo-row:hover {
    background: var(--surface-50);
}

.day-todo-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--surface-700);
}

.day-todo-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--brand-500);
    cursor: pointer;
    flex-shrink: 0;
}

.day-todo-done {
    text-decoration: line-through;
    color: var(--surface-400);
}

.day-todo-add-row {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    align-items: center;
}

.day-todo-input {
    flex: 1;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-xs);
    background: var(--surface-0);
    border: 1px solid var(--surface-300);
    border-radius: var(--r-lg);
    color: var(--surface-800);
    outline: none;
    font-family: inherit;
    transition: border-color var(--t-fast);
}
.day-todo-input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 2px rgba(0,82,204,0.1);
}

/* ═══ COLLAPSIBLE SESSION CARD ═══ */
.day-session-card {
    transition: background var(--t-fast), box-shadow var(--t-fast);
}
.day-session-card:hover {
    background: var(--surface-100) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.day-session-card--expanded {
    background: var(--surface-50) !important;
    border-left-width: 4px !important;
}
.day-session-card--expanded:hover {
    background: var(--surface-100) !important;
}
.session-expand-arrow {
    user-select: none;
    display: inline-block;
}