/* ==========================================
   Dashboard Buttons
========================================== */

/* Common */

.create-profile-btn,
.delete-account-btn,
.dashboard-signout-btn,
.hero-primary-btn,
.hero-secondary-btn,
.table-action-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    cursor:pointer;

    border:none;

    outline:none;

    transition:var(--dashboard-transition);

    font-weight:600;

}


/* ==========================================
   Hero Primary Button
========================================== */

.hero-primary-btn{

    height:56px;

    padding:0 26px;

    border-radius:14px;

    color:#fff;

    background:var(--dashboard-btn-gradient);

    box-shadow:0 12px 28px rgba(10,147,150,.22);

}

.hero-primary-btn:hover{

    background:var(--dashboard-btn-gradient-hover);

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(10,147,150,.35);

}

.hero-primary-btn svg{

    width:20px;

    height:20px;

}


/* ==========================================
   Hero Secondary Button
========================================== */

.hero-secondary-btn{

    height:56px;

    padding:0 26px;

    border-radius:14px;

    background:#fff;

    color:var(--dashboard-primary);

    border:1px solid rgba(10,147,150,.20);

}

.hero-secondary-btn:hover{

    background:#F2FCFC;

    transform:translateY(-3px);

    border-color:var(--dashboard-primary);

}

.hero-secondary-btn svg{

    width:20px;

    height:20px;

}


/* ==========================================
   Create Profile
========================================== */

.create-profile-btn{

    height:54px;

    padding:0 24px;

    border-radius:14px;

    background:linear-gradient(135deg,#0A9396,#0891B2);

    color:#fff;

    box-shadow:0 10px 24px rgba(10,147,150,.22);

}

.create-profile-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 34px rgba(10,147,150,.35);

}

.create-profile-btn svg{

    width:20px;

    height:20px;

}


/* ==========================================
   Delete Account
========================================== */

.delete-account-btn{

    height:54px;

    padding:0 24px;

    border-radius:14px;

    color:#fff;

    background:linear-gradient(135deg,#DC2626,#B91C1C);

    box-shadow:0 10px 24px rgba(220,38,38,.22);

}

.delete-account-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 34px rgba(220,38,38,.30);

}

.delete-account-btn svg{

    width:20px;

    height:20px;

}


/* ==========================================
   Dashboard Sign Out
========================================== */

.dashboard-signout-btn{

    height:54px;

    padding:0 24px;

    border-radius:14px;

    background:#fff;

    color:var(--dashboard-title);

    border:1px solid var(--dashboard-border);

}

.dashboard-signout-btn:hover{

    border-color:var(--dashboard-primary);

    color:var(--dashboard-primary);

    background:#F5FEFE;

}

.dashboard-signout-btn svg{

    width:20px;

    height:20px;

}


/* ==========================================
   Table Action Buttons
========================================== */

.table-action-btn{

    width:42px;

    height:42px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.table-action-btn svg{

    width:18px;

    height:18px;

}


/* Edit */

.edit-btn{

    background:#ECFEFF;

    color:#0891B2;

}

.edit-btn:hover{

    background:#0891B2;

    color:#fff;

    transform:translateY(-2px);

}


/* Delete */

.delete-btn{

    background:#FEF2F2;

    color:#DC2626;

}

.delete-btn:hover{

    background:#DC2626;

    color:#fff;

    transform:translateY(-2px);

}


/* ==========================================
   Disabled
========================================== */

.create-profile-btn:disabled,
.delete-account-btn:disabled,
.dashboard-signout-btn:disabled,
.hero-primary-btn:disabled,
.hero-secondary-btn:disabled,
.table-action-btn:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


/* ==========================================
   Focus
========================================== */

.create-profile-btn:focus-visible,
.delete-account-btn:focus-visible,
.dashboard-signout-btn:focus-visible,
.hero-primary-btn:focus-visible,
.hero-secondary-btn:focus-visible{

    outline:3px solid rgba(10,147,150,.25);

    outline-offset:3px;

}


/* ==========================================
   Icons
========================================== */

.create-profile-btn svg,
.delete-account-btn svg,
.dashboard-signout-btn svg,
.hero-primary-btn svg,
.hero-secondary-btn svg{

    flex-shrink:0;

}


/* ==========================================
   Transition
========================================== */

.create-profile-btn,
.delete-account-btn,
.dashboard-signout-btn,
.hero-primary-btn,
.hero-secondary-btn,
.table-action-btn{

    transition:

        background .30s ease,

        color .30s ease,

        transform .30s ease,

        box-shadow .30s ease,

        border-color .30s ease;

}


/* ==========================================
   Dashboard Sign Out Button
========================================== */

.dashboard-signout-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:54px;

    padding:0 24px;

    border:none;

    border-radius:14px;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    color:#FFFFFF;

    background:linear-gradient(135deg,#FA8072,#F76C5E);

    box-shadow:0 10px 25px rgba(250,128,114,.30);

    transition:all .30s ease;

}

.dashboard-signout-btn svg{

    width:20px;

    height:20px;

}

.dashboard-signout-btn:hover{

    background:linear-gradient(135deg,#F76C5E,#E85D50);

    color:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(232,93,80,.35);

}

.dashboard-signout-btn:active{

    transform:scale(.97);

}

.dashboard-signout-btn:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(250,128,114,.18),
        0 18px 35px rgba(232,93,80,.35);

}