/* Golden Minds Inventory
   Clean, professional theme using brown + gold palette */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* Color palette */
:root {
    --gm-brown:       #3B2415;  /* primary brown */
    --gm-brown-dark:  #2A180D;  /* darker brown for headers/nav */
    --gm-gold:        #F0B44A;  /* primary gold */
    --gm-gold-dark:   #D89A28;  /* hover / emphasis gold */

    --gm-bg-cream:    #F7F3EC;  /* page background */
    --gm-card-white:  #FFFFFF;  /* cards / modals */
    --gm-text-dark:   #5A4B42;  /* main text */
    --gm-border:      #D9D0C6;  /* borders & lines */

    --gm-success:     #4CAF50;
    --gm-warning:     #E8A23C;
    --gm-danger:      #D9534F;
    --gm-muted-blue:  #6F7C8A;
}

/* GLOBAL RESET / BASE ----------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   background-color: var(--gm-bg-cream);
    color: var(--gm-text-dark);
    min-height: 100vh;
    font-size: 0.95rem;
}

.full-height {
    min-height: 100vh;
}

/* NAVBAR ------------------------------------------------------------------ */

.navbar-gm {
    background-color: var(--gm-brown-dark);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.navbar-gm .navbar-brand,
.navbar-gm .nav-link,
.navbar-gm .navbar-text {
    color: #ffffff !important;
    font-size: 0.93rem;
}

.navbar-gm .navbar-brand span span {
    color: var(--gm-gold);
    font-weight: 600;
}

.navbar-gm .navbar-brand img {
    height: 34px;
    width: auto;
}

/* Make the burger icon visible on dark navbar */
.navbar-gm .navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}

.navbar-gm .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* BUTTONS ----------------------------------------------------------------- */

.btn-gm {
    background-color: var(--gm-gold);
    border-color: var(--gm-gold);
    color: var(--gm-brown-dark);
    font-weight: 500;
    border-radius: 0.45rem;
}

.btn-gm:hover {
    background-color: var(--gm-gold-dark);
    border-color: var(--gm-gold-dark);
    color: var(--gm-brown-dark);
}

.btn-outline-gm {
    border-radius: 0.45rem;
    border-color: var(--gm-gold);
    color: var(--gm-gold);
    font-weight: 500;
    background-color: transparent;
}

.btn-outline-gm:hover {
    background-color: var(--gm-gold);
    color: var(--gm-brown-dark);
}

/* CARDS / PANELS ---------------------------------------------------------- */

.card-gm,
.card-gm-light,
.category-card {
    border-radius: 12px;
    border: 1px solid var(--gm-border);
    background-color: var(--gm-card-white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.card-gm-header {
    background-color: var(--gm-brown-dark);
    color: #ffffff;
    border-radius: 12px 12px 0 0;
}

/* LOGIN LAYOUT ------------------------------------------------------------ */

.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 12px;
    background-color: var(--gm-bg-cream);
}

.login-hero {
    max-width: 1000px;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.login-left {
    color: var(--gm-text-dark);
}

.login-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--gm-border);
    background-color: #ffffff;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777;
}

.login-tag span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gm-gold);
}

.login-title {
    font-weight: 600;
    font-size: clamp(1.8rem, 2.4vw, 2.2rem);
    margin-top: 14px;
    margin-bottom: 6px;
    color: var(--gm-brown-dark);
}

.login-subtitle {
    font-size: 0.9rem;
    color: #666;
}

.login-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.step-pill {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--gm-border);
    background-color: #faf9f6;
    font-size: 0.82rem;
}

.login-card {
    padding: 20px 22px 18px;
}

.login-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* PAGE TITLES ------------------------------------------------------------- */

.page-title {
    color: var(--gm-brown-dark);
    font-weight: 600;
}

/* DASHBOARD CATEGORY CARDS ------------------------------------------------ */

.category-card {
    padding: 16px 16px 14px;
}

.category-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gm-brown);
    color: #ffffff;
    font-size: 0.8rem;
    margin-right: 6px;
}

.badge-category {
    background: #f7e7c7;
    color: var(--gm-brown-dark);
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.75rem;
}

/* INFO STRIP AT BOTTOM OF DASHBOARD -------------------------------------- */

.info-strip {
    margin-top: 20px;
    padding: 10px 14px;
    border-radius: 10px;
    background-color: #fff9e5;
    border: 1px dashed #e0c98c;
    color: #6a532f;
    font-size: 0.85rem;
}

/* TABLES ------------------------------------------------------------------ */

.table-gm thead {
    background-color: var(--gm-brown);
    color: #ffffff;
}

.table-gm thead th {
    font-size: 0.84rem;
    font-weight: 500;
}

.table-gm tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.table-gm tbody tr:nth-child(even) {
    background-color: #f4efe6;
}

/* STATUS BADGES ----------------------------------------------------------- */

.badge-status {
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    font-size: 0.75rem;
}

/* Color mapping for statuses (set in PHP via bg-* classes) */
.bg-success {
    background-color: var(--gm-success) !important;
}

.bg-warning {
    background-color: var(--gm-warning) !important;
}

.bg-danger {
    background-color: var(--gm-danger) !important;
}

/* FORMS ------------------------------------------------------------------- */

.form-control,
.form-select {
    border-radius: 0.45rem;
    border-color: var(--gm-border);
    font-size: 0.9rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--gm-gold);
    box-shadow: 0 0 0 0.15rem rgba(240, 180, 74, 0.25);
}

/* MODALS ------------------------------------------------------------------ */

.modal-gm {
    border-radius: 12px;
    border: 1px solid var(--gm-border);
    background-color: var(--gm-card-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    font-size: 0.9rem;
}

.modal-gm .modal-body {
    padding: 18px 20px;
}

.modal-gm .modal-footer {
    border-top: 1px solid #ece5da;
    background-color: #f6f3ee;
}

.modal-gm .modal-header {
    border-bottom: 1px solid #f0e3d2;
}

/* slightly softer backdrop */
.modal-backdrop.show {
    opacity: 0.35;
}

/* RESPONSIVE -------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .login-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-left {
        text-align: left;
    }

    .navbar-gm .navbar-text {
        margin-top: 0.25rem;
    }
}