/* =====================================================
   Base Button
===================================================== */

.btn,
button{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    gap:8px;

    padding:12px 20px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-family:inherit;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:all var(--transition);

}

.btn:hover,
button:hover{

    transform:translateY(-2px);

}

/* =====================================================
   Primary
===================================================== */

.btn-primary{

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:white;

    box-shadow:0 10px 20px rgba(37,99,235,.25);

}

.btn-primary:hover{

    box-shadow:0 15px 25px rgba(37,99,235,.35);

}

/* =====================================================
   Success
===================================================== */

.btn-success{

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    color:white;

}

/* =====================================================
   Danger
===================================================== */

.btn-danger{

    background:linear-gradient(
        135deg,
        #ef4444,
        #f87171
    );

    color:white;

}

/* =====================================================
   Dashboard Button
===================================================== */

.dashboard-btn{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    padding:12px 20px;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff;

    font-weight:700;

}

.dashboard-btn:hover{

    transform:translateY(-2px);

}

/* =====================================================
   Create Button
===================================================== */

.create{

    width:100%;

    margin-top:15px;

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    color:white;

}

/* =====================================================
   Open Task Buttons
===================================================== */

.button-ot{

    background:linear-gradient(
        135deg,
        #ffcc00,
        #ff9900
    );

    color:#111;

}

.button-ot:hover{

    background:linear-gradient(
        135deg,
        #ff9900,
        #ff6600
    );

}

/* =====================================================
   Edit Button
===================================================== */

.edit-btn{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 14px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #34c759,
        #208c42
    );

    color:white;

}

.edit-btn:hover{

    transform:translateY(-3px);

}

/* =====================================================
   Open Task Button
===================================================== */

.open-task-btn{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 14px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #007bff,
        #0056b3
    );

    color:white;

}

.open-task-btn:hover{

    background:linear-gradient(
        135deg,
        #339cff,
        #003a80
    );

    transform:translateY(-3px);

}

/* =====================================================
   Export Button
===================================================== */

.btn-export{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #1D6F42,
        #21a366
    );

    color:white;

    box-shadow:0 4px 10px rgba(33,163,102,.35);

}

.btn-export:hover{

    transform:translateY(-2px);

}

/* =====================================================
   Upload Button
===================================================== */

.btn-upload-link{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    padding:12px 22px;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #00ffc8,
        #00bfa5
    );

    color:#111;

    font-weight:700;

}

.btn-upload-link:hover{

    transform:scale(1.05);

}

/* =====================================================
   Download Button
===================================================== */

.download-link{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#00bfa5;

    color:white;

}

.download-link:hover{

    background:#008f74;

    transform:scale(1.1);

}

.download-link i{

    font-size:18px;

}

/* =====================================================
   Shared icon actions
===================================================== */

.action-icon-button{

    inline-size:36px;
    block-size:36px;
    min-inline-size:36px;
    min-block-size:36px;

    padding:0;
    gap:0;

    border:1px solid #7f93a5;
    border-radius:10px;

    background:linear-gradient(
        145deg,
        #f8fafc,
        #dbe4ee
    );

    color:#1f3b53;

    box-shadow:
        0 3px 8px rgba(15,23,42,.16),
        inset 0 1px 0 rgba(255,255,255,.82);

    flex:0 0 auto;
}

.action-icon-button:hover{

    border-color:#3979aa;

    background:linear-gradient(
        145deg,
        #ffffff,
        #cfe3f2
    );

    box-shadow:
        0 5px 12px rgba(15,23,42,.2),
        inset 0 1px 0 rgba(255,255,255,.9);

}

.action-icon-button:focus-visible{

    outline:3px solid rgba(57,121,170,.3);
    outline-offset:2px;

}

.action-icon-button__icon{

    inline-size:20px;
    block-size:20px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;

    pointer-events:none;

}

.action-icon-button.action-icon-button--excel{

    border-color:#0f5132;

    background:linear-gradient(
        145deg,
        #278654,
        #185c37
    );

    color:#ffffff;

    box-shadow:
        0 3px 9px rgba(24,92,55,.28),
        inset 0 1px 0 rgba(255,255,255,.22);

}

.action-icon-button.action-icon-button--excel:hover{

    border-color:#0b3f26;

    background:linear-gradient(
        145deg,
        #2f9961,
        #146b3a
    );

    color:#ffffff;

    box-shadow:
        0 5px 13px rgba(24,92,55,.34),
        inset 0 1px 0 rgba(255,255,255,.28);

}

.action-icon-button__icon--excel{

    inline-size:21px;
    block-size:21px;
    stroke-width:1.65;

}

.action-icon-button__icon--refresh{

    inline-size:21px;
    block-size:21px;

    transition:transform 160ms ease;
    transform-origin:center;

}

.action-icon-button--refresh:hover
.action-icon-button__icon--refresh{

    transform:rotate(-35deg);

}

@media (prefers-reduced-motion:reduce){

    .action-icon-button__icon--refresh{

        transition:none;

    }

}