/* =====================================================
   AGRI AGENT PORTAL — Stylesheet
   Earthy, trustworthy aesthetic for agriculture domain
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;600&display=swap');

:root {
    --aap-green:       #2d6a4f;
    --aap-green-light: #52b788;
    --aap-green-pale:  #d8f3dc;
    --aap-amber:       #e9a825;
    --aap-amber-pale:  #fff3cd;
    --aap-orange:      #e07a2f;
    --aap-orange-pale: #fde8d1;
    --aap-blue:        #2176ae;
    --aap-blue-pale:   #d6eaf8;
    --aap-teal:        #1b7a8a;
    --aap-teal-pale:   #d0eff3;
    --aap-earth:       #6b4f3a;
    --aap-earth-pale:  #f5ebe0;
    --aap-text:        #1a1a1a;
    --aap-text-muted:  #6b6b6b;
    --aap-border:      #e0ddd8;
    --aap-bg:          #f7f5f2;
    --aap-white:       #ffffff;
    --aap-radius:      14px;
    --aap-shadow:      0 2px 20px rgba(0,0,0,0.08);
    --aap-shadow-lg:   0 8px 40px rgba(0,0,0,0.12);
}

/* Base */
.aap-wrap {
    font-family: 'DM Sans', sans-serif;
    color: var(--aap-text);
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

/* =====================================================
   AUTH CARDS (Login / Register)
   ===================================================== */

.aap-auth-card {
    max-width: 480px;
    margin: 0 auto;
    background: var(--aap-white);
    border-radius: var(--aap-radius);
    box-shadow: var(--aap-shadow-lg);
    padding: 40px;
    border: 1px solid var(--aap-border);
}

.aap-register-card {
    max-width: 540px;
}

.aap-logo-area {
    text-align: center;
    margin-bottom: 28px;
}

.aap-logo-icon {
    font-size: 48px;
    margin-bottom: 8px;
    line-height: 1;
}

.aap-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--aap-text);
    margin: 0 0 6px;
    line-height: 1.2;
}

.aap-sub {
    color: var(--aap-text-muted);
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

/* Form */
.aap-form { margin-top: 8px; }

.aap-field {
    margin-bottom: 16px;
}

.aap-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--aap-text);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.aap-field .req { color: var(--aap-orange); }

.aap-field input,
.aap-field textarea,
.aap-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--aap-border);
    border-radius: 9px;
    font-size: 15px;
    font-family: 'DM Sans', sans-serif;
    color: var(--aap-text);
    background: var(--aap-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.aap-field input:focus,
.aap-field textarea:focus {
    outline: none;
    border-color: var(--aap-green);
    background: var(--aap-white);
    box-shadow: 0 0 0 3px rgba(45,106,79,0.1);
}

.aap-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* Buttons */
.aap-btn {
    display: inline-block;
    padding: 13px 24px;
    border-radius: 9px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin-top: 8px;
}

.aap-btn-primary {
    background: var(--aap-green);
    color: #fff;
}
.aap-btn-primary:hover { background: #245741; transform: translateY(-1px); }

.aap-btn-secondary {
    background: var(--aap-bg);
    color: var(--aap-text);
    border: 1.5px solid var(--aap-border);
}
.aap-btn-secondary:hover { background: var(--aap-border); }

.aap-btn-ghost {
    background: transparent;
    color: var(--aap-text-muted);
    border: 1.5px solid var(--aap-border);
    width: auto;
    padding: 10px 18px;
    font-size: 14px;
}
.aap-btn-ghost:hover { background: var(--aap-bg); }

/* Step label */
.aap-step-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aap-green);
    margin-bottom: 18px;
    padding: 6px 12px;
    background: var(--aap-green-pale);
    border-radius: 6px;
    display: inline-block;
}

/* Notices */
.aap-notice {
    padding: 12px 16px;
    border-radius: 9px;
    font-size: 14px;
    margin-bottom: 18px;
    font-weight: 500;
}
.aap-error   { background: #fde8e8; color: #8b1a1a; border: 1px solid #f5c6c6; }
.aap-success { background: var(--aap-green-pale); color: var(--aap-green); border: 1px solid #b7e4c7; }

/* Switch link */
.aap-switch {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--aap-text-muted);
}
.aap-switch a { color: var(--aap-green); font-weight: 600; text-decoration: none; }
.aap-switch a:hover { text-decoration: underline; }

/* =====================================================
   DASHBOARD
   ===================================================== */

.aap-dashboard { padding-top: 8px; }

/* Header */
.aap-dash-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    background: var(--aap-white);
    padding: 24px 28px;
    border-radius: var(--aap-radius);
    box-shadow: var(--aap-shadow);
    border: 1px solid var(--aap-border);
}

.aap-dash-welcome {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.aap-avatar {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--aap-green), var(--aap-green-light));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    flex-shrink: 0;
}

/* Agent code badge */
.aap-agent-code-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--aap-earth-pale);
    border: 1.5px dashed var(--aap-earth);
    border-radius: 10px;
    padding: 10px 16px;
}

.aap-code-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aap-earth);
}

.aap-code-value {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    color: var(--aap-earth);
    letter-spacing: 0.06em;
}

.aap-copy-btn {
    background: var(--aap-earth);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.2s;
}
.aap-copy-btn:hover { background: var(--aap-green); }

/* Stats grid */
.aap-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.aap-stat-card {
    background: var(--aap-white);
    border-radius: var(--aap-radius);
    padding: 20px;
    border: 1px solid var(--aap-border);
    box-shadow: var(--aap-shadow);
    transition: transform 0.18s, box-shadow 0.18s;
    position: relative;
    overflow: hidden;
}

.aap-stat-card:hover { transform: translateY(-2px); box-shadow: var(--aap-shadow-lg); }

.aap-stat-icon {
    font-size: 22px;
    margin-bottom: 10px;
    display: block;
}

.aap-stat-value {
    font-family: 'DM Serif Display', serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 4px;
}

.aap-stat-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Stat colour variants */
.aap-stat-primary { border-top: 3px solid var(--aap-green);  }
.aap-stat-primary .aap-stat-value { color: var(--aap-green); }

.aap-stat-green   { border-top: 3px solid var(--aap-green-light); }
.aap-stat-green .aap-stat-value { color: var(--aap-green); }

.aap-stat-amber   { border-top: 3px solid var(--aap-amber); }
.aap-stat-amber .aap-stat-value { color: var(--aap-amber); }

.aap-stat-blue    { border-top: 3px solid var(--aap-blue); }
.aap-stat-blue .aap-stat-value { color: var(--aap-blue); }

.aap-stat-orange  { border-top: 3px solid var(--aap-orange); }
.aap-stat-orange .aap-stat-value { color: var(--aap-orange); }

.aap-stat-teal    { border-top: 3px solid var(--aap-teal); }
.aap-stat-teal .aap-stat-value { color: var(--aap-teal); }

/* Orders card */
.aap-card {
    background: var(--aap-white);
    border-radius: var(--aap-radius);
    border: 1px solid var(--aap-border);
    box-shadow: var(--aap-shadow);
}

.aap-orders-card {
    padding: 24px 28px;
}

.aap-section-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 20px;
    color: var(--aap-text);
}

/* Table */
.aap-table-wrap { overflow-x: auto; }

.aap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.aap-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--aap-text-muted);
    border-bottom: 2px solid var(--aap-border);
}

.aap-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #f0ede8;
    vertical-align: middle;
}

.aap-table tr:last-child td { border-bottom: none; }

.aap-table a {
    color: var(--aap-green);
    font-weight: 600;
    text-decoration: none;
}
.aap-table a:hover { text-decoration: underline; }

.aap-commission-cell { font-weight: 700; color: var(--aap-green); }

/* Badges */
.aap-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.aap-badge-orange { background: var(--aap-orange-pale); color: var(--aap-orange); }
.aap-badge-green  { background: var(--aap-green-pale);  color: var(--aap-green); }
.aap-badge-blue   { background: var(--aap-blue-pale);   color: var(--aap-blue); }

/* Empty state */
.aap-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--aap-text-muted);
}

/* Checkout validation hint */
.aap-checkout-hint {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 500;
}
.aap-hint-ok  { color: #2d6a4f; }
.aap-hint-err { color: #c0392b; }

/* Responsive */
@media (max-width: 640px) {
    .aap-auth-card { padding: 24px 18px; }
    .aap-dash-header { flex-direction: column; }
    .aap-agent-code-badge { flex-wrap: wrap; }
    .aap-stats-grid { grid-template-columns: 1fr 1fr; }
    .aap-stat-value { font-size: 20px; }
    .aap-orders-card { padding: 16px; }
    .aap-table th, .aap-table td { padding: 10px 8px; font-size: 13px; }
}