/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar-brand {
        margin-right: 1rem;
        font-size: 1.2rem;
    }

    .nav-link {
        padding: 0.5rem 0 !important;
        margin: 0.5rem 0;
    }

    .content-container {
        padding: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .table {
        font-size: 0.9rem;
    }

        .table tbody td {
            padding: 0.75rem;
        }

    footer .row {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    html {
        font-size: 13px;
    }

    .navbar-brand span:last-child {
        display: none;
    }

    .top-header .col-md-6 {
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .table {
        font-size: 0.8rem;
    }

    .btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* Utilities */
.text-primary {
    color: var(--nidan-primary) !important;
}

.bg-primary {
    background-color: var(--nidan-primary) !important;
}

.border-primary {
    border-color: var(--nidan-primary) !important;
}

.shadow-sm {
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.navbar {
    animation: fadeIn 0.3s ease;
}

.card {
    animation: fadeIn 0.5s ease;
}