* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Segoe UI", Arial, sans-serif; } body { background: #f5f7fb; color: #172033; min-height: 100vh; } /* ========================================= HEADER ========================================= */ .main-header { background: linear-gradient(135deg, #1e3a8a, #4f46e5); color: white; padding: 25px 50px; box-shadow: 0 6px 25px rgba(30, 58, 138, 0.18); } .header-content { max-width: 1250px; margin: auto; display: flex; justify-content: space-between; align-items: center; } .main-header h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; } .main-header p { margin-top: 5px; color: #dbeafe; font-size: 14px; } .header-badge { padding: 8px 15px; border-radius: 20px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); font-size: 13px; font-weight: 600; } /* ========================================= MAIN CONTAINER ========================================= */ .container { max-width: 1250px; margin: auto; padding: 38px 40px; } /* ========================================= PAGE TITLE ========================================= */ .page-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; } .page-title h2 { font-size: 27px; font-weight: 700; color: #172033; } .dashboard-date { color: #64748b; font-size: 14px; } .eyebrow { color: #4f46e5; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 6px; } /* ========================================= DASHBOARD STAT CARDS ========================================= */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 30px; } .stat-card { position: relative; background: white; padding: 23px; border-radius: 16px; border: 1px solid #e5eaf2; box-shadow: 0 5px 18px rgba(15, 23, 42, 0.055); overflow: hidden; transition: all 0.25s ease; } .stat-card::after { content: ""; position: absolute; right: -25px; top: -25px; width: 85px; height: 85px; border-radius: 50%; background: #eef2ff; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1); } .stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; } .stat-icon { font-size: 25px; } .stat-label { font-size: 10px; color: #94a3b8; font-weight: 700; letter-spacing: 1px; } .stat-card h3 { font-size: 14px; color: #64748b; margin-bottom: 5px; } .stat-card p { font-size: 32px; font-weight: 700; color: #1e3a8a; } /* ========================================= CONTENT SECTIONS ========================================= */ .content-section, .books-section { background: white; padding: 27px; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 5px 18px rgba(15, 23, 42, 0.055); margin-bottom: 25px; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .section-header h2 { font-size: 21px; font-weight: 700; color: #172033; } /* ========================================= BUTTONS ========================================= */ button { font-family: inherit; transition: all 0.2s ease; } .section-header button, #issue-book-btn, #save-book-btn, #save-member-btn { padding: 10px 17px; border: none; border-radius: 9px; cursor: pointer; background: #2563eb; color: white; font-weight: 600; font-size: 13px; box-shadow: 0 3px 8px rgba(37, 99, 235, 0.18); } .section-header button:hover, #issue-book-btn:hover, #save-book-btn:hover, #save-member-btn:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 5px 12px rgba(37, 99, 235, 0.25); } .section-header button:active, #issue-book-btn:active, #save-book-btn:active, #save-member-btn:active { transform: translateY(0); } /* ========================================= BOOK / MEMBER / ISSUE CARDS ========================================= */ .book-card { padding: 18px 10px; border-bottom: 1px solid #e5e7eb; transition: all 0.2s ease; } .book-card:last-child { border-bottom: none; } .book-card:hover { background: #f8fafc; padding-left: 15px; padding-right: 15px; border-radius: 10px; } .book-card h3 { font-size: 17px; font-weight: 650; margin-bottom: 7px; color: #172033; } .book-card p { color: #64748b; font-size: 14px; margin: 4px 0; } /* ========================================= CARD BUTTONS ========================================= */ .book-card button { margin-top: 11px; padding: 8px 14px; border: none; border-radius: 7px; background: #0f766e; color: white; cursor: pointer; font-size: 13px; font-weight: 600; transition: 0.2s ease; } .book-card button:hover { background: #115e59; transform: translateY(-1px); } /* ========================================= FORMS ========================================= */ .book-form, .member-form, .issue-form { padding: 21px; margin-bottom: 20px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 13px; } .form-title { margin-bottom: 15px; } .form-title h3 { margin-bottom: 4px; color: #172033; } .form-title p { color: #64748b; font-size: 13px; } /* ========================================= FORM FIELDS ========================================= */ .form-fields { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; } .book-form input, .member-form input, .issue-form select, .issue-form input { flex: 1; min-width: 180px; padding: 11px 13px; border: 1px solid #cbd5e1; border-radius: 9px; outline: none; background: white; color: #172033; font-size: 14px; transition: 0.2s ease; } .book-form input::placeholder, .member-form input::placeholder { color: #94a3b8; } .book-form input:focus, .member-form input:focus, .issue-form select:focus, .issue-form input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } /* ========================================= FORM ACTIONS ========================================= */ .form-actions { display: flex; gap: 8px; } #cancel-book-btn, #cancel-member-btn { padding: 10px 17px; border: 1px solid #cbd5e1; border-radius: 9px; background: white; color: #475569; cursor: pointer; font-weight: 600; font-size: 13px; } #cancel-book-btn:hover, #cancel-member-btn:hover { background: #f1f5f9; border-color: #94a3b8; } /* ========================================= ISSUE FORM ========================================= */ .issue-form { display: flex; gap: 10px; flex-wrap: wrap; } .issue-form select, .issue-form input { min-width: 200px; } /* ========================================= MEMBER FORM ========================================= */ .member-form .form-fields { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; } .member-form input { min-width: 200px; } /* ========================================= EDIT MEMBER LOOK ========================================= */ .member-form h3 { font-size: 18px; } /* ========================================= HIDDEN ========================================= */ .hidden { display: none !important; } /* ========================================= EMPTY STATES ========================================= */ #books-list:empty::after, #members-list:empty::after, #issues-list:empty::after { content: "Nothing to display yet."; display: block; text-align: center; padding: 30px; color: #94a3b8; font-size: 14px; } /* ========================================= FOOTER ========================================= */ .footer { display: flex; justify-content: space-between; align-items: center; padding: 20px 5px 5px; color: #94a3b8; font-size: 12px; } .footer strong { color: #475569; margin-right: 8px; } /* ========================================= RESPONSIVE - TABLET ========================================= */ @media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, 1fr); } .container { padding: 30px 25px; } } /* ========================================= RESPONSIVE - MOBILE ========================================= */ @media (max-width: 600px) { .main-header { padding: 22px; } .header-content { align-items: flex-start; gap: 15px; flex-direction: column; } .container { padding: 25px 18px; } .page-title { align-items: flex-start; flex-direction: column; gap: 5px; } .stats { grid-template-columns: 1fr; } .content-section, .books-section { padding: 20px; } .section-header { align-items: flex-start; gap: 12px; } .form-fields, .issue-form { flex-direction: column; } .book-form input, .member-form input, .issue-form select, .issue-form input { width: 100%; min-width: 100%; } .form-actions { flex-direction: column; } .form-actions button, #cancel-member-btn { width: 100%; margin-left: 0; } .footer { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* =========================================
   NOTIFICATION
========================================= */

.notification {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 99999;

    min-width: 280px;
    max-width: 380px;

    padding: 15px 18px;

    background: white;
    color: #172033;

    border: 1px solid #e2e8f0;
    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);

    font-size: 14px;
    font-weight: 600;

    display: flex;
    align-items: center;
    gap: 10px;

    animation: notificationSlide 0.3s ease;
}

.notification.success {
    border-left: 4px solid #16a34a;
}

.notification.error {
    border-left: 4px solid #dc2626;
}

@keyframes notificationSlide {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* MOBILE */

@media (max-width: 600px) {

    .notification {
        top: 15px;
        left: 18px;
        right: 18px;

        min-width: unset;
        max-width: none;

        width: auto;

        padding: 14px 16px;

        font-size: 13px;
    }
}