/*
    AC-32051. Minimal, and scoped.

    site.css defines no grid, menu, table, button or message classes at all -- the entire layout vocabulary
    on this page comes from the Semantic UI stylesheet the layout loads from CDN. So this file adds only
    what Semantic cannot express, and every rule is prefixed with .db-servers-page or a .db-servers- class.

    NO BARE-ELEMENT SELECTORS. authorization.css:1-5 redeclares `body` and :68-76 redeclares `button`, and
    both leak onto every control on that page and fight Semantic's own styles. Nothing here does that.
*/

.db-servers-page .db-servers-rule {
    margin-top: 1em;
}

.db-servers-page .db-servers-rule p:last-child {
    margin-bottom: 0;
}

/*
    Wide content scrolls inside its own container rather than pushing the page sideways -- seven columns
    including two long RDS host names overflow a narrow viewport easily.
*/
.db-servers-table-scroll {
    overflow-x: auto;
}

.db-servers-page .db-servers-table {
    margin-top: 0;
}

.db-servers-page .db-servers-host {
    word-break: break-all;
    max-width: 22em;
}

.db-servers-page .db-servers-mask {
    letter-spacing: 0.15em;
    color: #767676;
}

.db-servers-page .db-servers-password-note,
.db-servers-modal .db-servers-hint {
    display: block;
    font-size: 0.85em;
    color: #767676;
    margin-top: 0.25em;
}

.db-servers-page .db-servers-actions .button {
    margin-right: 0.25em;
}

/*
    ADR AD-15 -- THE DISABLED DELETE, WHICH IS THE ONE VISUAL DECISION ON THIS PAGE THAT CANNOT BE LEFT TO
    A CLASS NAME.

    site.css:96-98 is a bare, unqualified `.disabled { pointer-events: none; }`. It kills clicks and does
    NOT dim, grey, or change the cursor -- so an element carrying only that class LOOKS FULLY ENABLED while
    being inert, which for a delete button is the worst possible affordance: the operator clicks, nothing
    happens, and nothing tells them why.

    The markup therefore carries the Semantic component class `ui basic icon button disabled`, whose own
    `.ui.button.disabled` rule supplies the opacity site.css does not. These rules add the two things
    Semantic's opacity alone still leaves ambiguous on an icon-only button:

      1. a not-allowed cursor on the WRAPPING SPAN -- Semantic sets pointer-events: none on the button
         itself, so the cursor and the tooltip have to live on the wrapper;
      2. a struck-through, desaturated icon, so the state reads at a glance and not only by comparison with
         the enabled row above it.
*/
.db-servers-page .db-servers-locked-action {
    display: inline-block;
    cursor: not-allowed;
}

.db-servers-page .db-servers-locked-action .button.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

.db-servers-page .db-servers-delete-disabled {
    position: relative;
}

.db-servers-page .db-servers-delete-disabled::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    top: 50%;
    border-top: 2px solid #767676;
    transform: rotate(-20deg);
}

.db-servers-page .db-servers-empty td {
    color: #767676;
}

/*
    The amber Locked banner. Semantic's `ui warning message` is the component; the palette is the one the
    repo already uses for an amber warning at panel scale (authorization.css:123-146), reused here rather
    than inventing a second amber.
*/
.db-servers-modal .db-servers-locked-banner,
.db-servers-modal .db-servers-warning {
    border: 1px solid #ffc107;
    background-color: #fff3cd;
    color: #856404;
    box-shadow: none;
}

.db-servers-modal .db-servers-locked-banner.info {
    border-color: #a9d5de;
    background-color: #f8ffff;
    color: #276f86;
}

.db-servers-modal .db-servers-header-badge {
    margin-left: 0.5em;
    vertical-align: middle;
}

/* A port never needs the full field width, and a narrow box says so without a label change. */
.db-servers-modal .db-servers-port-field input {
    max-width: 10em;
}

.db-servers-modal .db-servers-feedback {
    margin-top: 1em;
}

/* Semantic UI hides message states INSIDE a form and only shows them when the FORM carries the
   matching state class:

       .ui.form .error.message, .ui.form .success.message, .ui.form .warning.message { display: none }
       .ui.form.error .error.message:not(:empty)                                     { display: block }

   Three of the four modals wrap their fields in <div class="ui form">, so every message showFeedback
   wrote into them was set correctly -- right text, right state class -- and then rendered at
   display:none. Test Connection looked completely inert on LW2 for exactly this reason: the probe ran,
   the server answered, and the answer was invisible. Save failures were swallowed the same way.

   Fixed here rather than by adding .error/.success to the .ui form container, which is Semantic's own
   route but also red-borders every field in the modal for what is a single status line.

   Specificity is the whole mechanism: this is six classes (0,6,0) against Semantic's three (0,3,0), so
   it wins without !important. Keep it that way -- dropping a class from this selector silently hands
   the match back to Semantic and the messages vanish again, with nothing failing.

   The two guards mirror showFeedback/clearFeedback exactly: clearFeedback restores the `hidden` class
   and empties the text, so :not(.hidden):not(:empty) is "a message is currently being shown". */
.db-servers-modal .db-servers-feedback.ui.message:not(.hidden):not(:empty) {
    display: block;
}