/**
 * GPA & CGPA Calculator Pro — Frontend Styles
 * Author: Tomato Logics
 *
 * Sections:
 * 1. CSS Variables (light & dark theme)
 * 2. Wrapper & Card
 * 3. Table
 * 4. Form elements (inputs, selects, toggles)
 * 5. Buttons
 * 6. Result card
 * 7. Error banner
 * 8. What-if mode
 * 9. Print styles
 * 10. Responsive
 */

/* =========================================================
   1. CSS Variables
   ========================================================= */
.gcc-wrap {
    --gcc-primary:       #4f46e5;
    --gcc-primary-dark:  #4338ca;
    --gcc-success:       #10b981;
    --gcc-danger:        #ef4444;
    --gcc-warning:       #f59e0b;

    --gcc-bg:            #ffffff;
    --gcc-bg-card:       #f8fafc;
    --gcc-bg-header:     #4f46e5;
    --gcc-border:        #e2e8f0;
    --gcc-text:          #1e293b;
    --gcc-text-muted:    #64748b;
    --gcc-text-header:   #ffffff;
    --gcc-input-bg:      #ffffff;
    --gcc-input-border:  #cbd5e1;
    --gcc-row-hover:     #f1f5f9;
    --gcc-shadow:        0 4px 24px rgba(0,0,0,.08);
    --gcc-radius:        12px;
    --gcc-radius-sm:     8px;
    --gcc-transition:    .2s ease;
}

/* Dark mode — respects OS preference */
@media (prefers-color-scheme: dark) {
    .gcc-wrap {
        --gcc-bg:           #0f172a;
        --gcc-bg-card:      #1e293b;
        --gcc-bg-header:    #3730a3;
        --gcc-border:       #334155;
        --gcc-text:         #e2e8f0;
        --gcc-text-muted:   #94a3b8;
        --gcc-input-bg:     #1e293b;
        --gcc-input-border: #475569;
        --gcc-row-hover:    #334155;
        --gcc-shadow:       0 4px 24px rgba(0,0,0,.3);
    }
}

/* =========================================================
   2. Wrapper & Card
   ========================================================= */
.gcc-wrap {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color:       var(--gcc-text);
    background:  var(--gcc-bg);
    margin:      0 0 2rem;
}

.gcc-wrap *, .gcc-wrap *::before, .gcc-wrap *::after {
    box-sizing: inherit;
}

.gcc-card {
    background:    var(--gcc-bg-card);
    border:        1px solid var(--gcc-border);
    border-radius: var(--gcc-radius);
    box-shadow:    var(--gcc-shadow);
    overflow:      hidden;
    margin-bottom: 1.5rem;
}

.gcc-card-header {
    display:         flex;
    align-items:     center;
    gap:             .75rem;
    background:      var(--gcc-bg-header);
    color:           var(--gcc-text-header);
    padding:         1rem 1.5rem;
}

.gcc-card-header h2 {
    margin:      0;
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--gcc-text-header);
    border:      none;
    padding:     0;
}

.gcc-card-header svg {
    flex-shrink: 0;
    stroke:      var(--gcc-text-header);
}

.gcc-card-body {
    padding: 1.5rem;
}

/* =========================================================
   3. Table
   ========================================================= */
.gcc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gcc-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .9rem;
}

.gcc-table thead th {
    text-align:    left;
    padding:       .6rem .75rem;
    font-size:     .78rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--gcc-text-muted);
    border-bottom:  2px solid var(--gcc-border);
    white-space:    nowrap;
}

.gcc-table tbody td {
    padding:       .55rem .75rem;
    border-bottom: 1px solid var(--gcc-border);
    vertical-align: middle;
}

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

.gcc-table tbody tr:hover {
    background: var(--gcc-row-hover);
    transition: background var(--gcc-transition);
}

.gcc-table tfoot td {
    padding: .75rem;
}

.gcc-points-td, .gcc-weighted-td {
    font-weight: 600;
    color:       var(--gcc-primary);
    text-align:  right;
}

.gcc-sem-label {
    font-weight: 600;
    white-space: nowrap;
}

/* =========================================================
   4. Form elements
   ========================================================= */
.gcc-input,
.gcc-select {
    display:          block;
    width:            100%;
    min-width:        80px;
    padding:          .45rem .65rem;
    font-size:        .9rem;
    background:       var(--gcc-input-bg);
    color:            var(--gcc-text);
    border:           1px solid var(--gcc-input-border);
    border-radius:    var(--gcc-radius-sm);
    outline:          none;
    transition:       border-color var(--gcc-transition), box-shadow var(--gcc-transition);
    -webkit-appearance: none;
}

.gcc-input:focus,
.gcc-select:focus {
    border-color: var(--gcc-primary);
    box-shadow:   0 0 0 3px rgba(79,70,229,.15);
}

.gcc-select {
    cursor:            pointer;
    background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    padding-right:     2rem;
}

/* Form grid (target calculator) */
.gcc-form-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   1rem;
    margin-bottom:         1.25rem;
}

.gcc-form-group label {
    display:       block;
    font-size:     .82rem;
    font-weight:   600;
    margin-bottom: .35rem;
    color:         var(--gcc-text-muted);
}

/* Toggle switch (what-if) */
.gcc-whatif-bar {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    margin:      1rem 0 .5rem;
    flex-wrap:   wrap;
}

.gcc-toggle {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    cursor:      pointer;
    font-size:   .85rem;
    font-weight: 600;
}

.gcc-toggle input { display: none; }

.gcc-toggle-slider {
    position:      relative;
    width:         40px;
    height:        22px;
    background:    var(--gcc-input-border);
    border-radius: 999px;
    flex-shrink:   0;
    transition:    background var(--gcc-transition);
}

.gcc-toggle-slider::after {
    content:       '';
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         16px;
    height:        16px;
    background:    #fff;
    border-radius: 50%;
    transition:    left var(--gcc-transition);
}

.gcc-toggle input:checked ~ .gcc-toggle-slider {
    background: var(--gcc-primary);
}

.gcc-toggle input:checked ~ .gcc-toggle-slider::after {
    left: 21px;
}

.gcc-whatif-hint {
    font-size:  .78rem;
    color:      var(--gcc-text-muted);
    font-style: italic;
}

/* =========================================================
   5. Buttons
   ========================================================= */
.gcc-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            .35rem;
    padding:        .55rem 1.1rem;
    font-size:      .88rem;
    font-weight:    600;
    border:         none;
    border-radius:  var(--gcc-radius-sm);
    cursor:         pointer;
    transition:     background var(--gcc-transition), transform var(--gcc-transition);
    white-space:    nowrap;
}

.gcc-btn:active { transform: scale(.97); }

.gcc-btn-primary {
    background: var(--gcc-primary);
    color:      #fff;
}
.gcc-btn-primary:hover { background: var(--gcc-primary-dark); }

.gcc-btn-secondary {
    background: var(--gcc-border);
    color:      var(--gcc-text);
}
.gcc-btn-secondary:hover { filter: brightness(.92); }

.gcc-btn-add {
    background: transparent;
    color:      var(--gcc-primary);
    border:     1.5px dashed var(--gcc-primary);
    padding:    .45rem .9rem;
    font-size:  .85rem;
    font-weight: 600;
    border-radius: var(--gcc-radius-sm);
    cursor:     pointer;
    transition: background var(--gcc-transition);
    width:      100%;
}
.gcc-btn-add:hover { background: rgba(79,70,229,.07); }

.gcc-btn-remove {
    background:    transparent;
    border:        none;
    color:         var(--gcc-text-muted);
    cursor:        pointer;
    font-size:     1rem;
    padding:       .25rem .4rem;
    border-radius: 4px;
    transition:    color var(--gcc-transition), background var(--gcc-transition);
}
.gcc-btn-remove:hover {
    color:      var(--gcc-danger);
    background: rgba(239,68,68,.1);
}

.gcc-actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       .65rem;
    margin:    1.25rem 0 1rem;
}

/* =========================================================
   6. Result card
   ========================================================= */
.gcc-result-wrap { margin-top: 1rem; }

@keyframes gcc-slide-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gcc-result-animate {
    animation: gcc-slide-in .35s cubic-bezier(.22,.61,.36,1) forwards;
}

.gcc-result-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    background:     linear-gradient(135deg, var(--gcc-primary) 0%, var(--gcc-primary-dark) 100%);
    color:          #fff;
    border-radius:  var(--gcc-radius);
    padding:        1.75rem 2rem;
    text-align:     center;
}

.gcc-result-danger .gcc-result-card {
    background: linear-gradient(135deg, var(--gcc-danger) 0%, #b91c1c 100%);
}

.gcc-result-label {
    font-size:      .82rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity:        .85;
    margin-bottom:  .4rem;
}

.gcc-result-value {
    font-size:   3.2rem;
    font-weight: 800;
    line-height: 1;
    margin:      .2rem 0 .6rem;
}

.gcc-result-meta {
    font-size: .83rem;
    opacity:   .8;
}

/* =========================================================
   7. Error banner
   ========================================================= */
.gcc-error-wrap {
    display:       none;
    align-items:   center;
    gap:           .5rem;
    background:    rgba(239,68,68,.1);
    color:         var(--gcc-danger);
    border:        1px solid rgba(239,68,68,.3);
    border-radius: var(--gcc-radius-sm);
    padding:       .7rem 1rem;
    font-size:     .87rem;
    font-weight:   500;
    margin-top:    .75rem;
}

.gcc-error-icon { font-size: 1.1rem; }

/* =========================================================
   8. What-if mode
   ========================================================= */
.gcc-whatif-active .gcc-grade-select {
    border-color: var(--gcc-warning);
    box-shadow:   0 0 0 2px rgba(245,158,11,.2);
}

/* =========================================================
   9. Print styles
   ========================================================= */
@media print {
    .gcc-actions,
    .gcc-btn,
    .gcc-btn-remove,
    .gcc-whatif-bar {
        display: none !important;
    }

    .gcc-wrap {
        --gcc-bg:      #fff;
        --gcc-bg-card: #fff;
        --gcc-text:    #000;
        --gcc-shadow:  none;
    }

    .gcc-card {
        box-shadow: none;
        border:     1px solid #ccc;
    }

    .gcc-result-card {
        background: #f0f0f0 !important;
        color:      #000 !important;
        border:     1px solid #ccc;
    }
}

/* =========================================================
   10. Responsive
   ========================================================= */
@media (max-width: 600px) {
    .gcc-card-body { padding: 1rem; }

    .gcc-table thead th,
    .gcc-table tbody td { padding: .45rem .5rem; }

    .gcc-form-grid { grid-template-columns: 1fr; }

    .gcc-result-value { font-size: 2.4rem; }

    .gcc-btn { padding: .5rem .85rem; font-size: .83rem; }
}